butterfly主题安装

butterfly主题

安装主题，使用git clone克隆到本地！git clone [url]，本次使用butterfly主题！

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

视频讲解和博客参考资料

bilibili视频：Hexo搭建个人博客

偷掉月亮：Hexo中Buttefly最新教程总览

butterfly博客：Butterfly 安裝文檔

轻笑Chuckle：Butterfly魔改

Hexo主题安装与更改

官网下载合适的主题：hexo.io/themes/

点击名字，进入github，使用git clone克隆到本地

配置文件中，修改theme名称，==安装butterfly主题==！

//安装稳定版本，这是国内的gitee，速度比较快
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
//安装渲染插件
npm install hexo-renderer-pug hexo-renderer-stylus --save

清除原来主题文件，然后重新生成文件

hexo clean是清除原来的public文件，hexo g生成新的public文件，这样主题才能生效,hexo s是开启本地预览服务
hexo clean
hexo g
hexo s

写文章以及分类标签——Markdown格式的文章

官方文档说明：https://hexo.io/zh-cn/docs/writing

butterfly主题配置：https://butterfly.js.org/posts/21cfbf15/

Front-matter 是markdown文件最上方以 --- 分隔的区域，用于指定个别文件的变量

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置

页面的Front-matter

写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
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 的配置)
top_img 【可选】留空，true 和 false显示默认颜色，img链接显示对应图片

只需要在你的文章顶部的Front-matter配置这两个字段即可显示轮播图和推荐卡片

举例来说：

//使用ye
---
title: Hello World
date: 2013/7/13 20:46:25
categories:
- Diary
tags:
- PS3
- Games
---

文章的Front-matter，cover可以配置文章简介图，top_img可以显示banner图

参数 描述 默认值
layout 布局 config.default_layout
title 【必需】标题 文章的文件名
date 【必需】建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页
categories 分类（不适用于分页）
permalink 覆盖文章的永久链接，永久链接应该以 / 或 .html 结尾 null
excerpt 纯文本的页面摘要。使用 该插件 来格式化文本
disableNunjucks 启用时禁用 Nunjucks 标签 {{ }}/{% %} 和 标签插件 的渲染功能 false
lang 设置语言以覆盖 自动检测 继承自 _config.yml
top_img 【可选】留空，true 和 false显示默认颜色，img链接显示对应图片

在source目录下，执行下面命令，建立标签页

hexo new page "tags"
//相应的文件夹中，增加type
//文章的标题，也是所以可以搜索到的东西
title: Hexo中Buttefly文章标签与图床的选择（四）
//分类，如果想要二级分类，直接在下面直接添加就好
categories:
 - 博客搭建
//标签，表示这个属于Hexo标签与Butterfly标签，注意两个标签是同级的，同时便于别人的查询
tags：
 - Hexo
 - Butterfly
//自定义文章封面
cover: 图片的链接
//这个是网站的链接，是便于搜索引擎收录的，我们后续搜索引擎收录的时候在进行讲解
permalink
//评论功能，后续会讲解到
comments

butterfly主题美化设置

代码高亮

写代码

在文章中插入代码，官网说明文档：https://hexo.io/zh-cn/docs/tag-plugins

//开始说明，一般说明[lang:language]就行！
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}

//中间放代码块
code snippet

//结束
{% endcodeblock %}
额外选项 描述 默认值
line_number 显示行号 true
line_threshold 只有代码块的行数超过该阈值，才显示行数 0
highlight 启用代码高亮 true
first_line 指定第一个行号 1
mark 突出显示特定的行，每个值用逗号分隔。 使用破折号指定数字范围 例如： mark:1,4-7,10 将标记第1、4至7和10行
wrap 用 `` 包裹代码块 true
  • 代码高亮：在主题中，引入一段CSS代码就行！

相关文章

根据tags来判断！

插件

1. 标签插件note

icons和light_bg_offset只对方法一生效

  • 用法一
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
  • 用法二：自定义图标
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
class 【可选】标识，不同的标识有不同的配色
（ default / primary / success / info / warning / danger ）
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）

simple

{% note simple %}
默认 提示块标签
{% endnote %}

{% note default simple %}
default 提示块标签
{% endnote %}

{% note primary simple %}
primary 提示块标签
{% endnote %}

{% note success simple %}
success 提示块标签
{% endnote %}

{% note info simple %}
info 提示块标签
{% endnote %}

{% note warning simple %}
warning 提示块标签
{% endnote %}

{% note danger simple %}
danger 提示块标签
{% endnote %}

2. Gallery插件相册图库

//name：图库名字
//description：图库描述
//link：连接到对应相册的地址
//img-url：图库封面的地址

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

3. Gallery相册

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

  • 本地
//lazyload【可选】点击按钮加载更多图片，填写 true/false。默认为 false。
//rowHeight【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 220。
//limit【可选】每次加载多少张照片。默认为 10。
{% gallery [lazyload],[rowHeight],[limit] %}
markdown 图片格式
{% endgallery %}
  • 云链接
//url【必须】 识别词
//link【必须】远程的 json 链接
//lazyload【可选】点击按钮加载更多图片，填写 true/false。默认为 false。
//rowHeight【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 220。
//limit【可选】每次加载多少张照片。默认为 10。
{% gallery url,[link],[lazyload],[rowHeight],[limit] %}
{% endgallery %}

4. tag-hide插件隐藏标题文字

inline 在文本里面添加按钮隐藏内容，只限文字

( content不能包含英文逗号，可用&sbquo;)

{% hideInline content,display,bg,color %}

  • content: 文本内容

  • display: 按钮显示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

5. mermaid流程图

使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档

# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

例如

{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

6. Button插件

{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景顔色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮佈局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

7. inlineImg插件

主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂。

{% inlineImg [src] [height] %}

[src]      :    图片链接
[height]   ：   图片高度限制【可选】

8. label高亮插件

{% label text color %}
//default/blue/pink/red/purple/orange/green

9. timeline时间线

可以显示文字和日期，类似文章更新

{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

//title标题/时间线
//color	timeline 颜色default(留空) / blue / pink / red / purple / orange / green

10. flink插件

友情链接列表效果，内容格式与友情链接界面一样，支持 yml 格式

{% flink %}
xxxxxx
{% endflink %}

11. abcjs 乐谱

在页面上渲染乐谱

# abcjs (乐谱渲染)
# See https://github.com/paulrosen/abcjs
# ---------------
abcjs:
  enable: true
  per_page: true

12. 评论

13. 在线聊天

14. 分析統計

15. 網站驗證

16. 自定義主題色

可以修改大部分UI顏色

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

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"

17. 主頁top_img显示大小

默认全屏，site-info的区域会居中显示

# 主页设置
# 默认top_img全屏，site_info在中间
# 使用默认, 都无需填写（建议默认）
index_site_info_top: # 主页标题距离顶部距离  例如 300px/300em/300rem/10%
index_top_img_height:  #主页top_img高度 例如 300px/300em/300rem  不能使用百分比

18. 网站背景

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

# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景
background:

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

# 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 一样

20. 打字效果

打字效果activate-power-mode

# 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

21. 背景特效

22. 鼠标点击效果

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

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

23. 页面美化

会改变ol、ul、h1-h5的样式，field配置生效的区域，post 只在文章页生效，site 在全站生效

# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

24. 自定义字体和字体大小

  • 全局字体,可自行设置字体的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 标题字体
    • 可自行设置字体的font-family
    • 如不需要配置，请留空。
    • 如不需要使用网络字体，只需要把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

25. 网站副标题

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

# 主页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:
    - 今日事&#44;今日毕
    - Never put off till tomorrow what you can do today

26. 页面加载动画 preloader

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

27. 字数统计

28. 图片大图查看模式

29. Pjax

当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址。

这样可以不用重复加载相同的资源（css/js）， 从而提升网页的加载速度。

30. Snackbar 弹窗

31. Pangu

32. CDN

配置文件中最后一部分CDN，里面是主题所引用到的文件，可自行配置CDN。（非必要请勿修改，配置后请确认链接是否能访问）