乐趣区

关于前端:Hexo-Butterfly-从零开始搭建个人博客五

jiezi

有些成果无奈在这儿体现，如果想看残缺的成果，请移步集体站点。

原文链接：基于 Hexo 从零开始搭建集体博客（五）

浏览本篇前，请先浏览前几篇文章：
基于 Hexo 从零开始搭建集体博客（一）
基于 Hexo 从零开始搭建集体博客（二）
基于 Hexo 从零开始搭建集体博客（三）
基于 Hexo 从零开始搭建集体博客（四）

前言

本站基于 Hexo 搭建，用的 🦋 hexo-theme-butterfly 主题 v3.7.1，请留神最新的🦋 hexo-theme-butterfly 版本曾经更新到 v4.2.2。

如果你是 v3.7.1 之外的版本，可能有些中央会有出入，请注意。

留神：我的博客根目录门路为【G:/hexo-blog/blog-demo】，下文所说的根目录都是此门路，将用 [BlogRoot] 代替。如果不分明根目录门路，请回到教程 基于 Hexo 从零开始搭建集体博客（二），查看你执行 hexo init xxx 这条命令时所抉择的门路，例如我抉择的门路是【G:/hexo-blog】，我的博客根目录即为【G:/hexo-blog/xxx】。

批改站点配置文件_config.yml，门路为【BlogRoot/_config.yml】。

批改主题配置文件_config.butterfly.yml，门路为【BlogRoot/_config.butterfly.yml】。

语言

批改站点配置文件_config.yml，默认语言是 en。

主题反对三种语言：

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

网站材料

批改网站各种材料，例如题目、副标题和邮箱等个人资料，请批改站点配置文件_config.yml。局部参数如下，具体参数可参考官网的配置形容。

参数 形容
title 网站题目
subtitle 形容
description 网站形容
keywords 网站的关键词。反对多个关键词。
author 您的名字
language 网站应用的语言。对于简体中文用户来说，应用不同的主题可能须要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans 和 zh-CN。
timezone 网站时区。Hexo 默认应用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC。个别的，对于中国大陆地区能够应用 Asia/Shanghai。

导航菜单

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

menu:
  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

必须是 /xxx/，前面 || 离开，而后写图标名。

如果不心愿显示图标，图标名可不写。

v3.7.1 版本中间接默认子目录是开展的，如果你想要暗藏，后续在魔改中会提到。
若主题版本大于 v4.0.0，能够间接在子目录里增加 hide。

menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list||hide:
    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
  清单 ||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  对于: /about/ || fas fa-heart

代码

代码块中的所有性能只实用于 Hexo 自带的代码渲染。
如果应用第三方的渲染器，不肯定会无效。

代码高亮主题

Butterfly反对 6 种代码高亮款式：

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

批改主题配置文件 _config.butterfly.yml。中的highlight_theme 属性。

highlight_theme: light

darker

pale night

light

ocean

mac

mac light

代码复制

批改主题配置文件 _config.butterfly.yml。中的highlight_copy 属性。

highlight_copy: true

代码框开展 / 敞开

批改主题配置文件 _config.butterfly.yml。中的highlight_shrink 属性。

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

在默认状况下，代码框主动开展，可设置是否所有代码框都敞开状态，点击 > 可开展代码。

  • true 全副代码框不开展，需点击 > 关上
  • false 代码框开展，有 > 点击按钮
  • none 不显示 > 按钮

true

false

none

代码换行

在默认状况下，Hexo 在编译的时候不会实现代码主动换行。如果你不心愿在代码块的区域里有横向滚动条的话，那么你能够思考开启这个性能。

批改主题配置文件 _config.butterfly.yml。中的code_word_wrap 属性。

code_word_wrap: true

代码高度限制

v3.7.0 及以上反对。

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

highlight_height_limit: false # unit: px

留神：

  1. 单位是px，间接增加数字，如 200
  2. 理论限度高度为highlight_height_limit + 30 px ，多减少 30px 限度，目标是防止代码高度只超出 highlight_height_limit 一点时，呈现开展按钮，开展没内容。
  3. 不适用于暗藏后的代码块（css 设置 display: none）。

社交图标

Butterfly反对 font-awesome v6 图标。

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

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

顶部图

如果不要显示顶部图，可间接配置 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

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

index_img: xxx.png

其它页面（tags/categories/ 自建页面）和文章页的 top_img，请到对应的 md 页面设置front-matter 中的top_img。

3.2.0 以下版本

3.2.0 以下版本的配置只反对

  • 留空，true 和 false – 显示默认的色彩
  • img 链接 – 显示所配置的图片
配置的值 成果
留空 显示默认的 top_img（如有），否则显示默认的色彩
（文章页 top_img 留空的话，会显示 cover 的值）
img 链接 图片的链接，显示所配置的图片
色彩(HEX 值 – #0000FF RGB 值 – rgb(0,0,255) 色彩单词 – orange 渐变色 – linear-gradient(135deg, #E2B0FF 10%, #9F44D3 100%)） 对应的色彩
transparent 通明
false 不显示 top_img

3.2.0 以上版本

tag_per_img和 category_per_img 是 v3.2.0 新增的内容，可对 tag 和 category 进行独自的配置。

并不举荐为每个 tag 和每个 category 都配置不同的顶部图，因为配置太多会拖慢生成速度。

tag_per_img：aplayer: https://xxxxxx.png
  android: ddddddd.png

category_per_img：随想: hdhdh.png
  举荐: ddjdjdjd.png

文章置顶

【举荐】hexo-generator-index从 v2.0.0 开始，曾经反对文章置顶性能。你能够间接在文章的 front-matter 区域里增加 sticky: 1 属性来把这篇文章置顶。数值越大，置顶的优先级越大。

文章封面

文章的 markdown 文档上，在Front-matte r 增加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://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章页相干配置

文章 meta 显示

post_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/

因为 Hexo 4.1 开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置 decode: true 来显示中文网址。

如果有文章（例如：转载文章）不须要显示版权，能够在文章页 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 所有，如有转载，请註明来自原作者

文章打赏

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

reward:
  enable: false
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: wechat
    - img: /img/alipay.jpg
      link:
      text: alipay

TOC

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

toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false # for post
属性 解释
post 文章页是否显示 TOC
page 一般页面是否显示 TOC
number 是否显示章节数
expand 是否开展 TOC
style_simple 简洁模式（侧边栏只显示 TOC, 只对文章页无效）

相干文章举荐

相干文章举荐的原理是依据文章 tags 的比重来举荐。

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

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

文章锚点

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

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

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

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

文章过期揭示

可设置是否显示文章过期揭示，以更新工夫为基准。

# 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。

# 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 下一篇显示的是新文章

头像

avatar:
  img: https://bu.dusays.com/2022/05/02/626f92e193879.jpg
  effect: true # 头像会始终转圈

图片形容

可开启图片 Figcaption 形容文字显示，优先显示图片的 title 属性，而后是 alt 属性。

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

photofigcaption: false

文章内容复制相干配置

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

增加版权后的成果：

<div class="gallery-group-main">
{% galleryGroup '壁纸' '珍藏的一些壁纸' '/Gallery/wallpaper' https://bu.dusays.com/2021/03/06/38a2c5cd8b44e.jpg %}
{% 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>

作者: Ethan.Tzy
链接: https://tzy1997.com/articles/hexo541u/
起源: 唐志远の博客
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

Footer 设置

博客年份

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

footer:
  owner:
    enable: true
    since: 2018   # 站点起始工夫

页脚自定义文本

custom_text是一个给你用来在页脚自定义文本的选项。通常你能够在这里写申明文本等。反对 HTML。

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

自己的页脚如下，若你在配置时没有呈现 github 徽章，请参考教程增加 Github 徽标。

custom_text: I wish you to become your own sun, no need to rely on who's light.<p><a target="_blank"href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo"title=" 博客框架为 Hexo"></a>&nbsp;<a target="_blank"href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender"title=" 主题采纳 butterfly"></a>&nbsp;<a target="_blank"href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr"title=" 本站应用 JsDelivr 为动态资源提供 CDN 减速 "></a> &nbsp;<a target="_blank"href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel"title=" 本站采纳双线部署，默认线路托管于 Vercel"></a>&nbsp;<a target="_blank"href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio"title=" 本站采纳双线部署，联通线路托管于 Coding"></a>&nbsp;<a target="_blank"href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub"title=" 本站我的项目由 Gtihub 托管 "></a>&nbsp;<a target="_blank"href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris"title=" 本站采纳常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定进行许可 "></a></p>

对于局部人须要写 ICP 的，也能够写在 custom_text 里。

custom_text: <a href="icp 链接"><img class="icp-icon" src="icp 图片"><span> 备案号：xxxxxx</span></a>

右下角按钮

简繁转换

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

translate:
  enable: false
  # 默认按钮显示文字(网站是简体，应设置为 '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: false
  # dark 和 light 两种模式切换按钮
  button: true
  # Switch dark/light mode automatically (自動切換 dark mode 和 light mode)
  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
  # autoChangeMode: false
  autoChangeMode: false

v2.0.0 开始减少一个选项，可开启主动切换 light mode 和 dark mode。
autoChangeMode: 1 追随零碎而变动，不反对的浏览器 / 零碎将依照工夫早晨 6 点到早上 6 点之间切换为 dark mode。
autoChangeMode: 2 只依照工夫 早晨 6 点到早上 6 点之间切换为 dark mode, 其余工夫为 light mode。
autoChangeMode: false 勾销主动切换。

浏览模式

浏览模式下会去掉除文章外的内容，防止烦扰浏览。只会呈现在文章页面，右下角会有浏览模式按钮。

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

readmode: true

侧边栏设置

侧边排版

可自行决定哪个我的项目须要显示，可决定地位，也能够设置不显示侧边栏。

批改主题配置文件_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

拜访人数(UV 和 PV)

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

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

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

运行工夫

网页已运行工夫。

runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00  
  ## 网页开明工夫
  #格局: 月 / 日 / 年 工夫
  #也能够写成 年 / 月 / 日 工夫

最新评论

v3.1.0 以上反对。如果未配置任何评论，前先不要开启该性能。
最新评论只会在刷新时才会去读取，并不会实时变动。
因为 API 有 拜访次数限度，为了防止调用太多，主题默认存取期限为 10 分鐘。也就是説，调用后材料会存在 localStorage 里，10 分鐘内刷新网站只会去 localStorage 读取材料。10 分鐘期限一过，刷新页面时才会去调取 API 读取新的数据。（3.6.0 新增了 storage 配置，可自行配置缓存工夫）。

# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6  # 显示的数量
  storage: 10 # 设置缓存工夫，单位 分钟 
  avatar: true # 是否显示头像

网站背景

# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 色彩（HEX 值 /RGB 值 / 色彩单词 / 渐变色)
# 留空 不显示背景
background:

如果你的网站根目录不是 ’/’，应用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog，援用一张 img/xx.png 图片，则设置 background 为 `url(/blog/img/xx.png)

打字成果

传送门：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

footer 背景

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

# footer 是否显示图片背景(与 top_img 统一)
footer_bg: true
配置的值 成果
留空 /false 显示默认的色彩
img 链接 图片的链接，显示所配置的图片
色彩：
HEX 值 – #0000FF
RGB 值 – rgb(0,0,255)
色彩单词 – orange
渐变色 – linear-gradient(135deg, #E2B0FF 10%, #9F44D3 100%)		 对应的色彩
true 显示跟 top_img 一样

背景特效

静止彩带

可设置每次刷新更换彩带，或者每次点击更换彩带。具体配置可查看 canvas_ribbon。
批改主题配置文件_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。

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

tab canvas_nest

批改主题配置文件_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倡议只在 -1 和9999上选。
-1 代表烟火成果在底部。
9999 代表烟火成果在后面。

批改主题配置文件_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

自定义字体和字体大小

全局字体

批改主题配置文件 _config.butterfly.yml 中的 font-family 属性即可，如不须要配置，请留空。

# 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 题目字体

批改主题配置文件 _config.butterfly.yml 中的 blog_title_font 属性即可，如不须要配置，请留空。
如不须要应用网络字体，只须要把 font_link 留空就行。

# 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 中的subtitle。

# Site
subtitle:
  enable: false
  # 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 的第一行文字
    - 窗外有月色和雨 &#44; 而我在想你。- There is moonlight and rain outside the window, and I miss you.

预览成果见本站主页：唐志远の博客。

页面加载动画 preloader

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

# 加载动画 Loading Animation
preloader: true

字数统计

  1. 装置插件：在你的博客根目录，关上 cmd 命令窗口执行npm install hexo-wordcount --save。
  2. 开启配置：批改主题配置文件 _config.butterfly.yml 中的wordcount。
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

图片大图查看模式

只能开启一个。
如果你并不想为某张图片增加大图查看模式，你能够应用 html 格局援用图片，并为图片增加 no-lightbox class 名，例如：<img src="xxxx.jpg" class="no-lightbox">。

fancybox

批改主题配置文件 _config.butterfly.yml 中fancybox属性。

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

medium_zoom

批改主题配置文件 _config.butterfly.yml 中medium_zoom属性。

medium_zoom: true

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
  # 对于一些第三方插件，有些并不反对 pjax。# 你能够把网页退出到 exclude 里，这个网页会被 pjax 排除在外。# 点击该网页会从新加载网站。exclude: 
    - /music/
    - /no-pjax/

应用 pjax 后，一些本人 DIY 的 js 可能会有效，跳转页面时须要从新调用，请参考 Pjax 文档。

Inject

v2.3.0 以上反对。

如想增加额定的 js/css/meta 等等货色，能够在 Inject 里增加，head(</body>标签之前)，bottom(</html>标签之前)。

# 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>

CDN

CDN

搜寻零碎

基于 Hexo 键入搜寻性能

分享

Hexo 键入分享性能

在线聊天

基于 Hexo 键入在线聊天性能

退出移动版