emm…由于对某些next5.1.4当中没有实现的功能存有执念…，于是便有了此篇文章……

将next 5.1.4 版本尝试升级到了next 7.x的版本
升级后部分优化项与之前的5.1.4的设置并不完全通用。
以下将对有区别的项及如何在7.x中修改进行功能的实现进行记录

前言

多数配置是可以直接从旧主题配置 _config.yml中复制过来的，
可以同时将新旧配置文件打开对照着看，结合翻译，可更加快速准确的理解各项设置。

升级next 7.x

升级的话我是参考的这两篇文章
https://github.com/theme-next/hexo-theme-next/blob/master/docs/UPDATE-FROM-5.1.X.md
https://zhuanlan.zhihu.com/p/163830894
我分别实验了两个，分别是7.7.2和7.8.0
7.7.2地址

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

7.8.0地址

1	git clone https://github.com/gonghs/hexo-theme-next themes/next7.8.0

感觉没啥区别，最终用的7.8.0
修改站点配置文件为新主题

1	theme: next7.8.0

附：NEXT主题历年的Github存储源
2014- 2017年
https://github.com/iissnan/hexo-theme-next
2018-2019
https://github.com/theme-next/hexo-theme-next
2020年
https://github.com/next-theme/hexo-theme-next

安装之前一定注意将之前的主题目录进行备份，或将整个站点目录进行备份。俗话说得好，有备无患，这样才能放开手脚大胆尝试，万一改着改着..干崩了….还可以随时回复到原样，不影响使用。
新的主题储存位置不要与原next目录重叠，上面两条git连接已经分别指定到了next-reloadad目录和next7.8.0目录。
正常情况是可以随时在站点配置文件中进行主题切换的，万一没改好崩了就从备份覆盖恢复吧。

语言问题

由于官方将中文的语言命名由zh-Hans改为了zh-CN，因此要将hexo配置文件中的语言进行对应修改。
打开站点配置文件进行修改

1	language: zh-CN

文章预览/阅读全文

文章预览部分由于next7.x将部分依赖插件移除了
首先需要安装自动摘录生成器插件

1	npm install hexo-excerpt --save

打开主题配置文件定位到excerpt_description，修改以下两项为true

# Automatically excerpt description in homepage as preamble text.  自动摘要
excerpt_description: true
# Read more button
# If true, the read more button will be displayed in excerpt section. 显示阅读全文按钮
read_more_btn: true

比较不好的一点是这个只能自动读取摘要非常之不智能！！！读取的摘要狠多！！！
推荐之后编写文章时自己设置摘要
若想保留了样式并且自行选择显示哪些内容来预览。就可以在写md博文时，在想要显示预览的部分后加上，这样这样首页和列表页展示的文章内容就是之前的文字，而之后的就不会显示了，同时也保留文章原样式。

然后如果觉得自动摘录的过多想自定义摘录数量的话
打开站点配置文件，添加以下行

excerpt:
  depth: 3  
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

其中depth的数值是摘录多少行的意思，
与5.14相比，摘录的方式由原来的摘录指定字数，变为了行数。

个人名称及简介

个人头像下的作者名称和简介不用单独在主题配置文件中添加 author、description 选项了，
可以直接从站点配置文件中进行调用。

字数统计异常

在旧版本中的post_wordcount配置似乎已经不可用，因此需要使用symbols_count_time替代。
此插件与next5.x相比，不用再单独配置全站总字数了，可以一次性设置统计单篇文章字数及站点全部文章的总字数。
卸载原有依赖及安装新插件，不卸载对新插件会有影响

1 2	npm uninstall hexo-wordcount npm i hexo-symbols-count-time

打开主题配置文件，定位到symbols_count_time下开启相关功能：

symbols_count_time:
  # 换行显示字数统计和阅读市场
  separated_meta: true
  # 文章底部显示
  item_text_post: true
  # 博客底部显示 默认为false
  item_text_total: true

在站点配置文件内还可以设置显示哪些内容和一些统计维度：

symbols_count_time:
  # 文章字数
  symbols: true
  # 阅读时长
  time: true
  # 总文章字数
  total_symbols: true
  # 阅读总时长
  total_time: true
  # 是否排除代码统计
  exclude_codeblock: false

添加动态背景

next 7.x的动态背景与5.x有些区别，默认自带的移除了canvas_nest，增加了一个彩带的
并且默认状态是移除插件，需要那个效果需要单独手动安装。
打开主题配置文件定位到以下段落，会看到有两大块已经预设好的动态背景，默认都是flse，此时修改为true是不会生效的

three:
  enable: false
  three_waves: false
  canvas_lines: true
  canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

想实现three的动态效果安装以下插件
在themes/next7.X 目录内打开Git bash，然后开始安装

1	git clone https://github.com/theme-next/theme-next-three source/lib/three

想实现canvas_ribbon动态效果的安装以下插件
在themes/next7.X 目录内打开Git bash，然后开始安装

1	git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

安装完成相应的插件后，只需返回主题配置文件将相关的功能设置为 true 开启状态即可。
hexo s 本地预览。

后续
偶然间看到一篇文章提到了canvas_nest插件，我又给装回来了
想实现canvas_nest的动态效果安装以下插件
在themes/next7.X 目录内打开Git bash，然后开始安装

1	git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

打开主题配置文件添加以下内容

canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,255' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

在next主题目录/source/lib/canvas-nest中打开Git bash

git pull

最后常规操作重新生成一下，嘿嘿，熟悉的canvas_nest效果又回来了
感谢作者：https://himmy.blog.csdn.net/article/details/95000707?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-95000707-blog-104691631.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-95000707-blog-104691631.pc_relevant_default&utm_relevant_index=2

底部栏小心心

next 7.x的底部栏默认自带的，红心可以跳动了
修改主题配置文件定位到Icon进行如下修改

# Icon between year and copyright info.
icon:
  # Icon name in Font Awesome. See: https://fontawesome.com/icons
  name: fa fa-heart   #心型图标
  # If you want to animate the icon, set it to true.
  animated: true      #是否开启跳动动画   
  # Change the color of icon, using Hex Code.
  color: "#ff0000"    #默认颜色 红

然后如果想要换图标的话配置文件内的网址我试了不太好使
https://fontawesome.com/icons
可以参考这个网址我是将fa fa-heart换为了fa fa-heartbeat
https://www.thinkcmf.com/font/search/index.html

修改文章底部的#号标签

文章底部标签前的#好修改为标签符号，在7.x主题中已经内置好了，正常是只需要到主题配置文件中定位到tag_icon修改为true即可，不需要修改其他地方
如果修改true后未生效可继续参考以下配置。
在next主题目录/layout/_macro/找到post.swig文件，搜索 rel="tag">#
此处通过对比之前的主题的post.swig文件的此处，可以发现，在<div class="post-tags">的前面加入了一段if判断的语句，让rel="tag">去找tag_indicate获取参数，并且默认已经将<i class="fa fa-tag"></i>写入在内了,如果不生效一直被判断结果为 # 号的话。
可以通过以下两种方式实现，
第一个方法简单粗暴，直接将此 if 判断段落删除，(全部 #号注释掉或直接删除此段)

#          {%- if theme.tag_icon %}
#            {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
#          {% else %}
#            {%- set tag_indicate = '#' %}
#          {%- endif %}

然后将rel="tag">{{ tag_indicate }}修改为rel="tag"><i class="fa fa-tag"></i> 也就是与之前的配置文件基本上相同了。

第二种方式是将 if 判断内的 else 值修改为与 if 值一样。((/ω＼))

{%- if theme.tag_icon %}
  {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
{% else %}
  {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
{%- endif %}

三种方式均可以实现，任君挑选。

鼠标点击特效

通过对比后发现next7.x取消了_custom/custom.swig，也就是说旧版的/layout/_layout.swig中配置的调用custom.swig配置失效了。
在主题目录/js/内创建cursor目录，将之前的四个特效文件可以直接拖到新的cursor目录内继续使用
新的设置
可以通过查看主题配置文件custom_file_path:处，确认调用的是source/_data/body-end.swig文件
此处注意！调用的swig文件的内容其实是没有发生任何变化的，只是位置不同了，
之前调用的是主题目录内的``custom.swig
新的调用body-end.swig是从站点目录/source/_data/内进行的调用！
打开站点目录/source/_data/ 创建body-end.swig文件，(默认应该是没有body-end.swig的,包括_data目录)
在body-end.swig中添加以下代码：（也可将原来的custom.swig直接改个名拖过来）

{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
  <script async src="/js/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
  <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
  <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
  <script async src="/js/explosion.js"></script>
{% elseif theme.cursor_effect == "love" %}
  <script async src="/js/love.js"></script>
{% elseif theme.cursor_effect == "text" %}
  <script async src="/js/text.js"></script>
{% endif %}

然后在主题配置文件中删除body-end.swig行的#号注释：(新的内容)

custom_file_path:
... ...
bodyEnd: source/_data/body-end.swig
... ...

最后在主题配置文件中添加如下配置项：(此步与之前一致)

1
2
3

# 鼠标点击特效
# mouse click effect: fireworks | explosion | love | text
cursor_effect: love

最后，点击效果的小心心又回来啦~

canvas 粒子时钟

在优化其他项时意外发现了一个有意思的功能https://tding.top/archives/2bd6d82.html

首先在站点目录/source/_data/ 创建clock.swig文件粘贴以下代码

{% macro render(display_toc) %}
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      {%- set display_toc = page.toc.enable and display_toc %}
      {%- if display_toc %}
        {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
        {%- set display_toc = toc.length > 1 and display_toc %}
      {%- endif %}

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          {{ __('sidebar.toc') }}
        </li>
        <li class="sidebar-nav-overview">
          {{ __('sidebar.overview') }}
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
        {%- if display_toc %}
          <div class="post-toc motion-element">{{ toc }}</div>
        {%- endif %}
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

        {{- next_inject('sidebar') }}
      </div>

      {%- if theme.back2top.enable and theme.back2top.sidebar %}
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
      {%- endif %}

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>
{% endmacro %}

然后打开主题配置文件在custom_file_path:段将sidebar前的 # 号注释删除

custom_file_path:
略....
  sidebar: source/_data/sidebar.swig
略.....

最后在主题配置文件中添加如下配置项：

# 侧栏粒子时钟
diy_time:
  runtime: true 
  clock: true # 粒子时钟

一键复制代码功能

next7.x集成了此功能，不用像5.x那么折腾了
只需要在主题配置文件中定位copy_button:设置为true即可

copy_button:
  enable: true       #开关
  # Show text copy result.   #展示复制成功结果
  show_result: true
  # Available values: default | flat | mac  #风格样式
  style: mac

自定义配置文件

由于7.x没有了custom，在搜索如何修改代码块样式自定义的时候看到一篇文章，居然可以直接在7.x自定义配置文件，超级方便，一口气按照教程添加了好几个功能，好使。

首先在主题目录/source/css/内，创建_other.styl文件
然后再主题目录/source/css/内，找到main.styl文件并打开，在末尾添加如下调用配置

1 2	//个人添加 @import "_other.styl";

最后只需要将想实现的效果直接添加在_other.styl文件中就可以了
我在_other.styl中添加了如下功能，可以进行参考按需添加。

 //背景图片  url内地址可替换成自己喜欢的图片链接或本地链接
body {
     background:url(https://pic.heson10.com/img/image-20200712231958010.png);
     background-repeat: no-repeat;
     background-attachment:fixed;
     background-size: cover;
     background-position:50% 50%; }

 
 //博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

//首页顶部留白
.container{margin-top:10px;} 

//首页banner渐变色
.site-brand-container {
    background: linear-gradient(200deg, #2e80a5, #0c0c0b);
}

// ``代码块样式
//code {
//    color: #E6006B;
//    background: white;
//    border-radius: 0.3em;
//}

code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

添加页脚本站运行时长

进入主题配置文件，把footer.swig的注释去掉：
然后再站点目录/source/_data/中新建footer.swig
编辑footer.swig，写入以下代码：

<span id="sitetime"></span>
<script language=javascript>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2020,05,14,18,07,00); //北京时间2020-05-14 18:07
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("sitetime").innerHTML="本站已苟且生存了 "+/*diffYears+" 年 "+*/diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
    }/*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/
    siteTime();
</script>

站点访问数量统计

next7.x版本已经集成了busuanzi对站点访问量统计，只需要在配置文件中定位busuanzi将相关功能开启应该即可生效，但是遇到了个小问题，在Chrome中并未正常工作，但是Safari和Firefox都没问题。最终咨询了大神得知chrome高版本默认的refer策略变了
网上查找了相关的文章，可以通过修改Referrer-Policy默认值从no-referrer-when-downgrade改为strict-origin-when-cross-origin进行解决
https://www.rongsoft.com/article/2020/12/09154351878/
https://www.jianshu.com/p/26512475501a?ivk_sa=1024320u

文章加密

emm..在没有购买github私有仓库的情况下，是个伪加密，
可以直接从git上查找下载到公开的源代码

安装插件

1	npm install --save hexo-blog-encrypt

站点配置文件添加

1
2
3

# Security
encrypt:
    enable: true

文章头部添加password、abstract、message。

---
title: hello world
date: 22022-5-30 21:24:00
password: test
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
---

本博客加密文章等级公示

加密等级	加密权限	加密内容类型
0	绝对不对外公开	`***
1	不对陌生人公开，熟人阅读后，会修改密码，不涉及商业	`***
2	不对非利益方公开	涉及商业
3	仅对私人或者好友开放	原作者或者其他可能类似侵权的原因
4	可选择性公开	个人总结、个人不方便公开的生活经历等
5	未来会自动公开	主要是对于一些原创文章的保护
1
2
3

参考文献

https://www.heson10.com/posts/46324.html
https://www.heson10.com/posts/52911.html
https://tding.top/archives/2bd6d82.html
https://zhuanlan.zhihu.com/p/157883940

Mysterious-X Blog

nexT主题 - 版本升级及优化

前言