博客更换next主题

发表于 | 分类于 |

前言

之前一直用的anchor主题，每个页面都有一个大的背景图，虽然好看，但是加载图片很慢我实在受不了了。改邪归正使用next主题。

安装Next

下载主题

在博客根目录

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

启用主题

修改站点配置文件_config.yml

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

验证主题

启用主题后，先清除缓存

1
hexo clean

启用Hexo本地站点，验证主题

1
hexo s --debug

主题设定

选择皮肤

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

可以在主题配置文件进行切换，把注释#去除即可

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

设置语言

在站点配置文件，设置language

1
2
language: zh-Hans
# 注意不要设置为zh-CN，这是无效的。（坑点

修改主题颜色

Next的配色文件是

1
2
\Hexo\themes\next\source\css\_variables\base.styl
1

里边是现有的配色方案，自定义的话只要修改一下参数的定义值就好了。我把默认的黑色改成了一个 浅青色：

1
2
// $black-deep   = #222 原本的黑色
$black-deep   = #C0D3C8

设置网站icon

把图标放在/themes/next/source/images里，并且修改主题配置文件：

1
2
3
4
5
favicon:
  small: /images/icon1.png
  medium: /images/icon1.png
  apple_touch_icon: /images/dahuangmao-06.png
  safari_pinned_tab: /images/logo.svg

设置菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。

主题配置文件

设定菜单内容

1
2
3
4
5
6
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  #commonweal: /404.html

【注意】：这里是一个坑点，很多文章甚至官网都写着可以把|| home、|| user等去掉，但是这是不能去掉的，去掉的话就无法正确显示小图标了。官网也坑人。

若你的站点运行在子目录中，请将链接前缀的 / 去掉

NexT 默认的菜单项有（标注 ！的项表示需要手动创建这个页面）：

键值 设定值 显示文本（简体中文）
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页！
tags tags: /tags 标签页！
about about: /about 关于页面！
commonweal commonweal: /404.html 公益 404！

设置菜单项的显示文本

在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。

以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml，在 menu 字段下添加一项：

1
2
3
4
5
6
7
8
9
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  something: 有料

设定菜单项的图标

1
2
3
4
5
6
7
8
9
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

创建分类

生成分类页

1
$ hexo new page categories

成功后进入文件，打开后默认

1
2
3
4
---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type

1
2
3
4
5
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

保存 关闭

创建标签

生成标签页

1
$ hexo new page tags

成功后进入文件，打开后默认

1
2
3
4
---
title: 标签
date: 2017-05-27 13:47:40
---

添加type

1
2
3
4
5
---
title: 分类
date: 2017-05-27 13:47:40
type: "tags"
---

保存 关闭

创建新文章

在每篇博文的最顶端如下设置：

1
2
3
4
5
6
7
8
9
10
---
title: 博客更换next主题
date: 2020-02-06
tags:
- hexo
- 博客配置
categories:
- 博客配置
top: true
---

注意categories只有一个，tags允许多个。之前用anchor主题的时候，设置tags是用方括号括起来的，在next主题里是无效的，必须像上面这样设置，注意英文符号和空格。

设置头像

编辑 主题配置文件，修改字段 avatar

1
2
放置在 source/images/ 目录下 
配置为：avatar: /images/avatar.png

设置作者昵称

编辑 站点配置文件，设置 author 为你的昵称。

站点描述

编辑 站点配置文件，设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

百度统计

设置百度统计后可以查看本站的访问数据。

  • 登录 百度统计， 定位到站点的代码获取页面
  • 复制 hm.js? 后面那串统计脚本 id，如： img
  • 编辑 主题配置文件， 修改字段 baidu_analytics 字段，值设置成你的百度统计脚本 id。

侧边栏社交链接

主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
social:
  GitHub: https://github.com/dunteng || github
  E-mail: mailto:2568678437@qq.com || envelope
  Instagram: https://instagram.com/dunteng_lin || instagram
  
# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

注意要去掉social,social icons的注释！！以及enable要设置为true。

这里又有一个坑点，social配置中|| github等不可去掉，否则无法正常显示图标。

腾讯公益404页面

使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow"/>
    <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
  </head>
  <body>
    <script type="text/plain" src="http://www.qq.com/404/search_children.js"
            charset="utf-8" homePageUrl="/"
            homePageName="回到我的主页">
    </script>
    <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
    <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
  </body>
</html>

站点建立时间

这个时间将在站点的底部显示，例如 © 2017 - 2019。 编辑 主题配置文件，字段 since。

1
2
footer:
  since: 2013

站内搜索

启用本地搜索的方法很简单，先安装 hexo-generator-search。

注意不是 hexo-generator-searchdb，前者来自于 wzpan/hexo-generator-search，而后者来自于 theme-next/hexo-generator-searchdb。后者已经一年多没有更新了，而前者还在更新，并且增加了仅搜索标题的功能。

1
yarn install hexo-generator-search

然后在主题配置文件里，启用本地搜索功能：

1
2
3
4
5
6
7
local_search:
 enable: true
 # if auto, trigger search by changing input
 # if manual, trigger search by pressing enter key or search button
 trigger: auto
 # show top n results per article, show all results by setting to -1
 top_n_per_article: -1

然后重新生成页面：

1
2
hexo clean
hexo server

即可查看更改。

其实如果没有其它的需要的话，到这里就可以了，默认配置就已经足够用了。

参考文章：https://wangjiezhe.com/posts/2018-10-29-Hexo-NexT-2/

Valine评论功能

后面了解到一款国人开发的评论系统叫Valine用的是LeanCloud作为数据库，洁面很简洁，不像来必力那样花哨只是单纯的评论，简洁到没有后台！！！删除和管理评论只能直接操作数据库。
这里写下为Hexo-Next模板添加Valine的过程和坑点。
1.Next模板要5.14及以上（免去自己手动修改的麻烦）。不是这个版本的可以考虑升级或者自己手动修改，修改教程在 https://github.com/iissnan/hexo-theme-next/pull/1983
2.注册LeanCloud并创建一个开发版应用（免费）

img

3.在LeanCloud -> 存储 -> 创建Class -> 无限制的Class（坑点1）

class名称为：Comment

img

LeanCloud创建Class

4.在LeanCloud-设置-把除数据存储其他选项都关闭。

img

LeanCloud设置

安全域名中添加域名，一定要注意格式（坑点2）

例如：https://www.nobige.cn:443

img

5.在Next模板下的_config.yml搜索Valine进行填写appid和appkey

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid: 你的appid
  appkey: 你的appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 欢迎评论，请在上方留下你的昵称和邮箱以便收到我的回复通知~
  avatar: retro
  guest_info: nick,mail # custom comment header
  pageSize: 10 # pagination size

Next _config.yml

如果要开启email通知除了修改_config.yml文件之外还要将LeanCloud -> 设置邮件模板 -> 用于重置密码的邮件主题进行修改

img

LeanCloud设置邮件模板

1
2
3
4
5
6
7
你在{{appname}} 的评论收到了新的回复

<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的评论收到了新的回复，请点击查看：
</p>
<p><a href="你的网址首页链接" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

建议将自带的CDN改成第三方CDN，为啥？？？10+s的加载那酸爽是在是过瘾。
文件目录：next/layout/_third-party/comments/valine.swig

//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js

官方的CDN是

//unpkg.com/valine/dist/Valine.min.js

更多高级用法请到官网查看 https://valine.js.org/

置顶功能

目前已经有修改后支持置顶的仓库，可以直接用以下命令安装。

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章：

1
2
3
4
5
6
7
8
9
10
---
title: 我的2018总结
tags:
  - 随笔
categories:
  - 随笔
abbrlink: 58a24148
date: 2018-12-31 11:45:59
top: true
---

到目前为止，置顶功能已经可以实现了。所有相关博文到这边就结束了。

不过置顶的文章显示在最上面之后，如果没有明确的置顶标志，是不是感觉有点怪怪的呢？

打开：/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="green">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

删除底部页脚

找到/themes/next/layout/_partials/footer.swig文件
内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="copyright" >
  {% set current = date(Date.now(), "YYYY") %}
  © {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
  <span itemprop="copyrightYear">{{ current }}</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</div>

<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}
  </a>
</div>

删除class 为powered-by的div和theme-info的div即可

显示页脚运行时间

  • 在 \themes\next\layout_partials\footer.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{%- if config.symbols_count_time.total_time %}

--- 增加 ---
<div id="sitetime"></div>
<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(2017,08,12,15,15,47); //建站时间
		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>
--- 增加 ---

{%- if theme.footer.powered.enable %}

阅读全文

  • 在文章加
  • 修改 主题配置文件 -> auto_excerpt -> length



404页面

原来小小的举动也可以为公益事业献出自己的一份爱心，何乐而不为呢？

-新建 404.html 页面，放到主题的 source 目录下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

【参考文章】：