魔改前请备份，要不然出错了又不知道怎么改就完啦！！！

vscode

写博客或者魔改配置建议使用vscode目前我也在用
文章中出现的_config.butterfly.yml是node_modules/hexo-butterfly文件里面的config复制过来并改名的，关于主题的修改可以直接在里面改

外挂标签引入（店长）

查看教程

参考：教程原帖

  1. 在博客目录打开git bush并运行以下命令：
    1
    2
    3
    npm install hexo-butterfly-tag-plugins-plus --save
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
  2. 在_config.yml添加以下配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # tag-plugins-plus
    # see https://akilar.top/posts/615e2dec/
    tag_plugins:
      enable: true # 开关
      priority: 5 #过滤器优先权
      issues: false #issues标签依赖注入开关
      link:
        placeholder: /img/link.png #link_card标签默认的图标图片
      CDN:
        anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
        jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
        issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
        iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
        carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
        tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

live2d（店长）

查看教程

参考：教程原帖

安装

  1. 我个人不推荐装live2d，除非特别喜欢或者有特殊需求
  2. 在博客目录打开git bush并运行以下命令：
    1
    npm install --save hexo-helper-live2d
  3. 打开_config.yml搜索Live2D，并修改成以下配置（如没有，请在最底部添加）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true #开关插件版看板娘
      scriptFrom: local # 默认
      pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      # scriptFrom: jsdelivr # jsdelivr CDN
      # scriptFrom: unpkg # unpkg CDN
      # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
      tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
      debug: false # 调试, 是否在控制台输出日志
      model:
        use: live2d-widget-model-wanko # npm-module package name
        # use: wanko # 博客根目录/live2d_models/ 下的目录名
        # use: ./wives/wanko # 相对于博客根目录的路径
        # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
      display:
        position: right #控制看板娘位置
        width: 150 #控制看板娘大小
        height: 300 #控制看板娘大小
      mobile:
        show: true # 手机中是否展示
    完成后进行hexo三连
    1
    hexo cl;hexo g;hexo s

    卸载live2d

    1
    2
    npm uninstall hexo-helper-live2d #卸载看板娘插件
    npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称
    为了保证不出错，_config.yml里的配置项给删掉

violet留言板（店长）

查看教程

详见：信笺样式留言板
image (1)

  1. 在博客目录运行命令
    1
    npm install hexo-butterfly-envelope --save
    在站点配置文件_config.yml添加以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    # envelope_comment
    # see https://akilar.top/posts/e2d3c450/
    envelope_comment:
      enable: true #控制开关
      custom_pic:      
        cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
        line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
        beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
        afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
      message: #信笺正文，多行文本，写法如下
        - 有什么想问的？
        - 有什么想说的？
        - 有什么想吐槽的？
        - 哪怕是有什么想吃的，都可以告诉我哦~
      bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
      height: #1050px，信封划出的高度
      path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
      front_matter: #【可选】comments页面的 front_matter 配置
        title: 留言板
        comments: true

一图流

查看教程

image (2)

  1. 在博客主目录source文件夹下再创建一个css文件夹，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* 页脚与头图透明 */
      #footer{
        background-color: rgba(0, 0, 0, .25) !important;
        }
      #page-header {
        background: transparent !important;
      }
      :root {
        --card-bg: rgba(255, 255, 255, 0.91);
    }
    如果不想要我这样的透明遮罩的话就用以下配置：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /* 页脚与头图透明 */
    #footer {
      background: transparent !important;
    }
    #page-header {
      background: transparent !important;
    }

    /* 白天模式遮罩透明 */
    #footer::before {
      background: transparent !important;
    }
    #page-header::before {
      background: transparent !important;
    }

    /* 夜间模式遮罩透明 */
    [data-theme="dark"] #footer::before {
      background: transparent !important;
    }
    [data-theme="dark"] #page-header::before {
      background: transparent !important;
    }
  2. 在主题配置文件_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）
    1
    2
    3
    inject:
      head:
        - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  3. 在主题配置文件_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载
    1
    2
    3
    4
    5
    # The banner image of home page
    index_img: 

    # Footer Background
    footer_img: false
  4. 如果你改完一图流之后背景图不显示的话请在主题配置文件_config.butterfly.yml文件中的background配置项设置背景图
    1
    background: url(https://mccsjs.eu.org/img/m.png/)

首页分类磁贴（小冰）

查看教程

详见：原帖

image (3)

这个插件主要实现了以下功能：

  1. 自定义 tags 或 categories 的排列和展示
  2. 自定义 tags 或 categories 的展示图标，名称
  3. 自定义排列的行数，默认 2 行
    在博客根目录下打开终端，运行以下指令：
    1
    npm i hexo-magnet --save
    一定要加--save，不然本地预览的时候可能不会显示！！！

教程：

  1. 在网站配置文件_config.yml新增以下项 (注意不是主题配置文件)，这里的分类名字必须和你文章的分类名字一一对应：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    magnet:
      enable: true
      priority: 1
      enable_page: / # 显示的页面
      type: categories #加以识别的，可以为tag
      devide: 2 #默认2列展示
      display:
        - name: 教程
          display_name: 小冰の魔改教程
          icon: 📚
        - name: 游戏评测
          display_name: 小冰の游戏评测
          icon: 🎮
        - name: 生活趣闻
          display_name: 小冰の生活趣闻
          icon: 🐱‍👓
        - name: vue
          display_name: 小冰の编程学习
          icon: 👩‍💻
        - name: 学习
          display_name: 小冰の读书笔记
          icon: 📒
        - name: 随想
          display_name: 小冰の胡思乱想
          icon: 💡
      color_setting:
        text_color: black
        text_hover_color: white
        background_color: "#f2f2f2"
        background_hover_color: "#b30070"
      layout:
        type: id
        name: recent-posts
        index: 0
      temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
      plus_style: ""
  2. 黑夜模式下看起来特别的别扭，还要做一下黑夜模式的颜色适配，在custom.css文件中添加以下代码适配黑夜模式(具体颜色可以自己调节)：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 小冰分类分类磁铁黑夜模式适配 */
    /* 一般状态 */
    [data-theme="dark"] .magnet_link_context {
      background: #1e1e1e;
      color: antiquewhite;
    }
    /* 鼠标悬浮状态 */
    [data-theme="dark"] .magnet_link_context:hover {
      background: #3ecdf1;
      color: #f2f2f2;
    }

文章置顶滚动栏(店长)

查看教程

详见：Swiper Bar
image (4)

  1. 安装插件,在博客根目录下打开终端，运行以下指令：
    1
    npm install hexo-butterfly-swiper --save
  2. 添加配置信息，在站点配置文件_config.yml下添加
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # hexo-butterfly-swiper
    # see https://akilar.top/posts/8e1264d1/
    swiper:
      enable: true # 开关
      priority: 5 #过滤器优先权
      enable_page: all # 应用页面
      timemode: date #date/updated
      layout: # 挂载容器类型
        type: id
        name: recent-posts
        index: 0
      default_descr: 再怎么看我也不知道怎么描述它的啦！
      swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
      swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
      custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
      custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法
  3. 使用方法:在文章的front_matter中添加swiper_index配置项即可。
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 文章标题
    date: 创建日期
    updated: 更新日期
    cover: 文章封面
    description: 文章描述
    swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
    ---

自定义字体(老版本，新版看下面)

查看教程

声明：非商免字体未经授权仅限个人使用，不得用于商业用途！
推荐找一些免费可商业字体使用

  1. 准备好字体文件后，在source/css/custom.css（没有就自己创建）中添加以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @font-face {
      /* 为载入的字体取名字(随意) */
      font-family: 'neko';	
      /* 字体文件地址(相对或者绝对路径都可以) */
      src: url(/font/neko.woff2);
      /* 定义加粗样式(加粗多少) */
      font-weight: normal;
      /* 定义字体样式(斜体/非斜体) */
      font-style: normal;
      /* 定义显示样式 */
      font-display: block;
    }
    支持格式：.eot(老版本IE)，.otf，.ttf，.woff，*.woff2(推荐)

  2. 在主题配置文件_config.butterfly.yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Global font settings
    # Don't modify the following settings unless you know how they work (非必要不要修改)
    font:
      global-font-size: '15px'
      code-font-size: '14px'
      font-family: neko, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
      code-font-family: Consolas, YSHST, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

    # 左上角網站名字 主頁居中網站名字
    blog_title_font:
      font_link: 
      font-family: neko, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif

  3. 重启项目就能看到了

    1
    hexo cl;hexo s

wowjs动画

查看教程

详见：Add Blog Animation – Wowjs
image (5)

  1. 安装插件,在博客根目录下打开终端，运行以下指令：
    1
    npm install hexo-butterfly-wowjs --save
  2. 在站点配置文件_config.yml添加：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    wowjs:
      enable: true #控制动画开关。true是打开，false是关闭
      priority: 10 #过滤器优先级
      mobile: false #移动端是否启用，默认移动端禁用
      animateitem:
        - class: recent-post-item #必填项，需要添加动画的元素的class
          style: animate__zoomIn #必填项，需要添加的动画
          duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
          delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
          offset: 100 #选填项，开始动画的距离（相对浏览器底部）
          iteration: 1 #选填项，动画重复的次数
        - class: card-widget
          style: animate__zoomIn
      animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
      wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
      wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
    hexo cl;hexo s看看效果

自定义字体

查看教程

  1. 在/source新建一个/font文件夹，把你的字体扔进去，在/source/css新建一个font.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    /* 引入全局字体（b.woff2） */
    @font-face {
      font-family: 'MyCustomFont';
      src: url('/font/b.woff2') format('opentype');  /* otf字体，ttf把format改成truetype */
      font-weight: normal;
      font-style: normal;
    }

    /* 引入代码字体（shaonv.ttf） */
    @font-face {
      font-family: 'MyCodeFont';
      src: url('/font/neko.woff2') format('truetype');  /* ttf字体，otf把format改成opentype */
      font-weight: normal;
      font-style: normal;
    }

    /* 设置全局字体 */
    body {
      font-family: 'MyCustomFont', "Georgia", "Arial", sans-serif;
      font-size: 16px;
    }

    /* 设置代码字体 */
    code, pre {
      font-family: 'MyCodeFont', "Fira Code", "Courier", monospace;
      font-size: 16px;
    }

  2. 引入css并设置字体
    编辑_config.butterfly.yml

    1
    2
    3
    4
    5
    6
    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
      head:
        - <link rel="stylesheet" href=" /css/font.css">

    字体部分

    1
    2
    3
    4
    5
    font:
      global-font-size: 16px
      code-font-size: 15px
      font-family: MyCustomFont, "Georgia", "Arial", sans-serif
      code-font-family: MyCodeFont, "Fira Code", "Courier", monospace
    1
    之后hexo cl;hexo s

    看看效果