Next 主题 配置

hexo next 主题的配置及个性化

(1) next主题的配置

next主题目录结构

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
├── .github            #git信息
├── languages #多语言
| ├── default.yml #默认语言
| └── zh-Hans.yml #简体中文
| └── zh-tw.yml #繁体中文
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _custom #可以自己修改的模板,覆盖原有模板
| | ├── _header.swig #头部样式
| | ├── _sidebar.swig #侧边栏样式
| ├── _macro #可以自己修改的模板,覆盖原有模板
| | ├── post.swig #文章模板
| | ├── reward.swig #打赏模板
| | ├── sidebar.swig #侧边栏模板
| ├── _partial #局部的布局
| | ├── head #头部模板
| | ├── search #搜索模板
| | ├── share #分享模板
| ├── _script #局部的布局
| ├── _third-party #第三方模板
| ├── _layout.swig #主页面模板
| ├── index.swig #主页面模板
| ├── page #页面模板
| └── tag.swig #tag模板
├── scripts #script源码
| ├── tags #tags的script源码
| ├── marge.js #页面模板
├── source #源码
| ├── css #css源码
| | ├── _common #*.styl基础css
| | ├── _custom #*.styl局部css
| | └── _mixins #mixins的css
| ├── fonts #字体
| ├── images #图片
| ├── uploads #添加的文件
| └── js #javascript源代码
├── _config.yml #主题配置文件
└── README.md #用GitHub的都知道


(2) Hexo+Next主题 文章添加阅读次数,访问量等

不蒜子统计
打开 Hexo 目录下的 \themes\next\ _config.yml 文件

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: 次


(3) 在文章底部增加版权信息

在目录 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
31
32
{% 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 type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
<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');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '复制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}

在目录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;
}

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

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

之前增加

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

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

1
@import "my-post-copyright"

保存重新生成即可。

如果要在该博文下面增加版权信息的显示,需要在 Markdown 中增加copyright: true的设置,类似:

1
2
3
4
5
6
7
---
title: 前端小项目:使用canvas绘画哆啦A梦
date: 2017-05-22 22:53:53
tags: canvas
categories: 前端
copyright: true
---


(4) 添加顶部加载条

最新版的next主题,升级后只需修改主题配置文件(_config.yml)将pace: false改为pace: true就行了,你还可以换不同样式的加载条。

如果不是最新版,按照以下配置

1
2
<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">

但是,默认的是粉色的,要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码(接在刚才link的后面)

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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">
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>


(5) 实现点击出现桃心效果

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


(6) 文章加密访问

打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码:

1
2
3
4
5
6
7
8
9
10
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>
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>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>


(7) 博文置顶

修改 hero-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
}
});
};

在文章中添加 top 值,数值越大文章越靠前,如

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Next主题配置
date: 2017-10-26 09:49:17
updated:
categories: blog
type:
tags:
- blog
comments:
copyright:
mathjax:
top: 10
---


(8) Hexo去掉码市(gitee.com)跳转页

找到themes/next/layout/_partials/footer.swig文件,

1
2
<div class="theme-info">
</div>前加入下面文字

1
2
3
<span>|one of Hosted by 
<a href="https://pages.coding.me" rel="external nofollow">Coding Pages</a>
</span>


(9) 添加博客更新时间

/themes/next/layout/_macro/post.swig 文件,在 <span class="post-time">...</span> 标签后添加以下内容

1
2
3
4
5
6
7
8
{%if post.updated and post.updated > post.date%}
<span class="post-updated">
&nbsp; | &nbsp; {{ __('post.updated') }}
<time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
{{ date(post.updated, config.date_format) }}
</time>
</span>
{% endif %}


(10) 自定义网站配置

常见问题

NexT 对于内容的宽度的设定如下:

700px,当屏幕宽度 < 1600px
900px,当屏幕宽度 >= 1600px
移动设备下,宽度自适应
如果你需要修改内容的宽度,同样需要编辑样式文件。 编辑主题的 source/css/_variables/custom.styl 文件,新增变量:

修改 themes/hexo-theme-next/source/css/_variables/custom.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
55
56
57
58
59
60
61
62
63
64
65
66
// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px
```

以下方法弃用

themes/hexo-theme-next/source/css/_custom/custom.styl
```text
// Custom styles.

// 给页面添加背景图片
// https://source.unsplash.com/ 素材
// http://oty1v077k.bkt.clouddn.com/body_girlasideflower.jpg
body{
background: #C7EDCC // #C7EDCC //background:url(/img/backgroud.png);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}


// 文字背景色以及半透明的设置
.content {
border-radius: 10px;
margin-top: 30px;
background:rgba(199, 237, 204, 0.6) none repeat scroll !important;
}


// 页面宽度
.main-inner {width: 80%;}


// 代码颜色
#posts code {color: black; background-color:white;}



// 页面头部和底部栏的背景色修改
// 0, 0, 255, 0.4
.header {
background:rgba(199, 179, 229, 1) none repeat scroll !important;
}
.footer {
background:rgba(199, 179, 229, 1) none repeat scroll !important;
}


// 侧栏背景图以及内部文字颜色的修改
#sidebar {
background: #FDFFDF; // #FDFFDF
background-size: cover;
background-position:center;
background-repeat:no-repeat;
p,span,a {color: black;}
}

// 评论(来必力)添加背景色
#lv-container {
border-radius: 10px;
background:rgba(0, 0, 0, 0.3) none repeat scroll !important;
}


(11) hexo-algolia全文搜索

hexo-theme-next 从5.1.4升级到6.0.3,发现hexo-algoliasearch不能全文搜索了
hexo algolia报错

1
2
3
4
5
6
7
8
9
$ hexo algolia
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
AlgoliaSearchError: Please provide an application ID. Usage: algoliasearch(applicationID, apiKey, opts)
at AlgoliaSearchNodeJS.AlgoliaSearchCore (C:\blog\node_modules\algoliasearch\src\AlgoliaSearchCore.js:51:11)
at AlgoliaSearchNodeJS.AlgoliaSearch (C:\blog\node_modules\algoliasearch\src\AlgoliaSearch.js:11:21)
at AlgoliaSearchNodeJS.AlgoliaSearchServer (C:\blog\node_modules\algoliasearch\src\server\builds\AlgoliaSearchServer.js:17:17)
at new AlgoliaSearchNodeJS (C:\blog\node_modules\algoliasearch\src\server\builds\node.js:79:23)
at algoliasearch (C:\blog\node_modules\algoliasearch\src\server\builds\node.js:68:10)
at C:\blog\node_modules\hexo-algolia\lib\command.js:67:16

这个是使用hexo-algoliasearch组件出现的问题

首先安装组件

1
npm install hexo-algoliasearch --save

如果不确定,建议同时设置 applicationID 和 appId

修改3处地方,把以下3个文件里的applicationID 替换为 appId

  1. 博客的_config.yml (1处)
  2. next主题的 source/js/src/algolia-search.js (2处)
  3. next主题的 layout/_partials/head/head.swig (2处)

blog/_config.yml 修改完如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
algolia:
appId: xxxx
applicationID: xxxx
apiKey: xxxx
adminApiKey: xxxx
indexName: xxxx
chunkSize: 5000
fields:
- title
- tags
- slug
- excerpt
- excerpt:strip
- photos
- gallery
- permalink
- content:strip


(12) 标签页图标

修改以下两个文件
hexo-theme-next/source/images/favicon-16x16-next.png
hexo-theme-next/source/images/favicon-32x32-next.png

(13) hexo algolia 不能用

can not find lib/algolia-instant-search/instantsearch.min.css lib/algolia-instant-search/instantsearch.min.js [need to install libs separately]

缺少文件了,按照以下方法获取文件

1
2
cd hexo-theme-next/source/lib/algolia-instant-search/
git clone https://github.com/theme-next/theme-next-algolia-instant-search


(14) Algolia Settings are invalid.

更新hexo-theme-next后,并且把配置文件放到blog/source/_data/next.yml,然后algolia就不能用了,用以下办法解决
修改blog/_config.yml 把appId修改为applicationID

hexo clean --config source/_data/next.yml && hexo g --config source/_data/next.yml


(15) 图片素材

图片素材

图标库


(16) Forbidden to create by class ‘Counter’ permissions

403 Forbidden to create by class ‘Counter’ permissions

修改 Counter 和 Comment 类的权限

References

[1] hexo-theme-next官方配置文档
[2] next主题官方文档
[3] HEXO-NEXT主题个性化配置
[4] hexo的next主题个性化配置教程
[5] hexo的next主题个性化配置教程
[6] Hexo搭建博客教程
[7] Unsplash Source | A Simple API for Embedding Free Photos from Unsplash
[8] 个人博客网站接入来必力评论系统
[9] Hexo去掉码市跳转页
[10] UPDATE-FROM-5.1.X.md
[11] ALGOLIA-SEARCH.md
[12] hexo-algoliasearch-error
[13] hexo-algoliasearch
[14] hexo-algolia
[15] can not find lib instantsearch.min.css
[16] DATA-FILES.md
[17] github hexo-leancloud-counter-security
[18] hexo-leancloud-counter-security–Errors see plugin configuration
[19] Leancloud访客统计插件重大安全漏洞修复指南
[20] Hexo Next leancloud文章阅读次数配置以及插件无效问题解决
[21] Valine 评论系统中的邮件提醒设置
[22] 分享
[23] theme-next-algolia-instant-search