0%

Hexo主题Next配置

之前说了使用Hexo搭建博客,接下来是对博客进行美化,我使用的是Next主题。本文将主要介绍的是hexo和next的配置文件,因为配置相比较多,所以只是对用到的进行记录。

安装next

next的安装和更新详情可参考 https://github.com/next-theme/hexo-theme-next

Hexo配置

Hexo的配置文件为sitefolder/_config.yml,sitefolder是网站所在文件夹。详情参考:https://hexo.io/zh-cn/docs/configuration

个人部分配置(只是部分配置,仅供参考,不要直接复制过去):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
title: 秋雨&田风
subtitle: '一本备忘录罢了'
description: ''
keywords:
author: Lay Qiu
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://itlay.top
permalink: :category/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

theme: next

Next配置

next的配置文件为sitefolder/themes/next/_config.yml。参考 https://theme-next.iissnan.com/。

Schemes

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

可修改主题,要用哪个只需要把前面的注释(#)去掉,可依次使用查看效果。

1
2
3
4
5
6
7
8
9
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
commonweal: /404/ || fa fa-heartbeat

菜单栏设置,可以自行选择,部分需要额外配置。

tags&categories

输入以下命令生成新的tags和categories页面

1
2
hexo new page tags
hexo new page categories

sitefolder/source文件夹下会生成对应文件夹,再对文件夹下的index.md文件进行修改,添加一行type即可

1
2
3
4
5
6
7
title: tags
date: 2021-04-18 15:59:30
type: "tags"

title: categories
date: 2021-04-18 15:59:30
type: "categories"

公益404

404页面与之前类似,先是hexo new page 404,然后去对应index.md中进行修改,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: 404
date: 2021-04-18 15:59:30
type: "404"

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://itlay.top"></script>
</body>
</html>

记得修改homePageUrl

评论

PS:本站评论系统暂时下架。

在next的配置文件中可以看到,其已经支持了changyan | disqus | disqusjs | gitalk | livere | valine,这些个评论系统可以自行选择,然后进行相应的配置,本文中选择的是valine。

首先要去LeanCloud官网进行注册登录,补全信息。之后选择创建应用,在新建应用的设置中可以看到AppIDAppKey

接下来打开next的配置文件,找到valine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: enable
appid: # 填入appid
appkey: # 填入appkey
notify: false # 邮箱提醒
verify: false # 验证码
placeholder: Just go go # 默认评论
avatar: wavatar # 头像配置,参考https://valine.js.org/avatar.html
guest_info: nick,mail # 评论者信息
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

删除 Powered By Valine

找到valine的配置文件(/themes/next/layout/_third-party/comments/valine.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
{%- set valine_uri = theme.vendors.valine or '//unpkg.com/valine/dist/Valine.min.js' %}

<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
NexT.utils.getScript('{{ valine_uri }}', () => {
var GUEST = ['nick', 'mail', 'link'];
var guest = '{{ theme.valine.guest_info }}';
guest = guest.split(',').filter(item => {
return GUEST.includes(item);
});
new Valine({
el : '#valine-comments',
verify : {{ theme.valine.verify }},
notify : {{ theme.valine.notify }},
appId : '{{ theme.valine.appid }}',
appKey : '{{ theme.valine.appkey }}',
placeholder: {{ theme.valine.placeholder | json }},
avatar : '{{ theme.valine.avatar }}',
meta : guest,
pageSize : '{{ theme.valine.pageSize }}' || 10,
visitor : {{ theme.valine.visitor }},
lang : '{{ theme.valine.language }}' || 'zh-cn',
path : location.pathname,
recordIP : {{ theme.valine.recordIP }},
serverURLs : '{{ theme.valine.serverURLs }}'
});
// 添加以下6行,删除Powered By Valine
var infoEle = document.querySelector('#valine-comments .info');
if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
infoEle.childNodes.forEach(function(item) {
item.parentNode.removeChild(item);
});
}
}, window.Valine);
});
</script>

评论管理

评论数据存在leancloud中,所以要管理需要进入leancloud,选择之前创建的应用,选择数据存储结构化数据Comment,就可以看到了