Hexo 3.9.0 + NexT 7.2.0 => Hexo 5.1.0 + NexT 8.0.0

🏳‍🌈惨案

一个 Warning 引发的惨案!

升级方式

全新安装, 因为我不会升级啊~~😂

安装 Git

进入 Git 官方网站 下载安装.

可以使用 git --version 进行验证, 出现版本号就说明成功了.

安装 Nodejs

进入 Nodejs 官方网站 下载安装.

尽量选择安装长期支持版本 (LTS), 最新发布版可能会有警告, 甚至有错误发生!

可以使用 node -v 和 npm -v 进行验证, 出现版本号就说明成功了.

安装 Hexo

安装 Hexo 之前, 设置 Hexo 的安装位置. 具体见我的另一篇博客: Hexo + Github Pages 搭建个人博客 这里不再赘述!

安装 Hexo: npm install hexo-cli -g

创建本地博客

1. 新建文件夹, 放置本地博客, 名称随意. F:\WorkSpace\Hexo

2. 初始化本地博客, 在 Git Bash Here 中输入: hexo init

[注] 此步骤需要耗费较长一段时间, 我大概用了 25 分钟! 慢慢等吧!

hexo init 是这次升级遇到的第一个大坑, 忘记了这个要执行好长一段时间, 好几次自己等不耐烦了, 直接 Ctrl + C 了! 😂

3. 安装默认依赖包, 在 Git Bash Here 中输入: npm install

[注] 在上一步中大部分的依赖其实已经安装了, 这里只是安装一小部分, 所以很快!

4. 生成静态文件, 在 Git Bash Here 中输入: hexo generate

5. 开启服务, 在 Git Bash Here 中输入 hexo server

部署 Hexo

1. 安装 Hexo deploy 插件, 在 Git Bash Here 中输入: npm install hexo-deployer-git --no-optional

2. 在站点配置文件中配置:

deploy:
  type: git
  repo: git@github.com:KurohaKirito/KurohaKirito.github.io.git
  branch: master

[注] repo 仓库的地址: 有 SSH 和 HTTPS 两种格式, 推荐选择 SSH 格式, 如果选择 Https 格式, 每次发布时都必须输入账号密码, 不嫌麻烦的可以用!

安装 NexT 主题

这里是第二个大坑, 最新版的 NexT 的仓库已经换地址了, 我还傻乎乎地用之前的地址, 唉...😔

• 2014-2017 => https://github.com/iissnan/hexo-theme-next

• 2018-2019 => https://github.com/theme-next/hexo-theme-next

• 2020-2020 => https://github.com/next-theme/hexo-theme-next

新版的 NexT 推荐使用 npm install hexo-theme-next --no-optional 进行安装, 作为一个 node_module 存在! 安装之后路径为: node_module/hexo-theme-next.

新版的 NexT 推荐用户不要修改主题目录下的配置文件, 而是在站点根目录下新建一个 _config[.主题名称].yml 文件, 作为新的主题配置文件.

可以先从 node_module/hexo-theme-next 文件夹中复制一份配置文件出来, 然后按照规则重命名, 最后修改其中的设置即可!

自定义站点配置文件

主题

修改 theme 的值为 next, 这里的名字要和之前新建主题配置文件时使用的名称一致!

博客网址样式

permalink: :title.html

关闭 "半角字符自动转换全角字符"

marked:
  smartypants: false

生成站点地图 (谷歌版)

1. 安装依赖 hexo-generator-sitemap, 命令: npm install hexo-generator-sitemap --no-optional, 之后生成网站时, 便会自动在根目录生成一个 sitemap.xml 文件!

2. 在 source 文件夹下新建文本文件: robots.txt, 并写入以下内容:

User-agent: *
Disallow:
Sitemap: https://kuroha.vip/sitemap.xml

• • User-agent : 定义以下配置对哪些搜索引擎生效.
• • Allow : 允许抓取的内容.
• • Disallow : 不允许抓取的内容.
• • Sitemap : 站点地图的存放地址.

重新发布之后, 便可以将站点地图提交给 Google Search 了!

自定义主题配置文件

配置文件中只需要改改设置就可以出现效果的就不提了, 说一下注意事项:

开启自定义配置

取消自定义配置文件的注释, 并且要在对应的路径下创建对应的文件.

开启标签, 分类, 关于菜单

取消相应的设置选项后, 必须在 source 文件夹下创建相应的路径, 并创建相应的 markdown 文件, 文件中的内容虽然很简单, 但是也必须添加! comments : false 可以使当前页面禁用评论系统.

分类

---
type: "categories"
comments: false
---

标签

---
type: "tags"
comments: false
---

设置 Favicon 图标

在 favicon 属性后设置路径之后, 必须在相应的路径下创建图片, 否则找不到文件会报错! 设置侧边栏头像时同理.

添加预计阅读时间功能

需要安装依赖: hexo-word-counter

npm install hexo-word-counter --no-optional

[注] 所有需要安装依赖才能出现效果的, 安装完依赖并设置好之后, 必须清理缓存重新生成才会生效!

[注] 某些特效需要关闭新版 NexT 中的 Pjax

关闭最受欢迎文章功能

NexT 中有这么一个设置: related_posts, 可以当作 "最近受欢迎的文章", "相关博客" 或者 "推荐阅读" 使用, 但是由于其依赖有点过时, 推荐关闭此功能!

代码高亮风格设置

如果使用 Prism 进行代码高亮渲染, 并且选择较高级的一些效果, 需要安装依赖.

npm install prism-themes --no-optional

并且要在 站点配置文件 中将 highlight 设为 false, prismjs 设为 true.

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

最后在 主题配置文件 的 prism 后设置使用的渲染风格.

本地搜索

需要安装依赖: hexo-generator-searchdb

npm install hexo-generator-searchdb --no-optional

音乐播放器 APlayer

APlayer 源码地址: APlayer

新建目录: source/js/aplayer, 下载并解压源码, 将 dist 文件夹中的四个文件复制到 source/js/aplayer 中.

返回 source/js 文件夹, 新建一个 fixedAplayer.js 文件, 输入以下代码:

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
      {
        name: '歌曲的名字',
        artist: '歌手',
        url: '音乐文件的地址',
        cover: '封面图片的地址',
      }
    ]
});

之后在 source/_data/body-end.njk 中添加:

<!--APlayer 吸底式音乐播放功能-->
{% if theme.aplayer_fixed %}
    <link rel="stylesheet" href="/js/aplayer/APlayer.min.css">
    <div id="aplayer"></div>
    <script type="text/javascript" src="/js/aplayer/APlayer.min.js"></script>
    <script type="text/javascript" src="/js/fixedAplayer.js"></script>
{% endif %}

最后在 主题配置文件 中写入 aplayer_fixed: true.

视频播放器 DPlayer

DPlayer 源码地址: DPlayer

新建目录: source/js/dplayer, 下载并解压源码, 将 dist 文件夹中的四个文件复制到 source/js/dplayer 中.

在待添加视频博客的所需位置中添加以下代码:

<div id="dplayer"></div>
<script src="/js/dplayer/DPlayer.min.js"></script>

<script>
const dp_update = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video:
    {
        url: '/video/hexo_update/hexo_update.mp4', //视频文件
        pic: '/video/hexo_update/hexo_update.jpg', //视频封面
    },
});
</script>

自定义单行代码段样式

打开 source/_data/styles.styl 文件, 添加对 Code 标签的自定义配置即可. 下面是我博客使用的配置.

// 单行代码块
code {
    font-size: 20px;
    // color: #978665;
    // background: #3B3C3E;
    color: #c71585;
    background: #fffafa;
    // border: 1px solid #000000; // 边框
    // border-radius: 4px; // 边框圆角
    word-break: break-word; // 换行方式
    padding: 2px 4px; // 占位扩充 (高度, 宽度)
    margin: 0px; // 左右间隔
}

自定义鼠标样式

打开 source/_data/styles.styl 文件, 添加自定义配置.

// 鼠标样式, 格式: *.ani (动态), *.cur (静态)
body {
    cursor: url('/cursor/arrow.cur'), default;
}
a:link {
    cursor: url('/cursor/link.cur'), pointer;
}
a:hover {
    cursor: url('/cursor/link.cur'), pointer;
}
a:visited {
    cursor: url('/cursor/arrow.cur'),
}
a:active {
    cursor: url('/cursor/arrow.cur'),
}

自定义字体

打开 source/_data/variables.styl 文件, 添加自定义配置. 参考: Hexo NexT 主题的字体更换

// $font-family-chinese 负责调控中文字体, 但优先级最低
$font-family-chinese = "Noto Serif SC", "PingFang SC", "Microsoft YaHei";

// $font-family-base 负责调控全局字体, 主要是不被下面几类包括的文字
$font-family-base = $font-family-chinese, sans-serif;
$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

// $font-family-logo 负责调控网站标题的字体
$font-family-logo = $font-family-base;
$font-family-logo = get_font_family('title'), $font-family-base if get_font_family('title');

// $font-family-headings 负责调控 h1-h6 的字体, 包括标题与文中小标题
$font-family-headings = $font-family-base;
$font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings');

// $font-family-posts 负责调控正文字体
$font-family-posts = $font-family-base;
$font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts');

// $font-family-monospace 负责调控代码块的字体
$font-family-monospace = consolas, Menlo, monospace, $font-family-chinese;
$font-family-monospace = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');

添加捉小猫游戏

1. 下载捉小猫游戏源文件并解压, 之后将解压好的文件夹 source 和博客目录下的 source 文件夹合并. Catch The Cat

2. 在主题配置文件的 menu 处添加新菜单项: 捉小猫! 仅需两步, 大功告成!

menu:
  捉小猫: /catch_the_cat/ || fa fa-cat

鼠标右键菜单 GalMenu

1. 下载 GalMenu 源文件并解压, 之后将解压好的文件夹 galmenu 放到博客的 source/js 文件夹下. GalMenu 下载链接 解压密码是本网站首页地址

2. 在主题配置文件 _config.next.yml 中添加配置.

galmenu:
  enable: true # 动漫菜单
  audio: true # 菜单音效

3. 在 source/_data/body-end.njk 文件中添加配置.

   [注] 在这里可以自定义菜单项名称, 而且在 audio 标签中可以自定义音效文件名称, 建议不要修改路径. 修改名称后记得一定要在 source/js/galmenu/audio 文件夹中放入自定义的音效资源.

<!--动漫菜单-->
{% if theme.galmenu.enable %}
    <div class="GalMenu GalDropDown">
        <div class="circle" id="gal">
            <div class="ring">
                <a href="/" class="menuItem">首页</a>
                <a href="javascript:history.go(1);" class="menuItem">前进</a>
                <a href="javascript:$('html,body').animate({scrollTop:0},500);" class="menuItem">顶部</a>
                <a href="javascript:location.reload();" class="menuItem">刷新</a>
                <a href="/about/" class="menuItem">留言</a>
                <a href="javascript:history.go(-1);" class="menuItem">后退</a>
            </div>
            {% if theme.galmenu.audio %}
                <audio id="audio" src="../js/galmenu/audio/sao-menu.wav"></audio>
            {% endif %}
        </div>
    </div>
    <script type="text/javascript">
        var items = document.querySelectorAll('.menuItem');
        for (var i = 0, l = items.length; i < l; i++) {
            items[i].style.left = (50 - 35 * Math.cos(- 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
            items[i].style.top = (50 + 35 * Math.sin(- 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%"
        }
    </script>
    <script>
        window.jQuery || document.write('<script src="../js/galmenu/js/jquery.min.js"><\/script>')
    </script>
    <script src="../js/galmenu/js/GalMenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('body').GalMenu({'menu': 'GalDropDown'})
        });
    </script>
{% endif %}

3. 在 source/_data/head.njk 文件内添加 CSS 引用.

   [注] 在这个 CSS 文件中可以修改菜单图片的文件名, 建议不要修改路径. 修改名称后记得一定要在 source/js/galmenu/img 文件夹中放入自定义的图片资源.

<!--动漫菜单-->
{% if theme.galmenu.enable %}
    <link rel="stylesheet" href="../js/galmenu/css/GalMenu.css">
{% endif %}

至此大功告成!

鼠标单击之心形图案特效

在 source/js 下创建 love.js 文件, 内容具体见我的另一篇博客: Hexo + NexT 主题美化 (NexT v7.2.0) 这里不再赘述!

之后在 source/_data/body-end.njk 中添加:

<!--心形图案效果-->
{% if theme.love %}
  <script type="text/javascript" src="/js/love.js"></script>
{% endif %}

最后在 主题配置文件 中写入 love: true.

鼠标单击之烟花爆炸特效

1. 下载 fireworks.js 文件到 source/js 文件夹下

2. 在 source/_data/body-end.njk 中添加:

<!--烟花爆炸特效-->
{% if theme.fireworks %}
    <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
    <script type="text/javascript" src="/js/fireworks.js"></script>
{% endif %}

3. 在 主题配置文件 中写入 fireworks: true.

下载地址: fireworks.7z, 解压密码是本网站首页地址

[注] 都读到这里了, 我想你肯定早就知道了, 想要获取文章中提到的所有资源文件, 只要 F12 就可以了! 😂 当然我还是提供了下载地址的...

页面标题欺诈

在 source/js 下创建 crash_cheat.js 文件, 内容具体见我的另一篇博客: Hexo + NexT 主题美化 (NexT v7.2.0) 这里不再赘述!

之后在 source/_data/body-end.njk 中添加:

<!--崩溃欺骗-->
{% if theme.crashcheat %}
  <script type="text/javascript" src="/js/crash_cheat.js"></script>
{% endif %}

最后在 主题配置文件 中写入 crashcheat: true.

球形标签云

球形标签云其实就是用这个插件 TagCanvas 实现的, 点击进入官网.

进入官网后下载 tagcanvas.js 文件, 也可以直接在左面我给出的链接那里 "右键 => 链接另存为", 保存到: source\js 目录下. 需要的就是这一个 tagcanvas.js 文件!

打开 source/js 文件夹中再新建一个 tagcloud.js 文件, 写入以下内容:

window.onload = function () {
    try {
        TagCanvas.Start('my3DTags', 'tags',
            {
                textFont: 'Georgia,Optima',
                textColour: null,
                outlineColour: 'black',
                weight: true,
                reverse: true,
                depth: 0.8,
                maxSpeed: 0.05,
                bgRadius: 1,
                freezeDecel: true
            });
    }
    catch (e) {
        document
            .getElementById('myTags')
            .style
            .display = 'none';
    }
};

[题外话] 新版的 NexT 推荐用户不要再修改主题目录中的任何文件, 虽然我是一个前端纯小白, 但是我也在尽力去遵守这条约定, 但是我发现如果我想要实现这个标签云, 就必须修改主题目录中的文件! 如果有人知道可以不修改主题目录中的文件便可以实现相同的效果, 请务必告知, 十分感谢!

打开文件 node_modules\hexo-theme-next\layout\page.njk, 在这个 <div class="tag-cloud-tags"> 的前面加上如下代码:

{# 球形云标签 #}
<div class="tags" id="myTags">
  <canvas width="720" height="720" id="my3DTags">
  </canvas>
</div>
<div class="tags" id="tags">
  <ul style="display: none">
    {{ tagcloud({
        min_font   : 16,
        max_font   : 35,
        amount     : 999,
        color      : true,
        start_color: 'black',
        end_color  : 'green'
      })
    }}
  </ul>
</div>
<script type="text/javascript" src="/js/tagcanvas.js"></script>
<script type="text/javascript" src="/js/tagcloud.js"></script>
{# 普通云标签 #}

最后在 主题配置文件 中写入 crashcheat: true.tagcanvas: true.

[注] 球形标签云也可以使用 Hexo 的插件 hexo-tag-cloud 来实现, 其实最终都是依赖于 tagcanvas.js 文件的, 而且我尝试 hexo-tag-cloud 后发现我不会改效果...😂 所以还是用了之前的老方法!

另外, 执行上面的操作后, 球形标签云和普通标签云是同时存在的, 如果只想要显示球形标签云, 把后面那个 普通云标签 的 div 标签注释掉就行了. 就像这样:

{# 普通云标签 #}
{# <div class="tag-cloud-tags">
    {{ tagcloud({
      min_font: theme.tagcloud.min,
      max_font: theme.tagcloud.max,
      amount  : theme.tagcloud.amount,
      orderby : theme.tagcloud.orderby,
      order   : theme.tagcloud.order,
      class   : 'tag-cloud'
      })
    }}
  </div> #}

[注] 如果使用的是 NexT 8.2.2 版本是找不到 node_modules\hexo-theme-next\layout\page.njk 文件的, 而是需要修改 node_modules\hexo-theme-next\layout\_partials\page\tags.njk 文件, 将此文件中的内容全部修改为:

<div class="tag-cloud">
  <div class="tag-cloud-title">
    {{ _p('counter.tag_cloud', site.tags.length) }}
  </div>

  {# 球形云标签 #}
  <div class="tags" id="myTags">
    <canvas width="720" height="720" id="my3DTags" style="display: block;margin: 0 auto;">
    </canvas>
  </div>
  <div class="tags" id="tags">
    <ul style="display: none">
      {{ tagcloud({
          min_font   : 16,
          max_font   : 35,
          amount     : 999,
          color      : true,
          start_color: 'black',
          end_color  : 'green'
        })
      }}
    </ul>
  </div>
  <script type="text/javascript" src="/js/tagcanvas.js"></script>
  <script type="text/javascript" src="/js/tagcloud.js"></script>
  {# 球形云标签 #}

  <div class="tag-cloud-tags">
    {{ tagcloud({
      min_font: theme.tagcloud.min,
      max_font: theme.tagcloud.max,
      amount  : theme.tagcloud.amount,
      orderby : theme.tagcloud.orderby,
      order   : theme.tagcloud.order,
      class   : 'tag-cloud'
      })
    }}
  </div>
</div>

粒子时钟

下载文件 clock.js, 可以直接在链接上 "右键 => 链接另存为", 放到 source/js/ 路径下.

之后在 source/_data/sidebar.njk 中添加:

{# 粒子时钟 #}
{% if theme.clock %}
    <div>
        <canvas id="canvasDiyBlock" style="width:60%;">您的浏览器不支持 Canvas, 请更换浏览器!</canvas>
        <script type="text/javascript" src="/js/clock.js"></script>
    </div>
{% endif %}

最后在 主题配置文件 中写入 clock: true.

站点运行时间

下载文件 website_runtime.js, 可以直接在链接上 "右键 => 链接另存为", 放到 source/js/ 路径下.

之后在 source/_data/footer.njk 中添加:

{# 站点已运行时间 #}
{% if theme.websiteruntime %}
    <div id="days"></div>
    <script type="text/javascript" src="/js/website_runtime.js"></script>
{% endif %}

最后在 主题配置文件 中写入 websiteruntime: true.

萌萌的看板娘

• 第一种: hexo-helper-live2d 优点: 有声音, 缺点: 无法换装, 无法换模型, 响应事件少.

使用方法见官方网址: hexo-helper-live2d

• 第二种: live2d-widget 优点: 能换装, 能切换模型, 响应事件多, 缺点: 无声音, 配置较复杂. (现在可能已经有声音了)

使用方法见官方网址: live2d-widget

• 第三种: live2d_demo 优点: 能换装, 能切换模型, 响应事件多, 缺点: 无声音, 配置较复杂. (现在可能已经有声音了)

使用方法见官方网址: live2d_demo

我是用的是第 3 种 live2d_demo

1. 下载 live2d_demo: live2d_demo, 解压密码是本网站首页地址

2. 解压之后放到 source/js/ 目录下, 完成这一步之后, 在 source/js/live2d_demo/ 目录下应该有 9 个文件.

3. 在 source/_data/body-end.njk 文件的最后添加:

<!--萌萌看板娘-->
{% if theme.live2d_demo %}
    <script type="text/javascript" src="/js/live2d_demo/jquery-ui.js"></script><!-- 实现拖动效果，需引入 JQuery UI -->
    <script type="text/javascript" src="/js/live2d_demo/autoload.js"></script><!-- 使用 autoload.js 自动引入看板娘 -->
{% endif %}

4. 最后在 主题配置文件 中写入 live2d_demo: true, 启用看板娘!

[注]

1. 要定制自己的看板娘, 可以修改 autoload.js 中的参数配置, 还可以在 waifu-tips.json 中修改对话, 这两处的配置足够定制自己独特的看板娘了!

2. 经过以上操作如果还是不能达到效果, 请检查 autoload.js 中的路径设置是否正确! (虽然我已经配置好了, 可以直接拿来用, 不过既然出问题了, 就自己检查一下吧!)

aplayer 音乐效果展示

dplayer 视频效果展示