Fork me on GitHub

Hexo主题优化

安装node.js
安装git
安装hexo npm install -g hexo
创建GitHub仓库
配置ssh keys

新建一个目录,用来保存网站内容
进入目录,执行hexo init
目录说明:

  • node_modules:是依赖包
  • public:存放的是生成的页面
  • scaffolds:命令生成文章等的模板
  • source:用命令创建的各种文章
  • themes:主题
  • _config.yml:整个博客的配置
  • db.json:source解析所得到的
  • package.json:项目所需模块项目的配置信息

执行hexo s命令,打开http://localhost:4000即可访问
修改_config.yml文件内容

1
2
3
4
deploy:
type: git
repo: git@github.com:coder-gao/coder-gao.github.io.git
branch: master

在进行部署之前需要安装插件,否则无法部署到GitHub
npm install hexo-deployer-git --save

运行下列命令进行部署

1
2
3
hexo clean # 清除缓存文件
hexo g # 生成静态文件
hexo d #部署到GitHub

打开https://coder-gao.github.io/即可访问

官网配置详情 –> 传送门


更换主题

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

修改_config.yml文件内容,改为自己下载的主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

_config.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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
# Site
# 博客的名称
title: Hexo
# 博客副标题(根据主题的不同,有的会显示有的不会显示)
subtitle: life is short, you need python
# 网站描述(主要用于SEO,告诉搜索引擎一个关于站点的简单描述,通常建议在其中包含网站的关键词)
description: python web 开发 爬虫
# 网站关键字
keywords: python,web,spider,django,Django,Python,flask,Scrapy,爬虫
# 网站作者
author: coder-gao
# 网站语言,默认英文
language:
# 时区,默认电脑时区
timezone:

# URL
## 如果你的网站存放在子目录中,例如 http://yoursite.com/blog,则应该将你的 url 设为http://yoursite.com/blog 并把 root 设为 /blog/.
# 网址
url: http://iceflower.xyz
# 网站根目录
root: /
# 文章链接地址格式 文章的存放目录
permalink: :year/:month/:title/
# 文章链接中的默认值
permalink_defaults:

# Directory
# 资源文件夹,放在里面的文件会上传到github中
source_dir: source
# 公共文件夹,存放生成的静态文件
public_dir: public
# 标签文件夹,默认是tags.实际存放在source/tags中
tag_dir: tags
rss_dir: rss
# 档案文件夹,默认是archives
archive_dir: archives
# 分类文件夹,默认是categories.实际存放在source/categories中
category_dir: categories
# 代码文件夹,默认是downloads/code
code_dir: downloads/code
# 国际化文件夹,默认跟language相同
i18n_dir: :lang
skip_render:

# Writing
# 新建博文(帖子)的默认名称
# File name of new posts
new_post_name: :title.md
# 默认布局模板是post,而不是draft和page
default_layout: post
# 是否将标题转换成标题形式(首字母大写)
# Transform title into titlecase
titlecase: false
# 在新标签页面中打开网页
# Open external links in new tab
external_link: true
filename_case: 0
# 是否渲染草稿
render_drafts: false
# 启动 Asset 文件夹
post_asset_folder: false
# 把链接改为与根目录的相对位址
relative_link: false
# 显示未来的文章
future: true
# 代码块的设置
highlight:
enable: true # 使用代码高亮
line_number: true # 显示行号
auto_detect: false # 自动检测语言
tab_replace:

# 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: -date

# Category & Tag
# 默认分类
default_category: uncategorized
# 分类别名
category_map:
# 标签别名
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# 主题配置
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
# GitHub部署
deploy:
type: git
repo: git@github.com:coder-gao/coder-gao.github.io.git
branch: master


# 自定义站点内容搜索
# 需要先安装插件:
# npm install hexo-generator-search --save
search:
path: search.xml
# 如只想索引文章,可设置为post
field: all
format: html
limit: 1000


# 配置RSS
# npm install --save hexo-generator-feed
feed:
#feed 类型 (atom/rss2)
type: atom
#rss 路径
path: atom.xml
#在 rss 中最多生成的文章数(0显示所有)
limit: 0

添加rss

修改主题配置文件,文件位于next文件夹中

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

添加站内搜索

修改主题配置文件

1
2
local_search:
enable: true

添加标签,分类等页面

修改主题配置文件

1
2
3
4
5
6
7
8
9
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

新建页面

1
2
3
$ hexo new page tags
$ hexo new page categories
$ hexo new page about

修改文件内容

1
2
3
4
5
6
---
title: tags
date: 2018-08-23 16:57:40
type: "tags"
comments: false
---

1
2
3
4
5
6
---
title: categories
date: 2018-08-23 16:57:49
type: "categories"
comments: false
---

设置网站icon

主题配置文件中第一行代码就是网站icon设置,这里你只需要找到你喜欢的logo把它制作成ico格式然后改名favicon.ico,放到/themes/next/source/images下面即可.

1
2
3
4
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
small: /images//favicon.ico
medium: /images//favicon.ico


添加侧边社交链接

打开主题配置文件(_config.yml),搜索social:,在图标库找自己喜欢的小图标,并将名字复制在|| 后面,保存即可

1
2
3
social:
GitHub: https://github.com/coder-gao || github
简书: https://www.jianshu.com/u/b69068313b7d || book


友情链接

打开themes/next/_config.yml 文件,搜索关键字 Blog rolls

1
2
3
4
5
6
7
# Blog rolls
links_title: 友情链接 #标题
links_layout: block #布局,一行一个连接
#links_layout: inline
links: #连接
baidu: http://example.com/
google: http://example.com/


添加fork me on github

新版本

1
2
3
4
5
# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
github_banner: https://github.com/coder-gao || Follow me on GitHub

上面的和下面的可以同时存在

这里或者这里选择你喜欢的样式,复制其中的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面),并把href改为你的github地址.

1
2
3
4
  <div class="{{ container_class }} {% block page_class %}{% endblock %}">
<div class="headband"></div>

<a href="https://github.com/coder-gao" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250"


实现点击出现桃心效果

打开网址http://7u2ss1.com1.z0.glb.clouddn.com/love.js,然后将里面的代码copy一下,新建love.js文件并且将代码复制进去,然后保存.将love.js文件放到路径/themes/next/source/js/src里面,然后打开\themes\next\layout\_layout.swig文件,在末尾(在前面引用会出现找不到的bug)添加以下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>


修改文章内链接文本样式

修改文件 themes\next\source\css\_common\components\post\post.styl,在末尾添加如下css样式:

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}


修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将#换成<i class="fa fa-tag"></i>

1
2
3
4
5
6
7
8
<footer class="post-footer">
{% if post.tags and post.tags.length and not is_index %}
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}


文章末尾统一添加“本文结束”标记

在路径\themes\next\layout\_macro中新建passage-end-tag.swig文件,并添加以下内容:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #555;font-size:14px;">-------------The End-------------</div>
{% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件,在这个位置添加代码:

1
2
3
4
5
6
7
8
9
{###}
{# END POST BODY #}
{###}

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

然后打开主题配置文件,在末尾添加:

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true


修改作者头像并旋转

新版本的已经可以直接使用了

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true

老版本
首先添加头像,
找到一张头像(命名为avatar.jpg),将其放入相应位置
如果放在themes/next/source/images目录下, url: /images/avatar.jpg
如果放在source/uploads目录下(该目录需手动创建), url: /uploads/avatar.jpg

1
2
3
4
5
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.jpg

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl,在里面添加如下代码:

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
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/

/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}


文章添加阴影效果

打开\themes\next\source\css\_custom\custom.styl,向里面加入:

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}


修改文章间分割线

打开 themes/next/source/css/_common/components/post/post-eof.styl ,修改:

1
2
3
4
5
6
7
8
9
10
.posts-expand {
.post-eof {
display: block;
// margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 0%; //分割线长度
height: 0px; // 分割线高度
background: $grey-light;
text-align: center;
}
}


微信支付宝打赏功能

在主题配置文件中的微信or支付宝收款地址处填入收款二维码图片即可:

1
2
3
4
5
# Reward
#reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: http://p3dm71oa7.bkt.clouddn.com/wcpay.png
alipay: http://p3dm71oa7.bkt.clouddn.com/zfbpay.jpg
#bitcoin: /images/bitcoin.png


DaoVoice 在线联系

首先在 daovoice 注册账号,邀请码是8e67899b,注册完成后会得到一个 app_id :

记下这个 app_id的值,然后打开/themes/next/layout/_partials/head/head.swig,写下如下代码
代码放在上面

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}

接着打开主题配置文件,在最后写下如下代码:

1
2
3
# Online contact 
daovoice: true
daovoice_app_id: 这里填你的刚才获得的 app_id

重新 hexo g ,hexo s 就能看到效果了.
具体样式设计可以在 应用设置–>聊天设置 后边改.


添加动态背景

NexT已经自带了多种背景动画效果,你只需要根据需求在主题配置文件修改其中一个为true即可
启用之前需要根据上面的链接下载相应的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: false

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# Canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
enable: false
size: 300
alpha: 0.6
zIndex: -1


在文章底部增加版权信息

默认

1
2
3
post_copyright:
enable: true
license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

自定义

在目录themes/next/layout/_macro/下添加my-copyright.swig,代码如下:

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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者.</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}

在目录themes/next/source/css/_common/components/post/下添加my-post-copyright.styl

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
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}

修改themes/next/layout/_macro/post.swig,在代码:

1
2
3
4
5
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}

前面添加代码:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>

修改themes/next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:

1
@import "my-post-copyright"

最后到站点根目录/scaffolds/post.md,在两个—中间增加一行:

1
copyright: true

之后的每一篇文章都会自己加上版权信息,之前的文章也可以通过在文章对应的md文件头部加上以上代码添加版权信息.


添加顶部加载条

在主题配置文件中搜索pace

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading. 加载条
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

这里有多种主题选择,根据自己喜好选择主题修改便可.


看板娘

用git bash在站点根目录执行如下代码:

1
$ npm install hexo-helper-live2d --save

然后打开/themes/next/layout/_layout.swig,将下面代码放到</body>之前:

1
{{ live2d() }}

在站点配置文件末尾添加代码:

1
2
3
4
5
6
## 看板娘
live2d:
model: hijiki
position: left
bottom: -30
mobileShow: false #手机端不显示

具体设置可以看官方介绍–传送门.


阅读次数统计(基于LeanCloud)

LeanCloud统计


访问人数统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i> 访问人数
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i> 总访问量
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i> 阅读数
page_pv_footer:

修改文章内链接文本样式

修改文件themes\next\source\css\_common\components\post\post.styl,在末尾添加如下css样式:

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}


设置代码高亮主题

NexT 默认使用的是 normal 主题,可选的值有 normal,night, night blue, night bright, night eighties:

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright


设置小型代码块颜色

修改\themes\next\source\css\_variables\base.styl文件,修改$code-background$code-foreground的值:

1
2
3
4
5
6
7
8
// Code & Code Blocks
// --------------------------------------------------
$code-font-family = $font-family-monospace
$code-font-size = 13px
$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius = 3px
$code-foreground = $black-light
$code-background = $gainsboro


代码块自定义样式

打开\themes\next\source\css\_custom\custom.styl,向里面加入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}


给代码块添加复制功能

修改主题配置文件

1
2
3
4
5
6
7
8
9
codeblock:
# Manual define the border radius in codeblock
# Leave it empty for the default 1
border_radius:
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result
show_result: true


设置字体

主题配置文件中设置,例如:

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
font:
enable: true

# 外链字体库地址,例如 //fonts.googleapis.com (默认值)
host:

# 全局字体,应用在 body 元素上
global:
external: true
family: Monda

# 标题字体 (h1, h2, h3, h4, h5, h6)
headings:
external: true
family: Roboto Slab

# 文章字体
posts:
external: true
family:

# Logo 字体
logo:
external: true
family: Lobster Two
size: 24

# 代码字体,应用于 code 以及代码块
codes:
external: true
family: PT Mono


文章排序优先级设置

下载hexo-generator-topindex插件
cnpm install hexo-generator-topindex --save

修改站点配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 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: -data


topindex_generator:
path: ''
per_page: 10
order_by: -data

找到themes\next\layout\_macro\post.swig, 添加置顶符号

1
2
3
4
5
6
7
8
<div class="post-meta">
<span class="post-time">

{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

\scaffolds\post.md头部—中添加以下代码:

1
top:

以后新建文章就可以给文章的top赋值,数值越大优先级越高.

已经写好的文章在对应的md文件头部添加top:{number}即可


字数统计

用于统计文章的字数以及分析出阅读时间.
在主题配置文件中,搜索wordcount,设置为下面这样就可以了:

1
2
3
4
5
6
7
8
# Post woryamldcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 2
wpm: 275

配置站点文件

1
2
3
4
5
6
# 字数统计
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true


修改网页底部

在图标库中找到你自己喜欢的图标,打开 themes/next/_config.yml,搜索关键字between,替换图标名,图标库
修改name和color

1
2
3
4
5
6
7
8
9
# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
# `heart` is recommended with animation in red (#ff0000).
name: snowflake-o
# If you want to animate the icon, set it to true.
animated: false
# Change the color of icon, using Hex Code.
color: "#000000"

修改Hexo信息,默认true(显示)

1
2
3
4
5
6
7
8
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true

修改Next主题信息,默认true(显示)

1
2
3
4
5
6
7
8
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true
# -------------------------------------------------------------
# Any custom text can be defined here.
#custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>


浏览页面的时候显示当前浏览进度

打开 themes/next/_config.yml ,搜索关键字 scrollpercent ,把 false 改为 true.

1
2
# Scroll percent label in b2t button
scrollpercent: true

如果想把 top按钮放在侧边栏,打开themes/next/_config.yml,搜索关键字 b2t ,把 false 改为 true.

1
2
3
4
5
# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true


图片点击放大

在 next 主题中内置了 FancyBox,所以这里也只需要安装插件和修改配置即可.
Fancybox 是一款基于 jquery 开发的类 Lightbox 插件.支持放大图片并对图片添加阴影效果,对于一组相关的图片添加导航操作按纽.

首先下载 theme-next-fancybox3 插件:

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

然后修改主题配置文件:

1
2
3
4
5
# Fancybox. There is support for old version 2 and new version 3.
# Please, choose only any one variant, do not need to install both.
# For install 2.x: https://github.com/theme-next/theme-next-fancybox
# For install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true


版权设置

主题配置文件下,搜索关键字 post_copyright , enable 改为 true

1
2
3
4
# Declare license on posts
post_copyright:
enable: true
license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>


公益404

在站点根目录下,输入hexo new page 404 ,默认在 Hexo 站点下/source/404/index.md
打开新建的404界面,在顶部插入一行,写上 permalink: /404,这表示指定该页固定链接为http://"主页"/404.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: 404
date: 2018-08-24 13:45:58
comments: false
permalink: /404
---
< !DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>404页面</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>
</body>

</html>


博文压缩

在站点的根目录下执行以下命令:

1
2
npm install gulp -g
npm install gulp-htmlclean gulp-htmlmin gulp-imagemin gulp-minify-css gulp-uglify --save

在 Hexo 站点下添加 gulpfile.js文件,文件内容如下

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
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩js文件
gulp.task('minify-js', function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩 public/images 目录内图片
gulp.task('minify-images', function() {
gulp.src('./public/images/**/*.*')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: false, //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('./public/img'));
});
// 默认任务
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);

生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置,对 public 目录中的静态资源文件进行压缩,压缩完成后执行 hexo d命令同步到服务器


各版块透明度修改

内容板块透明

博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件.content-wrap 标签下background: white修改为:

1
background: rgba(255,255,255,0.7); //0.7是透明度

菜单栏背景

博客根目录themes\next\source\css\_schemes\Pisces\_layout.styl 文件.header-inner标签下 background: white修改为:

1
background: rgba(255,255,255,0.7); //0.7是透明度

站点概况背景

博客根目录themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件 .sidebar-inner 标签下 background: white修改为:

1
background: rgba(255,255,255,0.7); //0.7是透明度

然后修改博客根目录themes\next\source\css\_schemes\Pisces\_layout.styl文件 .sidebar标签下background: $body-bg-color修改为:

1
background: rgba(255,255,255,0.7); //0.7是透明度

按钮背景

博客根目录themes\next\source\css\_common\components\post\post-button.styl 同上修改对应位置为background: transparent;


添加评论

登陆 来必力 注册获取,注册后点击导航上边的安装,选择免费的city版本:
在管理页面选择代码管理

复制上边的id,在主题配置文件里面搜索livere_uid,在后面添加来必力id即可:

1
2
3
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: {你的来必力id}


添加分享

进入next目录,cd themes/next,
安装git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton
进入主题配置

1
2
3
4
5
6
needmoreshare2:
enable: true
postbottom:
enable: true
float:
enable: true


不蒜子统计

进入主题配置文件

1
2
3
4
5
6
7
8
9
10
# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
enable: true
total_visitors: true # 总访问量
total_visitors_icon: user # 图标
total_views: true # 总访客量
total_views_icon: eye # 图标
post_views: false # 单个文章阅读量
post_views_icon: eye # 图标

进入layout/third-party/analytics/busuanzi-counter.swig文件修改不蒜子的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

{% if theme.busuanzi_count.total_visitors %}
<span class="site-uv" title="{{ __('footer.total_visitors') }}">
<i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
{{ __('footer.total_visitors') }}
<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
</span>
{% endif %}

{% if theme.busuanzi_count.total_views %}
<span class="site-pv" title="{{ __('footer.total_views') }}">
<i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
{{ __('footer.total_views') }}
<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
</span>
{% endif %}
</div>
{% endif %}


后台管理

安装hexo-admin,并启动服务器

1
2
npm install --save hexo-admin
hexo s

访问http://127.0.0.1:4000/admin/
,点击Settings设置登陆账号和密码
复制生成的

1
2
3
4
admin:
username: zoro
password_hash:be121740bf988b2225a313fa1f107ca1
secret: hey hexo

将其粘贴在站点配置中
更多设置请参考 这里

travis-ci自动化部署

加密

https://github.com/MikeCoder/hexo-blog-encrypt/

安装 hexo-blog-encrypt插件
加密方法为在文章的md文件头,加上password abstract message等三个字段。

1
2
3
4
5
6
7
---
title:
date:
password: mikemessi
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---

其中,password 无疑是表示文章的密码,abstract 表示你的文章在首页显示时的摘要(加密文章后,一般文章生成摘要所用的 <!--more--> 并不起作用),message 表示进入你的文章页面后,显示的消息语句.点击该语句即出现密码输入框.
保存文章后 hexo d -g,看看效果如何.
我们会看到,进入文章页面后,侧边栏并不会像平时一样自动展开.手动展开它,并没有TOC.
这是应为文章已被加密, TOC解析的是加密后的文档, 当然没有目录了

那么,可不可以加密目录呢?

加密TOC

这里需要记住几个变量
page.content : 未加密文本
page.origin : 已加密文本的源文本, 和page.encrypt配合使用
page.encrypt : 文本是否加密

开始修改代码themes/next/layout/_macro/sidebar.swig

第一处

原代码

1
2
3
4
5
6
7
8
9
10
{% if display_toc and toc(page.content).length > 1 %}
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
{{ __('sidebar.toc') }}
</li>
<li class="sidebar-nav-overview" data-target="site-overview-wrap">
{{ __('sidebar.overview') }}
</li>
</ul>
{% endif %}

新代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% if page.encrypt == true %}
{% if display_toc and toc(page.origin).length > 1 %}
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
{{ __('sidebar.toc') }}
</li>
<li class="sidebar-nav-overview" data-target="site-overview-wrap">
{{ __('sidebar.overview') }}
</li>
</ul>
{% endif %}
{% else %}
{% if display_toc and toc(page.content).length > 1 %}
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
{{ __('sidebar.toc') }}
</li>
<li class="sidebar-nav-overview" data-target="site-overview-wrap">
{{ __('sidebar.overview') }}
</li>
</ul>
{% endif %}
{% endif %}

第二处

原代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% if display_toc and toc(page.content).length > 1 %}
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">

{% if page.toc_number === undefined %}
{% set toc = toc(page.content, { "class": "nav", list_number: theme.toc.number }) %}
{% else %}
{% set toc = toc(page.content, { "class": "nav", list_number: page.toc_number }) %}
{% endif %}

{% if toc.length <= 1 %}
<p class="post-toc-empty">{{ __('post.toc_empty') }}</p>
{% else %}
<div class="post-toc-content">{{ toc }}</div>
{% endif %}

</div>
</section>
<!--/noindex-->
{% endif %}

新代码

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
{% if page.encrypt == true %}
{% if display_toc and toc(page.origin).length > 1 %}
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">

{% if page.toc_number === undefined %}
{% set toc = toc(page.origin, { "class": "nav", list_number: theme.toc.number }) %}
{% else %}
{% set toc = toc(page.origin, { "class": "nav", list_number: page.toc_number }) %}
{% endif %}

{% if toc.length <= 1 %}
<p class="post-toc-empty">{{ __('post.toc_empty') }}</p>
{% else %}
<div class="post-toc-content">{{ toc }}</div>
{% endif %}

</div>
</section>
<!--/noindex-->
{% endif %}
{% else %}
{% if display_toc and toc(page.content).length > 1 %}
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">

{% if page.toc_number === undefined %}
{% set toc = toc(page.content, { "class": "nav", list_number: theme.toc.number }) %}
{% else %}
{% set toc = toc(page.content, { "class": "nav", list_number: page.toc_number }) %}
{% endif %}

{% if toc.length <= 1 %}
<p class="post-toc-empty">{{ __('post.toc_empty') }}</p>
{% else %}
<div class="post-toc-content">{{ toc }}</div>
{% endif %}

</div>
</section>
<!--/noindex-->
{% endif %}
{% endif %}

第三处

原代码

1
2
3
<section class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
...
</section>

这段代码的作用是:
在不显示TOC(not display_toc),或目录表长度不超过 1 (toc(page.content).length <= 1)的条件下,使站点概览区的 sidebar-panel-active这个类起作用,即让站点概览区显示.

新代码

1
<section class="site-overview-wrap sidebar-panel{% if not display_toc or page.encrypt == false and toc(page.content).length <= 1 or page.encrypt == true and toc(page.origin).length <= 1 %} sidebar-panel-active{% endif %}">

重新部署,可以看到效果了!

-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!
0%