秋雨&田风

一本备忘录罢了

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官网进行注册登录，补全信息。之后选择创建应用，在新建应用的设置中可以看到AppID和AppKey。

接下来打开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，就可以看到了