搜索

记得运行 hexo clean

  1. 你需要安装 hexo-generator-searchdb 或者 hexo-generator-search，根据它的文档去做相应配置

  2. 修改 主题配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Local search
    local_search:
      enable: false
      # Preload the search data when the page loads.
      preload: false
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: 1
      # Unescape html strings to the readable one.
      unescape: false
      CDN:
参数
解释
enable 是否开启本地搜索
preload 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
top_n_per_article 匹配的文章结果，默认显示最开始的 1段结果
unescape 将 html 字符串解码为可读字符串
CDN 搜索文件的 CDN 地址（默认使用的本地链接）

记得运行 hexo clean

如果你使用 hexo-algoliasearch，请记得配置 fields 参数的 title, permalink 和 content

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

修改 主题配置文件

1
2
3
4
algolia_search:
  enable: true
  hits:
    per_page: 6

DocSearch 是另一款由 algolia 提供的搜索服务，具体申请和使用请查看 DocSearch 文档

1
2
3
4
5
6
docsearch:
  enable: false
  appId:
  apiKey:
  indexName:
  option:
参数
解释
enable 【必须】是否开启 docsearch
appId 【必须】你的 Algolia 应用 ID
apiKey 【必须】你的 Algolia 搜索 API key
indexName 【必须】你的 Algolia index name
option 【可选】其余的 docsearch 配置
具体配置可查这里

评论

查看评论设置

在綫聊天

查看在綫聊天设置

分析统计

查看分析统计设置

广告

主题已集成谷歌广告（自动广告）

修改 主题配置文件

1
2
3
4
5
6
google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:  # 填入个人识别码
  enable_page_level_ads: true

主题预留了三个位置可供插入广告，分别为主页文章(每三篇文章出现广告)/aside公告之后/文章页打赏之后。
把html代码填写到对应的位置

修改 主题配置文件

1
2
3
4
ad:
  index: 
  aside: 
  post:


网站验证

如果需要搜索引擎收录网站，可能需要登录对应搜索引擎的管理平台进行提交。
各自的验证码可从各自管理平台拿到

修改 主题配置文件

1
2
3
4
5
site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

美化/特效

自定义主题色

修改 主题配置文件，比如：

颜色值必须被双引号包裹，就像"#000"而不是#000。否则将会在构建的时候报错！

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"

主页top_img显示大小

默认的显示为全屏。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
3
4
# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景
background:

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

修改 主题配置文件

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

打字效果

打字效果activate-power-mode

修改 主题配置文件

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

![][/img/cons/z7.gif]

背景特效

好看的綵带背景，可设置每次刷新更换綵带，或者每次点击更换綵带
修改 主题配置文件

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

好看的綵带背景，会飘动
修改 主题配置文件

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

修改 主题配置文件

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 手机端显示

鼠标点击效果

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

修改 主题配置文件

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

修改 主题配置文件

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

修改 主题配置文件

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

页面美化

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

field配置生效的区域

  • post 只在文章页生效
  • site 在全站生效
    修改 主题配置文件
    1
    2
    3
    4
    5
    6
    # 美化页面显示
    beautify:
      enable: true
      field: site # site/post
      title-prefix-icon: '\f0c1'
      title-prefix-icon-color: "#F47466"

网站副标题

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

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 主页subtitle
subtitle:
  enable: false
  # Typewriter Effect (打字效果)
  effect: true
  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:
    - 今日事,今日毕
    - Never put off till tomorrow what you can do today

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

主题支持 pace.js 的加载动画，具体可查看 pace.js

配置 butterly.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:

字数统计

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

  1. 打开 hexo 工作目录

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

修改 主题配置文件:

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

图片大图查看模式

修改 主题配置文件

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

Snackbar 弹窗

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

修改 主题配置文件

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时弹窗背景

CSS 前缀

有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效。

开启 css_prefix 后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）

修改配置文件

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

Inject

如想添加额外的js/css/meta等等东西，可以在Inject里添加，支持添加到head(标签之前)和bottom(标签之前)。

请注意：以标准的html格式添加内容

例如

1
2
3
4
5
inject:
  head:
  	- <link rel="stylesheet" href="/self.css">
  bottom:
  	- <script src="xxxx"></script>

留意: 如果你的网站根目录不是’/‘,使用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog,引用css/xx.css，则设置为<link rel="stylesheet" href="/blog/css/xx.css">

Butterfly 安装文档(五) 进阶教程