前言

  • 2023.12.24 22:58

我只系一个冇人中意嘅可怜虫~

网站配置信息

  1. 修改 _config.yml 文件
  2. 搜索关键字 Site
  3. 修改相关个人公开信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Site (网站)
# 主标题
title: JimLeon595
# 副标题
subtitle: ''
# 站点描述
description: ''
keywords:
# 作者
author: JimLeon595
# 语言
language: zh-CN
# 时区
timezone: 'Asia/Hong_Kong'

Language (语言)

  • 选择你们默认显示的语言
1
2
3
en : 英文
zh-CN : 简体中文
zh-TW : 繁体中文

Timezone (时区)

  • 选择你们默认显示的时区
1
2
Asia/Hong_Kong : 中国香港特别行政区时区
Asia/Shanghai : 中国上海时区

Navigation bar settings (导航栏设置)

  • 修改 _config.butterfly.yml 文件
1
2
3
4
nav:
  logo: #image
  display_title: true
  fixed: false # fixed navigation bar
参数 解释
logo 网站的 logo，支持图片，直接填入图片链接
display_title 是否显示网站标题，填写 true 或者 false
fixed 是否固定状态栏，填写 true 或者 false

Menu (目录)

  • 必须是 /xxx/，后面 || 分开，然后写图标名(可不写)
1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  主页: / || fas fa-home
  文章 || fa-regular fa-newspaper:
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open
    归档: /archives/ || fas fa-archive
  生活 || fa-solid fa-heart-pulse:
    相册: /gallerys || fa-regular fa-image
    Vlog: /vlogs || fa-solid fa-photo-film
  娱乐 || fa-sharp fa-regular fa-heart:
    追番: /bangumis/ || fab fa-bilibili
    追剧: /cinemas/ || fab fa-youtube
    游戏: /steamgames/ || fab fa-steam-symbol

Code Blocks (代码相关)

  • 修改 _config.butterfly.yml 文件

highlight_theme (代码高亮主题)

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

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light
1
highlight_theme: light

highlight_copy (代码复制)

  • 主题支持代码复制功能
1
highlight_copy: true

highlight_shrink (代码框展开/关闭)

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

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

code_word_wrap (代码换行)

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

1
code_word_wrap: true

Social Settings (社交图标设置)

  • 书写格式: 图标名：url || 描述性文字 || color
1
2
3
4
social:
  fab fa-github: https://github.com/JimLeon595 || Github || '#24292e'
  fab fa-bilibili: https://space.bilibili.com/5300885 || Bilibili || 'fb7299'
  fas fa-envelope: mailto:[email protected] || Email || '#4a7dbe'

社交图标可以通过以下网站去找喜欢的图标使用

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

Image (图片设置)

  • 修改 _config.butterfly.yml 文件
  • Hexo 图片引用简介
1
2
3
4
5
# 本地引用
img: /img/xxx.png

# 远程引用
img: https://xxx.com/xxx.png

Avatar (头像)

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

顶部图

  1. default_top_img 就是默认的底图
  2. 页面顶部图的获取顺序：各自配置的 top_img > 配置文件的 default_top_img
  3. 文章页顶部图的获取顺序：各自配置的 top_img > cover > 配置文件的 default_top_img
  4. 如果不要显示顶部图，可直接配置 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-matter 的 cover > 配置文件的 default_cover > false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 文章封面
cover:
  # display the cover or not (主页是否显示文章封面图)
  index_enable: true
  # 侧栏是否显示文章封面图
  aside_enable: true
  # 归档页面是否显示文章封面图
  archives_enable: true
  # the position of cover in home page (封面显示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (当没有设置cover时，默认的封面显示)
  default_cover:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

页面 meta 显示

  • 这个选项是用来显示文章的相关信息的
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
# 页面 meta 显示
post_meta:
  # Home Page (主页)
  page:
    # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_type: both
    # date/relative 显示日期还是相对日期
    date_format: data
    # true or false 主页是否显示分类
    categories: true
    # true or false 主页是否显示标签
    tags: false
    # true or false 显示描述性文字
    label: true 
  # Post (文章)
  post:
    # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_type: both
    # date/relative 显示日期还是相对日期
    date_format: data
    # true or false 主页是否显示分类
    categories: true
    # true or false 主页是否显示标签
    tags: true
    # true or false 显示描述性文字
    label: true

主题文章节选

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

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

页面锚点

开启页面锚点后，当你在进行滚动时，页面链接会根据标题ID进行替换

1
2
3
4
5
6
7
8
# anchor
# 页面锚点
anchor:
  # when you scroll, the URL will update according to header id.
  # 开启页面锚点后，当你在进行滚动时，页面链接会根据标题ID进行替换
  auto_update: false
  # Click the headline to scroll and update the anchor
  click_to_scroll: false

图片描述

  • 可开启图片 Figcaption 描述文字显示
  • 优先显示图片的 title 属性，然后是 alt 属性
1
2
# figcaption (图片描述文字)
photofigcaption: false

Copy Settings (复制相关功能)

  • 可配置网站是否可以复制
  • 复制的内容是否添加版权信息
1
2
3
4
5
6
7
8
9
10
11
# copy settings (复制相关功能)
# copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
copy:
  # 是否开启网站复制权限
  enable: true
  # 复制的内容后面加上版权信息 
  copyright:
    # 是否开启复制版权信息添加
    enable: false
    # 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息
    limit_count: 50

Post (文章页相关配置)

  • 修改 _config.butterfly.yml 文件

TOC (目录)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# toc (目录)
toc:
  # 文章页是否显示 TOC
  post: true
  # 普通页面是否显示 TOC
  page: false
  # 是否显示章节数
  number: true
  # 是否展开 TOC
  expand: false
  # 简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）
  style_simple: false # for post
  # 是否显示滚动进度百分比
  scroll_percent: true

文章版权

  • 为你的博客文章展示文章版权和许可协议
  • 可设置decode: true来显示中文网址
1
2
3
4
5
6
7
8
9
10
# 文章版权
post_copyright:
  # 是否开启复制版权信息添加
  enable: true
  # 是否解码显示中文网址
  decode: true
  author_href:
  # 文章支持授权协议
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
  • 仅为记录，本人不支持打赏

Post edit (文章编辑按钮)

  • 不清楚作用，不教坏大家了
1
2
3
4
5
6
7
8
related_post:
  enable: true
  # Number of posts displayed
  # 显示推荐文章数目
  limit: 6
  # or created or updated
  # 文章日期显示创建日或者更新日
  date_type: created

# post_pagination (分页)

1
2
3
4
5
6
7
8
9
# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 1: 下一篇显示的是旧文章
# 2: The 'next post' will link to new post
# 2: 下一篇显示的是新文章
# false: disable pagination
# 关闭分页按钮
post_pagination: 2

文章过期提醒

  • 可设置是否显示文章过期提醒，以更新时间为基准。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  # style: simple/flat
  style: flat
  # When will it be shown
  # 距离更新时间多少天才显示文章过期提醒
  limit_day: 365
  # position: top/bottom
  position: top
  # 天数之前的文字
  message_prev: It has been
  # 天数之后的文字
  message_next: days since the last update, the content of the article may be outdated.

Footer Setting (页尾设置)

  • 修改 _config.butterfly.yml 文件
1
2
3
4
5
6
7
8
9
10
11
12
# Footer Setting (页脚设置)
# --------------------------------------
footer:
  # 作者
  owner:
    # 是否开启站点时间
    enable: true
    # 开始年份
    since: 2020
  # 页脚自定义文本
  custom_text:
  copyright: true # Copyright of theme and framework

Blog 年份

  • since 是一个来展示你站点起始时间的选项。
1
2
# 开始年份
since: 2020

页脚自定义文本

custom_text 是一个给你用来在页脚自定义文本的选项。
通常你可以在这里写声明文本等（支持 HTML）。
对于部分人需要写 ICP 的，也可以写在 custom_text 里。

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

aside (侧边栏)

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
aside:
  # 是否启用侧边栏
  enable: true
  # 是否隐藏侧边栏
  hide: false
  # 是否启用侧边栏
  button: true
  # display on mobile
  # 是否开启移动端
  mobile: true
  # left or right
  # 侧边栏在左边/右边
  position: left
  # 展示项目
  display:
    # 是否开启存档
    archive: true
    # 是否开启标签
    tag: true
    # 是否开启分类
    category: true
  # 作者卡片
  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
    # if set 0 will show all
    # 展示数量
    limit: 5
    # date or updated
    # 文章日期按照创建日或者更新日
    sort: date
    # Don't modify the setting unless you know how it works
    sort_order: 
  # 分类卡片
  card_categories:
    # 是否开启
    enable: true
    # if set 0 will show all
    # 展示数量
    limit: 5
    # none/true/false
    expand: none
    # Don't modify the setting unless you know how it works
    sort_order: 
  # 标签卡片
  card_tags:
    # 是否开启
    enable: true
    # if set 0 will show all
    # 展示数量
    limit: 40
    # 是否开启彩色
    color: true
    # Order of tags, random/name/length
    # 排序方法：随机/名字/长度
    orderby: random
    # Sort of order. 1, asc for ascending; -1, desc for descending
    # 排序方式
    order: 1
    # Don't modify the setting unless you know how it works
    sort_order: 
  # 存档卡片
  card_archives:
    # 是否开启
    enable: true
    # yearly or monthly
    # 按年还是按月展示
    type: monthly
    # eg: YYYY年MM月
    format: YYYY MMMM
    # Sort of order. 1, asc for ascending; -1, desc for descending
    # 排序方式
    order: -1
    # if set 0 will show all
    # 展示数量
    limit: 5
    # Don't modify the setting unless you know how it works
    sort_order: 
  # 网站资讯
  card_webinfo:
    # 是否开启
    enable: true
    # 文章数量
    post_count: true
    # 最后更新时间
    last_push_date: true
    # Don't modify the setting unless you know how it works
    sort_order: 
  # 文章系列卡片
  card_post_series:
    enable: true
    orderBy: 'date' # Order by title or date
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending

UV/PV (访问人数)

1
2
3
4
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true
  • 如果需要修改 busuanzi 的 CDN 链接，可通过 主题配置文件 的 CDN 中的 option 进行修改
1
2
3
CDN:
  option:
  	busuanzi: xxxxxxxxx

运行时间

  • 网站运行时间
1
2
3
4
5
6
# Time difference between publish date and now (网站运行时间)
# Formal: Month/Day/Year Time or Year/Month/Day Time
# 格式: 月/日/年 时间 也可以写成 年/月/日 时间
runtimeshow:
  enable: true
  publish_date: 2020/01/23 20:01:23

Aside widget - Newest Comments (最新评论)

  • 本人不开启评论功能，所以跳过

Bottom Right Button (右下角按钮)

  • 修改 _config.butterfly.yml 文件

简繁转换

  • 文章文字简体繁体转换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Conversion between Traditional and Simplified Chinese (简繁转换)
translate:
  # 是否开启翻译功能
  enable: true
  # The text of a button
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 繁
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  # 网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 2
  # Time delay
  # 延迟时间，若不在前，要设定延迟翻译时间，如100表示100ms，默认为0
  translateDelay: 0
  # The text of the button when the language is Simplified Chinese
  # 当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: '繁'
  # The text of the button when the language is Traditional Chinese
  # 当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: '簡'

Read Mode (阅读模式)

  • 阅读模式下会去掉除文章外的内容，避免干扰閲读。
  • 只会出现在文章页面，右下角会有阅读模式按钮。
1
2
# Read Mode (阅读模式)
readmode: true

Dark Mode (夜间模式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 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: 1 跟随系统而变化，不支持的浏览器/系统将按照时间 start 到 end 之间切换为 light mode
  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
  # autoChangeMode: 2 只按照时间 start 到 end 之间切换为 light mode ,其余时间为 dark mode
  # autoChangeMode: false
  # autoChangeMode: false 取消自动切换
  autoChangeMode: false
  # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
  # light mode 的开始时间
  start: # 6
  # light mode 的结束时间
  end: # 18

滚动状态百分比

1
2
# show scroll percent in scroll-to-top button (滚动状态百分比)
rightside_scroll_percent: true

按钮排序

  • 自定义按钮展示/隐藏功能
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: false
  hide: # readmode,translate,darkmode,hideAside
  show: # toc,chat,comment

Beautify/Effect (美化/效果)

  • 修改 _config.butterfly.yml 文件

自定义主题色

  • 颜色值必须被双引号包裹，就像"#000000"而不是#000000。
  • 否则将会在构建的时候报错！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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"

主页图片大小

  • index_top_img_height 值不能使用百分比。
1
2
3
4
5
6
7
8
# The top_img settings of home page
# 主页图片大小
# default: top img - full screen, site info - middle (默认的显示为全屏。site-info的区域会居中显示)
# 使用默认, 都无需填写（建议默认）
# The position of site info, eg: 300px/300em/300rem/10% (主页标题距离顶部距离)
index_site_info_top:
# The height of top_img, eg: 300px/300em/300rem (主页top_img高度)
index_top_img_height:

其他分区主页

  • 建议默认即可
1
2
3
4
5
# The user interface setting of category and tag page (category和tag页的UI设置)
# index - same as Homepage UI (index 值代表 UI将与首页的UI一样)
# default - same as archives UI 默认跟a rchives 页面UI一样
category_ui: # 留空或 index
tag_ui: # 留空或 index

文字左右对齐

1
2
3
# 文字左右对齐
# Stretches the lines so that each line has equal width（文字向两侧对齊，对最后一行无效）
text_align_justify: true

网站背景

  • 默认显示白色，可设置图片或者颜色
1
2
3
4
5
# 本地图片格式 url(/img/xxx.jpg)
# 远程图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景
background:

页脚背景

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

添加黑色半透遮罩

1
2
3
4
# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩)
mask:
  header: true
  footer: true

右下角按钮调整

1
2
# the position of bottom right button/default unit: px (右下角按钮距离底部的距离/默认单位为px)
rightside_bottom:

Enter transitions (开启网页进入效果)

1
2
# Enter transitions (开启网页进入效果)
enter_transitions: true

Typewriter Effect (打字效果)

  • 影响我看文章，所以不开
1
2
3
4
5
6
7
8
9
10
11
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  # 是否开启功能
  enable: false
  # open particle animation (冒光特效)
  colorful: true
  #  open shake (抖动特效)
  shake: true
  # 是否在移动端开启该功能
  mobile: false

Background effects (背景特效)

  • 修改 _config.butterfly.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
29
30
31
32
33
34
35
36
37
# Background effects (背景特效)
# --------------------------------------

# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  # 是否开启功能
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  # 设置是否每次点击都更换彩带
  click_to_change: false
  # 是否在移动端开启该功能
  mobile: false

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  # 是否开启功能
  enable: false
  # 是否在移动端开启该功能
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  # 是否开启功能
  enable: false
  # 线条颜色
  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.
  # the number of lines, default: 99.
  # 出现的线条数，默认为 99 条。
  count: 99
  # 是否在移动端开启该功能
  mobile: false

Mouse click effects (鼠标点击特效)

  • 修改 _config.butterfly.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
29
30
31
32
33
# Mouse click effects (鼠标点击特效)
# --------------------------------------

# Mouse click effects: fireworks (鼠标点击特效: 烟花特效)
fireworks:
  # 是否开启功能
  enable: false
  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:
    # - I
    # - LOVE
    # - YOU
  # 文字字体大小
  fontSize: 15px
  # 是否随机出现
  random: false
  # 是否在移动端开启该功能
  mobile: false

# Default display mode (网站默认显示模式)

1
2
3
# Default display mode (网站默认显示模式)
# light (default) / dark
display_mode: dark

Beautify (页面美化)

  • 修改 _config.butterfly.yml 文件

  • field 配置生效的区域

    • post 只在文章页生效
    • site 在全站生效
1
2
3
4
5
6
7
8
# Beautify (页面美化)
beautify:
  # 是否开启该功能
  enable: true
  # 配置生效区域 site/post
  field: site
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'

Global font settings (自定义字体设置)

  • 修改 _config.butterfly.yml 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Global font settings (自定义字体设置)
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  # 全局字体大小
  global-font-size:
  # 代码字体大小
  code-font-size:
  # 全局字体
  font-family: LXGW, sans-serif
  # 代码字体
  code-font-family: Consolas, sans-serif

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

主页标题

  • 修改 _config.butterfly.yml 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# the subtitle on homepage (主页标题)
subtitle:
  # 是否开启功能
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option: 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:
    - 前路自己拣，仆街唔好喊

Loading Animation (加载动画)

  • 修改 _config.butterfly.yml 文件
1
2
3
4
5
6
7
8
9
# Loading Animation (加载动画)
preloader:
  enable: false
  # source (作用位置)
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

Lightbox (图片大图查看模式)

  • 修改 _config.butterfly.yml 文件
1
2
3
4
5
6
7
8
9
10
11
# Lightbox (图片大图查看模式)
# --------------------------------------
# You can only choose one, or neither (只能选择一個 或者 兩個都不选)

# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false

# fancybox
# https://fancyapps.com/fancybox/
fancybox: true

Pjax

  • 修改 _config.butterfly.yml 文件

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

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

Inject

  • 修改 _config.butterfly.yml 文件

如想添加额外的 js/css/meta 等等东西，可以在 Inject 里添加，head(</body>标签之前)， bottom(</html>标签之前)。

1
2
3
4
5
6
7
8
# 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>

插入视频

之前使用插件效果也不太好
现在发现直接使用Html代码效果也挺好
这些直接在文档里面写

网页自适应源码

1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="<url>"  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>

Bilibili

获取 Bilibili 视频链接

  1. 分享 --> 嵌入代码
1
<iframe src="//player.bilibili.com/player.html?aid=*******&bvid=BV**********&cid=*********&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

网页自适应替换

  • 将 iframe src="" 替换即可
1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="//player.bilibili.com/player.html?aid=*******&bvid=BV**********&cid=*********&p=1"  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>

效果

Youtube

获取 Youtube 视频链接

  • 分享 --> 嵌入
1
<iframe width="560" height="315" src="https://www.youtube.com/embed/***********?si=****************" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

网页自适应替换

  • 将复制代码中 src="" 内容替换即可
1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="https://www.youtube.com/embed/***********"  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>

效果

参考 & 引用

https://butterfly.js.org/posts/4aa8abbe/
https://www.fomal.cc/posts/3451f874.html
https://cjh0613.com/20200405hexo-bilibili