0%

hexo next主题更新

发表于 更新于 分类于
本文字数： 2.1k 阅读时长 ≈ 2 分钟

hexo next主题更新

next主题设置文档链接：http://theme-next.iissnan.com/

前言

​ 因为我之前用hexo搭建个人博客的时候一直使用的是next主题，不过在最近的一次next主题配置设置的时候，发现配置文件_config.YML中有很多我没有的选项，结果发现我的next版本是5.1.4，现在我要将它更新到7.4。

​ 想着next主题更新的话，顺便也可以更新下hexo，但是发现我就是当前最新版4.2.0，那就只更新一下next就行。

步骤

  • 本地保存旧版本数据
  • 下载新版本
  • 更新设置新版本

实现

​ 直接把next主题配置文件_config.YML复制一份，然后直接把theme/next目录删掉

​ 然后从新地址安装最新版 NexT 主题

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

​ 如果下载很慢 , 或者下载失败 , 也可以直接到 https://github.com/theme-next/hexo-theme-next下载源文件 , 点击左侧的 Clone or download , 然后点击 Download ZIP , 下载到本地后 , 在 Hexo 的 \themes 文件夹下创建 next 文件夹 , 然后将 zip 文件解压到这个目录即可

更新配置

​ 对照一下旧版的配置文件和新下载的配置文件修改一下即可。

设置语言

​ language: zh-cn

主题选项

​ 使用Mist主题 scheme: Mist

侧边栏社交链接

​ 在social选段中设置，我这边设置了自己的github和Email

1
2
GitHub: https://github.com/BMooS || github
E-Mail: mailto:slibo921@gmail.com || envelope

友链设置

​ 在links选段下，我设置了自己的码云地址

1
2
links:
  My-gitee: https://gitee.com/BMooS

头像设置

​ 在avatar选段下，发现新版本对头像提供了一些新的选项，之后再去研究研究

1
2
3
4
5
6
7
avatar:
  # Replace the default image and set the url here.
  url: https://s2.ax1x.com/2020/01/15/lOIrB4.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

百度的站长统计

​ 在baidu_analytics选段下，相关的在next文档里有

不蒜子统计

​ 在busuanzi_count 选段下，发现新版只需要开启enable: true就行

footer设置

​ 在footer选项下，注释很好的说明了作用，这里不再说

字数统计

插件更新

1
2
npm uninstall hexo-wordcount
npm install hexo-symbols-count-time --save

配置主题文件

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

加入站内搜索

插件安装

1
npm install hexo-generator-search --save

找到local_search选段，开启enable: true

关于背景动画设置的问题

关于canvas_nest背景动画

  1. 进入themes/next目录

    1. 执行命令：
      git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

      （实际上就是将一个显示动效的js文件clone到对应目录）

    2. 这时将配置文件_config.yml中的canvas_nest: false改为canvas_nest: true才能真正生效。

关于three背景动画(3D的，太卡了。。。)

  1. 进入themes/next目录

    1. 执行命令：
      git clone https://github.com/theme-next/theme-next-three source/lib/three

      （实际上就是将一个显示动效的js文件clone到对应目录）

    2. 这时将配置文件_config.yml中的three: false改为three: true才能真正生效。

这是我的canvas_nest设置：

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,0" # RGB values, use `,` to separate
  opacity: 0.6 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # The number of lines

还有一些配置更改以后展开，现在还是摸索摸索。