说明：

​ 本文只转载了我需要的内容，作为本人记录。需要看全文的朋友请访问原文链接

原文作者: JerryC
原文链接: https://jerryc.me/posts/21cfbf15/

注：Butterfly已经升级到V2.0.0,从旧版本升级到V2.0.0,需重新配置butterfly.yml(_config.yml)

快速开始

hexo-theme-butterfly是基于Molunerfinn的hexo-theme-melody的基础上进行开发的。

文档也是在hexo-theme-melody的文档基础上修改。因为一些配置变更导致与原主题配置上有部分区别。故如果安装hexo-theme-butterfly主题，请参考这篇文档。

主题安装和升级

安装

在你的博客根目录里

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

1
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

应用主题

修改站点配置文件_config.yml，把主题改为Butterfly

1
theme: Butterfly
如果你没有 pug 以及 stylus 的渲染器，请下载安装： npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus
#### 平滑升级

为了主题的平滑升级, Butterfly使用了data files特性。

推荐把主题默认的配置文件_config.yml复製到 Hexo 工作目录下的source/_data/butterfly.yml,如果source/data的目录不存在那就创建一个。

注意，如果你创建了 butterfly.yml 它将会替换主题默认配置文件 _config.yml里的配置项 (不是合併而是替换), 之后你就只需要通过git pull的方式平滑地升级theme-butterfly了。
### 主题页面

Page Front-matter

1
2
3
4
5
6
7
8
---
title:
date:
type: （tags,link,categories这三个页面需要配置）
comments: (是否需要显示评论，默认true)
description:
top_img: (设置顶部图)
---

Post Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title:
date:
tags:
categories:
keywords:
description:
top_img: （除非特定需要，可以不写）
comments  是否显示评论（除非设置false,可以不写）
cover:  缩略图
toc:  是否显示toc （除非特定文章设置，可以不写）
toc_number: 是否显示toc数字 （除非特定文章设置，可以不写）
copyright: 是否显示版权 （除非特定文章设置，可以不写）
---

标籤页

  1. 前往你的 Hexo 博客的根目录
  2. 输入 hexo new page tags
  3. 你会找到source/tags/index.md这个文件
  4. 修改这个文件：
1
2
3
4
5
---
title: 标籤
date: 2018-01-05 00:00:00
type: "tags"
---

分类页

  1. 前往你的 Hexo 博客的根目录
  2. 输入 hexo new page categories
  3. 你会找到 source/categories/index.md这个文件
  4. 修改这个文件：
1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---

友情链接

为你的博客创建一个友情链接！

创建友情链接页面
  1. 前往你的 Hexo 博客的根目录
  2. 输入 hexo new page link
  3. 你会找到 source/link/index.md这个文件
  4. 修改这个文件：
1
2
3
4
5
---
title: 友情链接
date: 2018-06-07 22:17:49
type: "link"
---
友情链接添加

在Hexo博客目录中的 source/_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
26
27
28
class:
  class_name: 友情链接
  link_list:
    1:
      name: xxx
      link: https://blog.xxx.com
      avatar: https://cdn.xxxxx.top/avatar.png
      descr: xxxxxxx
    2:
      name: xxxxxx
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: xxxxxxx  

 class2:
   class_name: 链接无效
   link_list:
     1:
       name: 梦xxx
       link: https://blog.xxx.com
       avatar: https://xxxx/avatar.png
       descr: xxxx
     2:
       name: xx
       link: https://www.axxxx.cn/
       avatar: https://x
       descr: xx

友情链接界面设置

需要添加友情链接，可以在Butterfly.yml配置

可在友情链接上写上自己的个人资料，方便其他人添加。

1
2
3
4
5
6
7
8
Flink:
  headline: 友情链接
  info_headline: 我的Blog资料
  name: Blog 名字： Jerry Huang
  address: Blog 地址： https://youxuanw.vip:4000/
  avatar: Blog 头像： https://youxuanw.vip:4000/img/avatar.jpg
  info: Blog 简介： 何以解忧，唯有暴富
  comment: 如果需要交换友链,请留言

配置

配置文件説明

  • 站点配置文件 _config.yml是 hexo 工作目录下的主配置文件(还不知道是哪里的，自己google)
  • butterfly.yml 是 Butterfly 的配置文件。它需要你手动将主题目录下的_config.yml文件复製到 hexo 工作目录的 source/_data/butterfly.yml中。如果文件或者文件夹不存在，需要手动创建。

语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

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

网站资料

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

1
2
3
4
5
6
7
8
9
10
11
12
13
title: 'Jerry Huang'
subtitle: '何以解忧 唯有暴富'
description: '何以解忧，唯有暴富！'
keywords: '自定义'
author: 'Jerry Huang'
language: 'zh-CN'
timezone: ''
email: '自定义'
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://youxuanw.vip:4000/
root: /
permalink: :id/

导航菜单

配置 butterfly.yml

1
2
3
4
5
6
7
8
9
10
menu:
  Home: / || fa fa-home
  Archives: /archives/ || fa fa-archive
  Tags: /tags/ || fa fa-tags
  Categories: /categories/ || fa fa-folder-open
  Link: /link/ || fa fa-link
  About: /about/ || fa fa-heart
  List||fa fa-list:
    - Music || /music/ || fa fa-music
    - Movie || /movies/ || fa fa-film
必须是/xxx/，后面||分开，然后写图标名。菜单名称可自己修改
格式：
显示名称：
路径||icon
sub-menu格式
名称||icon
名称||路径||icon

代码

代码高亮主题

Butterfly 支持了 Material Theme全部 5 种代码高亮样式：

  • default
  • darker
  • pale night
  • light
  • ocean

配置butterfly.yml

1
highlight_theme: light

下面是5中高亮的样式：

deault
.

darker
.

pale night
.

light
.

ocean
.

代码复製

主题支持代码复製功能

配置butterfly.yml

1
highlight_copy: true

代码框展开/关闭

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

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

highlight_shrink: true

highlight_shrink: false

代码换行

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

配置butterfly.yml

1
code_word_wrap: true

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

1
2
3
4
5
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:
设置code_word_wrap之前:
.

设置code_word_wrap之后:
.

主页文章节选(自动节选和文章页description)

因为主题UI的关係，主页文章节选只支持自动节选和文章页description。优先选择自动节选。

在butterfly.yml里可以开启auto_excerpt的选项，你的文章将会在自动截取部分显示在主页。（默认显示150个字）。

1
2
3
auto_excerpt:
  enable: true
  length: 150

如果没有开启自动节选，则会显示文章页front-matter里面设置的description。

注意：如果开启了自动节选功能，代码块的显示将有可能不正常。
#### 顶部图

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

page页

当具体url时

主页的顶部图可以在Butterfly.yml设置index_img

archives页的顶部图可以在Butterfly.yml设置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图片

文章相关项

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

配置butterfly.yml

1
2
3
4
post_meta:
  date_type: both #or created or updated 文章日期是创建日或者更新日或都显示
  categories: true # or false 是否显示分类
  tags: true # or false 是否显示标籤

在文章顶部的资料，

date_type: 可设置文章日期显示创建日期(created)或者更新日期(updated)或者两种都显示(both)

categories 是否显示分类

tags是否显示标籤

文章版权

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

配置butterfly.yml

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

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

1
copyright: false

版权显示截图

文章打赏

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

配置butterfly.yml

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

文章封面

文章的markdown文档上,在Front-matter添加cover,并填上要显示的图片地址。
如果不配置cover,可以设置显示默认的cover.

配置butterfly.yml

1
default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png

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

1
2
3
4
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

头像

配置butterfly.yml

1
avatar: https://xxxx/avatar.png

TOC

在文章页，会有一个目录，用于显示TOC。 手机端默认显示按钮。

配置butterfly.yml

1
2
3
toc:
  enable: true
  number: true   #显示章节数字

PC

Mobile

为特定的文章配置是否显示TOC和特定的目录章节数字

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

toc是否显示文章TOC

toc_number 是否显示章节数

配置之后你的特定的文章将会拥有它自己的目录数字的显示与否，而不会受全局的配置影响。

enable: true
.

number: false
.

设置是否自动打开TOC

可选择进入文章页面时，是否自动打开sidebar显示TOC

1
2
auto_open_sidebar:
  enable: true

相关文章

相关文章推荐的原理是根据文章tags的比重来推荐

配置butterfly.yml

1
2
3
related_post:
  enable: true
  limit: 6 # 显示推荐文章数目

博客年份

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

配置butterfly.yml

1
since: 2018

页脚自定义文本

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

配置butterfly.yml

1
footer_custom_text: Hi, welcome to my <a href="https://jerryc.me/">blog</a>!

ICP

对于部分有备案的域名，可以在ICP配置显示。

配置butterfly.yml

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

右下角按钮

简繁转换

简体繁体互换

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

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 简
  #网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #博客网址
  cookieDomain: "https://jerryc.me/"
  #当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"
简体
.

繁体
.

夜间模式

右下角会有夜间模式按钮

配置butterfly.yml

1
2
3
# 夜间模式
darkmode:
  enable: true

V2.0.0 开始增加一个选项，可开啓自动切换light mode 和 dark mode
autoChangeMode: 1 跟随系统而变化，不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode
autoChangeMode: 2 只按照时间 晚上6点到早上6点之间切换为 dark mode,其余时间为light mode
autoChangeMode: false 取消自动切换
1
2
# 自动切换 dark mode和 light mode
autoChangeMode: false
閲读模式

閲读模式下会去掉除文章外的内容，避免干扰閲读。

只会出现在文章页面，右下角会有閲读模式按钮。

配置butterfly.yml

1
2
readmode:
  enable: true

侧边栏设置

侧边排版

可自行决定哪个项目需要显示，可决定位置。

至少需要显示一个
配置butterfly.yml 
1
2
3
4
5
6
7
8
9
aside:
  position: right # left or right
  card_author: true
  card_announcement: true
  card_recent_post: true
  card_categories: true
  card_tags: true
  card_archives: true
  card_webinfo: true
left
.

right
.

访问人数 busuanzi (UV 和 PV)

访问 busuanzi 的官方网站查看更多的介绍。

配置butterfly.yml

运行时间

网页已运行时间

配置butterfly.yml

1
2
3
4
5
6
runtimeshow:
  enable: true
  start_date: 6/7/2018 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

Note (Bootstrap Callout)

移植於next主題（注意，書寫不是markdown規範，而是hexo特有的功能，故在其它地方會顯示不出效果）

配置

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

用法

1
2
3
4
5
6
7
8
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}

[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.

效果

演示效果

Gallery相册

2.0.0以上提供
区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md。

写法:

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}

例如

1
2
3
4
5
6
7
8
{% gallery %}
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-scary-pumpkin-hand-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-fresh-fish-dinner-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-mountain-cloud-landscape-900x600.jpg)
![](https://picjumbo.com/wp-content/uploads/iphone-free-stock-photos-2210x3315.jpg)
![](https://picjumbo.com/wp-content/uploads/young-millennial-girl-drinking-lemonade-and-overlooking-the-city-2210x1473.jpg)
![](https://picjumbo.com/wp-content/uploads/modern-graphic-designer-essentials_free_stock_photos_picjumbo_HNCK4919-2210x1474.jpg)
{% endgallery %}

评论

Valine

遵循 Valine的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明。

然后配置butterfly.yml:

1
2
3
4
5
6
7
8
9
10
11
valine:
  enable: false # if you want use valine,please set this value is true
  appId:   # leancloud application app id
  appKey:   # leancloud application app key
  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
  verify: false # valine verify code (true/false)
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: en # i18n: zh-cn/en/tw
  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header inf

分享

Sharejs

如果你不知道 sharejs，看看它的説明。

配置butterfly.yml

1
2
3
sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容

搜索系统

Algolia

你需要安装 hexo-algolia或 hexo-algoliasearch. 根据它们的説明文档去做相应的配置。

配置butterfly.yml

1
2
3
4
5
local_search:
  enable: false
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

分析統計

百度統計
  1. 登錄百度統計的官方網站
  2. 找到你百度統計的統計代碼
  3. 配置butterfly.yml
1
baidu_analytics: 你的代碼
谷歌分析
  1. 登錄谷歌分析的官方網站
  2. 找到你的谷歌分析的跟蹤 ID
  3. 配置butterfly.yml
1
google_analytics: 你的代碼 # 通常以`UA-`打頭
騰訊分析
  1. 登錄騰訊分析的官方網站
  2. 找到你的站點ID
  3. 配置butterfly.yml
1
2
# Tencent_analytics ID
tencent_analytics:

美化/特效

自定义主题色

可以修改大部分UI颜色

配置butterfly.yml，比如：

颜色值必须被双引号包裹，就像"#000"而不是#000。否则将会在构建的时候报错！
1
2
3
4
5
6
7
8
9
theme_color:
  enable: true
  main: "#9370DB"
  paginator: "#7A7FF1"
  button_hover: "#FF7242"
  text_selection: "#69c46d"
  link_color: "#858585"
  hr_color: "#A4D8FA"
  read-mode-bg_color: '#FAF9DE'
![](https://youxuanw.vip:888/images/2019/11/27/hexo-theme-butterfly-doc-color_1.png)

网站背景

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

配置butterfly.yml

1
2
3
4
# 图片格式 background: url(http://xxxxxx.com/xxx.jpg)
# 顔色 background: '#49B202'
# 留空 显示白色
background:

background:‘#49B202’

background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

footer 的背景会与top_img的一致, 当设置false时，将与主题色一致。

配置butterfly.yml

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

true

打字效果

进入hexo根目录npm install activate-power-mode

配置butterfly.yml

1
2
activate_power_mode:
  enable: true

静止彩带

好看的彩带背景，可设置每次刷新更换彩带，或者每次点击更换彩带

配置butterfly.yml

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

相关配置可查看canvas_ribbon

动态彩带

好看的彩带背景，会飘动

配置butterfly.yml

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: false # false 手机端不显示 true 手机端显示

canvas-nest

配置butterfly.yml

1
2
3
4
5
6
7
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 手机端显示

鼠标点击效果

烟花

配置butterfly.yml

1
2
fireworks:
  enable: true

爱心

配置butterfly.yml

1
2
3
# 点击出现爱心
click_heart:
  enable: true

文字

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 点击出现文字，文字可自行修改
ClickShowText:
  enable: false
  text: 
    - 富强
    - 民主
    - 文明
    - 和谐
    - 自由
    - 平等
    - 公正
    - 法治
    - 爱国
    - 敬业
    - 诚信
    - 友善
  fontSize: 15px

文章页美化

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

配置butterfly.yml

1
2
3
4
post_beautify:
  enable: true
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

title-prefix-icon填写的是fontawesome的icon的Unicode数。

未开啓美化
.

开啓美化
.

自定义字体

可自行设置字体的font-family

配置butterfly.yml

1
2
3
4
font:
  enable: true
  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
  code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number

网站副标题

br/>适用于 版本号 >= V1.2.0
V2.0.0开始增加一些第三方api调用

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

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 主页subtitle
# 打字效果
subtitle: 
  enable: true
  # source调用第三方服务
  # source: false 关闭调用 
  # source: 1  调用金山词霸的每日一句（简体）
  # source: 2  调用一言网的一句话（简体） #https://hitokoto.cn/
  # source: 3  调用一句网（简体） http://yijuzhan.com/
  # source: 4  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # (如果有英文逗号' , '，请使用转义字符 &#44;)
  sub:
    - 今日事&#44;今日毕
    - Never put off till tomorrow what you can do today

主页top_img显示大小

适用于 版本号 >= V1.2.0
默认的显示为全屏。site-info的区域会居中显示 
1
2
3
4
5
# 主页设置
# 默认top_img全屏，site_info在中间
# 使用默认, 都无需填写（建议默认）
index_site_info_top:   #主页标题距离顶部距离  例如 300px/300em/300rem/10%
index_top_img_height:  #主页top_img高度 例如 300px/300em/300rem  不能使用百分比

注意：index_top_img_height的值不能使用百分比。
2个都不填的话，会使用默认值

举例，当

1
2
index_site_info_top: 40%
index_top_img_height: 400px。

效果

字数统计

要为Butterfly配上字数统计特性, 你需要如下几个步骤:

  1. 打开 hexo 工作目录

  2. npm install hexo-wordcount --save or yarn add hexo-wordcount

  3. 配置butterfly.yml:

1
2
wordcount:
  enable: true

文章置顶

要为你一些文章置顶，你需要如下步骤:

  1. 打开 hexo 工作目录
  2. npm uninstall hexo-generator-index --save 然后 npm install hexo-generator-index-pin-top --save
  3. 你要在文章的front-matter区域里添加top: True属性来把这篇文章置顶。
  4. 你可以参考 hexo-generator-index-pin-top这个仓库来了解更多细节。

举个例子:

你的某篇文章开头如下：

1
2
3
4
5
6
title: xxxx
tags:
  - xxx
date: 2018-08-08 08:08:08
---
// ....

现在把top: True加进去：

1
2
3
4
5
6
7
title: xxxx
tags:
  - xxx
date: 2018-08-08 08:08:08
top: True
---
// ....

图片大图查看模式

默认为 fancybox,可以选择改爲 medium_zoom

配置butterfly.yml

1
2
medium_zoom:
  enable: true
fancybox 打开模式
.

medium_zoom 打开模式
.

Snackbar 弹窗

Snackbar弹窗,根据自己爱好开啓

配置butterfly.yml

1
2
3
4
5
6
7
8
9
# Snackbar 弹窗
# 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' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景
未开啓Snackbar
.

开啓Snackbar
.

作者: JerryC
鏈接: https://jerryc.me/posts/21cfbf15/
來源: JerryC
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。