Hexo的Next主题配置记录

对Hexo的Next主题的一点小小修改,持续更新。

1. 修改CSS

建议将本节内容均提取并保存到主题文件夹里的source/css_custom/custom.styl文件中

1.1 定义颜色参数

在主题的source/css/_variables/base.styl文件中添加如下参数(当然,也可以不添加,待会直接改后面的文件),位置随意:

1
2
$my-header-bg = #1e88e5
$my-blockquote-color = #ff5722

1.2 修改Header背景颜色

针对的是Pisces主题。修改博客名所在的那个方块的背景颜色。

修改主题的source/css/_schemes/Pisces/_brand.styl文件:

1
2
3
4
5
6
7
8
9
10
11
12
.site-meta {
padding: 20px 0;
color: white;
background: $my-header-bg; # 修改此处,默认是$black-deep

+tablet() {
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
+mobile() {
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
}

1.2 修改文章中引文竖条的颜色

默认的引文的竖条颜色是灰色的,个人感觉不是很好看。

修改主题的source/css/_common/scaffolding/base.styl文件:

1
2
3
4
5
6
7
8
9
10
blockquote {
padding: 0 15px;
color: $grey-dim;
border-left: 4px solid $my-blockquote-color; # 修改此处

cite::before {
content: "-";
padding: 0 5px;
}
}

现在的效果如下:

1.3 修改Pisces的宽度

针对Pisces主题,个人感觉内容页面太窄了,调大一点。

下图是修改前的宽度:

下图是修改后的跨度:

修改主题的source/css/_schemes/Pisces/_layout.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
header{ width: 60% !important; }
header.post-header {
width: auto !important;
}
.container .main-inner { width: 60%; }
.content-wrap { width: calc(100% - 260px); }

.header {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.container .main-inner {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.content-wrap {
+tablet() {
width: 100% !important;
}
+mobile() {
width: 100% !important;
}
}

1.4 修改首页中顶部文章与页面顶部的间距

修改主题文件夹中的source/css/_common/components/post/post-expand.styl文件:

1
2
3
.posts-expand {
padding-top: 30px; // 初始为40px
}

1.5 修改文章标题与页面顶部的间距

修改的是红框的高度:

修改文件主题文件夹中的source/css/_common/components/post/post-meta.styl文件,就在文件起始处:

1
2
.posts-expand .post-meta {
margin: 3px 0 30px 0; // 第三个值控制的是上图的高度

1.6 修改首页文章的间距、文章分割线的长宽及颜色

修改主题文件夹中的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: 30px auto 30px; // 修改第1和第3个值
width: 100%; // 文章之间那根短线的长度
height: 10px; // 文章之间那根短线的高度
background: $body-bg-color; // 文章之间那根短线的颜色
text-align: center;
}
}

1.7 修改“阅读全文”按钮

去掉这个按钮的外边框,修改主题文件夹中的source/css/_common/components/buttons.styl文件:

1
2
3
4
5
6
7
8
.btn {
display: inline-block;
padding: 0 20px;
font-size: $btn-default-font-size;
color: $btn-default-color;
background: $btn-default-bg;
border: 0; // 将这一项改为0
}

如果想让它离上方的文本近一些,需要修改主题文件夹中的source/css/_common/components/post/post-button.styl文件:

1
2
3
.post-button {
margin-top: 20px; // 修改此处
}

2. 去掉目录中的序号

文章中Sidebar里的目录会为标题自动生成序号,修改主题的配置文件可以取消序号自动生成:

1
2
3
toc:
# Automatically add list number to toc.
number: false # 默认为true

3. 去掉打赏中的动画

将主题source/css/_common/components/post/post-reward.styl文件中的如下部分注释掉即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#bitcoin:hover p {
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}

4. 添加 Google Webmaster tools 验证

之前一直按照网上传统方法下载谷歌生成的html认证文件来验证网站,但不知道为啥就不管用了,今天突然发现Next主题配置文件里居然后谷歌认证,下面是设置过程:

登录到Google Webmaster Tools,找到验证页面,选择“备用方法”,点击里面的第一项”HTML标记”,得到如下标记:

1
<meta name="google-site-verification" content="xxxxxx" />

content中的内容xxxxxx复制到Next主题的配置文件中:

1
2
3
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification: xxxxxx # 这一项默认为空!

5. 修改文章底部标签前的#号

找到主题根目录下的layout/_macro/post.swig文件,搜索rel="tag">#,将#改为<i class="fa fa-tag"></i>

6. 修改图标

这里指的图标是浏览器标签页上的网站图标(网站名左边的那个图标),如下:

默认的是Next主题的官方图标。笔者是到https://www.flaticon.com这个网站下载的SVG文件,然后转换成16×16像素,32×32像素以及180×180像素三个尺寸。

将这一共四个文件拷贝到主题目录下的source/images文件夹中,然后修改主题配置文件中的如下内容:

1
2
3
4
5
6
7
8
# 当然你也可以不修改这个文件,而是直接将你的这四个图像文件覆盖掉默认的文件
favicon:
small: /images/favicon-16x16-next.png # 16×16像素
medium: /images/favicon-32x32-next.png # 32×32像素
apple_touch_icon: /images/apple-touch-icon-next.png # 180×180像素
safari_pinned_tab: /images/logo.svg # 修改为你下载的svg文件
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

7. Gitment无法初始化Validation Failed

初始化Gitment时可能遇到Error: Validation Failed错误,这个错误主要是因为github的issue的标签lable最长只能50字符,如果用英文则不容易出错,但每个中文会被编码成两个UTF8字符,很容易超过限制。下面是集中解决办法,但首先请打开Next主题文件夹下的layout\_third-party\comments\gitment.swig文件,找到如下内容:

1
2
3
4
5
function renderGitment(){
var gitment = new {{CommentsClass}}({
id: window.location.pathname, # 这是要修改的地方!!!
owner: '{{ theme.gitment.github_user }}',
repo: '{{ theme.gitment.github_repo }}',

以下是几种常用的方法:

1
2
3
4
5
6
7
8
# 方法1:将id的值进行解码:
id: decodeURI(window.location.pathname)

# 方法2:将id设置成页面的标题
id: '<%= page.title %>'

# 方法3:改用时间作为id
id: '<%= page.date %>'
VPointer wechat
欢迎大家关注我的微信公众号"代码港"~~
您的慷慨将鼓励我继续创作~~