基础配置

上文我们通过配置主题，发现博客内容已经有了很大的变化了

本文续接上文，对主题进行配置个性化主题。

使用VsCode编辑主题(可选)

这里我们使用之前第一篇文章vscode，进行主题配置

打开vscode>文件(右上角)>打开文件夹（找到自己博客的路径）>打开即可。

语言

修改项目配置文件 _config.yml
默认语言是 en

1	language: zh-CN

主题支持三种语言：

default(en)
zh-CN (简体中文)
zh-TW (繁体中文)

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改项目目录的_config.yml

format26

导航菜单

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

menu:
  首页: / || fas fa-home    
  文章: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  列表||fas fa-list:
    - 音乐 || /music/ || fas fa-music
    - 电影 || /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

必须是 /xxx/，后面 || 分开，然后写图标名可以自定义的图标网。

代码

代码块中的所有功能只适用于 Hexo 默认的 highlight 渲染，如果使用第三方的渲染器，不一定会有效

代码高亮主题

Butterfly 支持 6 种代码高亮样式, 自定义主题请查看自定义主题

default
darker
pale night
light
ocean
mac
mac light

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

1	highlight_theme: light

代码复制

Butterfly主题支持代码复制功能。
修改主题配置文件_config.butterfly.yml：

1	highlight_copy: true

代码展开/关闭

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击 > 可展开代码

true 全部代码框不展开，需点击 > 打开
false 代码狂展开，有 > 点击按钮
none 不显示 > 按钮
修改主题配置文件_config.butterfly.yml：
1
highlight_shrink: true #代码框不展开，需点击 '>' 打开

代码换行

在默认情况下，hexo-highlight 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。
修改主题配置文件_config.butterfly.yml：

1	code_word_wrap: true

然后找到 Hexo 配置文件_config.yml，将 line_number 改成 false:

highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

社交图标

社交图标即主页上个性标签下的各种社交账号关联。

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

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

1
2
3

social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email

图标名可在这寻找: https://fontawesome.com/icons?from=io

顶部图

顶部图有 2 种配置：具体 url 和（留空，true 和 false，三个效果一样）

page页

当具体 url 时

主页的顶部图可以在主题配置文件中设置 index_img
archives 页的顶部图可以在主题配置文件中设置 archive_img
其他 page 页的顶部图可以在各自的 md 页面设置 front-matter 中的 top_img
页面如果没有设置各自的 top_img，则会显示 default_top_img 图片
设置留空， true 和 false
主页会显示纯颜色的顶部图，其他 page 的顶部图没有设置时，也会显示纯颜色的顶部图

post页

post 页的顶部图会优先显示各自front-matter中的top_img, 如果没有设置，则会缩略图（即各自 front-matter 中的 cover)，如果没有则会显示显示 default_top_img 图片

文章置顶

要为文章置顶，你需要安装插件 (hexo-generator-index-pin-top 或者 hexo-generator-indexed)

如果使用 hexo-generator-index-pin-top, 需要先卸载掉 hexo-generator-index，然后在文章的 front-matter 区域里添加 top: true 属性来把这篇文章置顶

1 2	npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

文章封面

文章的 markdown 文档上，在 Front-matter 添加cover, 并填上要显示的图片地址。

如果不配置 cover, 可以设置显示默认的 cover。
如果不想在首页显示 cover, 可以设置为 false。
修改主题配置文件_config.butterfly.yml：

cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover: # 当配置多张图片时，会随机选择
    - 图片地址1
    - 图片地址2
    - 图片地址3

文章页相关配置

文章 meta 显示

这个选项是用来显示文章的相关信息的。
修改主题配置文件_config.butterfly.yml：

post_meta:
page:
date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
categories: true # true or false 主页是否显示分类
tags: true # true or false 主页是否显示标签
label: true # true or false 显示描述性文字
post:
date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
categories: true # true or false 文章页是否显示分类
tags: true # true or false 文章页是否显示标签
label: true # true or false 显示描述性文字
在文章详情页顶部的资料，date_type: 可设置文章日期显示创建日期 (created) 或者更新日期 (updated) 或者两种都显示 (both)
categories 是否显示分类
tags 是否显示标签

文章版权

为你的博客文章展示文章版权和许可协议。
修改主题配置文件_config.butterfly.yml：

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

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

1	copyright: false

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

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

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。对于没有提供二维码的，可配置一张软件的 icon 图片，然后在 link 上添加相应的打赏链接。用户点击图片就会跳转到链接去。link 可以不写，会默认为图片的链接。
修改主题配置文件_config.butterfly.yml：

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

TOC目录

在文章页，会有一个目录，用于显示 TOC。

enable: 是否显示 TOC
number: 是否显示章节数
auto_open: 可选择进入文章页面时，是否自动打开 sidebar 显示 TOC

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

toc:
  enable: true
  number: true
  auto_open: true # auto open the sidebar

为特定的文章配置
在你的文章 md 文件的头部，Front-matter 中加入 toc_number、toc 和 auto_open，并配置 true 或者 false 即可。
主题会优先判断文章 Markdown 的 Front-matter 是否有配置，如有，则以 Front-matter 的配置为准。否则，以主题配置文件中的配置为准相关文章

相关文章推荐的原理是根据文章 tags 的比重来推荐
修改主题配置文件_config.butterfly.yml：

related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

文章锚点

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题 ID 进行替换
(注意：每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。)
修改主题配置文件_config.butterfly.yml：

1	anchor: true

文章过期提醒

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

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：

1
2
3

avatar:  
	img: /img/avatar.png  
	effect: true *# 头像会一直转圈*

复制相关配置

可配置网站是否可以复制、复制的内容是否添加版权信息

copy:
  enable: true # 是否开启网站复制权限
  copyright: # 复制的内容后面加上版权信息
    enable: true # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息

添加版权后复制内容：

作者: runyu
链接: http://localhost:4000/posts/博客搭建
来源: 个人博客
着作权归作者所有。商业转载请联络作者获得授权，非商业转载请註明出处。

since 是一个来展示你站点起始时间的选项。它位于页面的最底部。
修改主题配置文件_config.butterfly.yml：

footer:
  owner:
    enable: true
    since: 2022

页脚自定义文本

custom_text 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。
修改主题配置文件_config.butterfly.yml：

1	custom_text: Hi, welcome to my <a href="">博客</a>! # 也叫自定义文本

ICP

对于部分有备案的域名，可以在 ICP 配置显示。
修改主题配置文件_config.butterfly.yml：

ICP:
  enable: true
  url: http://www.beian.miit.gov.cn/state/outPortal/loginPortal.action
  text: 粤ICP备xxxx
  icon: /img/icp.png

右下角按钮简繁转换

简体繁体互换, 右下角会有简繁转换按钮。
修改主题配置文件_config.butterfly.yml：

translate:
enable: true

默认按钮显示文字(网站是简体，应设置为’default: 繁’)

default: 简
#网站默认语言，1: 繁体中文, 2: 简体中文
defaultEncoding: 1
#延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
translateDelay: 0
#当文字是简体时，按钮显示的文字
msgToTraditionalChinese: "繁"
#当文字是繁体时，按钮显示的文字
msgToSimplifiedChinese: "简"

夜间模式

右下角会有夜间模式按钮
修改主题配置文件_config.butterfly.yml：

darkmode:
  enable: true
  # dark mode和 light mode切换按钮
  button: true
  autoChangeMode: false

阅读模式

阅读模式下会去掉除文章外的内容，避免干扰阅读。只会出现在文章页面，右下角会有阅读模式按钮。
修改主题配置文件_config.butterfly.yml：

1	readmode: true

侧边排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。
修改主题配置文件_config.butterfly.yml：

aside:
  enable: true
  mobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容
  position: right # left or right
  card_author:
    enable: true
    description:
    button:
      icon: fab fa-github
      text: Github
      link: https://github.com/百度127/hexo-theme-butterfly
  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
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  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
  card_webinfo: true

访问人数

访问 busuanzi 的官方网站查看更多的介绍。
修改主题配置文件_config.butterfly.yml：

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

网页已运行时间
修改主题配置文件_config.butterfly.yml：

runtimeshow:
  enable: true
  publish_date: 10/1/2022 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

Gallery 相册图库

一个图库集合。
写法

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

name: 图库名字
description：图库描述
link：连接到对应相册的地址
img-url：图库封面的地址

如：

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

Gallery 相册

写法:

1
2
3

{% gallery %}
markdown 图片格式
{% endgallery %}

如：

{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

回答问题 tag-hide

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个。

success inline

inline 在文本里面添加按钮隐藏内容，只限文字(content不能包含英文逗号)

1	{% hideInline content,display,bg,color %}

content: 文本内容
display: 按钮显示的文字 (可选)
bg: 按钮的背景颜色 (可选)
color: 按钮文字的颜色 (可选)

例子：

1 2	哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %} 门里站着一个人? {% hideInline 闪 %}

绘图mermaid（饼状图、柱状图等）
使用 mermaid 标籤可以绘製 Flowchart（流程图）、Sequence diagram（时序图）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看 mermaid 文档
修改主题配置文件_config.butterfly.yml：

mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

例子：

{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

文章持续更新~

基于hexo+butterfly的个人博客搭建教程（三）基础配置篇

基础配置

使用VsCode编辑主题(可选)

语言

网站资料

导航菜单

代码

代码高亮主题

代码复制

代码展开/关闭

代码换行

社交图标

顶部图

page页

post页

文章置顶

文章封面

文章页相关配置

文章 meta 显示

文章版权

文章打赏

TOC目录

相关文章

文章锚点

文章过期提醒

头像

复制相关配置

Footer 设置项目年份

页脚自定义文本

ICP

右下角按钮简繁转换

默认按钮显示文字(网站是简体，应设置为’default: 繁’)

夜间模式

阅读模式

侧边排版

访问人数

运行时间

Gallery 相册图库

Gallery 相册

回答问题 tag-hide