Fork me on GitHub

next爬坑深度魔改

前言
由于相对来说较为“初级”的教程很多,相对于而言,next的搭建过程也就不细说了;hexo水还是有些深。有半点初级基础相对来说会好一点,当然没有任何方面基础也可以,做多了也差不多了。
此文章是在hexo已经搭建成功基础之上,且next主题能在显示正确效果下,进行的较为详细的说明。

参考链接

因为此类教程很多写的还不错且较为详细,所以没必要重复造轮子。这里还有一些插件项目的补充,可看需求自行选择。

遇到过的坑

这里列举常用的,更多详情访问具体项目的issues

btw,如果写作完成且没做任何配置的情况下,hexo g生成有误应该是markdown语法不对

其他细节方面的问题

设置CC协议

参考wiki,也可选择禁用;使用自己定制的cc协议请参考 hexo的next主题个性化配置教程

修改站点标题字体

themes/next/layout/_partials/header.swig中的custom-logo-site-titlediv部分下添加

1
2
3
4
5
6
7
8
9
<div class="custom-logo-site-title">
<a href="{{ config.root }}" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title" style=" font-family:FreeStyle Script;color: #AC161A;">
{{ config.title }}
</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>

添加README.md

source根目录下添加README.md,再修改hexo的站点配置文件_config.yml,设置skip_render: README.md保存退出即可。使用hexo d命令就不会在渲染README.md这个文件了。

添加相关文章

添加”相关文章”板块实际上是做一次伪升级,因为v5.x并没有,v6.0.x才新增集成的功能;安装npm install hexo-related-popular-posts --save,下载新版本next主题;找到themes\next\layout\_macro\post.swig文件,将如下代码复制在原版本同路径post.swig中,复制位置在支付代码相关部分上方即可例如:代码放在wechat支付的上面。

1
2
3
{% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
{% include 'post-related.swig' with { post: post } %}
{% endif %}

themes\next\layout\_macro\post-related.swig文件复制在原版本同目录中;打开新版本主题中的_config.yml将如下代码复制在原版本主题配置文件中

1
2
3
4
5
6
7
8
9
10
11
12
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: true
title: # custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false

打开themes\next\languages\zh-CN.yml文件找到related_posts,将此行复制到zh-Hans.yml中增加相关中文即可

添加文章结尾标记

themes/next/layout/_macro下添加passage-end-tag.swig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
{% if page.passage_end %}
<style>
.passage_end::after{
content: "- The End -";
text-align:center;
color: #252525;
display: block;
font-size:26px;
font-weight:bold;
font-family: Vladimir Script;
}
</style>
<div class="passage_end"></div>
{% endif %}
</div>

next/layout/_macro/post.swig在相关支付代码之前增加如下代码:

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

即可在front-matter中使用passage_end: true打开文章结尾表语

js文章访问密码优化

因为其他博客的文章访问密码章节的js,当用户不输入时点击确定或是取消都弹出密码错误,显得不人性化,为此进行的改进方案;在themes->next->layout->_partials->head.swig文件,meta标签后任意位置插入。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
(function(){
if('{{ page.password }}'){
var str = prompt('请输入文章密码');
if (str == null || str==''){
history.back();
}else if(str !== '{{ page.password }}'){
alert('密码错误');
history.back();
}
}
})();
</script>

btw,增加确认弹窗,这样就可以在front-matterprovision: true激活弹窗

1
2
3
4
5
6
7
8
9
10
11
<script>
(function(){
if('{{ page.provision }}'){
var bool = confirm("请阅读一下条款:"+"\n"+"以下文章涉及成人内容,"
+ "未满18周岁建议在家长指导下观看" );
if(!bool){
history.back();
}
}
})();
</script>

自定义样式喜好概览 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
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
/* Custom styles.*/
.header {
/*用于完全显示一整块背景*/
background: $head-bg;
/* background:url(https://s1.ax2x.com/2018/03/13/Eoiz6.jpg);*/
/* background: #F5F5F5;*/
background-size: cover;
background-repeat: no-repeat;

}
/*标题*/
.site-meta .site-title {
font-size: 50px;
font-weight: bolder;
}
/*副标题*/
/* .site-subtitle { display: none; }*/
.site-subtitle {
margin-top: 10px;
font-size: 13px;
color: #555555;
/* color: #ffdf58;*/
}

/*菜单字体颜色*/
// .menu-item a {color:#c7c7c7;}
/*菜单悬停颜色*/
/*.menu .menu-item a:hover {
background: #36363c;
}*/

/*移动设备菜单显示扩展*/
.site-nav-on {
display: none;
margin: 0 -10px;
padding: 0 10px;
clear: both;
border-top-style: none;
/*border-top: 1px solid #ddd;*/
}

body {
/*随机换图*/
/* background:url(https://source.unsplash.com/random/1600x900);
background:url(https://s1.ax2x.com/2018/03/10/EHdHq.jpg);
background: #E7E8EA;*/
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
background-position: 50% 50%;
}

/*文章内容块布局*/
.main-inner {
margin-top: 10px;
/* margin-top: 60px;*/
/*padding: 60px 60px 60px 60px;*/
padding: 10px 1px 1px 1px;
/* background: #e6e6e6; */
width:830px;
/* hight:720px; */
min-height: 500px;
/*透明度*/
opacity: 0.91;
}
/*内容盒子扩充*/
.use-motion .post {
BACKGROUND-COLOR: #fff;
padding: 40px 30px 40px 30px;
border: 1px solid #eaecee;
margin: 0 0 40px 0;
position: relative;
-webkit-box-shadow: 0 4px 12px -1px rgba(36,41,46,.6);
-moz-box-shadow: 0 4px 12px -1px rgba(36,41,46,.6);
box-shadow: 0 4px 12px -1px rgba(36,41,46,.6);
}

/*文章顶部内容紧凑*/
.posts-expand .post-meta {
margin: 3px 0 5px 0;
}

/*阅读全文按钮部分*/
.post-button a:hover {
border-bottom-color:#a96363;
}
/*阅读全文按钮悬停部分*/
.btn:hover {
border-color: #222;
color: #222;
background: none;
}
/*文字以及下划线部分*/
.post-button a {
padding: 0;
font-size: 16px;
background: none;
border: none;
border-bottom: 2px solid #666;
transition-property: border;
}


/*标签悬停颜色*/
.posts-expand .post-tags a:hover {
background: orange;
}
/*标签背景色*/
.posts-expand .post-tags a {
padding: 1px 5px;
background: #d6af66;
color: #ea1616;
font-size: 13px;
border-bottom: none;
display: inline-block;
margin-right: 10px;
}

/*页脚*/
.footer {
font-size: 14px;
color: $grey-dark;
background: #2E2E2E;
img { border: none; }
}
/*页脚内容居中*/
.footer-inner {
margin: 0 auto;
text-align: center;
}


/* 隐藏分类列表占位符以及列表居中样式调整*/
.category-list-item {
margin: 5px 10px;
text-align: center;
/* list-style: none !important;*/
}


/*侧边信息栏*/
/* .sidebar-toggle {}*/
/*侧边回滚顶部栏*/
/* .back-to-top {}*/

/*时间侧边栏格式*/
#days {
display: block;
color: #8989A3;
font-size: 13px;
margin-top: 15px;
}

开发者工具很重要

可以先使用开发者模式进行预览;在不更改站点、主题配置文件时,可在hexo s环境下调试并保存代码。

本文标题:next爬坑深度魔改

文章作者:lorem

发布时间:2018年03月09日 - 16:03

最后更新:2018年11月29日 - 17:11

原始链接:https://loremwalker.github.io/note/2018/03-09/55b3a5a.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%