搭建github博客

创建仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是fiveagent，那么你就新建fiveagent.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://fiveagent.github.io 了，是不是很方便？

由此可见，每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。

几个注意的地方：

  1. 注册的邮箱一定要验证，否则不会成功；
  2. 仓库名字必须是：username.github.io，其中username是你的用户名；

本地搭建hexo+butterfly

nodejs：下载 点击这里快捷电梯

git：下载 点击这里快捷电梯

自己找一个位置创建目录作为你自己博客的根目录

在这个目录下鼠标右击->选择”Git Bash Here”后进入git的bash界面

输入如下命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//第一条   这是安装hexo的基础框架
npm install -g hexo

//第二条   这是初始化hexo框架 这个可能会比较慢
hexo init

//第三条 安装所需要的组件
npm install

//第四条 编译生成静态页面
hexo g

//第五条 启动本地服务
hexo s

在浏览器中输入 http://localhost:4000/ 你将会看到一个初始的博客界面

我们继续回到bash命令界面 Ctrl+c结束后

输入下面这条命令将会下载butterfly主题到博客根目录下的themes文件夹下

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

修改博客根目录下的配置文件_config.yml，找到theme：字段

1
theme: butterfly

如果没有渲染插件就需要下载

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

再次运行一下命令后进浏览器输入http://localhost:4000/ 查看更改butterfly主题有点效果

1
2
3
4
5
//编译生成静态页面
hexo g

// 启动本地服务
hexo s

配置SSH key

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

1
$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。

1
ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：

image-20200809183636504

将刚复制的内容粘贴到key那里，title随便填，保存。

测试是否成功

1
$ ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：

Hi liuxianan! You’ve successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功！

此时你还需要配置：

1
2
$ git config --global user.name "liuxianan"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

具体这个配置是干嘛的我没仔细深究。

使用hexo写博客

hexo简介

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。

官网： http://hexo.io
github: https://github.com/hexojs/hexo

原理

由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。

注意事项

安装之前先来说几个注意事项：

  1. 很多命令既可以用Windows的cmd来完成，也可以使用git bash来完成，但是部分命令会有一些问题，为避免不必要的问题，建议全部使用git bash来执行；
  2. hexo不同版本差别比较大，网上很多文章的配置信息都是基于2.x的，所以注意不要被误导；
  3. hexo有2种_config.yml文件，一个是根目录下的全局的_config.yml，一个是各个theme下的；

安装

1
$ npm install -g hexo

初始化

在电脑的某个地方新建一个名为hexo的文件夹（名字可以随便取），比如我的是D:\MyBlog，由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。接下来在自己博客根目录打开GitBashHere

image-20200809184532454

1
$ hexo init

hexo会自动下载一些文件到这个目录，包括node_modules

1
2
$ hexo g # 生成
$ hexo s # 启动服务

执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github去的：

image-20200809184659887

hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容lo World 的文章

修改主题

既然默认主题很丑，那我们别的不做，首先来替换一个好看点的主题。这是 官方主题。

个人比较喜欢的主题：

首先下载这个主题：

1
$ git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

下载后的主题都在这里：博客根目录下的themes/

image-20200809184309579

修改_config.yml中的theme: landscape改为theme: yilia，然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

上传之前

在上传代码到github之前，一定要记得先把你以前所有代码下载下来（虽然github有版本管理，但备份一下总是好的），因为从hexo提交代码时会把你以前的所有代码都删掉。

上传到github

如果你一切都配置好了，发布上传很容易，一句hexo d就搞定，当然关键还是你要把所有东西配置好。

首先，ssh key肯定要配置好。

其次，配置_config.yml中有关deploy的部分：

首先进入自己的仓库，点击usessh，将ssh地址复制到repository：

image-20200809185405011

image-20200809185444230

1
2
3
4
deploy:
  type: git
  repository: git@github.com:fiveagent/fiveagent.github.io.git
  branch: master

主题的安装和升级

安装

在你博客的根目录里

bash

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

应用主题

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

yml

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

markdown

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

Post Front-matter

markdown

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. 修改这个文件：

markdown

1
2
3
4
5
---
tite: 标签
date: 2019-12-1 00:00:00
type: tags
---

分类页

  1. 前往你的Hexo博客的根目录
  2. 输入hexo new page categories
  3. 你会找到source/categories/index.md这个文件
  4. 修改这个文件:

markdown

1
2
3
4
5
---
title: 分类
date: 2019-12-1 00:00:00
type: categories
---

友情链接

为你的博客添加友情链接！

创建友情链接

  1. 前往你的Hexo博客的根目录
  2. 输入hexo new page link
  3. 你会找到source/link/index.md这个文件
  4. 修改这个文件:

markdown

1
2
3
4
5
---
title: 友情链接
date: 2019-12-1 00:00:00
type: link
---

友情链接添加

在Hexo博客根目录中的source/_data创建一个文件link.yml

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
class:
  class_name: 友情链接
  link_list:
    1:
      name: xxx
      link: https://xxx.com
      avatar: https://xxx/xxx/avatar.png (也可以是本地文件)
      descr: 添加描述
    2：
      name: xxx
      link: https://xxx.com
      avatar: https://xxx/xxx/avatar.png (也可以是本地文件)
      descr: 添加描述

class2:
  class_name: 无效链接
  link_list:
    1:
      name: xxx
      link: https://xxx.com
      avatar: https://xxx/xxx/avatar.png (也可以是本地文件)
      descr: 添加描述
     2:
       name: xxx
      link: https://xxx.com
      avatar: https://xxx/xxx/avatar.png (也可以是本地文件)
      descr: 添加描述

友情链接界面设置

需要添加友情链接，可以在Butterfly.yml配置
可以在友情链接上协商自己的个人资料，方便他人添加

yaml

1
2
3
4
5
6
7
8
Flink:
  headline: 友情链接
  info_headline: 我的Blog资料
  name: Blog 名字: xxx
  address: Blog 地址: https://xxx.com
  avatar: Blog 头像: https://xxx.com
  info: Blog 简介: xxx,xxx
  comment: 如需交换友链，请留言

配置文件说明

  • 站点配置文件_config.yml是hexo根目录下的配置文件
  • butterfly.yml是Butterfly的配置文件，他需要你手动将主题目录下的config.yml文件复制到hexo根目录的source/_data/butterfly.yml中。如果文件或文件夹不存在，请手动创建。

语言

修改站点配置文件_config.yml的language参数

默认语言是en

主题支持三种语言

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

网站资料

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

导航菜单

配置butterfly.yml

yaml

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 Theme5种高亮模式:

  • default
  • darker
  • pale night
  • light
  • ocean

配置butterfly.yml

yaml

1
highlight_theme: light

default

img

darker

img

pale night

img

light

img

ocean

img

代码复制

主题支持代码复制功能

配置butterfly.yml

yaml

1
highlight_copy: true

img

代码框展开/关闭

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

配置butterfly.yml

yaml

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

highlight_shrink: true
img
highlight_shrink: flase
img

代码换行

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

配置butterfly.yml

yaml

1
code_word_wrap: true

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

yaml

1
2
3
4
5
highlight:
  enable: true
  line_number: flase
  auto_detect: false
  tab_replace:

设置code_word_wrap之前：

img

设置code_word_wrap之后：

img

社交图片

Butterfly支持font-awesome v4和font-awecome v5.如需开启font-awecome v5，需要在Butterfly.yml上开启

yaml

1
2
3
4
CDN_USE:
  css:
    - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
    - https://use.fontawesome.com/releases/v5.8.1/css/all.css

无论V4还是V5，书写格式都是一样的图标名：url

yaml

1
2
3
social:
  fa fa-github: https://github.com/xxx
  fa fa-rsss: /atom.xml

图标可以在这寻找
img

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

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

yaml

1
2
3
auto_excerpt:
  enable: true
  length: 150

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

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

顶部图

顶部图有两种配置:具体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

yaml

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

yaml

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单独设置

yaml

1
copyright: false

版权显示截图
image-20200809120504776

文章打赏

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

配置butterfly.yml

yaml

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: 支付宝

image-20200809121947388

文章封面

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

配置butterfly.yml

yaml

1
default_cover: https://xxx.com/xxx.png

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

yaml

1
2
3
4
default_cover:
  - https://xxx.com/xxx.png
  - https://xxx.com/yyy.png
  - https://xxx.com/zzz.png

image-20200809123510234

头像

配置butterfly.yml

yaml

1
avatar: https://xxx/avatar.png

toc

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

配置butterfly.yml

yaml

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

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

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

toc是否显示文章TOC

toc_number是否显示章节数

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

1
enable: true
1
number: false

设置是否自动打开TOC

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

yaml

1
2
auto_open_sidebar:
  enable: true

相关文章

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

配置butterfly.yml

yaml

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

Footer设置

博客年份

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

配置butterfly.yml

yaml

1
since: 2018

img

脚本页自定义文本

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

配置butterfly.yml

yaml

1
2
3
4
5
footer:
  owner:
    enable: true
    since: 2020
  custom_text: 欢迎来到胡先森的博客

image-20200809122959722

ICP

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

配置butterfly

yaml

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

右下角按钮

简繁转换

简体繁体互换

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

配置butterfly.yml

yaml

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

yaml

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 取消自动切换

yaml

1
2
# 自动切换dark mode和light mode
autoChangeMode: false

阅读模式

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

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

配置butterfly.yml

yaml

1
2
readmode:
  enable: true

img

侧边栏设置

侧边排版

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

至少需要显示一个

配置butterfly.yml

yaml

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
image-20200809110922703

访问人数busuanzi(UV和PV)

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

配置butterfly.yml

yaml

1
2
3
4
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

img
image-20200809123347949

运行时间

网页已运行时间

配置butterfly.yml

code

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

img

Note(Bootstrap Callout)

移植于next主题(注意，书写不是markdown规范，而是hexo特有的工呢，故在其它地方不会显示出效果)

配置

配置butterfly.yml

yaml

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

用法

markdown

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。

写法：

markdown

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

评论

只能选择一个评论服务商，我才用的是Valine，下图的注释要去掉，就是因为这个害我折腾半天

image-20200809111529359

Disqus

注册disqus配置你的disqus，然后在Butterfly里开启它。

配置butterfly.yml

yaml

1
2
3
disqus:
  enable: true # or fasle
  shortname: 你的disqus的 short-name

Laibili(来必力)

注册来必力配置你自己的来必力设置，然后在butterfly里开启它。

配置butterfly.yml

yaml

1
2
3
laibili:
  enable: true # or false
  uid: 你的laibili的uid

laibili的uid你能在这里找到:
image-20200809111255628

Gitalk

遵循gitalk的指示去获取你的github Oauth应用的client id和secret值。以及查看他的相关配置说明。

然后配置butterfly.yml

yaml

1
2
3
4
5
6
7
gitalk:
  enable: true
  client_id: 你的client id
  client_secret: 你的client secret
  repo: 你的github仓库
  owner: 你的github用户名
  admin: 该仓库的拥有者或协作者

Valine

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

然后配置butterfly.yml，记住，在之前说的yaml配置文件中的comments：下的厂商注释要确认去掉

yaml

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

分享

只能选择一个分享服务商

AddThis

找到你的pub-id

img
配置butterfly.yml

yaml

1
2
3
addThis:
  enable: true # or false
  pubid: 你的pub-id

Sharejs

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

配置butterfly.yml

yaml

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

Addtoany

可以找到addtoany查看使用说明

yaml

1
2
3
4
5
6
7
8
9
10
addtoany:
  enable: false
  item:
    - facebook
    - twitter
    - wechat
    - sina_weibo
    - facebook_messenger
    - email
    - copy_link

搜索系统

Algolia

  1. 你需要安装hexo-algolia或者hexo-algoliasearch，根据它们的说明文档去做相应的配置。
  2. 配置butterfly.yml

yaml

1
2
3
4
5
6
7
8
9
algolia_search:
  enable: true
  hits:
    per_page: 6

  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
    hits_stats: "${hits} results found in ${time} ms"

本地搜索

  1. 你需要安装hexo-generator-search，根据它的文档去做相应的配置。注意格式只支持xml
  2. 配置butterfly.yml

yaml

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

网站验证

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

配置butterfly.yml

yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:

# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
bing_site_verification:

# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
yandex_site_verification:

# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site/
baidu_site_verification:

# 360 Webmaster tools verification setting
# see http://zhanzhang.so.com/
qihu_site_verification:

分析统计

百度统计

  1. 登录百度统计的官方网站

  2. 找到你百度统计的统计代码
    ！

  3. 配置

    1
    butterfly.yml

    code

    1
    baidu_analytics: 你的代码 #只复制打码部分

谷歌统计

  1. 登录谷歌分析的官方网站
  2. 找到你的谷歌分析的追踪ID
  3. 配置butterfly.yml

yaml

1
google_analytics: 你的代码 # 通常以'UA_'打头

Mathjax

建议使用KaTex获得更好的效果，下文有介绍!

配置butterfly.yml:

yaml

1
2
3
mathjax:
  enable: true # or false
  cdn: https://cdn.bootcss.com/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML # required

然后你需要修改一下默认的markdown渲染引擎来实现MathJax的效果。

查看:hexo-renderer-kramed

以下操作在你hexo博客的目录下(不是Butterfly的目录!):
img
效果:
img

首先禁用MathJax(如果你配置过MathJax的话)，然后修改你的butterfly.yml以便加载katex.min.css:

yaml

1
2
3
4
katex:
  enable: true
  cdn: 
    css: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css

你不需要添加katex.min.js来渲染数学方程。相应的你需要卸载你之前的hexo的markdown渲染器以及hexo-math，然后安装新的hexo-renderer-markdown-it-plus:

yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
# 替换 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json里找到hexo的markdwon渲染器，并将其卸载
npm un hexo-renderer-marked --save

# or

npm un hexo-renderer-kramed --save

# 卸载 `hexo-math`
npm un hexo-math --save

# 然后安装 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

注意到hexo-renderer-markdown-it-plus已经无人持续维护，所以我们使用@upupming/hexo-renderer-markdown-it-plus。这份fork的代码使用了@neilsustc/markdown-it-katex同时它也是VSCode的插件Markdown All in One所使用的，所以我们可以获得最新的KaTex功能例如\tag{}。

你还可以通过@neilsustc/markdown-it0katex控制KaTex的设置，所有可配置的选项参见https://katex.org/docs/options.html。比如你想要禁用掉KaTex在命令行上输出的宂长的警告信息，你可以在根目录的`_config.yml`中使用下面的配置将`strict`设置为flase:

yaml

1
2
3
4
5
6
7
markdown_it_plus:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      enable: true
      options:
        strict: false

当然，你还可以利用这个特征性来定义一些自己常用的额macros.

因为KaTex更快更轻量，因此没有MathJax的功能多(比如右键菜单)。为那些使用MathJax的用户，我们也为KaTex默认添加了Copy As TeX Code的功能。
img

美化/特效

自定义主题色

可以修改大部分UI颜色

配置butterfly.yml，比如:

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

yaml

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'

网站背景

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

配置butterfly.yml

yaml

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

footer背景

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

配置butterfly.yml

yaml

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

打字特效

打字特效activate-power-mode

配置butterfly.yml

yaml

1
2
activate_power_mode:
  enable: true

禁止彩带

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

配置butterfly.yml

yaml

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

相关配置可查看canvas_ribbon

动态彩带

yaml

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

配置butterfly.yml

yaml

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

yaml

1
2
fireworks:
  enable: true

爱心

配置butterfly.yml

yaml

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

文字

配置butterfly.yml

yaml

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

yaml

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

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

自定义字体

可自行设置字体的font-family

配置butterfly.yml

yaml

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

网站副标题

适用于版本号>=V1.2.0

V2.0.0开始增加一些第三方api调用

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

配置butterfly.yml

yaml

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
  # (如果有英文逗号' , '，请使用转义字符 ,)
  sub: #以下是自定义语句
    - 一开始我就输了
    - 我是算命的，你算什么东西

top_img显示大小

适用于版本号>=V1.2.0

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

yaml

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个都不填的话会使用默认值

举例 当

yaml

1
2
index_site_info_top: 40%
index_top_img_height: 400px

PWA

要为Butterfly配上PWA特性，你需要如下几个步骤：

  1. 打开hexo工作目录

  2. nmp install hexo-offline --save或者yarn add hexo-offline

  3. 修改

    1
    _config.yml

    在站点

    1
    _config.yml

    中增加以下内容。

yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# offline config passed to sw-precache.
offline:
  maximumFileSizeToCacheInBytes: 10485760 # 缓存的最大文件大小，以字节为单位
  staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}
  # 静态文件合集，如果你的站点使用了例如webp格式的文件，请将文件类型添加进去。
  stripPrefix: public
  verbose: true
  runtimeCaching:
    # CDNs - should be cacheFirst, since they should be used specific versions so should not change
    - urlPattern: /* # 如果你需要加载CDN资源，请配置该选项，如果没有，可以不配置。
      handler: cacheFirst
      options:
        origin: your_websie_url # 可替换成你的 url

更多内容请查看

hexo-offline

的官方文档

  1. 在

    1
    butterfly.yml

    中开启pwa选项。

yaml

1
2
3
4
5
6
7
8
pwa:
  enable: true
  manifest: /img/pwa/manifest.json
  theme_color: "#fff"
  apple_touch_icon: /img/pwa/apple-touch-icon.png
  favicon_32_32: /img/pwa/32.png
  favicon_16_16: /img/pwa/16.png
  mask_icon: /img/pwa/safari-pinned-tab.svg

  1. 在创建

    1
    source/

    目录中创建

    1
    manifest.json

    文件。

json

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
{
    "name": "string", //应用全称
    "short_name": "Junzhou", //应用简称
    "theme_color": "#49b1f5", //匹配浏览器的地址栏颜色
    "background_color": "#49b1f5",//加载应用时的背景色
    "display": "standalone",//首选显示模式 其他选项有：fullscreen,minimal-ui,browser
    "scope": "/",
    "start_url": "/",
    "icons": [ //该数组指定icons图标参数，用来时适配不同设备（需为png，至少包含一个192px*192px的图标）
        {
          "src": "images/pwaicons/36.png", //图标文件的目录，需在source/目录下自行创建。
          "sizes": "36x36",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/48.png",
          "sizes": "48x48",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
      ],
      "splash_pages": null //配置自定义启动动画。
  }

你也可以通过

Web App Nabufest

快速创建

1
manifest.json

。(Web App Manifest要求至少包含一个512*512像素的图标）

  1. 可以通过

    1
    Chrome

    插件

    1
    Lighthouse

    检查PWA配置是否生效以及配置是否正确。

    • 打开博客页面
    • 启动Lighthouse插件(Lighthouse插件要求至少包含一个512*512像素的图标)
      关于PWA(渐进式增强Web应用)的更多内容请参阅Google Tools for Web Developers

字数统计

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

  1. 打开hexo工作目录
  2. npm install hexo-wordcount --saveoryarn add hexo-wordcount
  3. 配置butterfly.yml

yaml

1
2
wordcount:
  enable: true

image-20200809195055098

文章置顶

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

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

举个例子：

你的莫篇文章开头如下:

markdown

1
2
3
4
5
6
title: xxx
tags: 
    - xxx
date: 2019-12-1 00:00:00
---
// ...

现在把top: true加进去:

markdown

1
2
3
4
5
6
7
title: xxx
tags: 
    - xxx
date: 2019-12-1 00:00:00
top: True
---
// ...

图片大图查看模式

默认为fancybox，可以选择改为medium_zoom

配置butterfly.yml

yaml

1
2
medium_zoom:
  enable: true

Snackbar弹窗

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

配置butterfly.yml

yaml

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

绑定个人域名

申请对应的域名并绑定到Github和Coding上，可以查看该博文

https://www.cnblogs.com/milovetingting/p/12159100.html

地球

注册账号

官网 clustrmaps.com 也是第三方的，有Google Docs账号可以直接登录，Sign up即可，科学上网这里不教。
注册之后，在官网找到 Website Widget，如图。
在这里插入图片描述

我喜欢Globe widget，请自行选择。
在这里插入图片描述
点击select就可以看到信息了，我这里用的博客里用的js版，复制到你的博客就好了。

配置文件

我在butterfly（pug）的侧边栏引入的，next可以同理规划；sakura（ejs）更简单，直接贴js或html代码

  1. 在主题配置声明一个侧边栏给地图显示
    文件：source\_data\butterfly.yml

    在aside: 字段下添加

    1
    card_maps: true

先在加载框添加一条card_maps的声明，（主题控制是否显示这个界面元素）
修改添加：themes\Butterfly\layout\includes\widget\index.pug

1
2
if theme.aside.card_maps
       !=partial('includes/widget/card_maps', {}, {cache:theme.fragment_cache})

然后，新建 一个页面元素：themes\Butterfly\layout\includes\widget\card_maps.pug
复制下面的pug格式样式，将url_for改为你之前申请的，例如我的是：

1
<script type="text/javascript" id="clstr_globe" src="//cdn.clustrmaps.com/globe.js?d=0pAHW6anrierwVkDn2noQLY7_BJegnXt2KYvXQ6Tuu4"></script>