Hexo+Pages静态博客-Next主题篇

前言

文|芒果浩明

博客预览

相关文章

[Hexo+Pages静态博客-搭建部署篇(同时部署github和coding)](http://ihaoming.top/2017/10/09/Hexo- Pages%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2-%E6%90%AD%E5%BB%BA%E9%83%A8%E7%BD%B2%E7%AF%87%EF%BC%88%E5%90%8C%E6%97%B6%E9%83%A8%E7%BD%B2github%E5%92%8Ccoding/)

Hexo+Pages搭建好博客之后,如果你不喜欢Hexo默认的主题,可以更换不同的主题,主题传送门:Themes 我自己使用的是Next主题,可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Next主题,在blog目录中(就是命令行的位置处于blog目录)打开命令行输入:


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

这是将Next主题下载到blog目录的themes主题下的next文件夹中。打开站点的_config.yml配置文件,修改主题为next


1
2
3
4
5
6
7
# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: next

主题的基本配置

设置「RSS」

rss

  1. 安装插件

在站点的目录下执行下面的命令安装


1
$ npm install --save hexo-generator-feed

  1. 修改主题配置文件

打开 主题配置 _config.yml文件,在末尾处添加如下配置


1
2
3
#插件配置

plugins: hexo-generator-feed

  1. 修改 站点配置 _config.yml文件
1
2
3
4
5
6
7
Set rss to false to disable feed link.

Leave rss as empty to use sites feed link.

Set rss to specific value if you have burned your feed already.

rss: /atom.xml
  1. 重新生成检测

重新执行hexo g命令后,会发现在 ./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效,之后再部署到 Github 中

添加「标签」页面

  1. 新建页面

在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 tags :


1
2
3
$ cd your-hexo-site

$ hexo new page tags

  1. 设置页面类型

输入上述命令后,在blog\source\tags目录产生一个index.md页面。编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。页面内容如下:


1
2
3
4
5
6
7
title: tags

date: 2017-10-06 19:29:21

type: "tags"

layout: "tags"

  1. 修改主题配置

在菜单中添加链接。编辑 主题配置文件 , 添加 tags 到 menu 中,如下:


1
2
3
4
5
6
7
menu:

home: /

archives: /archives

tags: /tags

next_tags

添加「分类」页面

分类页面的添加与标签页步骤相同

  1. 新建页面

在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 tags :


1
2
3
$ cd your-hexo-site

$ hexo new page categories

  1. 设置页面类型

输入上述命令后,在blog\source\categories目录产生一个index.md页面。编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。页面内容如下:


1
2
3
4
5
6
7
title: categories

date: 2017-10-06 19:29:21

type: "categories"

layout: "categories"

  1. 修改主题配置

在菜单中添加链接。编辑 主题配置文件 , 添加 categories 到 menu 中,如下:


1
2
3
4
5
6
7
menu:

home: /

archives: /archives

categories: /categories

  1. 新建文章分类和标签的写法
1
2
3
4
1. title: Hexo+Pages静态博客-搭建部署篇(同时部署github和coding)
date: 2017-10-09 21:32:21
tags: [hexo,github,coding,博客]#多个标签用英文逗号隔开
categories: web

next_categories

设置「字体」

打开\themes\next\source\css\ _variables\base.styl文件,将$font-size-base改成16px,如下所示:


1
$font-size-base =16px

设置「代码高亮主题」

NexT 使用 Tomorrow Theme 作为代码高亮,共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题,可选的值有 normal,night, night blue, night bright, night eighties:

更改 highlight_theme 字段,将其值设定成你所喜爱的高亮主题,例如:


1
2
3
4
5
6
7
# Code Highlight theme

# Available value: normal | night | night eighties | night blue | night bright

# https://github.com/chriskempson/tomorrow-theme

highlight_theme: normal

侧边栏社交链接

侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。 两者配置均在 主题配置文件 中。

链接放置在 social 字段下,一行一个链接。其键值格式是 显示文本: 链接地址。

配置示例


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Social links

social:

GitHub: https://github.com/your-user-name

Twitter: https://twitter.com/your-user-name

微博: http://weibo.com/your-user-name

豆瓣: http://douban.com/people/your-user-name

知乎: http://www.zhihu.com/people/your-user-name

# 等等

设定链接的图标,对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称, 匹配键 与上一步所配置的链接的 显示文本 相同(大小写严格匹配),图标名称 是 Font Awesome 图标的名字(不必带 fa- 前缀)。 enable 选项用于控制是否显示图标,你可以设置成 false 来去掉图标。

配置示例


1
2
3
4
5
6
7
8
9
10
11
12
13
# Social Icons

social_icons:

enable: true

# Icon Mappings

GitHub: github

Twitter: twitter

微博: weibo

设置友情链接

编辑主题配置文件 添加:

友情链接配置示例


1
2
3
4
5
6
7
8
9
# title

links_title: Links

links:

MacTalk: http://macshuo.com/

Title: http://example.com/

腾讯公益404页面

腾讯公益404页面,寻找丢失儿童,让大家一起关注此项公益事业!效果如下 http://www.ixirong.com/404.html

使用方法,新建 404.html 页面,放到主题的 source 目录下,内容如下:


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
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="robots" content="all" />

<meta name="robots" content="index,follow"/>

<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">

</head>

<body>

<script type="text/plain" src="http://www.qq.com/404/search_children.js"

charset="utf-8" homePageUrl="/"

homePageName="回到我的主页">

</script>

<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>

<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>

</body>

</html>

站点建立时间

这个时间将在站点的底部显示,例如 © 2013 - 2015。 编辑 主题配置文件,新增字段 since。

配置示例


1
since: 2013

订阅微信公众号

在每篇文章的末尾显示微信公众号二维码,扫一扫,轻松订阅博客。

在微信公众号平台下载您的二维码,并将它存放于博客source/uploads/目录下。

然后编辑 主题配置文件,如下:

配置示例


1
2
3
4
5
6
7
8
9
# Wechat Subscriber

wechat_subscriber:

enabled: true

qcode: /uploads/wechat-qcode.jpg

description: 欢迎您扫一扫上面的微信公众号,订阅我的博客!

设置「动画效果」

NexT 默认开启动画效果,效果使用 JavaScript 编写,因此需要等待 JavaScript 脚本完全加载完毕后才会显示内容。 如果您比较在乎速度,可以将设置此字段的值为 false 来关闭动画。

编辑 主题配置文件, 搜索 use_motion,根据您的需求设置值为 true 或者 false 即可:


1
2
3
use_motion: true  # 开启动画效果

use_motion: false # 关闭动画效果

设置「背景动画」

next_bj

NexT 自带两种背景动画效果

编辑 主题配置文件, 搜索 canvas_nest 或 three_waves,根据您的需求设置值为 true 或者 false 即可:

注意: three_waves 在版本 5.1.1 中引入。只能同时开启一种背景动画效果。


1
2
3
4
5
6
7
canvas_nest 配置示例

# canvas_nest

canvas_nest: true //开启动画

canvas_nest: false //关闭动画

three_waves 配置示例


1
2
3
4
5
# three_waves

three_waves: true //开启动画

three_waves: false //关闭动画

主题的个性化配置

实现点击出现桃心效果

next_mouse
在网址输入如下

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
3
<!-- 页面点击小红心 -->

<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
12
13
14
15
16
17
18
19
20
21
22
23
// 文章内链接文本样式

.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;

}

}

其中选择 .post-body 是为了不影响标题,选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

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

修改模板/themes/next/layout/_macro/post.swig,搜索 rel=”tag”>#,将 # 换成


1
<i class="fa fa-tag"></i>

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

next_post_end

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


1
2
3
4
5
6
7
8
9
<div>

{% if not is_index %}

<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

{% endif %}

</div>

接着打开\themes\next\layout_macro\post.swig文件,在post-body 之后, post-footer 之前添加如下横线中代码


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{#####################}

{### END POST BODY ###}

{#####################}

-------------------------------------------------

<div>

{% if not is_index %}

{% include &apos;passage-end-tag.swig&apos; %}

{% endif %}

</div>

-------------------------------------------------

​ ​

1
2
3
4
5
6
7
8
9
{% if theme.wechat_subscriber.enabled and not is_index %}

<div>

{% include &apos;wechat-subscriber.swig&apos; %}

</div>

{% endif %}

然后打开主题配置文件(_config.yml),在末尾添加:


1
2
3
4
5
# 文章末尾添加“本文结束”标记

passage_end_tag:

enabled: true

完成以上设置之后,在每篇文章之后都会添加如上效果图的样子。

修改作者头像并旋转

默认头像是方正的

next_favator

打开\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
.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为循环播放) ]*/



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
  /* 鼠标经过头像旋转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);

}

}

主页文章添加阴影效果

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 主页文章添加阴影效果

.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);

}

在网站底部加上访问量

next_cpyright

打开\themes\next\layout_partials\footer.swig文件,在copyright前加上画红线这句话:


1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

再添加横线中的代码


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
<span title="{{ __(&apos;post.totalcount&apos;) }}">{#

#}{{ totalcount(site, &apos;0,0.0a&apos;) }}{#

#}</span>

{% endif %}

-->

</div>

{% if theme.footer.powered %}

--------------------------------------------------------

<div class="powered-by">

<span id="busuanzi_container_site_pv">

本站总访问量<span id="busuanzi_value_site_pv"></span>

</span>

</div>

--------------------------------------------------------

<!--

<div class="powered-by">{#

#}{{ __(&apos;footer.powered&apos;, &apos;<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>&apos;) }}{#

#}</div>

{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}

网站底部字数统计

next_cpyright

切换到根目录下,然后运行如下代码


1
$ npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上:


1
2
3
4
5
<div class="theme-info">

<div class="powered-by"></div>

<span class="post-count">博客全站共{{ totalcount(site) }}字</span>

同时把下面的注释掉


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
<!--

{% if theme.post_wordcount.totalcount %}

<span class="post-meta-divider">|</span>

<span class="post-meta-item-icon">

<i class="fa fa-area-chart"></i>

</span>

{% if theme.post_wordcount.item_text %}

<span class="post-meta-item-text">{{ __(&apos;post.totalcount&apos;) }}:</span>

{% endif %}

<span title="{{ __(&apos;post.totalcount&apos;) }}">{#

#}{{ totalcount(site, &apos;0,0.0a&apos;) }}{#

#}</span>

{% endif %}

-->

添加 README.md 文件

github上项目下一般都有一个 README.md 文件,但是使用 hexo 部署到仓库后,项目下是没有 README.md 文件的,或者说自己添加玩之后会发现里面的内容乱码,这是因为hexo渲染了。

在 Hexo 目录下的 source 根目录下添加一个 README.md 文件,修改站点配置文件 _config.yml ,将 skip_render 参数的值设置为


skip_render: README.md

这样设置后README.md就能正常显示了。

实现统计功能

next_count

在根目录下安装 hexo-wordcount,运行:


$ npm install hexo-wordcount --save

然后在主题的配置文件中,配置如下:


# Post wordcount display settings

# Dependencies: https://github.com/willin/hexo-wordcount

post_wordcount:

  item_text: true

  wordcount: true

  min2read: true

## 添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件,添加横线框上的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<meta charset="UTF-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta name="theme-color" content="{{ theme.android_chrome_color }}">

-------------------------------------------------------------------

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>

<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

-------------------------------------------------------------------

隐藏网页底部powered By Hexo / 强力驱动和Next版本信息

next_cpyright

打开themes/next/layout/_partials/footer.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
31
32
33
34
35
36
37
38
39
40
41
42
43
<!--

<div class="powered-by">{#

#}{{ __(&apos;footer.powered&apos;, &apos;<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>&apos;) }}{#

#}</div>

{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}

<span class="post-meta-divider">|</span>

{% endif %}

{% if theme.footer.theme.enable %}

<div class="theme-info">{#

#}{{ __(&apos;footer.theme&apos;) }} — {#

#}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#

#}NexT.{{ theme.scheme }}{#

#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#

#}</div>

{% endif %}

{% if theme.footer.custom_text %}

<div class="footer-custom">{#

#}{{ theme.footer.custom_text }}{#

#}</div>

{% endif %}

-->

添加jiathis分享

编辑 主题配置文件, 添加/修改字段 jiathis,值为 true。

JiaThis 内容分享服务配置示例


# JiaThis 分享服务

jiathis: true  

注意的点

  • 冒号后面一定要有空格

  • 添加分类和标签可能不显示,需要添加layout: “tags”设置

1
2
3
4
- title: tags
date: 2017-10-06 19:29:21
type: "tags"
layout: "tags"
  • rss订阅功能安装浏览器rss订阅插件测试
  • 测试发现不生效可以执行hexo clean清一下缓存再重新生成
-------------本文结束感谢您的阅读-------------