配置Butterfly的准备

1
2
# 稳定版, 想安装较新版本可以 clone dev
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

在hexo的_config.yml配置文件中, 配置主题为butterfly

1
theme: butterfly  # themes文件夹下的文件夹名称

下载 pug 以及 stylus 的渲染器（默认是没有的, 第一次都得安装）

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

重新generate并server

1
2
3
hexo clean  # 清理旧的主题生成的文件
hexo g
hexo s

Butterfly主题配置

主题配置文件, 修改themes/Butterfly/_config.yml或者themes/source/_data/_config.butterfly.yml

图片引用

图片使用OSS外部引用、借助Github实现本地引用都可

修改几个地方图片的引用, 这里以本地图片为例

1
2
3
4
5
6
7
8
9
10
# The banner image of home page  主页的top_img
index_img: /self/images/index_img.jpg
# Website Background (网站背景)
background: url(/self/images/bk.png)
# Avatar (头像)
avatar:
  img: /self/images/author_avatar.png
  effect: false
# Favicon(网站图标)
favicon: /img/favicon.png

然后就能butterfly的img目录删了

导航菜单

把注释去掉试就行了(只列举了部分)

debug模式启动hexo, 修改配置后刷新即生效(部分)

1
2
3
4
5
menu:
  Home: / || fas fa-home
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video

说明:

  • 显示: 访问路径 || icon
  • 可以用yaml的语法, 像上面的List, 能配置悬浮下拉
  • 这里配置的访问路径, 就能和上面说到的hexo new page结合起来, 让人点击后就能进入我们自定义的page/index.html

如果点击分类出现没找到页面的情况, 检查下是不是public/下没有categories文件夹或者categories文件夹下没有index.html, 那么就hexo new page categories, 重新hexo g

代码块

代码块样式

以highlight为例(hexo配置文件)

1
2
3
4
5
6
7
highlight:
  enable: true  # 开启
  line_number: true  # 显示行号
  auto_detect: false  # 自动换行
  tab_replace: '    '  # tab替换为4个空格
  wrap: true
  hljs: true  # 开启后方可进行自定义配置

接下来找一个现成的代码块css文件进行引入: https://github.com/highlightjs/highlight.js/tree/main/src/styles, 这上面的css都能使用, 样式可以参考 https://highlightjs.org/static/demo/, 选一个喜欢的颜色下载对应的css即可, 我是参考官方文档下载到 source/self/ 目录下面, 然后在主题配置文件中引入, 之后每次generate后都会在 public/self/ 下, 

1
2
3
4
5
6
7
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 代码块, 可以引入多个css
    - <link rel="stylesheet" href="/self/css/atom-one-light.css">

代码自动换行

即不显式横向滚动条

butterfly配置code_word_wrap: true后, 还得配置hexo的highlight.line_number: false或者是prismjs.line_number: false

其他小改动

  • 代码拷贝按钮
  • 在代码块左上角展示代码的语言
  • 代码展开收缩
  • 高度限制(代码过长会显示展开按钮)

配置文件

1
2
3
4
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px

首页文章节选

  1. description: 只显示description

    description在每个md文件的头上加(front-matter)

  2. both： 优先选择description，如果没有配置description，则显示自动节选的内容

  3. auto_excerpt：只显示自动节选

  4. false： 不显示文章内容

1
2
3
index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

文章版权

post_copyright.enable: true

如果文章链接被编码了, 可以把post_copyright.decode设置为true

文章底部文章链接的URL编码

本地搜索

1
2
local_search:
  enable: true

然后安装hexo-generator-search、

1
npm install hexo-generator-search --save

在hexo根目录下的_config.yml中添加配置

1
2
3
4
5
# hexo-generator-search 的配置, https://github.com/wzpan/hexo-generator-search
search:
  path: search.xml
  field: post  # 只有posts下的md会被纳入, 并在 hexo g 的时候读入文章生成 search.xml 的本地搜索数据, 放在public/目录下
  content: true  # 将文章全部数据进行纳入

clean-g, 看是否有search.xml文件在hexo根目录下

hexo s后进网站验证搜索功能

首页打字效果动态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# the subtitle on homepage (主页subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循环打字)
  loop: true
  # source调用第三方服务
  # source: false 关闭调用
  # source: 1  调用博天api的随即语录(简体)
  # source: 2  调用一言网的一句话(简体)
  # source: 3  调用一句网(简体)
  # source: 4  调用今日诗词(简体)
  # subtitle 会先显示 source , 再显示 sub 的內容
  source: false
  # 如果有英文逗号',',使用转义字符 '&#44;' 代替 
  # 如果有英文双引号 '"',使用转义字符 '&quot;' 代替
  # 开头不允许转义字符, 如需要, 请把整个句子用双引号包住
  # 如果关闭打字效果, subtitle只会显示sub的第一行文字
  sub:
    - 万丈高楼平地起&#44; 勿在浮沙筑高台.
    - 才下眉头&#44; 却上心头.
    - 千行代码&#44; bug何处藏.
    - NullPointerException

图片懒加载

1
npm install hexo-lazyload-image --save

hexo配置文件_config.yml中增加以下内容

1
2
3
lazyload:
  enable: true
  loadingImg: /self/images/loading.gif  # 动图的路径

SEO优化

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

首先把hexo配置文件中 年/月/日/文章名/的访问方式直接修改为文章名, 并且文章名不建议中文.

1
permalink: :title/

百度收录

百度普通收录

选用其中一种或者混用都可。

sitemap方式

我们可以定期将网站链接放到sitemap中, 然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap, 对其中的链接进行处理, 但收录速度慢于API推送。

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

帮助网站生成站内地图文件, 安装后, 运行hexo g后就能在public/目录下看到有sitemap.xml, 该文件维护了站内每个页面的链接等信息。

然后关联百度和自己网站sitemap.xml即可(如图所示), 最后点击提交即可。

百度提交sitemap

API提交的方式

先使用postman测试下可行性

API提交方式

接下来在hexo中进行配置

1
npm install hexo-baidu-url-submit --save

然后在hexo的配置文件中新增配置

1
2
3
4
5
baidu_url_submit:
  count: 20 # 提交最新的20个链接
  host: lsycai.top # 在百度站长平台中注册的域名
  token: XXXXX # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里

然后新增deploy

1
2
3
4
5
deploy:
- type: 'git'
  repository: 
    github: git@github.com:yincaita/yincaita.github.io.git,master  # 最后是仓库名.git, 分支名
- type: baidu_url_submitter  # 新增这一条

这样执行hexo g, 就会将链接放到我们制定path的文件中；hexo deploy的时候，这些链接就会被推送了至百度。

hexo g文章链接保存

hexo d文章链接推送百度

被百度收录后的效果图

百度收录后的效果图

该部分参考：

方便升级butterfly

参考:

为了减少升级主题后带来的不便，请使用以下方法themes/butterfly/_config.yml复制到hexo根目录下的_config.butterfly.yml。如果创建了_config.butterfly.yml, 它将会替换主题默认配置文件themes/Butterfly/_config.yml里的配置项 (不是合并而是替换掉同名配置 ), 之后就只需要通过git pull的方式平滑地升级theme-butterfly了。