Beautify the Butterfly Theme

Upgrade

hexo version
hexo i hexo@8.0.0
npm update --save

NPM LIST

$ npm list
hexo-site@0.0.0 E:\butterfly
├── hexo-abbrlink@2.2.1
├── hexo-auto-category@0.2.2
├── hexo-blog-encrypt@3.1.9
├── hexo-deployer-rsync@3.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@4.0.0
├── hexo-generator-searchdb@1.4.1
├── hexo-generator-tag@2.0.0
├── hexo-pangu@0.2.3
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-markdown-it@7.1.1
├── hexo-renderer-pug@3.0.0
├── hexo-renderer-stylus@3.0.1
├── hexo-server@3.0.0
├── hexo-wordcount@6.0.1
└── hexo@7.3.0

自定义文件结构

在 /blog/source 中创建 css, font, js 目录。

$ tree -L 1 /mnt/e/butterfly/source/
/mnt/e/butterfly/source/
├── about
├── categories
├── css
├── _data
├── gallery
├── img
├── js
├── link
├── _posts
├── shuoshuo
└── tags

在 css 目录中创建_custom 目录用于存放自定义 css 文件。

$ tree /mnt/e/butterfly/source/css/
/mnt/e/butterfly/source/css/
├── _custom
│   ├── aside_cat_list.styl
│   ├── background.styl
│   ├── font.styl
│   ├── layout.styl
│   ├── paragraph.styl
│   └── text_blink.styl
├── custom.styl
└── pace.css

创建 custom.styl 文件，添加如下内容:

@import '_custom/*.css'

编辑主题配置文件 /mnt/e/butterfly/_config.butterfly.yml，添加 inject 参数

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/blog/css/custom.css" media="defer" onload="this.media='all'">
  bottom:
    # - <script src="xxxx"></script>

设置主题背景

一图流

编辑主题配置文件_config.butterfly.yml，修改如下参数。

default_top_img: transparent
background: url(/blog/img/background.jpg)
footer_bg: transparent

创建自定义 /mnt/e/blog/source/css/_custom/background.styl 文件

/* 首页文章卡片 */
#recent-posts > .recent-post-item{
  background:rgba(255, 255, 255, 0.8);
}
/* 首页侧栏卡片 */
.card-widget{
background:rgba(255, 255, 255, 0.8)!important;
}
/* 文章页面正文背景 */
div#post{
background: rgba(255, 255, 255, 0.8);
}
/* 分页页面 */
div#page{
background: rgba(255, 255, 255, 0.8);
}
/* 归档页面 */
div#archive{
background: rgba(255, 255, 255, 0.8);
}
/* 标签页面 */
div#tag{
background: rgba(255, 255, 255, 0.8);
}
/* 分类页面 */
div#category{
background: rgba(255, 255, 255, 0.8);
}

/* 页脚透明 */
#footer{
  background: transparent!important;
}
/* 头图透明 */
#page-header{
  background: transparent!important;
}
/*白天模式伪类遮罩层透明*/
[data-theme="light"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="light"]
  #page-header::before{
      background: transparent!important;
    }
/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
  }

/*夜间模式页面背景设置为半透明*/
[data-theme="dark"]
  div.recent-post-item{
      background: rgba(0, 0, 0, 0.5)!important;
    }
[data-theme="dark"]
  #aside-content .card-widget{
      background: rgba(0, 0, 0, 0.5)!important;
    }
[data-theme="dark"]
  div#post{
    background: rgba(0, 0, 0, 0.5)!important;
    }
[data-theme="dark"]
  div#page{
    background: rgba(0, 0, 0, 0.5)!important;
    }
[data-theme="dark"]
  div#archive{
    background: rgba(0, 0, 0, 0.5)!important;
    }
[data-theme="dark"]
  div#tag{
    background: rgba(0, 0, 0, 0.5)!important;
  }
[data-theme="dark"]
  div#category{
    background: rgba(0, 0, 0, 0.5)!important;
  }

/*阅读模式*/
.read-mode #aside-content .card-widget{
      background: rgba(158, 204, 171, 0.5)!important;
    }
.read-mode div#post{
    background: rgba(158, 204, 171, 0.5)!important;
    }
/*夜间阅读模式*/
[data-theme="dark"]
  .read-mode #aside-content .card-widget{
        background: rgba(0, 0, 0, 0.5)!important;
        color: #eeeeee;
      }
[data-theme="dark"]
  .read-mode div#post{
      background: rgba(0, 0, 0, 0.5)!important;
      color: #eeeeee;
      }

渐变色

修改主题配置文件_config.butterfly.yml。

background: "#efefef"

创建自定义 /mnt/e/blog/source/css/_custom/background.styl 文件。

/* 文章页背景 */
.layout > div:first-child:not(.recent-posts) {
  /* 以下代表白色透明度为0.3 */
  background: rgba(255, 255, 255, 0.3);
}
/* 所有背景（包括首页卡片、文章页、页面页等） */
#recent-posts > .recent-post-item,
.layout > div:first-child:not(.recent-posts),
.layout_post > #page,
.layout_post > #post,
.read-mode .layout_post > #post {
  /* 以下代表白色透明度为0.3 */
  background: rgba(255, 255, 255, 0.3);
}
/* 侧栏卡片 */
.card-widget{
  background:rgba(255, 255, 255, 0.3)!important;
}

/* 日间模式页脚字体颜色 */
[data-theme="light"]{
  #footer{
    background: rgba(255, 255, 255, 0.3)!important;
    /*页脚a标签字体颜色*/
    #footer-wrap {
      color: #050505;
    }
    /*a标签颜色*/
    #footer-wrap a {
      color: #050505;
    }
    /*页脚自定义字段字体颜色*/
    .footer_custom_text {
      color: #050505;
    }
  }
}

/* 夜间模式页脚字体颜色 */
[data-theme="dark"]{
  #footer{
    background: rgba(0, 0, 0, 0.7)!important;
    /*页脚a标签字体颜色*/
    #footer-wrap {
      color: #efefef;
    }
    /*a标签颜色*/
    #footer-wrap a {
      color: #efefef;
    }
    /*页脚自定义字段字体颜色*/
    .footer_custom_text {
      color: #efefef;
    }
  }
}

#web_bg {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

中英文字符间加空格

安装插件。

npm install hexo-filter-auto-spacing --save

配置文件_config.yml 添加参数。

# hexo 中英文之间自动加空格
auto_spacing:
  enable: true

文章页 H1-H6 图标样式效果

创建自定义 /mnt/e/blog/source/css/_custom/paragraph.styl 文件。

/* 文章页H1-H6图标样式效果 */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    -webkit-animation: ccc 1.6s linear infinite ;
    animation: ccc 1.6s linear infinite ;
}
@-webkit-keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}
@keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

/* 小风车颜色代码 */
#content-inner.layout h1::before {
    color: #ef50a8 ;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
}
#content-inner.layout h2::before {
    color: #fb7061 ;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
}
#content-inner.layout h3::before {
    color: #ffbf00 ;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
}
#content-inner.layout h4::before {
    color: #a9e000 ;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
}
#content-inner.layout h5::before {
    color: #57c850 ;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0.0rem;
}
#content-inner.layout h6::before {
    color: #5ec1e0 ;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0.0rem;
}

/* 鼠标碰到小风车转速变慢及变色 */
#content-inner.layout h1:hover, #content-inner.layout h2:hover, #content-inner.layout h3:hover, #content-inner.layout h4:hover, #content-inner.layout h5:hover, #content-inner.layout h6:hover {
    color: #49b1f5 ;
}
#content-inner.layout h1:hover::before, #content-inner.layout h2:hover::before, #content-inner.layout h3:hover::before, #content-inner.layout h4:hover::before, #content-inner.layout h5:hover::before, #content-inner.layout h6:hover::before {
    color: #49b1f5 ;
    -webkit-animation: ccc 3.2s linear infinite ;
    animation: ccc 3.2s linear infinite ;
}

调整页面宽度

① 创建自定义 /mnt/e/butterfly/source/css/_custom/layout.styl 文件。

.layout {
  max-width: 1400px;
}

#page-header #post-info > * {
  max-width: 1400px;
}

② 修改源文件。

sed -i 's/1200px/1400px/' /mnt/e/butterfly/themes/butterfly/source/css/_page/common.styl
sed -i 's/1200px/1400px/' /mnt/e/butterfly/themes/butterfly/source/css/_layout/head.styl

调整首页文章框高度

修改源文件 E:\blog\themes\butterfly\source\css\_page\homepage.styl。

if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
      display: flex
      flex-direction: row
      align-items: center
-     height: 16.8em
+     height: 14.8em

调整主页文章标题颜色

创建自定义 /mnt/e/blog/source/css/_custom/homepage.styl 文件。

#recent-posts
  & > .recent-post-item
    & >.recent-post-info
      & > .article-title
        color: #e9546b

字体

编辑主题配置文件_config.butterfly.yml，修改如下参数。

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: Mulish, 'Noto Serif SC', 'Noto Serif JP', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif
  code-font-family: "Cascadia Mono"

# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link:
  font-family: Mulish, 'Noto Serif SC', 'Noto Serif JP', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif

创建自定义 /mnt/e/blog/source/css/_custom/font.styl 文件。内容太长，不贴出来了，需要的 F12 自己拿。

文章字体闪烁

创建自定义 /mnt/e/blog/source/css/_custom/text_blink.styl 文件。

.blink1000ms {
  animation: blink 1s infinite;
}

.blink500ms {
  animation: blink 0.5s infinite;
}

.blink250ms {
  animation: blink 0.25s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

樱花飘落效果

创建自定义 /mnt/e/blog/source/js/sakurairo.js 文件。内容太长，不贴出来了，需要的 F12 自己拿。

编辑主题配置文件_config.butterfly.yml，添加 bottom 参数。

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  bottom:
    - <script type="text/javascript" src="/js/sakurairo.js"></script>

robots.txt

cat >/var/www/html/robots.txt <<EOF
User-agent: *
Disallow: /assets
Disallow: /css
EOF

分类卡片增加滚动条、多级目录展开

创建自定义 /mnt/e/blog/source/css/_custom/aside_cat_list.styl 文件。

/* 设置分类卡片列表为滚动条方式 */
ul#aside-cat-list {
  overflow: auto;
  overflow-x: hidden
  height: 400px;
}

修改配置文件_config_butterfly.yml。

aside:
  card_categories:
    enable: true
    # If set 0 will show all
    limit: 0
    # Choose: none / true / false
    expand: false
    sort_order:

修改源文件 E:\blog\themes\butterfly\scripts\helpers\aside_categories.js。

'use strict'

hexo.extend.helper.register('aside_categories', function (categories, options = {}) {
  if (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length')) {
    options = categories || {}
    categories = this.site.categories
  }

  if (!categories || !categories.length) return ''

  const { config } = this
  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
  const depth = options.depth ? parseInt(options.depth, 10) : 0
  const orderby = options.orderby || 'name'
  const order = options.order || 1
  const categoryDir = this.url_for(config.category_dir)
  const limit = options.limit === 0 ? categories.length : (options.limit || categories.length)
  const isExpand = options.expand !== 'none'
  const expandClass = isExpand && options.expand === true ? 'expand' : ''
  const buttonLabel = this._p('aside.more_button')

  const prepareQuery = parent => {
    const query = parent ? { parent } : { parent: { $exists: false } }
    return categories.find(query).sort(orderby, order).filter(cat => cat.length)
  }

  const hierarchicalList = (remaining, level = 0, parent) => {
    let result = ''
    if (remaining > 0) {
      prepareQuery(parent).forEach(cat => {
        if (remaining > 0) {
          remaining -= 1
          let child = ''
          if (!depth || level + 1 < depth) {
            const childList = hierarchicalList(remaining, level + 1, cat._id)
            child = childList.result
            remaining = childList.remaining
          }

          // const parentClass = isExpand && !parent && child ? 'parent' : ''
          const parentClass = isExpand && child ? 'parent' : ''
          result += `<li class="card-category-list-item ${parentClass}">`
          result += `<a class="card-category-list-link" href="${this.url_for(cat.path)}">`
          result += `<span class="card-category-list-name">${cat.name}</span>`

          if (showCount) {
            result += `<span class="card-category-list-count">${cat.length}</span>`
          }

          // if (isExpand && !parent && child) {
          if (isExpand && child) {
            result += `<i class="fas fa-caret-left ${expandClass}"></i>`
          }

          result += '</a>'

          if (child) {
            result += `<ul class="card-category-list child">${child}</ul>`
          }

          result += '</li>'
        }
      })
    }
    return { result, remaining }
  }

  const list = hierarchicalList(limit)

  const moreButton = categories.length > limit
    ? `<a class="card-more-btn" href="${categoryDir}/" title="${buttonLabel}">
      </i><i class="fas fa-angle-right"></i></a>`
    : ''

  return `<div class="item-headline">
            </i><i class="fas fa-folder-open"></i>
            <span>${this._p('aside.card_categories')}</span>
            ${moreButton}
          </div>
          <ul class="card-category-list${isExpand && list.result ? ' expandBtn' : ''}" id="aside-cat-list">
            ${list.result}
          </ul>`
})

首页文章封面图斜切

#recent-posts
  .recent-post-item
    .post_cover.left
      -webkit-clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%)
      clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%)

    .post_cover.right
      -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%)
      clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%)