基于 hexo-theme-indigo 主题进行优化，效果展示参见 我的博客
- 添加直达评论悬浮按钮
- 归档、分类、标签页面添加文章计数
- 各个分类、标签添加单独的文章计数
- 修改打赏的切换按钮样式
- 优化 Valine 在 hexo-theme-indigo 中的显示效果
- 优化 hexo-douban 在 hexo-theme-indigo 中的显示效果
- 使用 prism.js 替换 highlight.js 实现代码高亮，并在
_config.yml中添加代码主题配置项 - 可控制仅在单个 post 中引入
MathJax.js - Change ul list-style and toc bottom padding
- 更新 busuanzi CDN 地址
tags及categories页面按照字母顺序排序- 自定义文章置顶
- 集成百度自动推送
- 敬请期待
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server修改博客根目录下的_config.yml，设置language为zh-CN，并将highlight设置为false：
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Keep Coding
subtitle: 苏易北
description: Abel Su的编程笔记
keywords: KVM,Go,Docker,Kubernetes,Linux,虚拟化,云计算
author: Abel Su
language: zh-CN
timezone:
...
...
highlight:
enable: false
# line_number: true
# auto_detect: false
# tab_replace:
...
...安装需确认你的 Hexo 版本在3.0以上，以及 Node 版本为6.x以上，在博客根目录，执行以下命令：
git clone https://github.com/abelsu7/hexo-theme-indigo-plus.git themes/indigo-plus之后在博客根目录下的_config.yml中指定使用主题indigo-plus：
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: indigo-plus还是在博客根目录下，如果以下插件已安装过，则无需再次安装。
主题默认使用less作为css预处理工具：
npm install hexo-renderer-less --save用于生成rss：
npm install hexo-generator-feed --save用于生成静态站点数据，用作站内搜索的数据源：
npm install hexo-generator-json-content --save可选，不安装时会请求
jiathis API生成二维码
用于生成微信分享二维码：
npm install hexo-helper-qrcode --save可以使用hexo deploy命令部署博客：
npm install hexo-deployer-git --save使用hexo g生成public目录后，使用hexo deploy即可根据博客根目录下_config.yml中的配置部署博客。当有多个deploy及repo时，示例配置如下：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
...
...
deploy:
- type: git
repo:
github: git@github.com:abelsu7/blog.git,master
coding: git@git.coding.net:abelsu7/blog.git,coding-pages
- type: baidu_url_submitter
...
...注意：若同时安装了
hexo-douban插件，则无法使用hexo d这种缩写形式，而必须指明hexo deploy或hexo douban
使用hexo-renderer-kramed替换默认的hexo-renderer-marked渲染引擎，否则使用prism.js高亮代码时会出现问题：
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save使用 hexo-asset-image 自动生成文章对应的同名图片 asset 目录。
首先在博客根目录下的_config.yml中，将post_asset_folder设置为true：
...
...
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true # 修改这里为 true
relative_link: false
future: true
highlight:
enable: false
# line_number: true
# auto_detect: false
# tab_replace:
...
...之后在博客根目录下安装hexo-asset-image：
注意：若安装最新版的
hexo-asset-image，使用相对路径引用图片时貌似会出现图片路径错误的问题，参见 hexo 引用本地图片无法显示 | Ericam_blog
npm install hexo-asset-image@0.0.3 --save例如使用以下命令新建post文章：
hexo new post MacGesture2-Publish就会在source/_posts/目录下生成同名的图片 asset 目录：
MacGesture2-Publish
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
MacGesture2-Publish.md只需要文章中使用，即可引用图片。
使用 hexo-recommended-posts 生成相关文章推荐列表。
首先在博客根目录下安装插件：
npm install hexo-recommended-posts --save之后在博客根目录下的_config.yml中添加以下内容以覆盖默认配置：
# Hexo recommended posts
recommended_posts:
server: https://api.truelaurel.com #后端推荐服务器地址
timeoutInMillis: 15000 #服务时长，超过此时长，则使用离线推荐模式
internalLinks: 3 #内部文章数量
externalLinks: 2 #外部文章数量
fixedNumber: false
autoDisplay: true #自动在文章底部显示推荐文章
excludePattern: []
titleHtml: <strong>🚩推荐阅读</strong>（由<a href="https://github.com/huiwang/hexo-recommended-posts">hexo文章推荐插件</a>驱动） #自定义标题具体参数设置参见 hexo-recommended-posts 文档
只需在hexo g命令前，在博客根目录使用以下命令获取推荐文章列表，存放于source\_data\recommended_posts.json中：
hexo recommend使用 hexo-douban 生成豆瓣电影、读书、游戏展示页面。
首先在博客根目录下安装插件：
npm install hexo-douban --save之后在博客根目录下的_config.yml中添加如下配置（以下为示例，请根据需要自行修改）：
# hexo-douban config
douban:
user: abelsu7 # your Douban ID
builtin: false
book:
title: '读书'
quote: <p>注：<b><font color="#3f51b5">IE、Edge及Safari</font></b>中无法正常加载图片<br/>请移步我的<a href="https://book.douban.com/people/abelsu7/" target="_blank"><font color="#ff4081">豆瓣读书</font></a>主页</p>
subtitle: 'Books are the ladder of human progress.'
movie:
title: '影视'
quote: <p>注：<b><font color="#3f51b5">IE、Edge及Safari</font></b>中无法正常加载图片<br/>请移步我的<a href="https://movie.douban.com/people/abelsu7/" target="_blank"><font color="#ff4081">豆瓣电影</font></a>主页</p>
subtitle: '如果有多一张船票，你会不会跟我一起走？'
game:
title: '游戏'
quote: <p>注：<b><font color="#3f51b5">IE、Edge及Safari</font></b>中无法正常加载图片<br/>请移步我的<a href="https://www.douban.com/people/abelsu7/games?action=collect" target="_blank"><font color="#ff4081">豆瓣游戏</font></a>主页</p>
subtitle: '胜败乃兵家常事，大侠请重新来过'
timeout: 40000此时运行hexo-douban已经可以生成相应的页面。但为使其风格与本主题更加协调，还需手动修改hexo-douban插件的部分代码。
首先进入node_modules/hexo-douban/lib/templates目录，分别将book.ejs、movie.ejs、game.ejs替换为以下内容。
book.ejs内容如下：
<blockquote>
<p>
<%- quote; %>
</p>
</blockquote>
<style>
<% include index.css %>
</style>
<div class="container body-wrap card">
<article class="page-article fade" itemprop="blogPage">
<div class="hexo-douban-tabs">
<a class="hexo-douban-tab" id="hexo-douban-tab1" href="javascript:;" rel="external">
<%= __('bookReading') %>
(
<%= reading.length %>)</a>
<a class="hexo-douban-tab" id="hexo-douban-tab2" href="javascript:;" rel="external">
<%= __('bookWish') %>
(
<%= wish.length %>)</a>
<a class="hexo-douban-tab" id="hexo-douban-tab3" href="javascript:;" rel="external">
<%= __('bookRead') %>
(
<%= read.length %>)</a>
</div>
<div>
<div id="hexo-douban-item1">
<% reading.forEach(function(item){ %>
<% include bookReading.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
<div id="hexo-douban-item2">
<% wish.forEach(function(item){ %>
<% include bookWish.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
<div id="hexo-douban-item3">
<% read.forEach(function(item){ %>
<% include bookRead.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
</div>
</article>
</div>
<script>
<% include index.js %>
<% include pagination.js %>
</script>movie.ejs内容如下：
<blockquote>
<p>
<%- quote; %>
</p>
</blockquote>
<style>
<% include index.css %>
</style>
<div class="container body-wrap card">
<article class="page-article fade" itemprop="blogPage">
<div class="hexo-douban-tabs">
<a class="hexo-douban-tab" id="hexo-douban-tab1" href="javascript:;" rel="external">
<%= __('movieWatching') %>
(
<%= watching.length %>)</a>
<a class="hexo-douban-tab" id="hexo-douban-tab2" href="javascript:;" rel="external">
<%= __('movieWish') %>
(
<%= wish.length %>)</a>
<a class="hexo-douban-tab" id="hexo-douban-tab3" href="javascript:;" rel="external">
<%= __('movieWatched') %>
(
<%= watched.length %>)</a>
</div>
<div>
<div id="hexo-douban-item1">
<% watching.forEach(function(item){ %>
<% include movieWatching.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
<div id="hexo-douban-item2">
<% wish.forEach(function(item){ %>
<% include movieWish.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
<div id="hexo-douban-item3">
<% watched.forEach(function(item){ %>
<% include movieWatched.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
</div>
</article>
</div>
<script>
<% include index.js %>
<% include pagination.js %>
</script>game.ejs内容如下：
<blockquote>
<p>
<%- quote %>
</p>
</blockquote>
<style>
<% include index.css %>
</style>
<div class="container body-wrap card">
<article class="page-article fade" itemprop="blogPage">
<div class="hexo-douban-tabs">
<a class="hexo-douban-tab" id="hexo-douban-tab1" href="javascript:;" rel="external">
<%= __('gamePlaying') %>
(
<%= playing.length %>)</a>
<a class="hexo-douban-tab" id="hexo-douban-tab2" href="javascript:;" rel="external">
<%= __('gameWish') %>
(
<%= wish.length %>)</a>
<a class="hexo-douban-tab" id="hexo-douban-tab3" href="javascript:;" rel="external">
<%= __('gamePlayed') %>
(
<%= played.length %>)</a>
</div>
<div>
<div id="hexo-douban-item1">
<% playing.forEach(function(item){ %>
<% include gamePlaying.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
<div id="hexo-douban-item2">
<% wish.forEach(function(item){ %>
<% include gameWish.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
<div id="hexo-douban-item3">
<% played.forEach(function(item){ %>
<% include gamePlayed.ejs %>
<% }); %>
<% include pagination.ejs %>
</div>
</div>
</article>
</div>
<script>
<% include index.js %>
<% include pagination.js %>
</script>之后打开该目录下的index.css，添加或修改以下样式：
.hexo-douban-tabs {
margin-bottom: 15px;
margin-top: 15px;
text-align: center; /* 新增 */
}
.hexo-douban-tab {
color: #303f9f; /* 新增 */
padding: 5px;
}
/* 新增 .hexo-douban-tab:hover */
.hexo-douban-tab:hover {
color: #ff4081;
}
/* 修改 .hexo-douban-active */
.hexo-douban-active {
/* background: #657b83; */
/* color: #fff; */
color: #ff4081;
}
...
...
/* 修改 .hexo-douban-button:hover */
.hexo-douban-button:hover {
/* background: #657b83; */
/* color: #fff; */
color: #ff4081;
}
...
...最后在books-generator.js、movies-generator.js、games-generator.js最后的return语句中，添加对应的layout：
books-generator.js的最后：
...
...
return {
path: 'books/index.html',
data: {
title: config.douban.book.title,
content: contents,
slug: 'books'
},
layout: ['book', 'page', 'post'] // 添加 'book'
};
};movies-generator.js的最后：
...
...
return {
path: 'movies/index.html',
data: {
title: config.douban.movie.title,
content: contents,
slug: 'movies'
},
layout: ['movie', 'page', 'post'] // 添加 'movie'
};
};games-generator.js的最后：
...
...
return {
path: 'games/index.html',
data: {
title: config.douban.game.title,
content: contents,
slug: 'games'
},
layout: ['game', 'page', 'post'] // 添加 'game'
};
};使用 hexo-baidu-url-submit 将博客新链接主动推送至百度搜索引擎。
首先在博客根目录下安装插件：
npm install hexo-baidu-url-submit --save之后在博客根目录下的_config.yml中进行配置：
...
...
# Baidu URL Submit
baidu_url_submit:
count: 1000 ## 提交最新的一个链接
host: alili.tech ## 在百度站长平台中注册的域名
token: xxxxx ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里
...
...
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
repo:
github: git@github.com:abelsu7/blog.git,master
coding: git@git.coding.net:abelsu7/blog.git,coding-pages
- type: baidu_url_submitter
...
...自动生成sitemap.xml以及baidusitemap.xml。
首先在博客根目录安装插件：
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save之后在博客根目录下的_config.yml中添加配置：
# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml初始化 Hexo 博客后，默认会在scaffolds目录下创建draft.md、page.md、post.md三个模板文件，使用hexo new命令新建页面时就会基于上述模板文件生成对应的 Markdown 文件。为了方便使用，建议将scaffolds下的模板文件修改如下：
draft.md：
---
title: {{ title }}
category:
-
tags:
-
date: {{ date }}
top: 1
---page.md：
---
layout: page
title: {{ title }}
date: {{ date }}
top: 1
---post.md：
---
title: {{ title }}
category:
-
tags:
-
date: {{ date }}
top: 1
---这里添加了top: 1属性，是为了实现文章置顶功能，参见 Hexo 实现自定义文章置顶 | 苏易北。
修改博客根目录下_config.yml文件：
...
...
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by:
top: -1
date: -1
...
...即可在首页先根据top值、再根据date，对所有文章进行排序。所有文章默认top: 1，如需置顶文章，只需将其top值修改为大于 1 的整数，同一top值可有多篇文章，top值相同时按照date排序。
注意：需要确保所有的
post都有top和date属性，否则会导致排序失败。可在每次新建文章时使用hexo new post <post_title>创建，即可根据post.md模板生成对应的文章文件
可以按需开启MathJax支持。首先确保themes/indigo-plus/_config.yml中，mathjax设置为true：
...
...
# 文章截断
excerpt_render: true
excerpt_length: 200
excerpt_link: 阅读全文...
mathjax: true
archive_yearly: true
...
...如要在某篇文章中开启MathJax支持，只需在其YAML头部中加入mathjax: true，例如：
---
title: 在 Hexo 中使用 MathJax 渲染数学公式
category:
- 前端
tags:
- Hexo
- MathJax
- LaTex
- 数学
date: 2018-10-29 19:58:35
top: 1
mathjax: true
---注意：可能会遇到行内公式的渲染问题，参见 在 Hexo 中使用 MathJax 渲染数学公式 | 苏易北
hexo new page tags并修改blog/source/tags/index.md的元数据：
...
...
layout: tags
comments: false
---hexo new page categories并修改blog/source/categories/index.md的元数据：
...
...
layout: categories
comments: false
---hexo new page about关于page页面的语法规则，具体参见 hexo-theme-indigo 文档。
hexo clean # 清除 public 目录下的静态文件
hexo recommend # 获取推荐文章列表
hexo douban # 生成豆瓣展示页面
hexo g # 生成 public 目录下的静态文件
hexo s # 本地启动 server
hexo deploy # 部署博客至远程仓库以下是 hexo-theme-indigo 的说明——
Material Design 风格的Hexo主题，基于 Hexo 3.0+ 制作。 Preview
现有两个主题分支，我的博客中使用的是 card 分支卡片风格主题，master 分支是旧版平铺式风格主题。
- 仅支持 IE10+ 等现代浏览器。
- 去 jQuery，更轻。相信现代浏览器的原生兼容性。
- 使用 Less 作为 css 预处理器，需要安装
hexo-renderer-less。 - 添加了英文字体支持 Roboto。
- 添加了一些波纹效果。By Waves
- 无前端依赖的分享实现。
- 基于静态数据的站内搜索，无第三方侵入。
- 支持文章打赏。
升级前请仔细查看更改内容，如非必要可不升级。