博客字体修改

下载字体

在themes/butterfly/source/下创建font文件夹，将下载好的字体放入font

Hexo Butterfly已默认支持Microsoft YaHei，无需另行下载

点击下载FireCode字体

创建CSS

在themes/butterfly/source/css/下创建font.css

编辑font.css

@font-face{
    font-family: 'FiraCode';
    font-display: swap;
    src: url('../font/FiraCode.ttf') format("truetype");
}

body {
    font-family: "Microsoft YaHei", 'FiraCode';
}

font-display: swap; 可以保证我们的字体文件在没有加载完成之前文字使用默认字体

引入CSS

编辑_config.butterfly.yml，引入font.css

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

将FiraCode加入code-font-family，重新generate即可

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: FiraCode, consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

关闭侧边栏

在某个页面如果你不想要侧边栏的话，可以在对应页面的 Markdown 里加如下配置

---
title: 标签
date: 2022-08-01 12:33:35
type: "tags"
comments: false
aside: false	<-- 关闭侧边栏
top_img: false
---

旋转小风车动画

  • 在myblog\_config.butterfly.yml中修改小风车样式：
beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1' 原内容
  title-prefix-icon: '\f863'
  title-prefix-icon-color: '#F47466'
  • 在外部引入的样式文件myblog\themes\butterfly\source\css\MyStyle.css中加入css代码让其转起来

点击查看代码

首页轮播

在需要置顶轮播的文章.md 文件头部中，添加以下内容即可使用：

swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前

插件安装教程

配置参数如下：

参数 备选值/类型 释义
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 默认文章描述，若md文章中无description则采用此处描述
swiper_css url 【可选】自定义的swiper依赖项css链接
swiper_js url 【可选】自定义的swiper依赖项加js链接
custom_css url 【可选】适配主题样式补丁
custom_js url 【可选】swiper初始化方法

若不想在轮播中展示博客，那么在md文件中就无需加上swiper_index参数

首页文章分类磁贴

点击查看安装教程

配置使用方法如下：

在myblog\_config.butterfly.yml中添加代码：

categoryBar:
  enable: true
  column: odd # 显示列数,odd：3列 | even：4列
  row: 2 #显示行数，默认两行，超过行数切换为滚动显示
  descr:
    - 长篇小说连载
    - 杂谈教程
    - 玩转Win10
    - Ubuntu指南
    - 个人日记
    - 诗词歌赋
  cover:
    - url('https://assets.akilar.top/image/cover1.webp')
    - '#abcdef' # HEX格式色值需要用''包裹，不然会被识别成注释
    - rgba(45,67,89,0.7)
    - linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(200,16 , 16, 0) 100%)
    - url('https://assets.akilar.top/image/cover5.webp')
    - url('https://assets.akilar.top/image/cover6.webp')

desc参数用来描述分类的博客

文章加密

可以通过一个小插件，实现文章输入密码才能浏览。通过以下命令安装插件：

npm install hexo-blog-encrypt --save

接着在文章头部里，添加以下内容即可使用：

password: test
message: 测试加密，这里的密码是：test

algolia搜索系统引入

butterfly文档中推荐有本地搜索和Algolia两种搜索方式，但是本地搜索比较耗费资源，会拖慢网站速度，这里线上搜索的形势

将博客的内容打包成字段的形式上传Algolia网站，在搜索框搜索时直接在Algolia网站存储的信息内部搜索的方式实现

这里有两个插件hexo-algolia和hexo-algoliasearch，实测hexo-algolia只是搜索博客文章标题，而hexo-algoliasearch能检索文章内容，故选择此插件

  1. 创建 Alogolia Index

首先登陆进入 Algolia 官网，我们可以使用 GitHub 或 Google 帐号登录

然后进入 Dashboard，选择 Indices 新建一个 Index，这里创建了一个名为hexo的索引

  1. 配置API KEY

  1. 修改配置

进入博客根目录下的_config.yml中添加：

algolia:
  appId: '2Z2TCBQMCD'
  apiKey: '20bec46ff7dfe65428b5a1578a88913e'
  adminApiKey: 'c9befcc5e21d196f5a0fc4b5668dd792'
  chunkSize: 5000
  indexName: 'hexo'
  fields:
    - content:strip:truncate,0,5000
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

在主题配置文件myblog\_config.butterfly.yml中找到algolia_search:

配置文件中已经写好，不需要自己再写

具体配置如下图：

  1. 安装依赖包
npm install --save hexo-algolia

注意提前把ALGOLIA_ADMIN_API_KEY设置到系统的环境变量中，电脑重启后设置的环境变量才能更新！！！环境变量值为Admin API key

  1. 之后就是三件套，每次更新完文章后都必须使用这三个命令
hexo clean
hexo g
hexo algolia

hexo algolia将博客内容上传至algolia网站中

hexo algolia常见问题解决方案

修改侧边栏分类排序规则

修改初衷：

Hexo-Butterfly主题中，主页侧边栏中的categories默认显示顺序是按name排序，导致某些分类下虽然文章数量较少，但却排序靠前。并且默认设置下，主题中侧边categories只显示8条（如需修改可以修改主题配置文件），这在某些情况下让我的强迫症犯了主页分类不太实用，遂产生修改侧边栏categories的想法：按每个categories下文章数量降序排序。

修改源代码警告

hexo异地维护更新（将源码push到远程仓库）

参考博客

对主题样式的小修改

主页分类栏设置下拉框

效果演示：

在myblog\_config.butterfly.yml中修改：

card_categories:
  enable: true
  limit: 8 # if set 0 will show all
  expand: false # none/true/false
  sort_order: # Don't modify the setting unless you know how it works

expand设置为false即为有下拉框默认不下拉，为none则没有下拉框

主页文章显示数目以及归档页文章显示数目

  • 主页文章显示数目只需在_config.yml中调整

  • archive页面中调整需要下载插件

npm install --save hexo-generator-archive

然后在_config.yml中添加：

archive_generator:
  per_page: 5
  yearly: true
  monthly: true

每隔五篇文章就分页

文章置顶

  • 安装插件
npm install hexo-generator-index --save
  • 在font-matter区域添加sticky:1属性将文章置顶，数值越大置顶优先级越大

博客文章页面只显示文章目录(简洁模式)

修改主题配置文件:

toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false # for post
属性 解释
post 文章页是否显示 TOC
page 普通页面是否显示 TOC
number 是否显示章节数（目录自动编号如1,1.1,1.2,2,2.1,2.2…）
expand 是否展开 TOC
style_simple 简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）

这里style_simple为全局配置

toc_number为false

toc_number为true

可为特定文章配置：

在md文章头部font-matter可以配置是否显示所有的toc和是否显示toc_number

toc_number和toc配置为trueorfalse

返回顶部 显示网页阅读进度

参考博客

  • 修改文件themes\butterfly\layout\includes\rightside.pug，在最下面插入如下两行代码（注意去掉前面的+号，别傻呼呼的直接复制粘贴）
button#go-up(type="button" title=_p("rightside.back_to_top"))
  i.fas.fa-arrow-up
+ span#percent 0
+ span
  • 添加js
window.onscroll = percent;// 执行函数
// 页面百分比
function percent() {
    let a = document.documentElement.scrollTop, // 卷去高度
        b = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight, // 整个网页高度 减去 可视高度
        result = Math.round(a / b * 100), // 计算百分比
        btn = document.querySelector("#go-up"); // 获取按钮

    if (result < 95) { // 如果阅读进度小于95% 就显示百分比
        btn.childNodes[0].style.display = 'none'
        btn.childNodes[1].style.display = 'block'
        btn.childNodes[1].innerHTML = result + '<span>%</span>';
    } else { // 如果大于95%就显示回到顶部图标
        btn.childNodes[1].style.display = 'none'
        btn.childNodes[0].style.display = 'block'
    }
}
  • 添加css
/* 返回顶部 */

button#go-up #percent {
    display: none;
    font-weight: bold;
    font-size: 15px !important;
}

button#go-up span {
    font-size: 12px!important;
    margin-right: -1px;
}

/* 鼠标滑动到按钮上时显示返回顶部图标 */
button#go-up:hover i {
    display: block !important;
}

button#go-up:hover #percent {
    display: none !important;
}

#rightside>div>a,
#rightside>div>button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 18px;
}

hexo展示pdf

  1. 安装hexo-pdf
npm install --save hexo-pdf
  1. 使用：

使用本地资源，可以在markdown文件路径下创建一个同名文件夹，其内放pdf文件

image-20220911133204572

在需要的文章添加如下语句：

{% pdf mydocument.pdf %}

使用外部资源时：

{% pdf https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/pdf/小作文讲义.pdf %}

Wow动画效果

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

npm install hexo-butterfly-wowjs --save

添加配置信息：

 wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: false #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #必填项，需要添加的动画
      duration: 700ms #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 100ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 100 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 1 #选填项，动画重复的次数
    - class: card-widget
      style: animate__zoomIn
    - class: article-sort-item
      style: animate__zoomIn
    - class: tag-cloud-list is-center
      style: animate__zoomIn
    - class: flink-list
      style: animate__zoomIn
    - class: headerlink
      style: animate__zoomIn
    - class: category-list-item
      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

参数示意

参数 备选值/类型 释义
enable true/false 【必选】控制开关
priority number 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
mobile true/false 控制移动端是否启用，默认移动端禁用
animateitem.class class 【可选】添加动画类名，只支持给class添加
animateitem.style text 【可选】动画样式，具体类型参考animate.css
animateitem.duration time,单位为s或ms 【可选】动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
animateitem.delay time,单位为s或ms 【可选】动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
animateitem.offset number,单位为px 【可选】开始动画的距离（相对浏览器底部）。
animateitem.iteration number,单位为s或ms 【可选】动画重复的次数
animate_css URL 【可选】animate.css的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_js URL 【可选】wow.min.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js URL 【可选】wow_init.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

选择更高级的markdown渲染器

主要是为解决脚注的问题

具体操作

使用此教程时会出现一级标题瞄点失效的问题

解决办法

在hexo中配置latex渲染：(https://butterfly.js.org/posts/ceeb73f/#Math-數學)

修改此配置解决一级锚点失效问题