Butterfly 补充内容

Butterfly 安装文档(一) 快速开始

官网

应用主题

站点配置文件：即hexo init创建的项目下的_config.yml。

主题配置文件：即下载的主题butterfly下的_config.yml。

当你直接在GitHub的主题项目上面下载压缩包时，需要将压缩包放在hexo init创建的项目的themes目录下，并将压缩包里面的hexo-theme-butterfly解压到themes目录下并改名为butterfly。这样在你改站点配置文件的主题时，就可以生效了。

部署GitHub

在站点配置文件中，进行GitHub自动化部署，快速push到GitHub的项目上面。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/hjhcos/hjhcos.github.io.git
  # 以前是 master 现在默认是 main
  branch: main

在 Git Bash Here 里面执行配置

npm install hexo-deployer-git --save
hexo deploy

安装插件

当你使用某个插件，而没有下载时，就会引起渲染模板的错误。

升级建议

当你在站点配置文件里面搜不到相应参数时，就可以在_config.butterfly.yml中进行配置。

# 例如 音乐插件的这段代码
aplayer:
  meting: true
  asset_inject: false

Butterfly 安装文档(二) 主题页面

官网

Front-matter

文章描述description在使用后，不会在主页的文章描述中显示，而是截取文章规定字数的文字，这是在主题配置文件中默认采用auto_excerpt自动摘录，你可以在index_post_content.method将其值改为1。

下面的代码摘录于主题配置文件:

# 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: 1
  length: 500 # if you set method to 2 or 3, the length need to config

创建页面

hexo new page xxx这个命令会根据项目下的scaffolds\page.md模板生成xxx 页面，页面生成后的Front-matter是和page.md相同的，因此你可以根据前面的Page Front-matter的参数来添加，可以节省一部分时间。当然，文章生成也是同理hexo new post xxx。通过上面两个命令生成的文章或页面，都可以在source目录下找到。

Butterfly 安装文档(三) 主题配置-1

官网

导航菜单

menu:
  Home: / || fas fa-home

上面为原网站的一段，fas fa-home 会产生一个🏠小图标，这个图片可以在icon中获取，像类似fas fa-home这样的名字，可以通过点击相应图片获取(不过加载速度比较慢)，你也可以通过源代码找到相应的名字。

通过源码的方法：

1. 按下 F12

2. 点击左上角的方框右下角有个箭头的图标

3. 再点击相应的图片，源码就会跳到相应位置

4. 源码上面会有类似fa这样的标识

   

最新评论

在Butterfly网站后面会讲到如何进行评论的配置。

Butterfly 安装文档(四) 主题配置-2

官网

评论

先进行通用设置，例如官网是使用Valine这个平台。

再进行Valine平台的配置，表情你可以不用配置，它会自动生成。

在线聊天

和评论一样，我个人感觉Gitter在国内访问速度比其他较快些。

搜索系统

我在配置本地搜索引擎，电脑本地测试的界面与部署到GitHub上面，进行外网访问的界面会存在搜索引擎布局的错误，没有试Algolia。问题在官网的教程中已经解决，需要使用hexo clear清除public目录，然后再去生成页面即可解决。

网站验证

如果你是使用文件验证，可以将文件里面的验证码，复制到相应网站的验证码，例如谷歌的验证就是google_site_verification。网站验证同时有些平台具有数据统计，所有可以不用去配置。

Math数学

如果你一开始没有在主题配置文件里面将mathjax.enable设置为true，那么在文章里面设置mathjax为true是不会生效的。

当你需要再次显示数学公式，只需要三步：

1. 修改主题配置文件

   # Math (數學)
   # --------------------------------------
   # About the per_page
   # if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
   # if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
   # (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
   
   # MathJax
   mathjax:
     enable: true
     per_page: false

2. 清除原先布局

   hexo clean

3. 重新生成页面

   hexo generate