主題配置（1）

Mxne2023-01-092023-04-29

详见：butterfly Hexo博客搭建基础教程(三) | Fomalhaut🥝

语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

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

网站资料

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

导航菜单

修改主題配置文件

注意：必须是 /xxx/ ，后面以 || 分开，然后写图标名。/xxx/||

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

导航的文字可自行更改

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  # 默认子目录是展开的，如果你想要隐藏，在子目录里添加 。hide
  清单||fa fa-heartbeat hide:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码

代码高亮主题

Butterfly 支持6种代码高亮样式：

darker
pale night
light
ocean
mac
mac light

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

1	highlight_theme: mac

代码复制

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

1	highlight_copy: true

代码框展开/关闭

true 全部代码框不展开，需点击打开>
false 代码框展开，有点击按钮>
none 不显示按钮>

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

1	highlight_shrink: true #代码框不展开，需点击 '>' 打开

代码换行

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

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

1	code_word_wrap: true

代码高度限制

可配置代码高度限制，超出的部分会隐藏，并显示展开按钮。

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

1	highlight_height_limit: false # unit: px

社交图标

Butterfly支持 font-awesome v6 图标。

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

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

1
2
3

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

主页文章节选（自动节选和文章页description）

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

1
2
3

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

顶部图

如果不要显示顶部图，可直接配置 disable_top_img: true

配置中的值：

配置	解释
index_img	主页的 top_img
default_top_img	默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img	归档页面的 top_img
tag_img	tag子页面的默认 top_img
tag_per_img	tag子页面的 top_img，可配置每个 tag 的 top_img
category_img	category 子页面的默认 top_img
category_per_img	category 子页面的 top_img，可配置每个 category 的 top_img

文章置顶

你可以直接在文章的区域里添加属性来把这篇文章置顶。数值越大，置顶的优先级越大。front-mattersticky: 1

文章封面

你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。
文章的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:

当配置多张图片时，会随机选择一张作为cover，此时写法应为

default_cover:
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章页相关配置

文章meta显示

这个选项是用来显示文章的相关信息的。

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

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 显示描述性文字

文章版权

为你的博客文章展示文章版权和许可协议。

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

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

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

1	copyright: false

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。

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

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

文章过期提醒

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

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

# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # 距离更新时间多少天才显示文章过期提醒
  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. # 天数之后的文字

文章编辑按钮

在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去。

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

# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

文章标签按钮

可设置标签的逻辑，也可以关闭标签显示

修改主题配置文件_config.butterfly.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

页面锚点

开启页面锚点后，当你在进行滚动时，页面链接会根据标题ID进行替换（注意：每替换一次，会留下一个历史记录。所以如果一篇文章有很多锚点的话，网页的历史记录会很多。 )

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

# anchor
# when you scroll in post , the url will update according to header id.
anchor:
  button:
    enable: false
    always_show: false
    icon: # the unicode value of Font Awesome icon, such as '\3423'
  auto_update: false # when you scroll in post, the URL will update according to header id.

头像

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

1
2
3

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

图片描述

可开启图片 Figcaption 描述文字显示，优先显示图片的 title 属性，然后是alt 属性

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

1	photofigcaption: true

复制相关配置

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

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

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

博客年份

since 是一个来展示你站点起始时间的选项。它位于页面的最底部。

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

footer:
  owner:
    enable: true
    since: 2022

页脚自定义文本

custom_text 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。

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

1
2
3

custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!
# 对于部分人需要写 ICP 的，也可以写在 里custom_text
custom_text: <a href="icp鏈接"><img class="icp-icon" src="icp圖片"><span>備案號：xxxxxx</span></a>

右下角按钮

简繁转换

简体繁体互换，右下角会有简繁转换按钮。

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

translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 繁
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  # 网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 2
  # Time delay 延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  # 当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: '繁'
  # 当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: '簡'

夜间模式

右下角会有夜间模式按钮

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

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

阅读模式

阍读模式下会去掉除文章外的内容，避免干扰阅读读。，只会出现在文章页面，右下角会有阅读模式按钮。

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

1	readmode: true

按钮排序

# Don't modify the following settings unless you know how they work (非必要请不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重复
rightside_item_order:
  enable: false
  hide: # readmode,translate,darkmode,hideAside
  show: # toc,chat,comment

侧边栏设置

侧边排版

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

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

# aside (侧边栏)
# --------------------------------------
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile 手机页面
  position: right # left or right 侧边栏位置
  display:
    card_author: false
    card_announcement: false
    archive: false
    tag: false
    category: false
  card_author:   # 关于博主的一些信息
    enable: true
    description:
    button:
      enable: true
      icon: 
      text: Follow Me
      link: https://github.com/lmx0
  card_announcement:  # 公告信息
    enable: true
    content: <center><b>--- 小号 ---<br><a href="https://blog.lmx0.top"title="站长的另一个网站"class="anno_content"><font color="#5ea6e5">blog.lmx0.top</font></a><br>--- 备用域名 ---<br><a href="http://netlify.lmx0.top/"title="此线路部署于Netlify"class="anno_content"><font color="#5ea6e5">netlify.lmx0.top</font></a><br><a href="https://cloudflare.lmx0.top/"title="此线路部署于Cloudflare"class="anno_content"><font color="#5ea6e5">cloudflare.lmx0.top</font></a><br><a href="https://lmx0.github.io/"title="此线路部署于Github"class="anno_content"><font color="#5ea6e5">lmx0.github.io</font></a></b></center>
  card_recent_post:  # 最新文章
    enable: false
    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: false
    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: false
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works
  card_friend_link: #友链通讯录
    enable: true
  card_weibo:  #微博热搜
    enable: false

访问人数 busuanzi （UV 和 PV）

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

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

运行时间

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

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

美化/特效

自定义主题色

可以修改大部分UI颜色

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

theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"

网站背景

默认显示白色，可设置图片或者颜色

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

1	background:

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

1 2	# footer是否显示图片背景(与top_img一致) footer_bg: true

打字效果

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

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

背景特效

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

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #设置是否每次点击都更换彩带
  mobile: false # false 手机端不显示 true 手机端显示

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

1
2
3

canvas_fluttering_ribbon:
  enable: true
  mobile: true # false 手机端不显示 true 手机端显示

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

canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false # false 手机端不显示 true 手机端显示

背景特效

zIndex建议只在和上选
代表烟火效果在底部
代表烟火效果在前面-19999-19999

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

fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

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

# 点击出现爱心
click_heart:
  enable: true
  mobile: false

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

# 点击出现文字，文字可自行修改
ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px
  random: false # 文字随机显示
  mobile: false

页面美化

会改变ol、ul、h1-h5的样式

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

# 美化页面显示
beautify:
  enable: true
  field: site # site（全站）/post（文章页）
  title-prefix-icon: '\f0c1'  # 填写的是fontawesome的icon的Unicode数。
  title-prefix-icon-color: "#F47466"

自定义字体和字体大小

全局字体

可自行设置字体的，如不需要配置，请留空 font-family

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

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

Blog 标题字体

如不需要使用网络字体，只需要把 font_link 留空就行

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

# Font settings for the site title and site subtitle
# 左上角网站名字 主页居中网站名字
blog_title_font:
  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

网站副标题

可设置主页中显示的网站 副标题 或者喜欢的 座右铭。

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

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - "学如逆水行舟，不进则退。"
    - "今日事，今日做。"

主页top_img显示大小

默认的显示为全屏。 site-info的区域会居中显示

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

# 主頁設置
# 默認top_img全屏，site_info在中間
# 使用默認, 都無需填寫（建議默認）
index_site_info_top: # 主頁標題距離頂部距離  例如 300px/300em/300rem/10%
index_top_img_height:  #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比

页面加载动画 preloader

当进入网页时，因为加载速度的问题，可能会导致top_img图片出现断层显示，或者网页加载不全而出现等待时间，开启preloader后，会 显示加载动画，等页面加载完，加载动画会消失。

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

# 加載動畫 Loading Animation
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

字数统计

1）安装插件

1	npm install hexo-wordcount --save

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

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

图片大图查看模式

注意：只能开一个

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

1 2	# fancybox http://fancyapps.com/fancybox/3/ fancybox: true

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

1	medium_zoom: true

Snackbar 弹窗

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

# Snackbar 彈窗
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: top-left
  bg_light: '#49b1f5' #light mode時彈窗背景
  bg_dark: '#2d3035' #dark mode時彈窗背景

CSS 前缀

有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效。开启后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）

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

1 2	# Add the vendor prefixes to ensure compatibility css_prefix: true

Open Graph

在里增加一些meta数据，例如缩略图、标题、时间等等。当你分享网页到一些平台时，平台会读取 Open Graph 的内容，展示缩略图，标题等等信息。

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

# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta:
  enable: true
  option:
    # twitter_card:
    # twitter_image:
    # twitter_id:
    # twitter_site:
    # google_plus:
    # fb_admins:
    # fb_app_id:

Instantpage

当鼠标悬停到链接上超过 65 毫秒时，Instantpage 会对该链接进行 预加载，可以提升访问速度。

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

1
2
3

# https://instant.page/
# prefetch (预加载)
instantpage: true

Pangu

它会自动替你在网页中所有的中文字和半形的英文、数字、符号之间插入空白。

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

# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之间添加空格)
pangu:
  enable: false
  field: post # site/post

Pjax

当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址。这样 可以不用重复加载相同的资源（css/js），从而 提升网页的加载速度。

# Pjax [Beta]
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax: 
  enable: true
  exclude:
    - /music/
    - /no-pjax/

语言

网站资料

导航菜单

代码

代码高亮主题

代码复制

代码框展开/关闭

代码换行

代码高度限制

社交图标

主页文章节选（自动节选和文章页description）

顶部图

文章置顶

文章封面

文章页相关配置

文章meta显示

文章版权

文章打赏

TOC

相关文章

文章过期提醒

文章编辑按钮

文章标签按钮

页面锚点

头像

图片描述

复制相关配置

Footer 设置

博客年份

页脚自定义文本

右下角按钮

简繁转换

夜间模式

阅读模式

按钮排序

侧边栏设置

侧边排版

访问人数 busuanzi （UV 和 PV）

运行时间

最新评论

美化/特效

自定义主题色

网站背景

footer 背景

打字效果

背景特效

背景特效

页面美化

自定义字体和字体大小

全局字体

Blog 标题字体

网站副标题

主页top_img显示大小

页面加载动画 preloader

字数统计

图片大图查看模式

Snackbar 弹窗

CSS 前缀

Open Graph

Instantpage

Pangu

Pjax

Mxne