当前位置：首页 > news >正文

hexo+butterfly博客功能完善和美化（二）

news 来源：原创 2025/5/15 8:37:50

hexo+butterfly博客功能完善和美化（二）

参考博客：

hexo的butterfly主题美化，2024年初版_hexo 主题-CSDN博客

【Hexo】Hexo搭建Butterfly主题并快速美化_hexo butterfly-CSDN博客

Butterfly 主题的详细配置 | 梁圣磊の博客

基于 Hexo 键入搜索功能 | 唐志远

笔者也是兜兜转转，能用的不能用的，有bug的没bug的都试了一遍，我写的这些都是我实现了的，没实现的都没写，要是有坑的话我一般也会贴上我是咋弄的

文章目录

hexo+butterfly博客功能完善和美化（二）
- 1.看板娘添加
- - 具体步骤
- 2.字数统计
- 3.统计访问人数 (UV 和 PV)
- 4.社交图标
- 5.侧边栏排版
- 6.打字效果
- 7.分享功能
- 8.搜索功能
- - 1.本地搜索
  - 2.笔者踩得坑，还是看一下吧，毕竟我下的是最新的hexo，后面的大概和我的一样
  - 3.Algolia Search
- 9.版权、文章内容复制、文章链接
- - 1.复制的内容后面加上版权信息
  - 2.文章版权信息
  - 3.生成文章唯一链接
- 10.toc
- - - 为特定的文章配置
- 11.代码块设置
- - 别人的
  - 别人的不对来看看笔者的
- 12.相关文章
- 13.打赏
- 14.文章页面
- - 文章meta显示
  - 文章锚点
  - 文章过期提醒
  - 文章分页按钮
- 15.inject
- 16.美化（二）结语

1.看板娘添加

具体步骤

前往博客根目录，打开cmd命令窗口执行npm install --save hexo-helper-live2d。

bash
npm install --save hexo-helper-live2d

输入以下命令，下载相应的模型，替换成你想要的模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者或者Hexo添加Live2D看板娘+模型预览-CSDN博客

bash
npm install --save live2d-widget-model-shizuku

修改站点配置文件_config.yml，添加如下代码：

yml
live2d:
  enable: true
  scriptFrom: local # 默认
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-shizuku  #模型选择
  display:
    position: right  #模型位置
    width: 150       #模型宽度
    height: 300      #模型高度
    hOffset: 20
    vOffset: -20
  mobile:
    show: false      #是否在手机端显示

重新编译运行，即可看到效果。

2.字数统计

安装插件：在你的博客根目录，打开 cmd 命令窗口执行 npm install hexo-wordcount --save。
开启配置：修改主题配置文件_config.butterfly.yml 中的 wordcount。

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

打开一篇博客即可看到如下效果

3.统计访问人数 (UV 和 PV)

详细信息请查看 busuanzi 官方网站。

Butterfly很贴心地集成了不蒜子计数工具，可以统计网站的访问数据（人数，次数等）。只需要修改主题配置文件即可开启。

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

busuanzi:
  site_uv: true  # 本站总访客数
  site_pv: true  # 本站总访问量 
  page_pv: true  # 本文总阅读量

4.社交图标

Butterfly 支持 font-awesome v6 图标。

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

书写格式：图标名：url || 描述性文字。

social:
  fab fa-github: https://github.com/Darling-123456 || Github || '#24292e'
  fa fa-book-open: https://blog.csdn.net/m0_74795952?type=blog || CSDN
  fas fa-envelope-open-text: mailto:2214050255@qq.com || Email || '#4a7dbe'

这个笔者看了看别人的，qq微信啥的其实也没啥用，感觉有这几个就够用了

5.侧边栏排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。

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

aside:
  enable: true
  hide: false
  button: true
  mobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容
  position: right # left or right 
  card_author: # 关于博主的一些信息
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
  card_announcement:  # 公告信息
    enable: true
    content: This is my Blog
  card_recent_post: # 最新文章
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories: # 文章分类
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags: # 文章标签
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    sort_order: # Don't modify the setting unless you know how it works
  card_archives: # 文章归档
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:  # 网站信息
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works

6.打字效果

传送门：activate-power-mode。

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

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

7.分享功能

addThis、sharejs、addtoany三个选一个开启

addThis官网：https://www.addthis.com/

# Share System (分享功能)
# --------------------------------------

# AddThis
# https://www.addthis.com/
addThis:
  enable: false
  pubid:  #访问 AddThis 官网, 找到你的 pub-id

# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true  
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容

# AddToAny
# https://www.addtoany.com/
addtoany:
  enable: false
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

sharejs效果图:

8.搜索功能

我真是个脑瘫，这么个功能弄了半天，服了，下次记得看看人家注释写的啥

1.本地搜索

1.安装搜索插件

npm install hexo-generator-search --save

2.配置_config.yml

#本地搜索开启
search:
  path: search.xml
  field: post
  content: true

3.主题配置文件 _config.butterfly.yml：

# Local search
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

效果图：

顺带一提文章必须得有title，不然的话似乎本地搜索不会将其放进搜索范围？反正我有一篇没写标题就死活搜不到

2.笔者踩得坑，还是看一下吧，毕竟我下的是最新的hexo，后面的大概和我的一样

下面给你们看看笔者的，以及为什么笔者弄了一下午没弄好一个搜索功能，这个是

search:
  # Choose: algolia_search / local_search / docsearch
  # leave it empty if you don't need search
  #use:
  #placeholder:
  use: local_search
  local_search:
    enable: true
    hits:
      per_page: 10
    labels:
      input_placeholder: Search for Posts
      hits_empty: "我们没有找到任何搜索结果: ${query}"
      hits_stats: "找到${hits}条结果（用时${time} ms）"
    # Preload the search data when the page loads.
    preload: true
    # Show top n results per article, show all results by setting to -1
    trigger: manual  # 触发方式（auto/manual）
    top_n_per_article: -1
    # Unescape html strings to the readable one.
    unescape: true
    CDN: 

  # Algolia Search
  algolia_search:
    enable: false
    hits:
      per_page: 10
    labels:
      input_placeholder: Search for Posts
      hits_empty: "我们没有找到任何搜索结果: ${query}"
      hits_stats: "找到${hits}条结果（用时${time} ms）"

  # Docsearch
  # https://docsearch.algolia.com/
  docsearch:
    appId:
    apiKey:
    indexName:
    option:

没错，你用哪个方式，你得写出来，不写出来就相当于没有启用搜索功能，所以肯定没有搜索的图标

  use: local_search

3.Algolia Search

想用Algolia Search的可以去看这篇博客，就是新手教程麻烦点，剩下的配的挺快的

基于 Hexo 键入搜索功能 | 唐志远

9.版权、文章内容复制、文章链接

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

1.复制的内容后面加上版权信息

# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true # 是否开启网站复制权限
  copyright:  # 复制的内容后面加上版权信息
    enable: true  # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时

2.文章版权信息

post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

效果图：

如果有文章（例如：转载文章）不需要显示版权，可以在文章页 Front-matter 中单独设置。

（front-matter和上传博客有关，下个博客我来讲讲这个东西，当然要是我没学会的话就要鸽掉了）

copyright: false

从 v3.0.0 开始，支持对单独文章设置版权信息，可以在文章 Front-matter 单独设置。

post_copyright:
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者

3.生成文章唯一链接

Hexo的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的URL链接就会包含中文。

permalink: :year/:month/:day/:title

前往你的Hexo博客根目录，打开cmd命令窗口执行
```
npm install hexo-abbrlink --save
```

修改站点配置文件_config.yml中permalink属性。

permalink: :year/:month/:day/:title/
#修改为
permalink: post/:abbrlink.html # post为自定义前缀
abbrlink:
  alg: crc32   #算法： crc16(default) and crc32
  rep: hex     #进制： dec(default) and hex

这个笔者没试，原来的感觉够用，就只是在URL这个部分把自己的网站贴上去了，其他的没管，我发现文章下面的连接可以跳转到自己的博客了，就好了感觉

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://darling-123456.github.io/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

就像这样变成我自己的网站，看着也舒服一点

10.toc

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

toc:
  post: true
  page: true
  number: true
  expand: false
  style_simple: false # for post
  scroll_percent: true

属性	解释
post	文章页是否显示 TOC
page	普通页面是否显示 TOC
number	是否显示章节数
expand	是否展开 TOC
style_simple	简洁模式（侧边栏只显示 TOC, 只对文章页有效）
scroll_percent	是否显示滚动进度百分比

为特定的文章配置

在你的文章md文件的头部，加入toc_number和toc，并配置true或者false即可。

主题会优先判断文章 Markdown 的Front-matter是否有配置，如有，则以Front-matter的配置为准。否则，以主题配置文件中的配置为准。

11.代码块设置

别人的

在_config.butterfly.yml配置文件中可以配置如下功能。

highlight_theme: mac  #  darker / pale night / light / ocean / mac / mac light / false 代码主题
highlight_copy: true # 复制按钮
highlight_lang: false # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行，关闭滚动条

同时将站点配置文件_config.yml的highlight设置为false。

highlight:
  enable: false
  line_number: false
  auto_detect: false

效果图：

别人的不对来看看笔者的

去_config.butterfly.yml找code_blocks:

code_blocks:
  # Code block theme: darker / pale night / light / ocean / false
  theme: ocean #主题
  macStyle: false
  # Code block height limit (unit: px)
  height_limit: false
  word_wrap: true  #代码够了一行自动换行,关闭滚动条

  # 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 # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
  fullpage: false

12.相关文章

在文章最下面出现推送

# Related Articles
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

13.打赏

给文章结尾设置打赏按钮，可以放上收款二维码

# Sponsor/reward
reward:
  enable: true
  QR_code:
     - img: /img/wechat.jpg
       link:
       text: 微信
     - img: /img/alipay.jpg
       link:
       text: 支付宝
12345678910

这个不是笔者（嘻

14.文章页面

笔者只弄了meta，剩下的没弄，有的不知道啥意思，有的感觉没用，你们想弄的话可以试试

文章meta显示

post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

文章锚点

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题 ID 进行替换。

注意：每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。

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

yml
# anchor
# when you scroll in post , the url will update according to header id.
anchor: true

文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基准。

markdown
# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

limit_day：距离更新时间多少天才显示文章过期提醒。
message_prev ：天数之前的文字。
message_next：天数之后的文字。

文章分页按钮

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

yml
# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false

参数	解释
post_pagination: false	关闭分页按钮
post_pagination: 1	下一篇显示的是旧文章
post_pagination: 2	下一篇显示的是新文章

15.inject

v2.3.0 以上支持。

如想添加额外的 js/css/meta 等等东西，可以在 Inject 里添加，head (</body> 标签之前)， bottom (</html> 标签之前)。

yml
# 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">
  bottom:
    - <script src="xxxx"></script>