“next爬坑深度魔改（四）”

发表于 | 分类于 ， ，
  |   字数统计 2075

此文章是在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=""  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title" style=" font-family:FreeStyle Script;color: #AC161A;">
        
        </span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>

远程调用字体库（兲朝·远程字体）

注册 有字库 并搜索字体，查看语系 中/英 选择立即使用

  1. 在要使用该字体的标签属性中添加如下代码：font-family:'FreestyleScriptITC-Normal';；例如：<h1 style="font-family:'FreestyleScriptITC-Normal';" >你的内容</h1>

  2. 将以下代码加到你网页的<head>标签之内。

1
2
 
<link href='https://cdn.webfont.youziku.com/webfonts/nomal/129645/33899/5cf0e452f629d80774a3a155.css'
rel='stylesheet' type='text/css' />

将 link 标签代码块添加至 head.swig，再到custom.styl调整即可

1
2
3
4
5
6
7
 
/*标题*/
.site-meta .site-title {
  font-size: 50px;
  font-weight: bolder;
  font-family:FreestyleScriptITC-Normal
  color: #AC161A;
}

添加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
4
5
 

  {% 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/layout/_macro下添加passage-end-tag.swig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<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
6
7
 
<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标签后任意位置插入。

<script>
    (function(){
        if(''){
          var str = prompt('请输入文章密码');
            if (str == null || str==''){
                history.back();
            }else if(str !== ''){
              alert('密码错误');
              history.back();
            }
        }
    })();
</script>

btw，增加确认弹窗，这样就可以在front-matter中provision: true激活弹窗

<script>
    (function(){
        if(''){
          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
153
154
155
156
157
158
159
160
161
162
163
 
/* 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;
  font-family:FreestyleScriptITC-Normal
  color: #AC161A;
}
/*副标题*/
/* .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%;
    /*鼠标样式*/
    cursor: url(https://cdn.jsdelivr.net/gh/hoochanlon/w3-goto-world/W3UnitTest/Arrow.cur),auto;
}
a:hover{
  /*链接鼠标样式*/
 cursor : url(https://cdn.jsdelivr.net/gh/hoochanlon/w3-goto-world/W3UnitTest/Hand.cur),pointer;
}

/*文章内容块布局*/
.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;
background: #ffffff;
  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环境下调试并保存代码。