博客

本博客停止维护

0%

记录：hexo next主题的改动

发表于 更新于 分类于 ，
本文字数： 4.7k 阅读时长 ≈ 4 分钟

hexo-theme-next 主题的 github 页面中提到了如何更新的问题。他们在教程中指出，在更新的过程中可能会遇到“Commit your changes or stash them before you can merge”的问题，其实这就是代表你修改过主题中的源码文件，所以不允许对 next 主题进行更新。这里的源码文件指代比较宽泛，大家最常改的应该是“_config.yml”文件。以下将介绍如何处理：

  1. 前置操作：将自己的博客复制一份，以免修改错。
  2. 使用 git pull 命令，如果出现问题，那就代表你更新成功了。如果出现了上面的“Commit your changes or stash them before you can merge”问题，那就往下看。
  3. 使用 git stash，重置自己的修改，再次使用 git pull，更新完成。
  4. hexo next 主题更新完成后，就代表你之前所有的自定义配置都没了。所以接下来的内容是将它们改回来。

博客的路径如下所示： 

1
2
3
4
5
6
7
8
9
10
11
12
13
D:.
├─blog
│  ├─.deploy_git
│  ├─node_modules
│  ├─...
│  ├─source
│  ├─themes
│  │  ├─next
│  │  │  ├─source
│  │  │  ├─...
│  │  │  ├─_config.yml
│  ├─_config.yml
├─blog_bakup

_config.yml 的处理

如果自己改过“_config.yml”文件，更新之后，维护起来就比较麻烦了。我们可以使用 next 提供的方法来管理“_config.yml”中的配置信息。

首先在“blog/source”中创建“_data”文件，再在其中创建“next.yml”文件。

分别打开 blog 中 next 主题的“_config.yml”文件和 blog_backup 中的 next 主题的“_config.yml”文件。

blog_backup 中的配置文件是你之前自定义的配置，对照两份文件（或者如果自己有印象，可以不用对照）。将自定义的配置移入到 blog/source/next.yml 文件中。注意只需要移入更改过的配置即可，比如如下配置： 

1
2
3
4
5
6
7
8
9
10
11
footer:
  since: 2015
  icon:
	name: user
	animated: false
	color: "#808080"
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: false
  language:
如果你只更改过“since”的配置，将其改为 2018。那么在“blog/source/next.yml”文件中，应该像下面这么写： 
1
2
footer:
  since: 2018
其他的配置不需要更改。此处是官方文档，还有不懂的，可以去看文档。

自定义代码

添加弹窗提示功能

首先下载一个自己喜欢的弹窗插件，可以去jQuery插件库找。然后将css和js放在next主题下的source文件夹中，如下图所示： next主题目录

css文件放入css文件，js文件放入js文件夹。我自己创了一个spop的文件夹，用于单独放置我的弹窗插件。

在“themes/next/layout/_macro/post.swig”中找到代码：<article itemscope itemtype="http://schema.org/Article" class="post-block [% if is_index %]home[% endif %]" lang="[[ post.lang or post.language or config.language ]]">，其实就在第 2 行。

在此行下面插入以下代码： 

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
[% for tag in post.tags.toArray() %]
	[% if tag.name == '学习笔记' and not is_home() %]
	<link rel="stylesheet" type="text/css" href="/lib/spop/spop.min.css">
	《script type="text/javascript" src="/lib/spop/spop.min.js"></script>
	<!--判断该文章是否为学习笔记-->
	《script>
	  spop({
		template: '<h4 class="spop-title">注意</h4>此文章仅为博主的学习笔记，并非教学，其中可能含有理论错误。',
		group: 'tips',
		position  : 'bottom-center',
		style: 'success',
		autoclose: 5500,
		onOpen: function () {
		  //这里设置灰色背景色
		},
		onClose: function() {
		  //这里可以取消背景色
		  spop({
			template: 'ε = = (づ′▽`)づ',
			group: 'tips',
			position  : 'bottom-center',
			style: 'success',
			autoclose: 1500
		  });
		}
	  });
	</script>
	[% endif %]
[% endfor %]

其中相应的 css/js 文件需要自己去下载，并放入到“themes/next/source/lib/”文件夹下。

is_home()是next主题的方法，用于判断当前页面是否在主页。因为主页一次性加载了所有的文章，如果不加这个方法，会在主页弹出无数个弹窗。最终效果如下图所示： 提示弹窗效果图

为学习笔记添加不同的颜色

如果需要为不同类型的博客在博客时间线中显示不同的颜色，可以做如下更改，在“themes/next/layout/_macro/post-collapse.swig”中，找到 <a class="post-title-link" href="[[ url_for(post.path) ]]" itemprop="url">，在 <a></a> 标签下面插入以下代码： 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 如果博文是学习笔记的话，后面加个小图标 -->
[% for tag in post.tags.toArray() %]
	[% if tag.name == '学习笔记'%]
		<i class="notes-tag fas fa-book-reader"></i>
		《script>
			window.onload = function(){
				var notes = $('.notes-tag');
				//碧螺春绿
				notes.prev().children('span').css('color', '#867018');
			}
		</script>
	[% endif %]
[% endfor %]

开启不蒜子

开启不蒜子。在 source/_data/next.yml 中设置如下属性，就算开启了： 

1
2
busuanzi_count:
  enable: true
开启之后，它默认只会显示三个统计数据，即总浏览量、文章浏览量和访客数量。它们的代码在 themes/next/layout/_layout.swig 的 footer 中，文章浏览量的代码在 _macro/post.swig 中。 如果要显示更多，可以在 themes/next/layout/_partials/sidebar/site-overview.swig 中修改代码（这个 site-overview.swig 是由 themes/next/layout/_macro/sidebar.swig 加载）。 
1
2
3
4
5
6
7
8
[%- if theme.site_state %]
<div class="site-state-wrap motion-element">
  <nav class="site-state">
    ...
	<code>
  </nav>
<div>
[%- endif %]
在文件中找到上面的代码，<nav></nav> 标签中有很多代码，将下面的代码添加到 <nav></nav> 标签内部的最后一行，即上面代码的 <code> 位置。 
1
2
3
4
5
6
7
[%- if theme.busuanzi_count.enable %]
  <!-- 不蒜子/busuanzi -->
  <div class="site-state-item site-state-posts">
	<span class="site-state-item-count">[[totalcount(site)]]</span>
	<span class="site-state-item-name">总字数</span>
  </div>
[%- endif %]

添加置顶标签

不知道为什么 next 主题居然不为置顶文章添加置顶标签。如果不加这个标签，就无法察觉到此文章与其他文章有何区别，会造成一定的困扰。 可以搜索 <div class="post-meta"> 快速定位到添加置顶标签的位置，在该代码下面添加以下代码，其中最上面三行代码是本来就存在的。 

1
2
3
4
5
6
7
8
{%- set date_diff = date(post.date) != date(post.updated) %}
{%- set time_diff = time(post.date) != time(post.updated) %}
{%- set datetime_diff = date_diff or time_diff %}
{%- if post.top > 1 %}
	<i class="fas fa-thumbtack"></i>
	<span class="post-meta-item-text">top</span>
	<span class="post-meta-divider">|</span>
{% endif %}

更自由地使用Font Awesome

2020.06.14 更新：注意：NexT v8 已经将 Font Awesome 升级，本节的全部设置均可以作废。

原文：

慎重修改，更改之后可能导致其他未被考虑到的地方出现无法显示 icons 的问题。

修改sidebar的代码

在 themes/next/layout/_partials/sidebar/site-overview.swig 中将 social icon 的代码进行替换，大约在 85 行的位置：【%-set sidebarIcon = '<i class="fa fa-fw fa-' + link.split('||')[1] | trim + '"></i>' %}，ctrl f 搜索 fa fa-fw fa- 应该就能找到了。将其替换为： 

1
【%-set sidebarIcon = '<i class="' + link.split('||')[1] | trim + '"></i>' %}

修改categories的代码

为了更自由地使用 Font Awesome，在 themes/next/layout/_partials/header/menu-item.swig 中，将第 11 行的 

1
2
3
[%- if theme.menu_settings.icons %]
  [%- set menuIcon = '<i class="fa fa-fw fa-' + value.split('||')[1] | trim + '"></i>' %]
[%- endif %]
修改为 
1
2
3
[%- if theme.menu_settings.icons %]
  [%- set menuIcon = '<i class="' + value.split('||')[1] | trim + '"></i>' %]
[%- endif %]

将fontawesome的版本更至最新

由于在后续又发现在其他地方也用到了icon，所以需要大量更改配置。如果不会写程序的还是别改了。

next的fontawesome默认版本是4.6.2，在写本文时，fontawesome的最新版本是5.8.1。貌似fontawesome在5.0.0版本之后改版了。总之一直出现方框乱码。

后来发现，现在的fontawesome链接已经跟以前不一样了，它现在分为3大类别。

现在的使用方法是：在next主题的_config.xml中搜索fontawesome，并更改属性fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css，注意里面的文件是all.min.css，而不是font-awesom.min.css。（v7.7.1 可以在 next.yml 中修改 vendors: fontawesome:）

但是这样更改之后还是会出现方框乱码，原因是next默认使用的fa的类，而有时候我们需要使用fab或其他的类。所以需要修改一下源代码。

找到layout/_macro/menu/menu-item.swig，定位class="menu-item-icon，将后面的“fa fa-fw fa-”删去。以后再修改icon不能只加一个名字了。可以像我这样修改：assorted: /assorted || fa fa-fw fa-layer-group。

可以看到我将icon的名称补全了。如果想用fab的类，可以像这样修改：python: /python || fab fa-fw fa-python。以此类推。

这样修改以后，如果不想用fontawesome了，想用其他的icon库，改起来也很方便。

layout/_macro/menu/menu-item.swig被layout/_partials/header/sub-menu.swig引用。

另外由于fontawesome版本改动，社交软件的icon也需要更改，在_config.xml中搜索github，将icon改为fab fa-fw fa-github。找到ayout/_macro/siderbar.swig，搜索fa fa-fw fa-，看看定位的地点上面是不是{百分号 if theme.social_icons.enable 百分号}。是的话将fa fa-fw fa-删除。

注入代码

Next 支持将自定义的内容交给 Next 渲染。详见 官方文档。简单来说，就是在 _data 文件夹中新建几个文件，然后添加想要的代码即可。一般来说，此项功能仅支持较为简单的自定义代码。例如在页脚加入几行文字，或者加入几行 js 代码。下一段介绍的内容可以支持更高难度的操作。

Next 还支持将自定义内容注入 next 源码中，这与上节所作的事类似，但是最大的不同是此节的做法类似于直接编写代码，甚至可以设置变量，例如 list。如果不懂编程，那么还是跳过这节吧。详见官方文档。

更新至next v8

NexT 前段时间更新了一个大版本，不过由于组织内部问题，可能这次更新没以前那么简单。不过对于我来说好像没遇到什么大问题，总而言之，在 hexo 文件夹下使用 git clone https://github.com/next-theme/hexo-theme-next themes/next-v8，clone v8 版本，然后再到 hexo 的配置文件 _config.yml 中更改 next 主题为 next-v8 主题。 最后要做的是仅仅将以前改动过的文件，在 v8 中再进行改动一次即可。我这篇文章本身就是记录 NexT 主题的改动记录的，所以也没什么大问题。

改用hexo-renderer-pandoc

NexT v8 声明 hexo-renderer-kramed 已经停止维护，现在推荐使用 hexo-renderer-pandoc。可以在 github 搜索 hexo-renderer-pandoc，它会教你怎么做。另外，由于我以前就在用 pandoc，但是我用的是可执行程序来运行 pandoc，所以文档里让我安装 pandoc，我有点懵逼。怎么安装？不是一个可执行程序吗？其实 pandoc 也是有安装版的，只需要在 pandoc 官网下载 msi 安装包就行了。

出现的bug

  1. 更新至最新版（v7.7.1）之后，/categories 路径失效了，我只要在 menu 中添加一条 categories，整个博客就无法运行。搞了一下午才试出来，只要不取 categories 这个名字即可，我将其改为 分类。
  2. 还有一个 bug 就是在 categories 路径中，最新版 next 主题不再显示二级目录，这应该是代码写的有问题。找到 themes/next/layout/_partials/header/sub-menu.swig 文件，将第三行的 【%- if theme.menu and is_page() %】 改为 【%- if theme.menu and not is_home() and not is_post() %】 即可。
    • 由于博客本身的限制，请将“【】”替换为“{}”。