应用butterfly主题

资源网址

botterfly主题官方文档
阿里巴巴图标矢量库

配置安装

botterfly主题官方文档[https://butterfly.js.org/]

  1. 安装
    跟着官方文档git安装，但是我失败了，可能是网络不行，改用npm安装
    1
    npm install hexo-theme-butterfly
    升级方法：在根目录中运行
    1
    npm update hexo-theme-butterfly
  2. 应用主题
    修改_config.yml文件，拉到下面找，把里面的主题改为butterfly
    1
    2
    3
    4
    #原来是这样的
    theme: landscape
    #修改为这样的
    theme: butterfly
  3. 安装插件,pug以及stylus的渲染器
    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save
  4. 官方文档建议的优化
    为了减少升级主题后带来的不便，请使用以下方法：
    在 hexo 的根目录创建一个文件_config.butterfly.yml
    然后把butterfly主题的_config.yml文件内容辅助贴贴进去
    我的项目中这个文件在这里
    然后运行
    成功应用Butterfly主题,让vscode左侧文件目录不再折叠展示，在设置里把这两个勾都取消

使用说明+修改

基础配置

  1. Front-matter 是 markdown 文件最上方以 — 分隔的区域，用于指定个别档案的变数
    Page Front-matter 用于 配置頁面
    Post Front-matter 用于 配置文章頁
    详细请看官方文档 [https://butterfly.js.org/posts/dc584b87/]
  2. 添加标签页
    根目录hexo new page tags
    修改文件source/tags/index.md
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    title: 标签
    date: 2024-11-09 13:38:48
    type: 'tags'
    orderby: random
    order: 1
    ···
    type	【必须】页面类型，必须为 tags
    orderby	【可选】排序方式 ：
    random - 随机排序 / name - 标签名字排序 / length - 标签数量排序
    order	【可选】排序次序： 1（升序），-1（降序）
  3. 添加分类页
    根目录输入hexo new page categories
    修改个文件source/categories/index.md
    1
    2
    3
    title: 分类
    date: 2024-11-09 13:41:58
    type: 'categories'
  4. 创建友情链接
    的根目录hexo new page link
    修改文件source/link/index.md
    1
    2
    3
    title: 友情链接
    date: 2024-11-09 13:43:23
    type: 'link'
    根目录中的创建文件source/_datalink.yml
    然后把官方文档内容复制进去
    但是官方文档都是繁体字呢，看着不太舒服，网站[https://jf.homefont.cn/]快速繁体转化简体字
  5. 404页面
    在_config.butterfly.yml文件中找到下面代码（110行左右）
    emable从false改为true即可
    1
    2
    3
    4
    5
    # A simple 404 page
    error_404:
      enable: true
      subtitle: 'Page Not Found'
      background: /img/error-page.png
  6. _config.yml文件修改语言
    1
    2
    3
    4
    5
    6
    7
    8
    9
    language: zh-CH
    ···
    #下面的都支持
    #default(en)
    #zh-CN （简体中文）
    #zh-TW （台湾繁体中文）
    #zh-HK （香港繁体中文）
    #ja （日语）
    #ko（韩语）

主题配置

_config.butterfly.yml文件进行操作，把对应的注释设置生效，即可生效

字体配置

搜font，我改了全局的汉字和代码字体

1
2
3
4
5
6
font:
  global_font_size:
  code_font_size:
  font_family: Segoe UI
  code_font_family: consolas

图标

阿里巴巴图标矢量库
Butterfly支持 font-awesome v6 图标
书写格式 图标名：url || 描述性文字 || color

1
2
3
4
social:
  fab fa-github: https://github.com/xxxxx || Github || "#hdhfbb"
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email || "#000000"

右上角menu菜单栏

  1. 在文件中找到menu下面的代码进行修改
    官方文档目录的内容贴进去
    一定一定要注意空格缩进格式！！不然显示不出来
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Home: / || fas fa-home
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Categories: /categories/ || fas fa-folder-open
    List||fas fa-list:
      Music: /music/ || fas fa-music
      Movie: /movies/ || fas fa-video
    Link: /link/ || fas fa-link
    About: /about/ || fas fa-heart

    注意：
    必须是 ，后面分开，然后写图标名。/xxx/||
    如果不希望显示图标，图标名可不写。
    默认子目录是展开的，如果你想要隐藏，在子目录里添加hide

    1
    2
    3
    List||fas fa-list||hide:
      Music: /music/ || fas fa-music
      Movie: /movies/ || fas fa-video
  2. 在source文件夹下创建music文件夹，再里面创建index.md文件，代表该文件夹的主页，在里面写信息
    1
    2
    3
    4
    5
    ---
    title: 音乐
    date: 2024-11-13 20：10：34
    type: 'music'
    ---
  3. 其他页面也像这样完成

图片

  1. 本地图片放在哪儿
    要用本地的图片必须在source下面建图片文件夹放图片！！不能放到其他位置不然跑着跑着自动就没了！！
    我在source下建立myimg文件夹，在_config.butterfly.yml文件中引用方式：
    img: ‘./myimg/avatar2.png’
    注意要加单引号！！！
  2. 顶部背景图
    可以用图片，也可以用颜色或渐变色
    我开始用的渐变色，从网站找渐变色代码[https://css.bqrdh.com/gradient-editor]
    然后根据官方文档修改_config.butterfly.yml文件#Image Setting下的东西

注意！！！开始我的背景图片一直发暗，后来去css文件把background-color: var(–mark-bg);这行代码删掉就清晰啦！！
但是我把public的index.css和.develop_git文件的index.css里面的这一行都删了，还是一运行又检查代码这行代码依然在，怎么搞都修改不了可恶！！
最后翻到后面的官方文档问题解决了，在文件中的这里黑色罩子true改false即可

1
2
3
4
# Add a mask to the header and footer
mask:
  header: false
  footer: false

  1. 首页文章展示图
    文章封面的获取顺序 Front-matter 的 cover > 配置文件的 default_cover > false

    1
    2
    3
    4
    5
    6
    7
    8
    #我这样配置没成功，加不加单引号都失败了
    default_cover:
      - ./myimg/gril3.jpg
      - ./myimg/gril4.jpg
      - ./myimg/gril10.png
      - ./myimg/gril12.png
      - ./myimg/gril15.png

    在文章Front-matter添加cover，首页封面图片添加成功

  2. 文章背景图
    要在markdown文件上面配置img

配置高亮主题

Butterfly支持6种代码高亮样式,在官方文档可以看样子[https://butterfly.js.org/posts/4aa8abbe/]
我选的是MacOS风格

1
2
3
4
5
6
7
code_blocks:
  # Code block theme: darker / pale night / light / ocean / false
  theme: false
  macStyle: true
  # Code block height limit (unit: px)
  height_limit: false #设置每段代码高度在一定高度
  word_wrap: false

配置代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
code_blocks:
  # Code block theme: darker / pale night / light / ocean / false
  theme:  false
  macStyle: true
  # Code block height limit (unit: px)
  height_limit: 230 #设置每块代码高度在一定高度，单位px，超过部分点一下才展示
  word_wrap: false #当代码很长时会有横向滚动条，设置为false有滚动条
  #不想要滚动条设true，那么此时还要设置两个line_number: false，这样一行太多会自动换下一行

  # Toolbar
  copy: true  #代码块是否有复制
  language: true #代码语言是否展示
  # true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button
  shrink: false  #代码是否折叠（折叠的话点开才能看到代码块）
  fullpage: false

文展简介展示

找到下面这部分内容，有四种模式，这里选择第二种both
这样配置之后，如果那你的文章有写description那么会展示这部分内容，如果没有写那么会自动从你的文章中提取五百个字符作为内容简洁

1
2
3
4
5
6
7
8
9
# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
  method: 2
  # If you set method to 2 or 3, the length need to config
  length: 500

右侧个人信息展示卡片

_config.butterfly.yml文件下的social部分
这些图片在官方文档（三）-社交图标里面可以选

1
2
3
4
5
6
7
#没有找到Gitee的标签
social:
  fab fa-github: https://github.com/Nie7-Melon || Github || '#24292e'
  fa-solid fa-house: https://gitee.com/melon-nie || Gitee || '#4a7dbe'
  #fas fa-envelope: mailto:xxxxxx@gmail.com || Email

Emai1

文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
post_meta:
  # Home Page
  page:
    # Choose: created / updated / both 原created 
    date_type: both 
    # Choose: date / relative 原date
    date_format: relative 
    categories: true
    tags: true #原false 主页是否显示标签
    label: true #显示描述性文字
  post:
    # Choose: left / center
    position: left
    # Choose: created / updated / both
    date_type: both
    # Choose: date / relative
    date_format: date
    categories: true
    tags: true
    label: true

启动配置

由于每次都hexo cl hexo g hexo d或s有些麻烦，于是再package.json文件中进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//原来是
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
//修改为
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo clean && hexo generate && hexo deploy",
    "server": "hexo clean && hexo generate && hexo server"
  },

进阶美化

在页面上显示系列文章

参考来源时光的butterfly主题美化文章
开启之前文章右侧只显示最新文章开启后显示系列文章
在文章的 front-matter 上添加参数 series，并给与一个标识
如果不写 series 标识，则默认为你使用此标签外挂所在的文章的 series 标识

评论配置 Twikoo+MongoDB+Vercel

想给你的hexo+butterfly主题添加文章评论功能，又不想花钱租服务器，那么Twikoo+MongoDB+Vercel这个方法是最棒的选择。
名字长一点，看起来绕一点，但是跟着大佬分享的带做笔记还是很轻松的。
注意中间不要出错！否则后续排查改正很痛苦！
下面是我觉得写的很详细的资料，和使用资料出现的问题和改正，希望大家少走弯路，不要踩我踩过的坑

Twikoo部署参考资料

Twikoo官方文档
butterfly主题配置Twikoo文档
我的评论布置主要参考夜梦星尘的博客+B站的教学视频，前面两个官方文档我感觉在互相套娃（A让我看B，B让我看A），看了半天没有看明白到底该怎么做
看找到了夜梦星尘的博客，跟着完成了80%，又跟着B站视频修改完成最后的20%，非常感谢两位。
如果你正准备用这个方法部署，建议你先看B站木鱼的视频教程，把用户名和密码配置好，再跟着夜梦星尘的博客一步一步来，祝你成功
==推荐参考：==
B站木鱼木诶视频教程
夜梦星尘的博客

但是要注意，夜梦博客前面没有设置账号和密码的步骤，导致我后面一直连接失败，最后找到B站这位UP的部署视频，跟着他把账号密码设置后重新部署，并要把前面失败的部署删掉！！，删删改改终于成功了。
如果你也遇到了密钥错误，或者envId点进去显示失败，请看下面：

评论踩坑修改–密钥错误

我开始跟着夜梦博客做，在账号出密钥页面的样子是这样的：右下角密钥的账号是乱码
错误的密钥
此时要找到设置账号密码的地方，设置好自己的，在这里：
设置帐号密码
设置完后，让他重新生成密钥，可以看到这次的密钥账号是你刚才自己输入的，把这个密钥的密码部分改成设置的，这个就是才是正确的
正确的密钥
现在要重新修改第一次设置的密钥，把错的删掉换成新的，在这里修改：
正确的密钥
重新部署，会看到令人心动的成功提示：
正确的密钥

评论踩坑修改–评论显示undefined

虽然修改后现实部署成功了，但是这里点进envId会发现现实还是部署失败，用这个envid完成后续博客配置的结果是评论发不出来显示undefined
解决办法：删除之前没用的部署
我在修改正确的密钥后，每次新部署都会是成功，但是找到envId点进去又是失败，最后发现==在部署前要把之前配的、旧的、没用的部署彻底删掉，只留下最新的部署，然后重新部署，这次envId点进去也是部署成功！==
最后重新推送一下博客，测试评论功能，成功啦！
正确的密钥

本地搜索

配置参考：butterfly主题官方文档，和博客园CodeRain的文章
先安装插件npm install hexo-generator-search --save
成功后，每次重新部署会自动生成search.
xml文件。有的博客说要下载模板放进来，这里我没有操作，用的最简单方式成功配置：
_config.yml文件

1
2
3
4
5
6
7
#search
search:
  path: search.xml
  field: post # post:文章范围、page:页面范围、all:覆盖所有
  content: true # 内容是否包含每一篇文章的全部内容
  format: html
  #template: ./search.xml # ./search.xml 指定定制的XML模板

_config.butterfly.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
search:
  # Choose: algolia_search / local_search / docsearch
    # 如果不需要搜索功能，保持为空
  use: local_search
  placeholder:

  # Algolia Search
  algolia_search:
    # 每页搜索结果数量
    hitsPerPage: 6

 # 本地搜索
  local_search:
    enable: true
    # 页面加载时预加载搜索数据
    # 预加载，开启后，进入网页后会自动加载搜索文件。 
    #关闭时，只有点击搜索按钮后，才会加载搜索文件
    preload: false
    # 匹配的文章结果，默认显示最开始的 1 段结果
    # 每篇文章显示的顶部 n 个搜索结果，设置为 -1 显示所有结果
    top_n_per_article: 1
    # 将 html 字符串解码为可读字符串
    unescape: false
    # 搜索文件的 CDN 地址（默认使用的本地链接）
    CDN:

补充说明

有些小缺点：

  1. 刚进入页面时点击搜索没反应，需要稍等一小会儿
  2. 不适合大量文章的博客
    如果以后文章太多，本地搜索生成的文件会变大，可能会导致加载缓慢，解决这个问题，很多推荐使用algolia搜索
    目前我的文章较少，本地搜索足够用，后续文章变多时会改为使用algolia搜索