Hexo NexT主题配置

使用NexT主题

Git Bash 终端执行以下命令:

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

打开站点配置文件 _config.yml,找到 theme 字段,并将其值更改为 next

1
theme: next

我喜欢双栏的故使用 NexT.Pisces 主题,修改主题配置文件 _config.ymlSchemes 字段的值为:

1
scheme: Pisces

Next主题宽度调节

现在一般都用宽屏显示器,博客页面两侧留白太多,调整一下宽度
打开 \themes\next\source\css\_common\components\post\post-expand.styl 文件,找到

1
@media (max-width: 767px)

改为

1
@media (max-width: 1080px)

打开 \themes\next\source\css\ _variables\base.styl 文件,找到

1
2
3
$main-desktop = 960px
$main-desktop-large = 1200px
$content-desktop = 700px

修改 $main-desktop$content-desktop 的数值:

1
2
3
$main-desktop = 1080px
$main-desktop-large = 1200px
$content-desktop = 810px

Next.Mist 主题的文章宽度至此改完了。如果你用的是 Next.Pisces,还需要继续修改。
打开 \themes\next\source\css\_schemes\Pisces\_layout.styl 文件,将第 4 行的 width改为1080px ,修改后如下:

1
2
3
4
.header {
position: relative;
margin: 0 auto;
width: 1080px;

修改文章内链接文本样式

将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线
修改文件 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;
}
}

选择 .post-body 是为了不影响标题,选择 p 是为了不影响首页“阅读全文”的显示样式。

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

文章底部的那个带#号的标签,比如#NexT,可以把#换成图标吗,怎么设置?
修改模板 layout/_macro/post.swig,搜索 rel="tag">#,将 # 换成 <i class="fa fa-tag"></i>

首页展示文章动画效果和图片放大镜效果关闭哪改?

文章动画效果关闭:主题配置里 Motion: 改为 false

关闭图片放大镜效果: 主题配置里 fancybox: 改为 false

hexo背景动态效果和心心

把 js 文件 love.jsparticle.js 放在 \themes\next\source\js\src 文件目录下
更新 \themes\next\layout\_layout.swig 文件,在末尾(在前面引用会出现找不到的bug)添加以下 js 引入代码:

1
2
3
4
<!-- 背景动画 -->
<script type="text/javascript" src="/js/src/particle.js"></script>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

想设置动画线条颜色可改为:

1
<script type="text/javascript" color="255,0,0" opacity="0.3" count="99" src="particle.js"></script>

就能显示红色。或者用:

1
<script type="text/javascript" src="/js/src/particles.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>

两个JS下载为:

1
2
http://7u2ss1.com1.z0.glb.clouddn.com/love.js
http://7u2ss1.com1.z0.glb.clouddn.com/particle.js

hexo NexT主题首页title的优化

更改 index.swig 文件,文件路径是 your-hexo-site\themes\next\layout ,将下面代码

1
{% block title %} {{ config.title }} {% endblock %}

改成

1
{% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}

这时候你的首页标题会更符合网站名称 - 网站描述这习惯
进阶:做了 seo 优化,把关键词也显示在 Title 标题里,可改成

1
{% block title %} {{ theme.keywords }} - {{ config.title }} - {{ theme.description }} {% endblock %}

注意:别堆砌关键字,整个标题一般不超过 80 个字符,可以通过chinaz的seo综合查询检查

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

新建 passage-end-tag.swig 文件

在路径 \themes\next\layout\_macro 中添加 passage-end-tag.swig 文件,其内容为:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">------本文结束<i class="fa fa-paw"></i>感谢阅读------</div>
{% endif %}
</div>

修改 post.swig 文件

\themes\next\layout\_macro\post.swig 中, post-body 之后, post-footer 之前添加如下代码(post-footer之前两个DIV):

在主题配置文件中添加字段

在主题配置文件 _config.yml 中添加以下字段开启此功能:

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

增加HIGH一下功能

themes\next\layout\_macro 目录下增加 high.swig 文件,我已改为歌曲循环和多次点击不重复!地址为:

1
http://7u2ss1.com1.z0.glb.clouddn.com/high-xunhuan.swig

打开这个地址,复制全部内容,在你本地新建high.swig 文件
打开\themes\next\layout\_macro\sidebar.swig文件,打开,在

1
2
3
4
<a href="{{ url_for(theme.rss) }}" target="_blank" rel="alternate">
<i class="fa fa-rss"></i>
RSS
</a>

后边加入:

1
{% include 'high.swig' %}

如:

1
2
3
4
5
6
7
8
9
{% if theme.rss %}
<div class="feed-link motion-element">
<a href="{{ url_for(theme.rss) }}" rel="alternate">
<i class="fa fa-rss"></i>
RSS
</a>
{% include 'high.swig' %}
</div>
{% endif %}

接着在主题配置文件 _config.yml ,加入:

1
2
highqilai:
enabled: true

然后打开自定义CSS: \themes\next\source\css\_custom\custom.styl 加入

1
.feed-link a{display: inline-block;}

hexo cleanhexo g , hexo s 查看效果!
主页 High 起来,摇动。改动方法!

1
themes\next\layout\_layout.swig

前添加:

1
<link href="http://7u2ss1.com1.z0.glb.clouddn.com/harlem-shake-style.css" rel="stylesheet" type="text/css" />

地址改为你自己的CSS。失效了不怪!
如果只是想当播放器听歌的话改 high.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<a title="收藏到书签,偶尔High一下^_^" rel="alternate" class="mw-harlem_shake_slow wobble shake" href='javascript:(
/*
* Copyright (C) 2015 Rocko (rocko.xyz) <rocko.zxp@gmail.com>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function go() {
var songs = [
"http://7u2ss1.com1.z0.glb.clouddn.com/%E9%AB%98%E6%A2%A8%E5%BA%B7%E6%B2%BB%20-%20%E5%AD%A4%E7%8B%AC.mp3",
"http://7u2ss1.com1.z0.glb.clouddn.com/one%20by%20one.mp3",
"http://7u2ss1.com1.z0.glb.clouddn.com/Enya%20-%20Only%20Time.mp3",
"http://7u2ss1.com1.z0.glb.clouddn.com/Enya%20-%20May%20It%20Be.mp3",
"......"
];
function S() {
var e = document.getElementById("audio_element_id");
if(e != null){
var index = parseInt(e.getAttribute("curSongIndex"));
if(index > songs.length - 2) {
index = 0;
} else {
index++;
}
e.setAttribute("curSongIndex", index);
}
e.src = i;
e.play()
}
function initAudioEle() {
var e = document.getElementById("audio_element_id");
if(e === null){
e = document.createElement("audio");
e.setAttribute("curSongIndex", 0);
e.id = "audio_element_id";
e.loop = false;
e.bgcolor = 0;
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.addEventListener("ended", function() {
go();
}, true);
}
}
initAudioEle();
var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
var i = songs[curSongIndex];
S();
})()'>
<i class="fa fa-music"></i> 听音乐</a>

作者头像变成圆形

打开自定义CSS: \themes\next\source\css\_custom\custom.styl 加入

1
2
3
4
5
6
7
.site-author-image {
border-radius: 100%;
padding: 2px;
border: 2px dashed #fff;
animation: cycle 2s 0.5s forwards;
transition: border-radius 2s;
}

博主名字号大小,也在 custom.styl 文件:

1
2
3
.site-author-name {
font-size: 16px;
}

博文置顶

修改 hexo-generator-index 插件

替换文件:node_modules/hexo-generator-index/lib/generator.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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

设置文章置顶

在文章 Front-matter 中添加 top 值,数值越大文章越靠前,如:

1
2
3
4
5
6
7
---
title: Hexo NexT主题配置
tags: hexo
categories: hexo
date: 2016-12-27 12:10:15
top: 5
---

NexT主题自定义面页无序列表样式

打开自定义CSS: \themes\next\source\css\_custom\custom.styl 加入:

1
2
3
ul {
list-style-type: circle; // 空心圆,实心圆为 disc
}

原文地址:Hexo+NexT主题配置备忘

-------------本文结束感谢您的阅读-------------