那些年，爬过的坑 | Next 5.1.0 升级 7.4.2

发表于 更新于 分类于 ，
  • Hexo 升级
  • Next升级7.4.2

手贱，点了升级！浪费了一天半的时间，将近30个小时。网上没有Next7.4.2的升级文档，参考两篇大佬的文章（文末有链接）自己动手整理了这篇升级教程，供手残党参考。

参考next官网配置文档

升级 Hexo

下载

$ npm install hexo-cli -g
$ hexo init blog

npm

package.json npm 安装包移动到新目录，安装所需要的包：

$ npm install

_config.yml

将站点个人配置（图片链接、API、True/False等）平移过去

Next theme 升级

Next 主题已经升级到 6.0，Hexo 也进行了同步升级，下面是升级过程中遇到的一些问题：

下载源码

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

或者直接从Next 主题下载

_config.xml

将旧_config.xml 文件配置，导入到新的_config.xml 配置。

语言

中文语言设置，已经从 zh-Hans 更换为 zh-CN，在站点_config.xml 更新。

修改 custom.styl

打开　\themes\next\source\css
复制_custom文件夹到新主题的\themes\next\source\css路径
打开　\themes\next\source\css\main.styl
查找 // Custom Layer
在末尾添加

1
2
@import "_custom/custom";
@import "_custom/fonts"; # (可选，如果有自定义字体)

畅言去版权

打开 \themes\next\source\css\_custom\custom.styl
添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#SOHUCS #SOHU_MAIN .module-cmt-notice{display:none !important;}
.section-service-w{display:none !important;}
#SOHUCS #SOHU_MAIN .module-cmt-box .post-wrap-w .post-wrap-main{background:none;background-image:url(https://i.loli.net/2017/08/05/5985668d58744.png) !important;}
#SOHUCS{position:relative;z-index:0 !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .split-hr{display:none !important;}
.phone-login{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper.changyan-login-dialog-wrapper-main{height:250px !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-group .login-item .login-logo-phone{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-instruction{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-group .login-item .login-logo-wechat{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper.changyan-login-dialog-wrapper-main{background:none;background-image:url(https://i.loli.net/2017/08/05/59856762568bb.png) !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .cy-logo{background:none !important;}
#SOHUCS #SOHU_MAIN .module-cmt-box .post-wrap-w .wrap-action-w .action-issue-w .issue-btn-w a .btn-fw{background:none;background-image:url(https://i.loli.net/2017/08/05/5985612ad66f5.png) !important;}
#SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w, #SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w .service-wrap-w, #SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w .service-wrap-w a{height:0px !important;overflow:hidden !important;}

文末结束标记

打开　\themes\next\layout\_macro\
新建　passage-end-tag.swig
写入

1
2
3
4
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:15px;"><br/><br/><br/>
-------------文章结束啦 ฅ●ω●ฅ 感谢您的阅读-------------</div>
<br/>

打开　\themes\next\layout\_macro\post.swig
查找　wechat，在前面添加

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

打开　\themes\next\_config.yml
添加

文章末尾添加“本文结束”标记

1
2
passage_end_tag:
    enabled: true

引入自定义文件 例子

打开　\themes\next\layout\_custom\
新建　custom.swig
打开　\themes\next\layout\_layout.swig
在 </body> 前添加　

1
{% include '_custom/custom.swig' %}

侧边栏加入aplayer音乐播放器和时间

打开 \themes\next\source\js\custom\
替换 APlayer.min.js
打开　\themes\next\layout\_custom\
替换 sidebar-aplayer.swig和sidebar-time.swig
打开　\themes\next\layout\_macro\sidebar.swig
查找 next_inject

在上图位置插入如下代码

1
2
{% include '../_custom/sidebar-aplayer.swig' %}
{% include '../_custom/sidebar-time.swig' %}

aplayer 采用cdn css 和 js

打开\themes\next\layout\_custom\sidebar-aplayer.swig

复制以下内容覆盖源文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
	<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"></div>
<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('aplayer'),
    "narrow": false,                          // （可选）播放器袖珍风格
    "autoplay": false,                         // （可选) 自动播放，移动端浏览器暂时不支持此功能
    "mode": "random",                         // （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
    "showlrc": 0,                             // （可选）歌词显示配置项，可选项有：0,1,2,3
    "mutex": true,                            // （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
    "theme": "#e6d0b2",	                      // （可选）播放器风格色彩设置，默认：#b7daff
    "preload": "metadata",                    // （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px",                 // (可选) 该播放列表的最大长度
    music: [{
      title: 'song name',
      author: 'people name',
      url: 'url',
      pic: 'https://url.jpg',
    }]
  });
</script>

hexo s 预览效果如下：

小红心与网页标题崩溃欺骗

打开 themes\next\source\js\custom
替换 crash_cheat.js和 love.js
打开 themes\next\layout\_custom\custom.swig
写入

1
2
3
4
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/custom/crash_cheat.js"></script>

打开 themes\next\layout
在 </body> 前插入

1
{% include '_custom/custom.swig' %}

更改上一篇，下一篇的顺序

打开 themes/next/layout/_macro/post.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
{% if not is_index and (post.prev or post.next) %}
  <div class="post-nav">
    <div class="post-nav-next post-nav-item">
-      {% if post.next %}
+      {% if post.prev %}
-        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
+        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
-          <i class="fa fa-chevron-left"></i> {{ post.next.title }}
+          <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
        </a>
      {% endif %}
    </div>

    <span class="post-nav-divider"></span>

    <div class="post-nav-prev post-nav-item">
-      {% if post.prev %}
+      {% if post.next %}
-        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
+        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
-          {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
+          {{ post.next.title }} <i class="fa fa-chevron-right"></i>
        </a>
      {% endif %}
    </div>
  </div>
{% endif %}

文章摘要图片

前提

1
2
3
4
# 文件位置：~/blog/themes/next/_config.yml
excerpt_description: false
auto_excerpt:
  enable: false

打开 themes/next/layout/_macro/post.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
      {% if is_index %}
        {% if post.description and theme.excerpt_description %}
          {{ post.description }}
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="{{ url_for(post.path) }}">
              {{ __('post.read_more') }} &raquo;
            </a>
          </div>
          <!--/noindex-->
        {% elif post.excerpt  %}
          {{ post.excerpt }}
+          
+        {% if post.image %}
+        <div class="out-img-topic">
+          <img src={{ post.image }} class="img-topic" />
+        </div>
+        {% endif %}
+          
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#{{ __('post.more') }}{% endif %}" rel="contents">
              {{ __('post.read_more') }} &raquo;
            </a>
          </div>
          <!--/noindex-->

为了使摘要图片风格统一，页面美观：
打开themes/next/source/css/_custom/custom.styl
/* 自定义的文章摘要图片样式 */

1
2
3
img.img-topic {
    width: 100%;
}

页脚加上微信二维码

首先编辑文件，在文件最后加上下面代码：

1
2
3
4
5
6
7
8
9
<!-- 文件位置：~/blog/themes/next/layout/_partials/footer.swig -->

<div class="weixin-box">
  <div class="weixin-menu">
    <div class="weixin-hover">
      <div class="weixin-description">微信扫一扫，订阅本博客</div>
    </div>
  </div>
</div>

然后编辑 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
/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义的页脚微信订阅号样式 */
.weixin-box {
    position: absolute;
    bottom: 43px;
    left: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.weixin-menu {
    position: relative;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background: url(https://微信的logo.svg);
    background-size: 24px 24px;
}
.weixin-hover {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 0px;
    width: 0px;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background: url(https://二维码.svg);
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 150px 150px;
    transition: all 0.35s ease-in-out;
    z-index: 1024;
    opacity: 0;
}
.weixin-menu:hover .weixin-hover {
    bottom: 24px;
    left: 24px;
    height: 170px;
    width: 150px;
    opacity: 1;
}
.weixin-description {
    opacity: 0;
    position: absolute;
    bottom: 3%;
    left: 5%;
    right: 5%;
    font-size: 12px;
    transition: all 0.35s cubic-bezier(1, 0, 0, 1);
}
.weixin-menu:hover .weixin-description {
    opacity: 1;
}

点击侧栏头像回到博客首页

打开 themes\next\layout\_partials\sidebar\site-overview.swig
增加两行

1
2
3
4
5
6
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+ <a href="/">
  <img class="site-author-image" itemprop="image" alt="{{ author }}"
    src="{{ url_for(theme.avatar.url or theme.images + '/avatar.gif') }}">
+ </a>
  <p class="site-author-name" itemprop="name">{{ author }}</p>

文章底部加上评分小星星

打开 themes\next\layout\_partials\post\post-footer.swig

1
2
3
4
5
 {%- if theme.rating.enable %}
   <div class="wp_rating">
+     <div style="color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px">(&gt;来评分吧&lt;)</div>
     <div id="wpac-rating"></div>
   </div>

让页脚的心跳动起来

编辑

1
2
3
4
<!-- 文件位置：~/blog/themes/next/layout/_partials/footer.swig -->

- <span class="with-love">
+ <span class="with-love" id="heart">

修改分类层级显示

打开　\themes\next\layout\_macro\post.swig
查找

1
{{ __('symbol.comma') }}

改为

1
{{ __('>') }}

文章加密功能更新

安装插件

1
npm install --save hexo-blog-encrypt

文章内容模板

1
2
3
4
5
6
7
8
---
title: Theme test
date: 2019-12-21 11:54:07
tags:
    - A Tag should be encrypted
theme: shrink
password: "hello"
---

参考博客：(Next7.4版本相比参考的两篇博客有改动，建议参考本文)
打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化
Hexo 优化汇总

-------------文章结束啦 ฅ●ω●ฅ 感谢您的阅读-------------