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

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

原文链接：基于 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

留神：

单位是px，间接增加数字，如 200
理论限度高度为highlight_height_limit + 30 px ，多减少 30px 限度，目标是防止代码高度只超出highlight_height_limit 一点时，呈现开展按钮，开展没内容。
不适用于暗藏后的代码块（ 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.pngcategory_per_img：  随想: hdhdh.png  举荐: ddjdjdjd.png

文章置顶

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

文章封面

文章的markdown文档上，在Front-matter增加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: xxxxcopyright_author_href: https://xxxxxx.comcopyright_url: https://xxxxxx.comcopyright_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者

文章打赏

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

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

属性	解释
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 paginationpost_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 modedarkmode:  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    ##网页开明工夫  #格局: 月/日/年 工夫  #也能够写成 年/月/日 工夫

网站背景

# 图片格式 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-modeactivate_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。

# Sitesubtitle:  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 Animationpreloader: true

字数统计

装置插件：在你的博客根目录，关上cmd命令窗口执行npm install hexo-wordcount --save。
开启配置：批改主题配置文件_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/pjaxpjax:   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

搜寻零碎

基于 Hexo 键入搜寻性能

Hexo 键入分享性能

在线聊天

基于 Hexo 键入在线聊天性能

前言

语言

网站材料

导航菜单

代码

代码高亮主题

darker

pale night

light

ocean

mac

mac light

代码复制

代码框开展/敞开

true

false

none

代码换行

代码高度限制

社交图标

顶部图

3.2.0 以下版本

3.2.0 以上版本

文章置顶

文章封面

文章页相干配置

文章meta显示

文章版权和协定许可

文章打赏

TOC

相干文章举荐

文章锚点

文章过期揭示

文章分页按钮

头像

图片形容

文章内容复制相干配置

Footer 设置

博客年份

页脚自定义文本

右下角按钮

简繁转换

夜间模式

浏览模式

侧边栏设置

侧边排版

拜访人数(UV 和 PV)

运行工夫

最新评论

网站背景

打字成果

footer 背景

背景特效

静止彩带

动静彩带

tab canvas_nest

鼠标点击成果

烟花

爱心

文字

自定义字体和字体大小

全局字体

Blog 题目字体

网站副标题

页面加载动画preloader

字数统计

图片大图查看模式

fancybox

medium_zoom

Pjax

Inject

CDN

搜寻零碎

分享

在线聊天