遇到任何问题，优先在本页面搜索，看看是否已经有该配置教程；
不懂得可以百度或者 Google；
还有弄不明白的可以在本站点留言，或添加站长 Wechat、QQ 等

文档目录

环境准备
搭建基础
主题配置
主题优化 - 添加 PWA
自动部署

这是一个采用 Material Design 和响应式设计的 Hexo 博客主题。

前言

阅读本篇前，请确保你已经能够自己在 GitHub Pages 上搭建一个属于自己的初始化博客了。

本篇是关于 matery 主题的一个介绍和配置教程！Demo:https://crawlmkt.github.io/

阅读完本篇，你的博客基本上已经完全可以使用了。如果有不清楚的地方，也可以阅读本系列后面的文章，或者留言提问，也可以加我微信或 QQ。

效果截图

首页

首页推荐文章

首页文章列表

关于页面

文章详细页

博客特性

  • 简单漂亮，文章内容美观易读
  • Material Design 设计
  • 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页轮播文章及每天动态切换 Banner 图片
  • 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
  • 时间轴式的归档页
  • 词云的标签页和雷达图的分类页
  • 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能等）
  • 可自定义的数据的友情链接页面
  • 支持文章置顶和文章打赏
  • 支持 MathJax
  • TOC 目录
  • 可设置复制文章内容时追加版权信息
  • 可设置阅读文章时做密码验证
  • Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
  • 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
  • 支持在首页的音乐播放和视频播放功能
  • 绚丽彩虹播放器
  • 全站支持 PWA
  • 看板娘
  • 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
  • 支持 DaoVoice、Tidio 在线聊天功能。
  • 支持 jsdelivr CDN 加速

使用教程

当你看到这里的时候，应该已经有一个自己的 Hexo 博客了。如果还没有的话，不妨使用 Hexo 和 Markdown 来写博客和文章。

  • 第一步，点击这里 下载博客源码到本地
  • 第二步，安装 npm 依赖包
  • 第三步，修改下面的配置，DIY 你的个人博客
  • 第四步，部署 Hexo 博客到 GitHub 上

安装 npm 依赖包

下载博客源码后，进入项目根目录安装 npm 依赖包

1
npm install

检测 hexo 版本

1
hexo --version

输出内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo: 4.1.1
hexo-cli: 3.1.0
os: Windows_NT 10.0.18363 win32 x64
node: 13.5.0
v8: 7.9.317.25-node.23
uv: 1.34.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 79
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.1
openssl: 1.1.1d
cldr: 36.0
icu: 65.1
tz: 2019c
unicode: 12.1

查看 hexo 版本，如果不是 hexo: 4.1.1 请运行如下命令

1
npm i hexo@4.1.1

因为 hexo 版本问题会导致博客运行报错

配置清单

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：

  • 博客基本信息

    • 标题
    • 副标题
    • 简介
    • 关键词
    • 作者
    • url
    • favicon
    • Logo

  • 菜单栏

    • 基本菜单信息
    • 二级菜单配置
    • 手机二级菜单

  • 博客首页的配置

    • 首页壁纸
    • 菜单栏右侧 Fork Me 配置
    • 轮播图配置
    • 轮播图中的第二个按钮配置
    • 个人信息
    • 首页语句
    • 首页音乐播放器
    • 首页视频播放器
    • 首页推荐文章名称和按钮配置
    • 博客分页
    • 网站显示的日期格式
    • 博客页脚信息

  • 博客文章页配置

    • 文章基本信息
    • 文章字数统计
    • TOC 目录
    • 文章打赏信息
    • 复制文章内容时追加版权信息
    • MathJax
    • 配置 emoji 表情
    • 转载限制配置
    • 文章阅读密码
    • 文章分享模块

  • 博客关于页配置

    • 个人信息
    • 项目信息
    • 技能信息

  • 博客留言板配置

    • Gitalk
    • Gitment
    • Disqus
    • Livere
    • Valine
    • miniValine

  • 博客友链的配置

  • 博客搜索的配置

  • 博客特效的配置

    • 单机页面爱心效果
    • 背景 Canvas-nest

  • 博客统计的配置

    • 不蒜子
    • Google Analytics
    • Baidu Analytics
    • 站长之家

  • 博客其他功能配置

    • jsdelivr 加速
    • 是否每日切换背景（首页背景）
    • 图片懒加载
    • 网页预加载
    • 在线聊天功能
    • 绚丽彩虹播放器
    • 博客导流公众号
    • 豆瓣书单影单
    • 博客看板娘

  • 博客添加 PWA 功能

  • 博客其他样式配置

    • 修改主题颜色
    • 修改 banner 图和文章特色图
      默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

修改博客基本信息

配置博客基本信息

  • title：网站的标题
  • subtitle：网站副标题，默认打字效果
  • description: 网站简介
  • keywords：便于搜索引擎收录，分类
  • author：网站作者
  • url：你的网站主 URL（如：https://xxx.github.io）,如果你后期绑定了自己的域名，切记修改成你的域名。
  • favicon：favicon 就是站点标签栏的小图标，选择新的图标文件覆盖即可，文件位置：themes/matery/source/favicon.ico
  • logo：网站的 Logo 选择新的图标文件覆盖即可，文件位置：themes/matery/source/apple-touch-icon.png

配置网站文章链接格式

hexo-abbrlink 插件 可以生成非中文的链接。

插件作用：自动为每篇文章生成一串数字作每篇文章的 URI 地址。每篇文章的 Front-matter 中会自动增加一个配置项：abbrlink: xxxxx，该项的值就是当前文章的 URI 地址。

执行安装命令：

1
npm install hexo-abbrlink --save

修改以下配置：

1
2
3
4
permalink: posts/:abbrlink.html   # 此处可以自己设置，也可以直接使用 :abbrlink.html
abbrlink:
  alg: crc16                      # 算法选项： crc16(default) and crc32
  rep: dec                        # 输出进制： dec(default) and hex

这样站点结构就变成了：域名/posts/xxx.html

修改博客菜单栏配置

配置基本菜单导航信息

  1. 菜单导航名称可以是中文也可以是英文(如：Index 或主页)
  2. 图标 icon 可以在 Font Awesome 中查找 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
menu:
  Index:
    url: /
    icon: fa-home
  Tags:
    url: /tags
    icon: fa-tags
  Categories:
    url: /categories
    icon: fa-bookmark
  Archives:
    url: /archives
    icon: fa-archive
  About:
    url: /about
    icon: fa-user-circle-o
  Contact:
    url: /contact
    icon: fa-envelope
  Friends:
    url: /friends
    icon: fa-address-book

二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作

  1. 在需要添加二级菜单的一级菜单下添加 children 关键字(如：Media 菜单下添加 children)
  2. 在 children 下创建二级菜单的 名称 name,路径 url 和图标 icon.
  3. 注意每个二级菜单模块前要加 -.
  4. 注意缩进格式 
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
menu:
  Index:
    url: /
    icon: fa-home
  Tags:
    url: /tags
    icon: fa-tags
  Categories:
    url: /categories
    icon: fa-bookmark
  Archives:
    url: /archives
    icon: fa-archive
  
  About:
    url: /about
    icon: fa-user-circle-o
  Contact:
    url: /contact
    icon: fa-envelope
  Friends:
    url: /friends
    icon: fa-address-book
  Media:
    #    url: /
    icon: fa-list
    children:
      - name: 影单
        url: /movies
        icon: fa-film
      - name: 书单
        url: /books
        icon: fa-book

手机二级菜单配置

1
2
3
navMenu:
  mleft: true    #  二级侧栏子菜单是否对齐左边
  bgColor: " "   #  二级侧栏子菜单背景颜色,留空即为全局背景色

修改博客首页的配置

菜单栏最右侧是否显示 fork me on github 的图标

默认为 true，你可以修改为你的仓库地址. 

1
2
3
4
githubLink:
  enable: true                                   # 是否开启
  url: https://github.com/sitoi/sitoi.github.io  # GitHub 仓库地址
  title: Fork Me                                 # 显示文字

首页轮播图相关配置

1
2
3
4
5
6
cover:
  showPrevNext: false     # 是否显示左右切换按钮
  showIndicators: false   # 是否显示指示器
  autoLoop: false         # 是否自动轮播
  duration: 120           # 切换延迟时间，默认单位 秒
  intervalTime: 5000      # 自动切换下一张的间隔时间

首页轮播图中第二个按钮配置

首页 banner 中的第二个按钮的配置，包括按钮的显示名称、font awesome图标和按钮的超链接.

1
2
3
4
5
indexbtn:
  enable: true                     # 是否启动第二个按钮
  name: Github                     # 按钮名称
  icon: fa-github-alt              # 按钮图标
  url: https://github.com/Sitoi/   # 按钮超链接

首页轮播图中的个人信息

首页轮播图中、页脚、以及关于页面都会出现的个人信息，留空即不启用

1
2
3
4
5
6
7
8
9
10
11
socialLink:
  qq: 1333397418               # QQ
  github: Sitoi                # GitHub
  facebook:                    # Facebook
  twitter:                     # Twitter
  weibo:                       # Weibo
  email: 133397418@qq.com      # 邮箱
  zhihu:                       # 知乎
  jianshu: 0289c6c3a717        # 简书
  rss: true                    # RSS 订阅       true 表示启动、false 表示关闭
  wechat: true                 # 微信好友二维码  true 表示启动、false 表示关闭

除 rss 和 wechat 外，其他的都需填写对应的信息即可

RSS 订阅

基于 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

1
npm install hexo-generator-feed --save

微信好友二维码

需要修改微信二维码的图片，图片位置：themes/matery/source/wechat.jpg

配置首页语句

1
2
3
4
5
dream:
  enable: true                                 # 是否开启
  showTitle: false                             # 是都显示标题
  title: 我的梦想                               # 标题内容
  text: 放弃不难，但坚持一定很酷。——《解忧杂货铺》 # 梦想语句

配置首页音乐

要支持音乐播放，就必须开启音乐的播放配置和音乐数据的文件。

首先，在你的博客 source 目录下的 _data 目录（没有的话就新建一个）中新建 musics.json 文件，文件内容如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[{
	"name": "五月雨变奏电音",
	"artist": "AnimeVibe",
	"url": "http://xxx.com/music1.mp3",
	"cover": "http://xxx.com/music-cover1.png"
}, {
	"name": "Take me hand",
	"artist": "DAISHI DANCE,Cecile Corbel",
	"url": "/medias/music/music2.mp3",
	"cover": "/medias/music/cover2.png"
}, {
	"name": "Shape of You",
	"artist": "J.Fla",
	"url": "http://xxx.com/music3.mp3",
	"cover": "http://xxx.com/music-cover3.png"
}]

注：以上 JSON 中的属性：name、artist、url、cover 分别表示音乐的名称、作者、音乐文件地址、音乐封面。

然后，在 _config.yml 配置文件中激活配置即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
music:
  enable: false                 # 是否开启
  showTitle: false              # 是否显示标题
  title: 听听音乐                # 标题内容
  fixed: false                  # 开启吸底模式
  autoplay: true                # 是否自动播放
  theme: '#542674'              # 颜色
  loop: 'all'                   # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'list'                 # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'               # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7                   # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: false             # 列表默认折叠
  listMaxHeight: "197px"        # 列表最大高度

配置首页视频

1
2
3
4
5
6
7
8
9
10
11
12
13
video:
  enable: false                                           # 是否开启视频
  showTitle: false                                        # 是否显示标题
  title: 治愈视频                                          # 标题内容
  url: https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 # 视频超链接
  pic:                                                    # 图片超链接 
  thumbnails:                                             
  height:                                                 # 高度
  autoplay: false                                         # 是否自动播放
  theme: '#42b983'                                        # 颜色
  loop: true                                              # 是否循环播放
  preload: 'auto'                                         # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7                                             # 音量大小

配置推荐文章

1
2
recommend:
  showTitle: true  # 是否显示推荐文章的标题

配置博客分页

1
2
3
4
index_generator:
  order_by: -date       # 排序设置 （默认按日期降序排列）
per_page: 12           # 分页，每页文章数目
pagination_dir: page   # 分页目录
  • per_page：推荐使用 3 的倍数，3，6，9，12… 设置为 0 表示不分页，以瀑布流的形式展示

配置网站显示日期的格式

1
2
date_format: YYYY-MM-DD     # 日期格式
time_format: HH:mm:ss       # 时间格式

配置页脚信息

页脚总字数统计，激活前请确认你已经安装了 hexo-wordcount 插件，安装命令: npm i --save hexo-wordcount

1
2
totalCount:
  enable: true

站点运行开始时间配置

1
2
3
4
5
6
7
8
time:
  enable: true  # 是否启动
  year: 2018    # 年份
  month: 09     # 月份
  date: 24      # 日期
  hour: 00      # 小时
  minute: 00    # 分钟
  second: 00    # 秒

ICP 备案信息页脚显示

1
2
3
4
5
icp:
  enable: true                   # 是否启动备案信息
  url: http://beian.miit.gov.cn/ # 备案链接
  text: 沪ICP备xxxxxxxxx号        # 备案信息
  icon: /medias/icp.png          # 图标

修改博客文章页配置

配置文章基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new_post_name: :title.md   # 新文章的文件名称
default_layout: post       # 预设布局
auto_spacing: false        # 在中文和英文之间加入空格
titlecase: false           # 把标题转换为 title case
external_link:             # 在新标签中打开链接
  enable: true             # 在新标签中打开链接
  field:                   # 对整个网站（site）生效或仅对文章（post）生效
  exclude:                 # 需要排除的域名。主域名和子域名如 www 需分别配置	[]
filename_case: 0           # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false       # 显示草稿，默认为：false
post_asset_folder: true    # 启动 Asset 文件夹
relative_link: false       # 把链接改为与根目录的相对位址
future: true               # 显示未来的文章
highlight:                 # 代码块的设置
  enable: false            # 开启代码块高亮
  line_number: false       # 显示行数
  auto_detect: false       # 如果未指定语言，则启用自动检测
  tab_replace:             # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs

配置代码高亮及样式

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

1
npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

1
2
3
4
5
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

配置代码的样式

1
2
3
4
5
code:
  lang: true     # 代码块是否显示名称
  copy: true     # 代码块是否可复制
  shrink: false  # 代码块是否可以收缩
  break: false   # 代码是否折行

修改文章字数统计

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount 插件。

安装命令如下：

1
npm i --save hexo-wordcount
1
2
3
4
5
6
postInfo:
  date: true        # 发布日期
  update: true      # 更新日期
  wordCount: true   # 文章字数统计
  min2read: true    # 文章阅读时长
  readCount: false  # 文章阅读次数

配置文章 TOC 功能

是否激活文章 TOC 功能，并配置 TOC 支持选中哪些标题类型，这是全局配置。
可以在某篇文章的 Front-matter 中再加上 toc: false，使该篇文章关闭 TOC 目录功能

1
2
3
4
toc:
  enable: true
  heading: h2, h3, h4, h5
  showToggleBtn: true       # 是否显示切换TOC目录展开收缩的按钮

配置文章末尾打赏功能

默认激活（请替换为的你自己的微信、支付宝二维码图片、或者使用网络图片也可以）

1
2
3
4
5
reward:
  enable: true                        # 是否开启打赏
  title: 你的赏识是我前进的动力!        # 打赏标题
  wechat: /medias/reward/wechat.jpg   # 微信打赏二维码路径
  alipay: /medias/reward/alipay.jpg   # 支付宝打赏二维码路径

配置复制追加版权信息

是否激活复制文章时追加博客和作者的版权信息。

1
2
3
4
copyright:
  enable: false
  minCharNumber: 120         # 至少复制多少个字符就追加版权信息.
  description: 本文章著作权归作者所有，任何形式的转载都请注明出处。

配置 mathjax 数学公式

是否激活 mathjax 数学公式，这是全局配置，但文章仍然不会都开启 mathjax 渲染，考虑到 mathjax 加载比较耗时，你还需要在需要渲染的文章的 Front-matter 中再加上 mathjax: true 才行。

1
2
3
mathjax:
  enable: true
  cdn: https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML

配置 emoji 表情支持

本主题新增了对 emoji 表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

1
npm install hexo-filter-github-emojis --save
1
2
3
4
5
6
githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

配置是否启用转载限制模块

1
2
3
reprint:
  enable: false   #是否启用“转载规则限定模块”
  default: cc_by

文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

配置文章阅读密码功能

阅读文章的密码验证功能，如要使用此功能请激活该配置项，并在对应文章的 Front-matter 中写上 password 的键和加密后的密文即可。

请注意：为了保证密码原文不会被泄露到网页中，文章的密码必须是通过 SHA256 加密的，这样就不会被破解。

1
2
3
4
verifyPassword:
  enable: true
  promptMessage: 请输入访问本文章的密码
  errorMessage:  密码错误，将返回主页！

配置文章分享模块

sharejs 文章分享模块。

支持顺序，可选项目为 twitter, facebook, google, qq, qzone, wechat, weibo, douban, linkedin。

1
2
3
sharejs:
  enable: true
  sites: wechat,qq,weibo,twitter,facebook,linkedin

addthis 文章分享模块。

1
2
3
addthis:
  enable: false
  pubid:            #前往https://www.addthis.com/获取

修改博客关于页配置

配置关于页个人信息

在关于页面中配置个人信息，包括头像、职业和个人介绍.

1
2
3
4
profile:
  avatar: /medias/avatars/avatar.jpg    # 头像
  career: IIoT | Python 研发工程师       # 职业
  introduction: 活到老，学到老      # 个人介绍

配置关于页项目信息

在关于页面配置我的项目信息，如果你不需要这些信息则可以将其设置为不激活或者将其删除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
myProjects:
  enable: true
  data:
    private-network-ipfs:
      icon: fa-cubes
      iconBackground: 'linear-gradient(to bottom right, #29B6F6 0%, #1E88E5 100%)'
      url: https://github.com/Sitoi/private-network-ipfs
      desc: 利用 Docker 搭建 IPFS 私有网络
    scrapy-redis-sentinel:
      icon: fa-github
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/Sitoi/scrapy-redis-sentinel
      desc: scrapy-redis-sentinel 基于 scrapy-redis 的基础上 新增 哨兵（sentinel）连接模式 以及 集群（cluster）连接模式。
    SystemdClash:
      icon: fa-plane
      iconBackground: 'linear-gradient(to bottom right, #29B6F6 0%, #1E88E5 100%)'
      url: https://github.com/Sitoi/SystemdClash
      desc: Clash 以 systemd 服务的方式开机自启

配置关于页技能信息

在关于页面配置我的技能信息，如果你不需要这些信息则可以将其设置为不激活或者将其删除.

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
mySkills:
  enable: true
  data:
    Python:
      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
      percent: 80%
    Docker:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 80%
    OpneShift:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 70%
    Ambari:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 60%
    HDFS:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 65%
    Spark:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 60%
    Flask:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 80%
    MongoDB:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 70%
    MySQL:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 65%
    Vue:
      background: 'linear-gradient(to right, #FFEB3B 0%, #FFF176 100%)'
      percent: 35%

修改博客留言板配置

contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：

1
hexo new page "contact"

编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：

1
2
3
4
5
6
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---

/source/contact/index.md 中的 markdown 内容，回展示在留言板的页面上，例子如下：

1
2
3
4
5
6
7
8
9
10
11
---
title: contact
date: 2019-10-14 13:14:00
type: "contact"
layout: "contact"
---


## 畅所欲言
---
在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链，一起交流学习！

效果

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。
可同时开启多个留言板~

配置 Gitalk 评论模块

默认为不激活

1
2
3
4
5
6
7
8
9
gitalk:
  enable: false
  owner: sitoi
  repo: Sitoi.github.io
  oauth:
    clientId:
    clientSecret:
  admin:
    - sitoi

获取 clientId 和 clientSecret

首先，你得有一个Github账号（这个就不多说了吧），下面，打开 https://github.com/settings/applications/new，具体填法如下：

GitHub APP

  • Application name：应用名称，随便填
  • Homepage URL：没有过多要求，可以填自己的博客地址
  • Application description：应用描述，描述一下，无要求
  • Authorization callback URL：这个就有要求了，填自己要使用 Gitalk 的博客地址，不可乱填

接着，你就可以得到 Client ID 和 Client Secret

Client ID & Client Secret

进行配置，修改配置文件：

1
2
3
4
5
6
7
8
9
gitalk:
  enable: false
  owner: sitoi
  repo: Sitoi.github.io
  oauth:
    clientId:
    clientSecret:
  admin:
    - sitoi
  • enable：true # 指的是是否开启 Gitalk
  • owner：sitoi # 这个项目名的拥有者（GitHub账号或组织）
  • repo：Sitoi.github.io # 你要存放的项目名，下文会详细再说
  • clientId：xxxxxx # 之前的 Client ID
  • ClientSecret：xxxxxx # 之前的 Client Secret
  • admin：sitoi # 管理员用户，下文也会详细讲

repo：Gitalk 是基于 GitHub 的 issues 功能的，所以，你要为他建一个库或用现成的库，我个人建议新建一个，而 repo 就是你要用的库的名称。 比如，我就为 Gitalk 专门建了一个叫 gitalk 的库，所以在 repo: 处填 gitalk。

admin：即管理员帐号。如果你是个人账号，那么这里就填你的账户名和协作者的账户名。以数组形式。

配置 Gitment 评论模块

默认为不激活

1
2
3
4
5
6
7
gitment:
  enable: false
  owner:
  repo:
  oauth:
    clientId:
    clientSecret:

获取 clientId 和 clientSecret 教程和上文一样

配置 Disqus 评论模块

注册 Disqus 帐号

至 Disqus 首页注册账号并登录，接着点击首页的「GET STARTED」：

Disqus

选择「I want to install Disqus on my site」选项：

I want to install Disqus on my site

需要输入的栏目：

  • Websit Name：自定义 short name，且是唯一，像我是设置为 sitoi。short name 会在设置 Hexo 時需要
  • Category：类别，自行选择
  • Language：语言，自行选择
  • 填写后点击「Create Site」

Create Site

修改配置文件

1
2
3
disqus:
  enable: false
  shortname: sitoi      # 全部小写

配置 Livere 来必力评论模块

注册 LiveRe 获取 uid

进入 LiveRe，注册账号。

LiveRe 有两个版本：

  • City 版：是一款适合所有人使用的免费版本；
  • Premium 版：是一款能够帮助企业实现自动化管理的多功能收费版本。

我们 City 版就够了。

LiveRe

填写完成后，进入到 管理页面 -> 代码管理 -> 一般网站 代码中，data-uid 即为所需 uid。

修改配置文件

将获取到的 uid 填入对应的配置文件

1
2
3
livere:
  enable: false
  uid:

配置 Valine 评论模块的配置

获取 appId 和 appKey 请参考官方文档

默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey。

1
2
3
4
5
6
7
8
9
10
11
valine:
  enable: true
  appId: APP_ID
  appKey: APP_KEY
  notify: true
  verify: true
  visitor: true
  avatar: 'mm'               # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'just go go'  # Comment Box placeholder
  background: /medias/comment_bg.png

配置 miniValine 评论模块的配置

获取 appId 和 appKey 请参考官方文档

默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey。

1
2
3
4
5
6
7
8
9
10
11
12
13
minivaline:
  enable: true
  appId:  APP_ID
  appKey:  APP_KEY
  placeholder: 'just go go' # Comment box placeholder
  adminEmailMd5: # The MD5 of Admin Email to show Admin Flag.
  math: true # Support MathJax.
  md: true # Support Markdown.
  # MiniValine's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en  | zh-CN | (and many more)
  # More i18n info: https://github.com/MiniValine/minivaline-i18n
  lang: en

修改博客友链的配置

friends 页是用来展示友情连接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

1
hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

1
2
3
4
5
6
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[
  {
    "name": "Sitoi",
    "avatar": "https://sitoi.cn/medias/avatars/avatar.jpg",
    "url": "https://sitoi.cn/",
    "introduction": "活到老，学到老",
    "title": "访问主页"
  },
  {
    "name": "闪烁之狐",
    "avatar": "https://blinkfox.github.io/medias/avatar.jpg",
    "url": "https://blinkfox.github.io",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "title": "访问主页"
  },
  {
    "name": "Licardo",
    "avatar": "https://licardo.cn/medias/avatar.png",
    "url": "https://licardo.cn/",
    "introduction": "一个医学生的成才之路",
    "title": "访问主页"
  }
]

修改博客搜索的配置

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

1
npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
search:
  path: search.xml
  field: post

配置网站各种特效

单击页面爱心效果

1
2
clicklove:
  enable: true

背景 canvas-nest

1
2
3
4
5
6
7
canvas_nest:
  enable: false
  color: 0,0,255       #线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
  pointColor: 0,0,255  #交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
  opacity: 0.8         # 线条透明度（0~1）, 默认: 0.5
  zIndex: -1           # 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
  count: 150           # 线条的总数量, 默认: 99

配置网站统计功能

不蒜子统计

1
2
3
4
busuanziStatistics:
  enable: false
  totalTraffic: true # 总访问量
  totalNumberOfvisitors: true # 总人次

Google Analytics

至 Google Analytics 注册账号，获取 ID

1
2
3
googleAnalytics:
  enable: true
  id: GOOGLE_ID

Baidu Analytics

至 百度统计 注册账号，获取 ID

1
2
3
baiduAnalytics:
  enable: true
  id: BAIDU_ID

站长之家统计

登录并注册帐号

至 站长之家 注册账号，进入工作台

友盟

点击创建新应用，选择创建 Web 应用

创建应用

创建 WEB 应用，需要输入的栏目

  • 网站名称：输入你的网站名称
  • 网站域名：填入你汪涵的域名 例如：sitoi.cn
  • 网站首页：填写你网站的首页，注意 HTTP 还是 HTTPS
  • 网站类型：选择网站的类型
  • 网站地区：选择网站的地区
  • 网站简介：填写网站的简介
  • 点击确认添加站点

创建 WEB 应用

获取站长之家代码

  • 点击获取代码
  • 选择你喜欢的代码样式
  • 点击复制到剪贴板

统计代码

代码文件：themes/matery/layout/_partial/footer.ejs
代码行数：大约 28 ~ 34 行
代码内容如下：

1
2
3
4
5
6
7
<% if (theme.cnzz) { %>
    <script type="text/javascript">
        var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
        document.write(unescape("%3Cspan id='cnzz_stat_icon_1278109894'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1278109894%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <br>
<% } %>

替换里面的 <script>...</script> 为你复制的统计代码。

修改配置文件

将 配置文件中的 cnzz 设置为 true 表示启动，false 表示关闭

1
cnzz: true

配置 jsdelivr 加速

启动 jsdelivr 的 cdn 加速，只需要添加 jsdelivr url 地址即可，url 地址获取方式请参考 GitHub + jsDelivr + PicGo + Imagine 打造稳定快速、高效免费图床

默认不启动，填空。

1
2
3
jsDelivr:
  #  url: https://cdn.jsdelivr.net/gh/crawlmkt/crawlmkt.github.io
  url:

配置每日切换背景（首页背景）

banner 是否每日切换。若为 false, 则 banner 默认为 /medias/banner/0.jpg 

1
2
banner:
  enable: false

修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

修改对应的地址即可

1
2
3
4
5
6
7
8
9
10
<% if (theme.banner.enable) { %>
    <script>
        // 每天切换 banner 图.  Switch banner image every day.
        $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/' + new Date().getDay() + '.jpg') %>)');
    </script>
<% } else { %>
    <script>
        $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)');
    </script>
<% } %>

如果使用本地的图片，创建 /source/medias/banner 文件夹，添加图片，每个图片必须是jpg 结尾，使用数字进行编号，并需要在 _config.yml 做同步修改。

默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图。

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
featureImages:
  - /medias/featureimages/0.jpg
  - /medias/featureimages/1.jpg
  - /medias/featureimages/2.jpg
  - /medias/featureimages/3.jpg
  - /medias/featureimages/4.jpg
  - /medias/featureimages/5.jpg
  - /medias/featureimages/6.jpg
  - /medias/featureimages/7.jpg
  - /medias/featureimages/8.jpg
  - /medias/featureimages/9.jpg
  - /medias/featureimages/10.jpg
  - /medias/featureimages/11.jpg
  - /medias/featureimages/12.jpg
  - /medias/featureimages/13.jpg
  - /medias/featureimages/14.jpg
  - /medias/featureimages/15.jpg
  - /medias/featureimages/16.jpg
  - /medias/featureimages/17.jpg
  - /medias/featureimages/18.jpg
  - /medias/featureimages/19.jpg
  - /medias/featureimages/20.jpg
  - /medias/featureimages/21.jpg
  - /medias/featureimages/22.jpg
  - /medias/featureimages/23.jpg
  - /medias/featureimages/24.jpg

配置网页预加载

本主题整体采用预加载模式，预加载就是进入项目前提前加载资源，避免在项目中加载缓慢，影响用户体验,这样可以在我们访问其他页面的时候会稍微快点。

1
2
instantpage:
  enable: true

配置图片懒加载

懒加载一般是当图片滚动进可视窗口内才加载图片，可视窗口之外的图片则不加载

本主题图片进行懒加载，这样做效果就是 html、css、js 加载之后，图片再加载。既保证了网页的打开速度，也不会因图片的庞大体积而拖累了整个页面的加载。

1
2
3
4
lazyload:
  enable: false
  onlypost: true
  loadingImg: /medias/loading/orange.square-circle-preloader.svg

配置在线聊天功能

DaoVoice 在线聊天功能

前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。

1
2
3
daovoice:
  enable: false
  app_id:

Tidio 在线聊天功能

前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。

1
2
3
tidio:
  enable: false
  public_key:

配置绚丽彩虹播放器

致 绚丽彩虹播放器 注册并登录，播放器 Key

官方教程视频：https://www.bilibili.com/video/av8153459

1
2
3
badApplePlayer:
  enable: false   # 是否启动
  XlchKey: Sitoi  # 播放器 Key

配置博客看板娘

默认关闭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 看板娘配置
live2d:
  enable: false
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: left
    width: 150
    height: 200
  mobile:
    show: false
  react:
    opacity: 0.7

博客添加 PWA 功能

详细教程请阅读基于 Hexo GitHub 从零开始搭建个人博客（四）：让你的博客完美支持 PWA

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
pwa:
  manifest:
    path: /manifest.json
    body:
      name: Sitoi
      short_name: Sitoi
      theme_color: white
      background_color: white
      display: standalone
      orientation: portrait
      scope: /
      start_url: /
      icons:
        - src: /medias/logo_48.png
          type: image/png
          sizes: 48x48
        - src: /medias/logo_96.png
          type: image/png
          sizes: 96x96
        - src: /medias/logo_128.png
          type: image/png
          sizes: 128x128
        - src: /medias/logo_144.png
          type: image/png
          sizes: 144x144
        - src: /medias/logo_180.png
          type: image/png
          sizes: 180x180
        - src: /medias/logo_192.png
          type: image/png
          sizes: 192x192
        - src: /medias/logo_512.png
          type: image/png
          sizes: 512x512
        - src: /apple-touch-icon.png
          type: image/png
          sizes: 180x180
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 12
    opts:
      networkTimeoutSeconds: 30
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /www.google-analytics.com/
        strategy: networkOnly
      - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp /\//
        strategy: networkFirst
  priority: 5

PWA 适配苹果图标

1
appletouchicon: /apple-touch-icon.png

修改博客样式

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

1
2
3
4
5
6
7
8
9
10
11
12
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}

@keyframes rainbow {
    /* 动态切换背景颜色. */
}

文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项 默认值 描述
title Markdown 文件标题 文章标题，强烈建议填写此选项
date 文件创建时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局唯一
author 跟 _config.yml 中的 author 文章作者
img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
cover false 表示该文章是否需要加入到首页轮播封面中
coverImg 无 表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax false 是否开启数学公式支持，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags 无 文章标签，一篇文章可以多个标签
keywords 文章标题 文章关键字，SEO 时需要
reprintPolicy cc_by 文章转载规则，可以是 cc_by,cc_by_nd,cc_by_sa,cc_by_nc,cc_by_nc_nd,cc_by_nc_sa,cc0,noreprint 或 pay 中的一个

注意:

  1. 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
  2. date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
  3. 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
  4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例。

最简示例

1
2
3
4
---
title: 基于 Hexo GitHub 从零开始搭建个人博客
date: 2019-12-30 09:25:00
---

最全示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: 基于 Hexo GitHub 从零开始搭建个人博客
date: 2019-12-30 09:25:00
author: Sitoi
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Hexo
keywords: Hexo GitHub blog
tags:
  - Hexo
  - Blog
  - GitHub
---

本地运行预览

安装依赖包

运行如下命令：

1
npm i

启动 hexo 博客

运行如下命令：

1
hexo server

输出如下：

1
2
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

查看博客

打开浏览器，输入地址：http://localhost:4000/ 看到下面的效果，说明的你博客已经构建成功了

BLOG

部署到 GitHub Pages

登录 GitHub 打开你的项目，获取 GitHub ssh repo 地址，替换配置中的 repo github 的

1
2
3
4
5
6
# 自动部署配置
deploy:
  - type: git
    repo:
      github: git@github.com:Sitoi/Sitoi.github.io.git   # 修改这里为你项目的地址
    branch: master

运行 如下命令进行部署：

1
2
3
hexo clean
hexo generate
hexo deploy

部署成功 你就可以上你的网站查看效果啦。

参考

  1. https://hexo.io/zh-cn/

  2. https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/

  3. https://yafine-blog.cn/posts/4ab2.html