butterfly魔改教程（一）

魔改有风险，魔改需谨慎，一定要备份呀！！！

说说页面的创建

点击查看教程

前往你的Hexo的根目录
输入 hexo new page shuoshuo
你会找到 source/shuoshuo/index.md 这个文件

修改这个文件：

---
title: 説説
date: 2018-06-07 22:17:49
type: 'shuoshuo'
---

你可以隐藏一些説説，可配置的参数：

1
2
3

limit:
  type: date
  value: 2024-06-20

参数	解释
limit	【可选】配置説説显示数量
limit.type	【可选】配置説説显示数量的类型（date 或者 num）
limit.value	【可选】配置説説显示数量的值（当 type 配置为 date 时， value 的值必须为日期。当 type 配置为 num 时， value 的值必须为数字，且大于 0

为说说页面加入密码

在GitBash 输入以下npm install --save hexo-blog-encrypt

使用方法：

--- 
title: 测试- 为文章加密
date: 2020/02/16 13：50 
tags: 
    - Hexo 
    -架站
categories: [架站记录,技巧] 
password: test123 
message: 试试加密，这篇的密码是test123 
---

---

恭喜成功解密！

这里是文章内容。

---

这里建议看Fomalhaut的文章

文章页顶波浪线（安知鱼）

点击查看教程

详见：butterfly文章顶部添加波浪效果

修改 [BlogRoor]\themes/butterfly/layout/includes/header/index.pug 大概第 33 行左右

if top_img !== false
  if is_post()
    include ./post-info.pug
+   section.main-hero-waves-area.waves-area
+     svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+       defs
+         path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+       g.parallax
+         use(href='#gentle-wave', x='48', y='0')
+         use(href='#gentle-wave', x='48', y='3')
+         use(href='#gentle-wave', x='48', y='5')
+         use(href='#gentle-wave', x='48', y='7')
    #post-top-cover
      img#post-top-bg(class='nolazyload' src=bg_img)
  else if is_home()
    #site-info
      h1#site-title=site_title
      if theme.subtitle.enable

为了方便复制，提供一份需要修改的部分:

section.main-hero-waves-area.waves-area
  svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
    defs
      path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
    g.parallax
      use(href='#gentle-wave', x='48', y='0')
      use(href='#gentle-wave', x='48', y='3')
      use(href='#gentle-wave', x='48', y='5')
      use(href='#gentle-wave', x='48', y='7')

然后在_config.butterfly.yml的 [inject.head] 或者自定义 css 中引入以下 css

/* 波浪css */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}
/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}
/* 黑色模式背景 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #18171d;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

需要注意的是 css 中fill属性可以控制波浪颜色，最好使其中一个颜色与背景颜色一致，否则会显的有点奇怪，然后就是重启项目
1
hexo cl; hexo s

文章标题居中显示

点击查看教程

修改如下路径文件：blogRoot\themes\butterfly\source\css\_layout\head.styl

以下示例为将文章标题及其相关信息修改为居中显示

该代码块在第100行左右

#post-info
  position: absolute
  bottom: 30px  //文章信息距离文章块的高度.改为100px
  padding: 0 8%
  width: 100%
+ text-align: center

gitalk评论系统

点击查看教程

起初使用Valine，Waline，Twikoo方法进行评论系统的搭建，但是由于防火墙等原因都没有搭建成功，最后使用了gitalk搭建评论系统，现已经解决Twikoo因为vercel被墙导致的国内评论失败的问题。twikoo评论实现方式见 butterfly魔改教程（二）。

进如自己的github，点击头像选择头像中的setting，点击最下面的Developer Settings，选择左侧的OAuth Apps->New OAuth App

一定不要泄露自己的Client ID和Client secrets！！！

Homepage URL格式：
https://github.com/<your username>/<new repository>

创建一个repository，一定要设置为public，进入此项目，点击上方的Issues，添加一个名为gitalk的Labels

建议New 一个issue-绿色的按钮，防止出现404 not found的问题

在本地的博客根目录的_config.butterfly.yml文件修改如下内容：

comments:
  use: gitalk
  text: true
  lazyload: true
  count: true
  card_post_count: true
 
gitalk:
  client_id: 'xxxxxxx' # Client ID
  client_secret: 'xxxxxxxxxxx' # Client secrets
  repo: 'xxxxxxxxxx'  # 新建的 repository 名称
  owner: 'xxxxxxxx'   # 用户名
  admin: ['xxxxxxxxx'] #用户名
  option:

记住在_config.butterfly.yml文件不是_config.yml文件，否在会出现文章处可以评论，导航栏中的页面无法评论的问题

hexo三连

1	hexo cl; hexo g; hexo d

遇见的问题：

gitalk评论系统在过一段时间后会出现下图情况：

gitalk评论未找到相关额Issues

需要管理员（gitalk第一登录的账户，也是配置项中写的用户名）进行issues初始化，才可以进行评论。但是每次都由我的账户点进去一下会很麻烦。经过查询，可以通过脚本自动部署issues，但是其实在_config.butterfly.yml中的gitalk配置项中加入 createIssueManually: false即可实现每次提交到服务器自动部署issues

外挂标签的引入（店长）

点击查看教程

懒得搬过来了，查看Fomalhaut🥝大佬的文章：

外挂标签的引入（店长）

具体样式和写法可见：

Markdown语法与外挂标签写法汇总

网站恶搞标题

点击查看教程

新建文件[BlogRoot]\source\js\title.js，写入以下内容：

//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = '👀跑哪里去了~';
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = '🐖抓到你啦～';
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = OriginTitile;
    }, 2000);
  }
});

在主题配置文件_config.butterfly.yml引入该文件：

1
2
3

inject: 
  bottom: 
+    - <script async src="/js/title.js"></script>

重启项目

1	hexo cl; hexo s

首页轮播图的插入

点击查看教程

原文链接：轮播图

实现效果-图1

安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

1	npm install hexo-butterfly-swiper --save

添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

# 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初始化方法

参数释义

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all
timemode	date/updated	【可选】时间显示，date为显示创建日期，updated为显示更新日期,默认为date
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
default_descr	text	默认文章描述
swiper_css	url	【可选】自定义的swiper依赖项css链接
swiper_js	url	【可选】自定义的swiper依赖项加js链接
custom_css	url	【可选】适配主题样式补丁
custom_js	url	【可选】swiper初始化方法

使用方法

在文章的front_matter中添加swiper_index配置项即可。

---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

小冰分类分类磁铁

点击查看教程

原文链接：《教程：hexo-magnet 插件 1.0》

实现效果-图2

配置方法：

NPM 插件安装的部署方法：

npm i hexo-magnet --save

# 或者

cnpm i hexo-magnet --save

新增网站根目录_config 配置项 (不是主题的)：

magnet:
  enable: true
  priority: 1
  enable_page: /
  type: categories
  devide: 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: ""

这里仅仅展示 butterfly 配置，更多主题配置请前往：https://github.com/Zfour/hexo-magnet/issues
也欢迎共享自己的配置和进行修改。

配置项的含义：

enable

参数：true / false
含义：是否开启插件

enable_page

参数：/
含义：路由地址，如 / 代表主页。/me/ 代表自我介绍页等等

priority

参数：1
含义：插件的叠放顺序，数字越大，叠放约靠前。如果你安装了 hexo-githubcalendar，请将 hexo-githubcalendarnpm 插件更新至 @1.2.3 版本。然后给 hexo-githubcalendar 添加 priority 参数。

1
2
3

githubcalendar:
  enable: true
  priority: 3 # 这里加上参数

type

参数：categories / tags
含义：选择筛选分类还是标签

devide

参数：2
含义：表示分隔的列数，2 表示分为两列展示

display

参数：

1
2
3

- name: 教程 # 这里是tags或者categories的名称
  display_name: 小冰の魔改教程 # 这里是替换的名称
  icon: 📚 # 这里是展示的图标

含义：配置项，可自行设置，按照设置的顺序展示

color_setting

参数：

text_color: black # 文字默认颜色
text_hover_color: white # 文字鼠标悬浮颜色
background_color: "#f2f2f2" # 文字背景默认颜色
background_hover_color: "#b30070" # 文字背景悬浮颜色

含义：颜色配置项，可自行设置

layout

参数：type; （class&id）
参数：name;
参数：index；（数字）
含义：如果说 magnet 是一幅画，那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。
最后墙的名字即是 name;

<div name="我是墙" id="recent-posts">
  <!-- id=>type  recent-posts=>name    -->
  <div name="我是画框">
    <div name="我是纸">
      <!--这里通过js挂载magnet，也就是画画-->
    </div>
  </div>
</div>

temple_html

参数：html 模板字段
含义：包含挂载容器

<div class="recent-post-item" style="width:100%;height: auto"> <!--文章容器-->
  <div id="catalog_magnet">  <!--挂载容器-->
    ${temple_html_item}
  </div>
</div>

plus_style

参数：“ ”
含义：提供可自定义的 style，如加入黑夜模式。

hexo 三连：

执行 hexo 三连

1	hexo clean && hexo g && hexo s

即可发现已经成功部署。

黑夜模式适配代码调整：

在source/config/css/custom.css中添加一下代码：

/* 小冰分类分类磁铁黑夜模式适配 */
.magnet_item {
    margin-right: 5px !important;
}
#catalog_magnet {
    padding: 18px 18px 0 18px !important;
}
@media screen and (max-width: 600px) {
    .magnet_item {
        margin-right: 0px !important;
    }
}
[data-theme="dark"] .magnet_link_context {
    background: #1e1e1e;
    color: antiquewhite;
}
[data-theme="dark"] .magnet_link_context {
    border-radius: 6px;
}
[data-theme="dark"] .magnet_link_context:hover {
    background: var(--text-bg-hover) !important;
    color: #f2f2f2;
    border-radius: 6px;
}

个人信息卡片背景图

点击查看教程

在source/config/css/custom.css中加入以下样式：

/* 个人信息卡片背景图 */
[data-theme="light"] #aside-content > .card-widget.card-info {
  background-image: url(https://sourcebucket.s3.ladydaily.com/img/snowflower.webp);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
  background-image: url(https://sourcebucket.s3.ladydaily.com/img/aurora.webp);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-size: 100%;
}

替换代码中的url图片地址

背景图片制作方法：

首先下载PS，以及准备好一张尺寸大概在700*1000的图片，用PS打开图片，按照以下步骤给图片添加一个渐变遮罩就可以，然后将图片另存为PNG格式的，然后将图片用软件压缩一下，压缩图片具体方法见[网站性能优化的一些小技巧，最后只要不是太大就可以！

页面区块

点击查看教程

在source/config/css/custom.css中添加一下代码：

/* 关于页面区块 */
.about_page {
    background: #fafafa;
    border-radius: 20px;
    padding: 12px;
    margin: 5px;
    border: 2px solid #a0a0a0;
}
[data-theme="dark"] .about_page {
    background: #252525;
}

渐变色版权美化（店长+微调）

点击查看教程

渐变色版权美化

原文链接：博客魔改教程总结（二）

修改[BlogRoot]\themes\butterfly\layout\includes\post\post-copyright.pug,直接复制以下内容替换原文件内容。此处多次用到了三元运算符作为默认项设置，在确保有主题配置文件的默认项的情况下，也可以在相应文章的front-matter中重新定义作者，原文链接，开源许可协议等内容。

if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let license = page.license ? page.license : theme.post_copyright.license
  - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a
            h 作者
            .post-copyright-cc-info
                h=author
        .post-copyright-c
            h 发布于
            .post-copyright-cc-info
                h=date(page.date, config.date_format)
        .post-copyright-u
            h 更新于
            .post-copyright-cc-info
                h=date(page.updated, config.date_format)
        .post-copyright-c
            h 许可协议
            .post-copyright-cc-info
                a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
                  i.fab.fa-creative-commons
                a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license

修改[BlogRoot]\themes\butterfly\source\css\_layout\post.styl,直接复制以下内容，替换原文件，这个文件就是自己调节样式的。其中，184行是白天模式的背景色，这里默认是我网站的渐变色，大家可以根据自己的喜好调节；253行是夜间模式的发光光圈颜色，大家也可以自行替换成自己喜欢的颜色：

beautify()
  headStyle(fontsize)
    padding-left: unit(fontsize + 12, 'px')

    &:before
      margin-left: unit((-(fontsize + 6)), 'px')
      font-size: unit(fontsize, 'px')

    &:hover
      padding-left: unit(fontsize + 18, 'px')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out

    &:before
      position: absolute
      top: calc(50% - 7px)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon

    &:hover
      &:before
        color: $light-blue

  h1
    headStyle(20)

  h2
    headStyle(18)

  h3
    headStyle(16)

  h4
    headStyle(14)

  h5
    headStyle(12)

  h6
    headStyle(12)

  ol,
  ul
    p
      margin: 0 0 8px

  li
    &::marker
      color: $light-blue
      font-weight: 600
      font-size: 1.05em

    &:hover
      &::marker
        color: var(--pseudo-hover)

  ul > li
    list-style-type: circle

#article-container
  word-wrap: break-word
  overflow-wrap: break-word

  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

  img
    display: block
    margin: 0 auto 20px
    max-width: 100%
    transition: filter 375ms ease-in .2s

  p
    margin: 0 0 16px

  iframe
    margin: 0 0 20px

  if hexo-config('anchor')
    a.headerlink
      &:after
        @extend .fontawesomeIcon
        float: right
        color: var(--headline-presudo)
        content: '\f0c1'
        font-size: .95em
        opacity: 0
        transition: all .3s

      &:hover
        &:after
          color: var(--pseudo-hover)

    h1,
    h2,
    h3,
    h4,
    h5,
    h6
      &:hover
        a.headerlink
          &:after
            opacity: 1

  ol,
  ul
    ol,
    ul
      padding-left: 20px

    li
      margin: 4px 0

    p
      margin: 0 0 8px

  if hexo-config('beautify.enable')
    if hexo-config('beautify.field') == 'site'
      beautify()
    else if hexo-config('beautify.field') == 'post'
      &.post-content
        beautify()

  > :last-child
    margin-bottom: 0 !important

#post
  .tag_share
    .post-meta
      &__tag-list
        display: inline-block

      &__tags
        display: inline-block
        margin: 8px 8px 8px 0
        padding: 0 12px
        width: fit-content
        border: 1px solid $light-blue
        border-radius: 12px
        color: $light-blue
        font-size: .85em
        transition: all .2s ease-in-out

        &:hover
          background: $light-blue
          color: var(--white)

    .post_share
      display: inline-block
      float: right
      margin: 8px 0
      width: fit-content

      .social-share
        font-size: .85em

        .social-share-icon
          margin: 0 4px
          width: w = 1.85em
          height: w
          font-size: 1.2em
          line-height: w

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
    overflow: hidden
    border-radius: 12px!important
    background: linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);

    &:before
      background var(--heo-post-blockquote-bg)
      position absolute
      right -26px
      top -120px
      content '\f25e'
      font-size 200px
      font-family 'Font Awesome 5 Brands'
      opacity .2

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: 6px

        a
          text-decoration: none
          word-break: break-word

          &:hover
            text-decoration: none

  .post-copyright-cc-info
    color: $theme-color;

  .post-outdate-notice
    position: relative
    margin: 0 0 20px
    padding: .5em 1.2em
    border-radius: 3px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

    if hexo-config('noticeOutdate.style') == 'flat'
      padding: .5em 1em .5em 2.6em
      border-left: 5px solid $noticeOutdate-border

      &:before
        @extend .fontawesomeIcon
        position: absolute
        top: 50%
        left: .9em
        color: $noticeOutdate-border
        content: '\f071'
        transform: translateY(-50%)

  .ads-wrap
    margin: 40px 0
.post-copyright-m-info
  .post-copyright-a,
  .post-copyright-c,
  .post-copyright-u
    display inline-block
    width fit-content
    padding 2px 5px
[data-theme="dark"]
  #post
    .post-copyright
      background #07080a
      text-shadow #bfbeb8 0 0 2px
      border 1px solid rgb(19 18 18 / 35%)
      box-shadow 0 0 5px var(--theme-color)
      animation flashlight 1s linear infinite alternate
  .post-copyright-info
    color #e0e0e4

#post
  .post-copyright__title
    font-size 22px
  .post-copyright__notice
    font-size 15px
  .post-copyright
    box-shadow 2px 2px 5px

默认项的配置

作者：[BlogRoot]\_config.yml中的author配置项

# Site
title: Akilarの糖果屋
subtitle: Akilar.top
description:
keywords:
author: Akilar #默认作者
language: zh-CN
timezone: ''

许可协议：[BlogRoot]\_config.butterfly.yml中的license和license_url配置项

post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

页面覆写配置项，修改对应文章的front-matter

---
title: Copyright-beautify # 文章名称
date: 2021-03-02 13:52:46 # 文章发布日期
updated: 2021-03-02 13:52:46 # 文章更新日期
copyright_author: Nesxc # 作者覆写
copyright_url: https://www.nesxc.com/post/hexocc.html # 原文链接覆写
license: # 许可协议名称覆写
license_url: # 许可协议链接覆写
---