Butterfly美化之路（一）

一、前言

我的博客使用的是 Hexo + GitHub 搭建在线博客，主题用的是 Butterfly，教程及官方文档均可在网上找到，我只是在这里记录一些自己的感受，以防以后玩崩了找不到回家的路

**本文中，如果没有特殊说明，修改的文件一律为 主题配置文件 **

参考文档:

余白的分享: https://www.vipyubai.top/post/a42befc0.html

三水的分享: https://sanshui.vip/2022/08/10/indexday1/

Butterfly安装文档: https://butterfly.js.org/posts/21cfbf15/

Fomalhaut的分享: https://www.fomal.cc/

二、配置主页信息

在博客配置文件中配置主页信息

1
2
3
4
5
6
7
8
# Site
title: 月华.の奇妙冒险
subtitle: '欢迎来到我的博客'
description: '我连宇宙的尽头在哪都不知道，怎么知道这个'
keywords: 博客
author: 月华.
language: zh-CN
timezone: ''

主页信息

主页

三、先来创建一些页面

输入创建页面指令，路径名是以后在主题配置文件中怎么进入这个页面就用什么名字

1
hexo new page 路径名

比如：tags, link, categories…..

创建之后会在source文件夹下生成一个与路径名同名的文件夹, 每个文件夹下会自带一个index.md文件

创建页面

四、导航栏菜单以及 icon

1
2
3
4
5
6
7
8
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  留言板: /comments/ ||fas fa-envelope-open
  链接: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

导航栏设置

效果

五、Front-matter 页面设置

Front-matter部分是在Markdown文档上方的配置信息部分，格式如下

1
2
3
4
5
6
//要用上下三个-包起来
---
title: 
date: 
type: 
---

写了示例的是用过的，没写就是还没用过

5.1 Page Front-matter 主页面 设置

用于配置每个路径下的 index.md 文件

属性 作用 示例
title 【必】页面标题 title: 文章分类
date 【必】页面创建日期 date: 2022-12-01
type 【必】tags，category，link页面需配置。需使用双引号 type: “categories”
updated 【选】页面更新日期
description 【选】页面描述
keywords 【选】页面关键字
comments 【选】显示页面评论模块(默认 true)
top_img 【选】页面顶部图片
mathjax 【选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside 【选】显示侧边栏 (默认 true)
aplayer 【选】在需要的页面加载aplayer的js和css,请参考官方文档下面的音乐配置
highlight_shrink 【选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

5.2 Post Front-matter 文章页面 设置

配置自己写md文档

属性 作用 示例
title 【必】文章标题 title: 搭建自己的图床
date 【必】文章创建日期 date: 2022-12-01
updated 【选】文章更新日期
tags 【选】文章标签 标签写法
categories 【选】文章分类 categories: 学习总结
keywords 【选】文章关键字
description 【选】文章描述 description: 我自己的搭建图床的笔记整理, 希望对你有帮助
top_img 【选】文章顶部图片 文章顶部图写法
cover 【选】文章缩略图
(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)		 文章缩略图写法
comments 【选】显示文章评论模块(默认 true)
toc 【选】显示文章TOC(默认为设置中toc的enable配置)
toc_number 【选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple 【选】显示 toc 简洁模式
copyright 【选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author 【选】文章版权模块的文章作者
copyright_author_href 【选】文章版权模块的文章作者链接
copyright_url 【选】文章版权模块的文章连结链接
copyright_info 【选】文章版权模块的版权声明文字
mathjax 【选】显示mathjax
(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【选】显示katex
(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer 【选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【选】配置代码框是否展开(true/false)
(默认为设置中highlight_shrink的配置)
aside 【选】显示侧边栏 (默认 true)

六、友情链接

1
2
# 创建友情链接界面
hexo new page link

6.1 本地设置

现在source文件夹下创建_data文件夹, 在_data文件夹下创建link.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 内容

- class_name: 友情链接
  class_desc: 把你的友链给我，我会把它放到我的友链里
  link_list:
    - name: yuehua-HNU
      link: https://github.com/yuehua-HNU
      avatar: /img/config_img/avatar.jpg
      descr: 欢迎访问我的GitHub

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

6.2 写法

友链写法

友链

其他链接

其他链接效果

七、404页面

主题配置文件中，把 enable 改为 true 启用 404 页面, 404 图片可以自己改

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

404页面

八、代码

1
2
3
4
5
6
7
8
9
10
11
12
# 代码高亮主题
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
# 代码是否可复制
highlight_copy: true # copy button
# 是否显示代码语言
highlight_lang: true # show the code language
# 代码框是否展开
highlight_shrink: false # true: 代码框不展开 / false: 代码框展开 | none: 不显示代码框展开按钮
# 代码高度限制
highlight_height_limit: 200 # unit: px
# 代码过长是否自动换行
code_word_wrap: false

代码相关设置

九、社交图标设置

https://fontawesome.com/icons?from=io

1
2
3
4
5
6
7
# social settings (社交圖標設置)
# formal:
#   icon: link || the description
social:
  fab fa-github: https://github.com/yuehua-HNU || Github
  fa-brands fa-bilibili: https://space.bilibili.com/475208497?spm_id_from=333.1007.0.0 || Bilibili
  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email

社交图标设置

十、主页文章描述

1
2
3
4
5
6
7
8
# Display the article introduction on homepage
# 1: description 只显示description
# 2: both 优先选择description，如果没有配置description，则显示自动节选的内容
# 3: auto_excerpt 只显示自动节选
# false: 不显示文章内容
index_post_content:
  method: 1
  length: 500 # if you set method to 2 or 3, the length need to config

主页文章描述设置

十一、设置主页背景

在主题配置文件中找到background

主页背景设置

1
2
3
4
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(/img/宵宫绝美.webp)

背景

十二、开启footer背景

在主题配置文件中找到 footer_bg, 将属性改为 true

1
2
# Footer Background
footer_bg: true

footer设置

footer效果

footer 背景与 top_img 相同

十三、文章页相关显示

13.1 文章信息显示

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page: # Home Page
    date_type: created # 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: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

文章页主页 & 主页文章信息设置

文章页信息

文章页信息

首页文章信息

13.2 文章页版权信息显示

1
2
3
4
5
6
post_copyright:
  enable: true
  decode: true #true, 显示中文网址, 防止被解码
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

版权信息设置

13.3 打赏设置

1
2
3
4
5
6
7
8
9
reward:
  enable: true
  QR_code:
    - img: /img/微信收款码.jpg
      link:
      text: wechat
    - img: /img/支付宝收款码.jpg
      link:
      text: alipay

打赏设置

打赏

13.4 目录设置

1
2
3
4
5
6
toc:
  post: true # 文章页是否显示目录
  page: false # 普通页面是否显示目录
  number: false # 是否显示章节数
  expand: true # 是否展开目录
  style_simple: false # 简洁模式 (侧边栏只显示目录, 只对文章页有效)

目录设置

目录

十四、相关推荐

根据文章标签的比重来推荐

1
2
3
4
related_post:
  enable: true
  limit: 6 # 推荐文章数目
  date_type: updated # or created or updated 文章日期顯示創建日或者更新日

相关推荐

相关推荐

十五、文章分页

1
2
3
4
5
6
# post_pagination (分頁)
# value: 1 || 2 || false
# 1: 下一篇显示旧文章
# 2: 下一篇显示新文章
# false: disable pagination
post_pagination: 2

文章分页

下一篇显示新文章

十六、复制相关设置

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true
  copyright:
    enable: false
    limit_count: 50

复制设置

十七、页脚文本 & 起始年份

1
2
3
4
5
6
footer:
  owner: 月华.
  enable: true
  since: 2022
  custom_text: 这 就 是 我 的 <a href="https://github.com/yuehua-HNU/">逃 跑 路 线</a> ！
  copyright: true # Copyright of theme and framework

页脚文本 & 起始年份设置

页脚文本 & 起始年份

十八、右下角按钮

18.1 简繁转换

1
2
3
4
5
6
7
8
9
10
11
12
13
# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 繁
  # 网站默认语言 (1 - 繁体中文/ 2 - 简体中文）
  defaultEncoding: 2
  # 延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  # 当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: '繁'
  # 当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: '簡'

简繁转换

18.2 夜间模式

1
2
3
4
5
6
7
8
9
10
# dark mode
darkmode:
  enable: true
  # Toggle Button to switch dark/light mode
  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

夜间模式

18.3 阅读模式

1
2
# Read Mode (閲讀模式)
readmode: true

阅读模式

18.4 按钮排序

1
2
3
4
5
6
7
# 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: true
  hide: readmode,translate,darkmode,hideAside
  show: # toc,chat,comment

按钮排序

右下角按钮

十九 、侧边栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# aside (側邊欄)
# --------------------------------------

aside:
  enable: true
  hide: false # 是否隐藏
  button: true
  mobile: true # display on mobile
  position: right # left or right， 展示位置
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description: 我连宇宙的尽头在哪都不知道，怎么知道这个
    button:
      enable: true
      icon: fa-sharp fa-solid fa-plane
      text: 快来一起玩
      link: https://github.com/yuehua-HNU
  card_announcement:
    enable: true
    content: 图床那篇因为图片隐私问题还在修改, 无限期后应该就改完了, 哎嘿(doge)
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: updated # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 0 # if set 0 will show all
    expand: true # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 20 # if set 0 will show all
    color: true
    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: 4 # 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

# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: false
  publish_date: 12/1/2022 00:00:00
##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

# Aside widget - Newest Comments (最新评论)
newest_comments:
  enable: false
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true

二十、分享

1
2
3
sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq

分享设置

分享

二十一、搜索系统

终端输入指令

1
npm install hexo-generator-search --save

在博客配置文件中添加以下代码

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

添加

在主题配置文件中开启本地搜索

1
2
3
4
5
# Local search
local_search:
  enable: true
  preload: false
  CDN:

开启

预览

二十二、美化与特效

22.1 自定义主题颜色

将主题配置文件中的theme_color解注, 颜色值必须被双引号包裹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
theme_color:
  enable: true
  main: "#595219" # 主题
  paginator: "#4819b4" # 页码
  button_hover: "#d6b10d" # 鼠标放置按钮
  text_selection: "#00c4b6" # 文字选择
  link_color: "#99a9bf"  # 链接
  meta_color: "#858585" # 标签
  hr_color: "#212121" # 滚动块
  code_foreground: "#F47466" # 代码前景
  code_background: "rgba(27, 31, 35, .05)" # 代码背景
  toc_color: "#00c4b6" # 目录
  blockquote_padding_color: "#49b1f5" # 引用快
  blockquote_background_color: "#49b1f5" # 引用块背景
  scrollbar_color: "#ff8800" # 滚动条
  meta_theme_color_light: "#0d0d0d" # 主题块颜色
  meta_theme_color_dark: "#0d0d0d"

主题颜色设置

22.2 打字特效

enable改为true

1
2
3
4
5
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

打字特效设置

22.3 鼠标点击特效

三选一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
  enable: false
  mobile: false

# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
  enable: false
  text:

鼠标点击特效设置

1
2
3
4
5
6
7
8
9
10
# 点击出现文字，文字可自行修改
ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px
  random: false # 文字随机显示
  mobile: false

鼠标点击出现文字

22.4 自定义字体和字体大小

可更改全局或Blog标题字体以及大小

1
2
3
4
5
6
7
8
9
10
11
12
13
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: "思源宋体 SemiBold"
  code-font-family:

# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link:
  font-family:

自定义字体大小设置

22.5 页面美化

1
2
3
4
5
6
# Beautify (美化頁面顯示)
beautify:
  enable: true
  field: post # site/post , site -- 全站 ; post -- 文章页
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'

页面美化设置

22.6 字体和字体大小

  • 全局字体
1
2
3
4
5
6
7
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: "思源宋体 SemiBold"
  code-font-family:

字体和字体大小

  • 博客导航栏标题字体
1
2
3
4
5
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link:
  font-family:

博客导航栏标题字体

22.7 网站副标题

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
  # Effect Speed Options (打字效果速度參數)
  startDelay: 300 # time before typing starts in milliseconds
  typeSpeed: 150 # type speed in milliseconds
  backSpeed: 50 # backspacing speed in milliseconds
  # 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:
    - “最是人间留不住，朱颜辞镜花辞树”
    - “人生而自由，却无往不在枷锁中”
    - “我只知道一件事，就是我什么都不知道。”
    - “未经审视的人生不值得过。”

网站副标题

22.8 页面加载动画

事例: hyperspace(星际穿越) 来源: https://akilar.top/posts/3d221bf2/

随便在哪里创建一个hyperspace.pug文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#loading-box
  .space-scene
    .space-wrap
      .space-wall.space-wall-right
      .space-wall.space-wall-left
      .space-wall.space-wall-top
      .space-wall.space-wall-bottom
      .space-wall.space-wall-back
    .space-wrap
      .space-wall.space-wall-right
      .space-wall.space-wall-left
      .space-wall.space-wall-top
      .space-wall.space-wall-bottom
      .space-wall.space-wall-back

和一个hyperspace.styl文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  background rgba(236,236,236,0.95)
  text-align center
  &:before
    content ''
    display inline-block
    height 100%
    vertical-align middle
  &.loaded
    z-index -1000
    .space-scene
      display none
  .space-wall
    background url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/PIA09959-1280x800_copy.jpg)
    background-size cover
    width 100%
    height 100%
    position absolute
    opacity 0
    animation space-fade 12s infinite linear
    animation-delay 0

  .space-scene
    display inline-block
    vertical-align middle
    perspective 5px
    perspective-origin 50% 50%
    position relative

  .space-wrap
    position absolute
    width 1000px
    height 1000px
    left -500px
    top -500px
    transform-style preserve-3d
    animation space-move 12s infinite linear
    animation-fill-mode forwards
    &:nth-child(2)
      animation space-move 12s infinite linear
      animation-delay 6s
      .space-wall
        animation-delay 6s

  .space-wall-right
    transform rotateY(90deg) translateZ(500px)

  .space-wall-left
    transform rotateY(-90deg) translateZ(500px)

  .space-wall-top
    transform rotateX(90deg) translateZ(500px)

  .space-wall-bottom
    transform rotateX(-90deg) translateZ(500px)

  .space-wall-back
    transform rotateX(180deg) translateZ(500px)



@keyframes space-move {
  0%{
    transform: translateZ(-500px) rotate(0deg);
  }
  100%{
    transform: translateZ(500px) rotate(0deg);
  }
}

@keyframes space-fade {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

找到hexo-theme-butterfly/layout/loading/fullpage-loading.pug,

用hyperspace.pug中#loading-box的部分替换fullpage-loading.pug下的#loading-box部分

找到hexo-theme-butterfly/source/css/_layout/loading.styl,

用hyperspace.styl中#loading-box的部分替换loading.styl下的#loading-box部分

注意缩进

将配置文件中的enable改为 true

1
2
3
4
5
6
7
8
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

重新加载界面即可设置完成

二十三、字数统计

23.1 全局安装cnpm

1
npm install -g cnpm --registry=https://registry.npmmirror.com

安装cnpm

23.2 安装插件

1
cnpm install hexo-wordcount --save

安装字数统计插件

23.3 开启wordcount

1
2
3
4
5
6
7
# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

开启Wordcount

字数统计

二十四、Snackbar 弹窗

1
2
3
4
5
6
7
8
9
10
# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#1f1f1f' # The background color of Toast Notification in dark mode

弹窗设置

二十五、Pangu

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

1
2
3
4
5
# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:
  enable: true
  field: site # site/post, site -- 全站, post -- 文章页

Pangu外挂

二十六、CSS 前缀

自动为一些 CSS 增加前缀。（会增加 20%的体积）

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

开启CSS前缀

二十七、Open Graph

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

1
2
3
4
5
6
7
8
9
10
11
12
# 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:

Open_Graph_meta

二十八、Instantpage

1
2
3
# https://instant.page/
# prefetch (預加載)
instantpage: true

Instantpage