此处参考：http://locakhost:4000或者127.0.0.1:4000，可以看到一个网页，说明Hexo博客已经成功在本地运行。
1. 本地博客发布到Github Pages
之前的步骤中，我们已经完成了对Github账户的注册以及Github Pages的创建，接下来是将本地博客发布至Github Pages。
-
首先需要安装发布的插件，在站点目录下执行下面的命令，也就是创建的博客目录下：
npm install hexo-deployer-git --save
-
紧接着，将本地目录与GitHub关联起来，输入下面的命令行：
ssh-keygen -t rsa -C "你的邮箱地址"
输入后一直回车，然后在C:/Users/[username]目录下找到名为.ssh的文件夹， 文件夹内会有两个文件，一个id_rsa.pub一个id_rsa，用文本编辑器打开id_rsa.pub，复制里面的的内容。 然后打开Github，点击右上角的头像 Settings 选择SSH and GPG keys
点击New SSH key 将之前复制的内容粘帖到Key的框中。 上面的Title可以随意，点击Add SSH key 完成添加。
然后回到Git的命令行界面，测试一下是否与GitHub连接成功。输入下面的命令行：
ssh -T git@github.com
点击回车，然后会出现一个询问内容，输入yes，回车，会出现一段内容，Hi ! You've successfully authenticated, but GitHub doesnot provide shell access.。 说明连接成功。此处这个
-
进入博客站点目录，用文本编辑器打开_config.yml，这个_config.yml是博客的配置文件，在以后的博客修改，如个性化修改，博客SEO优化等都会使用到，修改如下图的几个地方：
title: 你的博客名
subtitle: 博客的副标题，有些主题支持
description: 博客描述
keywords: 博客关键词
author: 作者，在文章中显示
language: 博客语言语种
timezone: 时区
滑到文件最底部，有一个deploy，在deploy下面添加一个repo项 ，一个branch项。填入如下代码，并如下图所示：
type: git
repo: git@github.com:Github用户名/github用户名.github.io.git
//也可使用https地址，如：https://github.com/Github用户名/Github用户名.github.io.git
branch: master
-
最后就是生成页面，并发布至Github Pages，执行如下命令：
# Hexo会根据配置文件渲染出一套静态页面
hexo g
# 将上一步渲染出的一系列文件上传至至Github Pages
hexo d
# 也可以直接输入此命令，直接完成渲染和上传
hexo g -d
上传完成后，在浏览器中打开https://<用户名>.github.io，查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试。
五、hexo博客主题安装以及一些个性化修改
转自：????English Document | 演示示例 | QQ 交流群1（已满）: 926552981 | QQ 交流群2（推荐）: 971887688
这是一个采用 Material Design 和响应式设计的 Hexo 博客主题。
主题特性
-
简单漂亮，文章内容美观易读
-
Material Design 设计
-
响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
-
首页轮播文章及每天动态切换 Banner 图片
-
瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
-
时间轴式的归档页
-
词云的标签页和雷达图的分类页
-
丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
-
可自定义的数据的友情链接页面
-
支持文章置顶和文章打赏
-
支持 MathJax
-
TOC 目录
-
可设置复制文章内容时追加版权信息
-
可设置阅读文章时做密码验证
-
Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
-
集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
-
支持在首页的音乐播放和视频播放功能
-
支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
-
支持 DaoVoice、Tidio 在线聊天功能。
1. 主题下载与安装
点击 传送门 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。
当然你也可以在你的站点目录文件夹下使用 git clone 命令来下载：直接在站点根目录下执行下面的命令，即可进行主题的下载，主题有两个版本，稳定版本和最新版本(不定期更新优化)，自主选择版本。
git clone https://github.com/blinkfox/hexo-theme-matery themes/matery # 稳定版
git clone -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery #最新版(不定期进行优化更新)
2. 主题配置
2.1 切换主题
注意：首先需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在F:\blog下，那么站点配置文件就是F:\blog\_config.yml，主题配置文件就是F:\blog\themes\matery\_config.yml。
另外注意，配置文件中的标点符号不要出现中文格式的标点符号，不然运行会出错。
主题下载完成后，将站点配置文件中的theme值修改为你下载主题的文件名，此处为matery，那么值就修改为theme: matery。
一些站点配置文件的其他地方的修改：
-
语言选择：如果为中文用户，则在language:后添加值zh-CN，如果不修改，默认为英语；
-
网址修改：url:的值为你的网址名，如http://xxxx.github.io，如果有域名，则修改为你的域名即可，至于有关域名的修改解析，后面我会说到，这里先不说了。
-
站点配置文件有个per_page属性，建议修改为6的倍数，这样网站在适应设备时，有较好的显示效果。
2.2 新建标签 tags 页面
tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "tags"
编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
2.3 新建分类 categories 页面
categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "categories"
编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
2.4 新建关于我 about 页面
about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "about"
编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
2.5 新建留言板 contact 页面 (可选)
contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "contact"
编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---
注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。
2.6 新建友情链接 friends 页面 (可选)
friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "friends"
编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---
同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "码酱",
"introduction": "我不是大佬，只是在追寻大佬的脚步",
"url": "http://luokangyuan.com/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "闪烁之狐",
"introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
"url": "https://blinkfox.github.io/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "https://me.csdn.net/jlh912008548",
"title": "前去学习"
}]
2.7 菜单导航配置
2.7.1. 配置基本菜单导航的名称、路径url和图标icon.
-
菜单导航名称可以是中文也可以是英文(如：Index或主页)
-
图标icon 可以在Font Awesome 中查找
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book
2.7.2. 二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
-
在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
-
在children下创建二级菜单的 名称name,路径url和图标icon.
-
注意每个二级菜单模块前要加 -.
-
注意缩进格式
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle-o
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image
2.8 添加emoji表情支持（可选的）
本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：
npm install hexo-filter-github-emojis --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。
2.9 代码高亮
由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：
npm i -S hexo-prism-plugin
然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
2.10 搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
search:
path: search.xml
field: post
2.11 中文链接转拼音（可选的）
如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下：
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
permalink_pinyin:
enable: true
separator: '-' # default: '-'
注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。
2.12 文章字数统计插件（可选的）
如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。
安装命令如下：
npm i --save hexo-wordcount
然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可：
wordCount:
enable: false # 将这个值设置为 true 即可.
postWordCount: true
min2read: true
totalCount: true
2.13 添加 RSS 订阅支持（可选的）
本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：
npm install hexo-generator-feed --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。
2.14 添加 DaoVoice 在线聊天功能（可选的）
前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中
2.15 添加 Tidio 在线聊天功能（可选的）
前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。
2.16 修改页脚
页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。
2.17 修改社交链接
在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：
<% if (theme.socialLink.github) { %>
<% } %>
其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：
-
Facebook: fab fa-facebook
-
Twitter: fab fa-twitter
-
Google-plus: fab fa-google-plus
-
Linkedin: fab fa-linkedin
-
Tumblr: fab fa-tumblr
-
Medium: fab fa-medium
-
Slack: fab fa-slack
-
Sina Weibo: fab fa-weibo
-
Wechat: fab fa-weixin
-
QQ: fab fa-qq
-
Zhihu: fab fa-zhihu
注意: 本主题中使用的 Font Awesome 版本为 5.11.0。
2.18 修改打赏的二维码图片
在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。
2.19 配置音乐播放器（可选的）
要支持音乐播放，就必须开启音乐的播放配置和音乐数据的文件。
首先，在你的博客 source 目录下的 _data 目录（没有的话就新建一个）中新建 musics.json 文件，文件内容如下所示：
[{
"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 配置文件中激活配置即可：
# 是否在首页显示音乐.
music:
enable: true
showTitle: false
title: 听听音乐
fixed: false # 是否开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'list' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
listFolded: false # 列表默认折叠
listMaxHeight: # 列表最大高度
3. 文章 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 |
v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中 |
| coverImg |
无 |
v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片 |
| password |
无 |
文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 |
| toc |
true |
是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 |
| mathjax |
false |
是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行 |
| summary |
无 |
文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 |
| categories |
无 |
文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类 |
| tags |
无 |
文章标签，一篇文章可以多个标签 |
| 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 中的一个 |
注意:
-
如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
-
date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
-
如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
-
您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
以下为文章的 Front-matter 示例。
最简示例
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---
最全示例
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---
4. 效果截图
最新版本进行了优化更新，效果图与最初的效果图有差别，下面的图不是最新版本的。
5. 自定制修改
在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：
-
菜单
-
我的梦想
-
首页的音乐播放器和视频播放器配置
-
是否显示推荐文章名称和按钮配置
-
favicon 和 Logo
-
个人信息
-
TOC 目录
-
文章打赏信息
-
复制文章内容时追加版权信息
-
MathJax
-
文章字数统计、阅读时长
-
点击页面的’爱心’效果
-
我的项目
-
我的技能
-
我的相册
-
Gitalk、Gitment、Valine 和 disqus 评论配置
-
不蒜子统计和谷歌分析（Google Analytics）
-
默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图
我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：
5.1 修改主题颜色
在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}
5.2 修改 banner 图和文章特色图
你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。
如果想改为每小时或者每分钟切换banner图的话，需要将getDay()改为getHours()或者getMinutes()即可。
5.3 修改网站相关信息
首先看一个图，如下：
紧接着放上相关的配置文件信息：
-
网站信息的修改
#这是根目录下的配置文件信息
title: 过客~励む #这是网站标题
subtitle: 励む #这是网站副标题subtitler
# 下面两个description,keywords，需要填上，如果想让搜索引擎收录，这个做SEO优化必不可忽视的两个属性
description: 专注于Web,分享生活,分享知识 #网站描述
keywords: [HTML, CSS, JavaScript, JQuery, React, Vue.js等] #网站的关键词
author: YangAir #作者，文章版权所显示的
language: zh-CN #网站语言，不填写，默认为英文
timezone: #时区，可以不填写
# 这是主题配置文件的相关信息
# 配置网站favicon和网站LOGO
# 此处我用的CDN，也可以使用本地文件
favicon: https://cdn.jsdelivr.net/gh/Yafine/cdn@2.6/source/favicon.png
logo: https://cdn.jsdelivr.net/gh/Yafine/cdn@2.6/source/logo.png
# 网站副标题，打字效果
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
enable: true
loop: true # 是否循环
showCursor: true # 是否显示光标
startDelay: 300 # 开始延迟
typeSpeed: 100 # 打字速度
backSpeed: 50 # 删除速度
sub1: 志之所向，金石为开，谁能御之？
sub2: 花开不是为了花落，而是为了开的更加灿烂。
sub3: 没有伞的孩子必须努力奔跑！
sub4: 欲望以提升热忱，毅力以磨平高山。
sub5: 如果放弃太早，你永远都不知道自己会错过什么。
sub6: 没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生。
注意：
网站打字效果副标题默认有两个，即sub1和sub2，如果想写多个，则需要修改两处地方，首先修改配置文件，如上面所示，在sub1和sub2后面继续添加即可，然后在去主题目录下的layout文件夹下的_partial文件夹，修改bg-cover-content.ejs文件，大约在12行左右，如下面所示：
<% if (theme.subtitle.enable) { %>
<% } else { %>
<%= config.description %>
<% } %>
-
社交链接的修改
默认的配置信息为：
# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
github: https://github.com/blinkfox
email: 1181062873@qq.com
facebook: # https://www.facebook.com/xxx
twitter: # https://twitter.com/xxx
qq: 1181062873
weibo: # https://weibo.com/xxx
zhihu: # https://www.zhihu.com/xxx
rss: true # true、false
如果想添加简书，CSDN，掘金，博客园等等，需要在主题配置文件添加相关配置，如下是我个人的配置：
socialLink:
qq: 1035800145
weixin: https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/wechat.png
github: https://github.com/Yafine
email: mailto:1035800145@qq.com
facebook: # https://www.facebook.com/xxx
twitter: # https://twitter.com/xxx
weibo: # https://weibo.com/xxx
zhihu: https://www.zhihu.com/people/xuan-tian-40-64/activities
juejin: https://juejin.im/user/5a902053f265da4e7527ae71/activities
csdn: https://blog.csdn.net/victoryxa
jianshu: https://www.jianshu.com/u/3b3856869772
cnblogs: https://www.cnblogs.com/yafine/
rss: true # true、false
其中的weixin我是用的图片链接，会跳转到一个新的标签页，之后还需要修改ejs文件，文件在主题目录下的layout文件夹下的_partial文件夹，修改social-link.ejs，添加相关的配置，我个人添加的配置如下：
<% if (theme.socialLink.jianshu) { %>
简
<% } %>
<% if (theme.socialLink.csdn) { %>
C
<% } %>
<% if (theme.socialLink.juejin) { %>
掘
<% } %>
<% if (theme.socialLink.cnblogs) { %>
博
<% } %>
<% if (theme.socialLink.weixin) { %>
<% } %>
6. 版本记录
-
v1.2.2
-
新增了自定义文章 keywords 的功能；
-
新增静态彩带点击切换的功能和配置；
-
将文章字数统计、彩带和站点运行时间等功能默认设置为 false；
-
修改了文章的 description 的 meta 属性优先读取文章的 summary 属性；
-
修改了文章标题的 HTML 标签，从 div 改成了 h1 标题；
-
修改了页脚年份显示不正确的问题；
-
去掉了站点运行时间中多余的 setTimeout 代码；
-
v1.2.1
-
新增了 TOC 的展开目录层级设置和滚动条功能，防止目录较多的时候目录溢出；
-
修改了首页的展示方式为以前的模式；
-
修复首页按钮没有边框的问题；
-
修复了音乐及吸底模式、视频、推荐文章等不激活时仍然生成首页卡片的问题；
-
修复 wordCount 插件未安装的问题，修改了部分配置；
-
修复音乐的 JSON 配置中有单引号的情况页面不显示的音乐的问题
-
修复标签云在Hexo4.0下链接失效的问题；
-
v1.2.0
-
新增了 DaoVoice、Tidio 的在线聊天功能；
-
新增了两级菜单的功能；
-
新增了打字效果的副标题；
-
新增了网页内容预加载的功能；
-
新增了首页 banner 是否每日切换的配置功能；
-
新增了显示 ICP 备案信息的功能，默认未开启；
-
新增了百度分析的配置；
-
新增了代码块的语言显示、一键复制、显示行号等功能；
-
新增了首页轮播图和推荐文章可自定义配置的功能；
-
新增了文章页面显示更新日期；
-
新增了转载规则的图标；
-
修改了分享的布局和显示方式；
-
升级更新了部分依赖库的版本；
-
其他细节修改和优化；
-
v1.1.0
-
v1.0.4
-
v1.0.3
-
v1.0.2
-
升级了 Materialize 框架版本为1.0.0，重构和修改了升级过程中的部分文件或问题；
-
新增了首页封面的全屏轮播特效，可以将更重要的文章设置到首页轮播中；
-
修复首页第一个按钮是中文的问题
-
修复了 iPhone 上点击搜索输入获取焦点的问题；
-
修复了 iPhone 上输入框获取焦点后页面放大的问题；
-
修复一些文章或 UI 显示问题；
-
v1.0.1
-
调整 css、js 的文件请求路径在主题的_config.yml中配置，便于你更快捷的配置自己的 CDN；
-
新增代码是否折行为可配置，默认为折行；
-
默认激活 TOC 功能，并新增为某篇文章关闭 TOC 的 Front-matter 配置选项；
-
修复文章滚动时，高亮的目录选项不准确的问题；
-
IOS下移除搜索框自动获得焦点属性，防止自动获得焦点后导致视图上移；
-
v1.0.0
六、其他一些DIY(可选)
主题DIY会涉及到js文件和css文件等的修改，个人建议新增的js文件放在themes/matery/layout/layout.ejs这个文件下，这样会稍微加快博客访问的速度。不想花钱?最好的方式是使用cdn.jsdeliver。以后会说到。
1. 动态标题
先放上效果图再说：
实现方法，引入js文件，在主题文件下的/source/js/下新建FunnyTitle.js，然后在添加到themes/matery/layout/layout.ejs或者添加到themes/matery/layout/_partial/head.ejs，其代码如下：
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png");
document.title = 'ヽ(●-`Д′-)ノ你要玩捉迷藏嘛';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png");
document.title = 'ヾ(???3)ノ好哦！' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
我的链接：https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/FunnyTitle.js（理论上一直有效）
或者直接在themes/matery/layout/layout.ejs文件中添加如下代码：
2. 修改导航栏颜色以及透明效果
打开themes/matery/source/css/matery.css文件，大约在250行，有一个.bg-color属性，修改其属性值即可，代码如下：
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值
opacity: 0.8; //透明效果 值范围 0~1，看情况自己修改
}
3. 添加动态诗词
采用的是今日诗词，每次返回一句诗词，根据时间、地点、天气、事件智能推荐。官网有API文档，可以去看一下，有多种安装方式，最简单的方式就是从官网获取代码，在/themes/matery/layout/_partial/head.ejs添加下面的一行代码：
然后再将/themes/matery/layout/_partial/bg-cover-content.ejs中的<%= config.description %>修改为把<%= config.description %>改为<%- '正在加载今日诗词....' %>，这个使用前提是将主题配置文件的subtitle的值改为false。
4. 鼠标点击文字特效
实现方法，引入js文件，在主题文件下的/source/js/下新建click_show_text.js，其代码如下：
var a_idx = 0;
jQuery(document).ready(function ($) {
$("body").click(function (e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var $i = $("").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 5,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#FF0000"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function () {
$i.remove();
});
});
setTimeout('delay()', 2000);
});
function delay() {
$(".buryit").removeAttr("onclick");
}
或者使用我的cdn链接，理论上一直有效https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/click_show_text.js，然后在添加到themes/matery/layout/layout.ejs。
5. 修改原有相册
参考教程：传送门
6. 添加天气小插件
首先去中国天气官网：https://cj.weather.com.cn/plugin/pc，配置自己的插件，选择自定义插件—>自定义样式——>生成代码，然后会生成一段代码，复制粘贴到 themes/matery/layout/layout.ejs即可。
7. 关于我页面添加个人简历
打开theme/matery/layout/about.ejs文件，大约在13行。有一个标签，找出其对应结尾的标签，大约在61行左右，然后在新增如下代码：
<%- __('个人简历') %>
<%- page.content %>
注意粘贴的位置和空格要正确，这里的位置随你自己设置，你也可以把简历作为第一个card，然后/source/about/index.md下面写上你的简历了（就像写博客一样）。
8. 豆瓣书单电影页面
-
首先在博客站点目录执行下面的命令安装豆瓣插件：
npm install hexo-douban --save
-
紧接着在博客站点目录的配置文件_config.yml下，添加如下配置：
douban:
user: 252345665 #这个需要修改为你个人的id
builtin: false #如果想生成豆瓣页面，这个需要设置为true
book:
title: 'This is my book title'
quote: 'This is my book quote'
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
game:
title: 'This is my game title'
quote: 'This is my game quote'
timeout: 10000
-
user:：你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样：https://www.douban.com/people/xxxxxx/ ，其中的”xxxxxx”就是你的个人ID了。
-
builtin：是否将生成页面的功能嵌入 hexo s 和 hexo g 中，默认是 false ，另一可选项为 true 。
-
title： 该页面的标题。
-
quote： 写在页面开头的一段话,支持html语法。
-
timeout： 爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。
-
然后再主题配置文件_config.yml中添加关于此页面的菜单：(下面是我的配置)
menu:
媒体:
url: /
icon: fas fa-list
children:
- name: 电影
url: /movies
icon: fas fa-film
- name: 书单
url: /books
icon: fas fa-book
- name: 游戏
url: /games
icon: fas fa-gamepad
-
适配Matery主题：在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件，并将下面的内容复制进去：
<%- partial('_partial/post-cover') %>
-
然后在博客站点目录下的node_modules文件夹下找到hexo-douban/lib，文件夹下有三个js文件，分别为：books-generator.js 、games-generator.js 、movies-generator.js，用文本编辑器打开这三个文件，并将其文件内容末尾的代码修改为一下内容：
/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/
layout: [`page`, `douban`]
-
最后就是使用并生成相应的页面，执行命令如下:
hexo douban
需要注意的是，通常大家都喜欢用 hexo d 来作为 hexo deploy 命令的简化，但是当安装了 hexo douban 之后，就不能用 hexo d 了，因为 hexo douban 跟 hexo deploy 的前缀都是 hexo d ，你以后执行的 hexo d 将不再是 Hexo 页面的生成，而是豆瓣页面的生成。
以下是可选的命令参数：
-h, --help # 帮助页面
-b, --books # 只生成书单页面
-g, --games # 只生成游戏页面
-m, --movies # 只生成电影页面
当站点配置文件的builtin的值为true时，生成页面的功能会嵌入到hexo g和hexo s中，在进行部署生成操作，会自动生成相应的页面。
9. 外链跳转插件
hexo-external-link是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。 比如 设置target=’_blank’, rel=’external nofollow noopener noreferrer’ 告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html;
使用 npm 或者 yarn 安装
## npm 安装
npm install hexo-external-link --save
## yarn 安装
yarn add hexo-external-link
之后再hexo博客站点根目录下添加如下配置：
hexo_external_link:
enable: true
enable_base64_encode: true
url_param_name: 'u'
html_file_name: 'go.html'
target_blank: true
link_rel: 'external nofollow noopener noreferrer'
domain: 'your_domain' # 如果开启了防盗链
safety_chain: true
-
enable - 是否开启hexo_external_link插件 - 默认 false
-
enable_base64_encode - 是否对跳转url使用base64编码 - 默认 fasle
-
url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 ‘u’
-
html_file_name - 跳转到外链的页面文件路径 - 默认 ‘go.html’
-
target_blank - 是否为外链的a标签添加target='_blank' - 默认 true
-
link_rel - 设置外链的a标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’
-
domain - 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
-
safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false
10. 添加动态科技线条背景
在themes/matery/layout/layout.ejs文件中添加如下代码：
其中：
-
color：表示线条颜色，三个数字分别为(R,G,B)，默认：（0,0,0）
-
opacity：表示线条透明度（0~1），默认：0.5
-
count：表示线条的总数量，默认：150
-
zIndex：表示背景的z-index属性，css属性用于控制所在层的位置，默认：-1
11. 添加鼠标点击烟花爆炸效果
首先在themes/matery/source/js目录下新建fireworks.js文件，打开这个网址传送门，将内容复制粘贴到fireworks.js即可。
然后再themes/matery/layout/layout.ejs文件内添加下面的内容：
然后hexo clean && hexo g && hexo s即可，就可以看到效果了。
12. 添加樱花飘落效果
先看效果：
在themes/matery/source/js目录下新建sakura.js文件，打开这个网址传送门，将内容复制粘贴到sakura.js即可。
然后再themes/matery/layout/layout.ejs文件内添加下面的内容：
13. 添加鼠标彩虹星星掉落跟随效果
先看看效果，再决定要不要用。
在themes/matery/source/js目录下新建cursor.js文件，打开这个网址传送门，将内容复制粘贴到cursor.js即可。
然后再themes/matery/layout/layout.ejs文件内添加下面的内容：
14. 添加雪花飘落效果
先看看效果吧！
在themes/matery/source/js目录下新建snow.js文件，打开这个网址传送门，将内容复制粘贴到cursor.js即可。
然后再themes/matery/layout/layout.ejs文件内添加下面的内容：
15. 添加自定义页面
首先看一下效果吧，我自己写的，写的不好，不要笑我哦！
以我的配置为例：
首先在站点目录下的source文件夹下新建aboutme文件，文件名可自定义，然后编写一个index.html放入aboutme文件夹下，然后在主题配置文件下的导航配置信息添加下面的配置：
About:
url: /
icon: fas fa-address-card
children:
- name: 关于我
url: /about
icon: fas fa-user-circle
- name: Another #这是新添加的，在原有配置基础上添加
url: /aboutme
icon: fa fa-user-secret
然后在站点配置文件下，找到skip_render，在后面添加属性，如下：
skip_render: aboutme/** # 其意思为在对文件进行渲染时跳过aboutme文件下的所有文件
知道方法后，你可以添加你自己想要添加的页面，让你的博客内容更加充实。
16. 添加404页面
我的404页面是这样的：
开始说一下配置步骤，首先再站点根目录下的source文件夹下新建404.md文件，里面内容如下：
---
title: 404
date: 2019-10-28 16:41:10
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面了"
---
紧接着再新建主题文件夹的layout目录下新建404.ejs文件，添加内容如下：
然后部署，再看看效果即可。
17. 文章生成永久链接
主题默认的文章链接配置是
premalink: :year/:month/:day/:title
这种生成的链接地址很长，文章版权的链接地址会出现一大串字符编码，一点也不好看。因此需要修改文章生成链接的格式。
首先再根目录下执行下面的命令：
hexo-abbrlinkGitHub地址
npm install hexo-abbrlink --save
然后再站点配置文件下添加如下配置：
abbrlink:
alg: crc16 #算法： crc16(default) and crc32
rep: hex #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制
再将站点配置文件的permalink的值修改为：
permalink: posts/:abbrlink.html # 此处可以自己设置，也可以直接使用 :/abbrlink
生成文章的链接格式就会是如下样例（官方样例）:
crc16 & hex
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html
生成完后，原md文件的Front-matter 内会增加abbrlink 字段，值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。
七、添加评论系统
我只说几个常用的评论系统的配置方法，其他的就不说了。
7.1 添加来必力评论系统
首先去来必力官网，点击导航栏上的安装，会出现如下图的页面：
注册完之后，会提示你填写网站的相关信息，如网站链接，网站名称等等，填写完毕之后，会给你一段代码，如下图所示：
# Livere comment configuration, the default is not activated
# Livere 来必力评论模块的配置，默认为不激活
livere:
enable: true # true即为开启评论系统
uid: #这里填写你的uid
然后在执行相关的部署命令，然后查看效果即可。
7.2 添加Valine评论系统
Valine官方文档
如果注册过LeanCloud，请点击此处进行登录，未注册的请点击注册
经过登录或者注册之后再登录，就会进入如下的页面：
创建应用完成后，会出现如下页面，然后点击设置
会出现下面的页面，将其中APPID和APPKey复制，添加到配置文件中。
# The configuration of the Valine comment module is not activated by default.
# To use it, activate the configuration item and set appId and appKey.
# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
valine:
enable: false # true即为开启评论系统
appId: #此处填写你的appid
appKey: #此处填写你的appkey
notify: false
verify: false
visitor: true
avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
pageSize: 10
placeholder: 'just go go' # Comment Box placeholder
background: https://cdn.jsdelivr.net/gh/Yafine/cdn@2.6/social/comment_bg.png
然后执行相关部署命令，查看效果即可。
7.3 添加Gitalk评论模块
首先去这个地方看一下Gitalk的效果吧！传送门
安装步骤如下：
-
注册 OAuth Application
当别人评论你的文章时，会需要它是授权。点击注册 OAuth Application进行注册，注册界面如下：
-
Application name：应用名称，自己随意起名。
-
Homepage URL：博客主页地址，如果有域名，此处填写域名，无域名，填写你的默认github地址：如https://username.github.io。
-
Application description：应用描述，可选，可以写也可以不写。
-
Authorization callback URL：授权后返回的地址，需要与Homepage URL一致。
点击 Register application（注册）会出现 Client ID/Secret，接下来就是将信息填入配置文件中。
-
新建GitHub仓库
新建仓库就不在多说了，相信大家都会，如果不会的话，上面有写。
-
配置 _config.yml 文件
# the Gitalk config，default disabled
# Gitalk 评论模块的配置，默认为不激活
gitalk:
enable: true # true即开启评论模块
owner: Yafine # 填写你的 github 账户名即可
repo: Yafine-gitalks # 新建一个仓库或者使用博客托管的仓库也可
oauth:
clientId: #填写你的clientId
clientSecret: #填写你的clientSecret
admin: Yafine #填写你的 github 账户名即可
-
然后再进行部署步骤即可，第一次查看效果需要登录github账号，关联授权后，就可以使用评论系统了。
7.4 添加Disqus评论模块
还在完善，这个貌似需要Science and the Internet才能注册。有时间再写吧。
八、域名解析与绑定
域名的购买流程我就不说了，相信大家应该都会购买吧，一般都会去阿里云或者腾讯云购买域名。下面就简单的说一下，如何绑定域名并进行解析。
在这里以腾讯云解析为例（我的域名是在腾讯云购买的），登录腾讯云的控制台，进入到域名管理页面，然后点击解析，进行域名的解析，如下图所示：
进入云解析列表，添加记录值如下图所示：
IP地址可以提供cmd命令得到，命令为ping uisername.github.com，会得到来自xxx.xxx.xxx.xxx的回复，这个就是github的IP地址，将得到的IP地址填入记录值即可，如下图所示。
上面第一个行的线路类型第一次先选择默认，上面的境外路线，这是我后来配置的双部署，国内访问走coding路线，国外访问走GitHub路线。
说明：
以我的域名为例：yafine-blog.cn
提示：要解析www.yafine-blog.cn，请填写 www。主机记录就是域名前缀，常见用法如下：
| 主机记录 | 说明 |
|---|
| www |
解析后的域名为www.yafine-blog.cn |
| @ |
直接解析主域名yafine-blog.cn |
| * |
泛解析，匹配其他所有域名*.yafine-blog.cn |
| mail |
将域名解析为mail.yafine-blog.cn，通常用于解析邮箱服务器 |
| 二级域名 |
如abc.yafine-blog.cn，填写abc |
| 手机网站 |
如m.yafine-blog.cn，填写m |
提示:
将域名指向云服务器，请选择「A」； 将域名指向另一个域名，请选择「CNAME」； 建立邮箱请选择「MX」，根据邮箱服务商提供的MX记录填写。
| 记录类型 | 说明 |
|---|
| A |
用来指定域名的IPv4地址（如8.8.8.8），如果需要将域名指向一个IP地址，就需要添加A记录。 |
| CNAME |
如果需要将域名指向另一个域名，再由另一个域名提供IP地址，就需要添加CNAME记录。 |
| MX |
如果需要设置邮箱，让邮箱能收到邮件，就需要添加MX记录。 |
| TXT |
在这里可以填写任何东西，长度限制255。绝大多数的TXT记录是用来做SPF记录（反垃圾邮件） |
| NS |
域名服务器记录，如果需要将子域名交给其他DNS服务商解析，就需要添加NS记录。 |
| AAAA |
用来指定主机名（或域名）对应的IPv6地址（例如：ff06:0:0:0:0:0:0:c3）记录。 |
| SRV |
记录了哪台计算机提供了哪个服务。格式为：服务的名字、点、协议的类型，例如：_xmpp-server_tcp。 |
| 显性URL |
从一个地址301重定向到另一个地址的时候，就需要添加显性URL记录（注：DNSPod目前只支持301重定向）。 |
| 隐性URL |
类似于显性URL，区别在于隐性URL不会改变地址栏的域名。 |
注意：在这之前需要在站点根目录的source目录下新建一个CNAME文件，里面写入自己的域名，然后保存，在进行如下的步骤。这样到最后当你在地址栏输入xxx.github.io时，才会自动跳转到你的域名。
然后在你的GitHub仓库的设置里找到这个页面，将你的域名填到Custom domain选项下，强制开启https，即当你在地址栏输入域名，会自动识别域名为https开头。然后进行保存。
九、 博客优化
1. 图片懒加载
知识小课堂：图片加载方式有两种，一个是预加载，另一个就是懒加载，那你了解什么是预加载和懒加载吗？下面来学习一下。
参考：图片预加载与图片懒加载（缓载）的区别与实现
-
图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
-
图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
预加载与懒加载的区别之处：
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。
使用图片懒加载需要安装插件：hexo-lazyload-image
在站点根目录执行下面的命令：
npm install hexo-lazyload-image --save
之后在站点配置文件下添加下面的代码：
lazyload:
enable: true # 是否开启图片懒加载
onlypost: false # 是否只对文章的图片做懒加载
loadingImg: # eg ./images/loading.gif
最后执行hexo clean && hexo g && hexo s就可以看到效果了。
2. 代码压缩
方法一：gulp代码压缩
因为hexo生成的html、css、js等都有很多的空格或者换行，而空格和换行也是占用字节的，所以需要将空格换行去掉也就是我要进行的“压缩”。
有人说空格换行能占多少字节？确实占不了多少，但是一个人访问是这么多字节，那么一百人，一万人呢？加起来这量就不少了吧，这都是流量啊！这也是很多css/js文件的后缀为.min.js或.min.css的原因。虽然我们可能没那么多访问量，但是能减小一点资源文件的大小也是对访问速度有那么一点提升的。
我们采用gulp代码压缩方式。
使用方法：
-
进入站点根目录下依次执行下面的命令：
# 全局安装gulp模块
npm install gulp -g
# 安装各种小功能模块 执行这步的时候，可能会提示权限的问题，最好以管理员模式执行
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save
-
在Hexo根目录新建文件 gulpfile.js，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象
// 清除public文件夹
gulp.task("clean", function () {
return del(["public/**/*"]);
});
// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
return hexo.init().then(function () {
return hexo
.call("generate", {
watch: false
})
.then(function () {
return hexo.exit();
})
.catch(function (err) {
return hexo.exit(err);
});
});
});
// 启动Hexo服务器
gulp.task("server", function () {
return hexo
.init()
.then(function () {
return hexo.call("server", {});
})
.catch(function (err) {
console.log(err);
});
});
// 部署到服务器
gulp.task("deploy", function () {
return hexo.init().then(function () {
return hexo
.call("deploy", {
watch: false
})
.then(function () {
return hexo.exit();
})
.catch(function (err) {
return hexo.exit(err);
});
});
});
// 压缩public目录下的js文件
gulp.task("compressJs", function () {
return gulp
.src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
.pipe(plumber())
.pipe(
gulpBabel({
presets: [es2015Preset] // es5检查机制
})
)
.pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
.pipe(gulp.dest("./public")); //输出到目标目录
});
// 压缩public目录下的css文件
gulp.task("compressCss", function () {
var option = {
rebase: false,
//advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
//keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
//keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
};
return gulp
.src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public"));
});
// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
var cleanOptions = {
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
unprotect: /
