为Hexo Next主题添加留言页面

Hexo添加社会化评论第三方服务之后,各个文章下面于是有了评论的途径,但是一些与对应文章无关的评论就没有合适的去处了,放在‘关于’页面下似乎又不太合适,于是就有了添加一个‘留言’页面的想法。基本步骤与Next主题文档中添加tag或categories页面的步骤基本一致,但是由于Next主题菜单项中没有自带留言项,所以需要做一些小调整,下面介绍一下详细步骤。

1.在菜单中添加guestbook

1.1.添加留言菜单项

打开Next主题目录下的_config.yml(注意不是Hexo目录下的_config.yml,是Next主题目录下的_config.yml,路径为blog/themes/next/_config.yml),在menu项下添加guestbook字段,如下:

1
2
3
4
5
6
7
8
9
menu:
home: /
categories: /categories
tags: /tags
archives: /archives
about: /about
#sitemap: /sitemap.xml
#commonweal: /404.html
guestbook: /guestbook #添加的字段

1.2.配置留言菜单项图标

接下来要给guestbook菜单项设置一个图标,在menu_icons项下添加guestbook字段,字段的值可以是任意FontAwesome中的图标,将对应的图标名称填入guestbook字段中即可,FontAwesome图标与对应名称可参考fontawesome.io这里我选择的book图标,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
schedule: calendar
tags: tags
archives: archive
sitemap: sitemap
commonweal: heartbeat
guestbook: book #添加的字段

1.3.添加对应译文显示

blog/themes/next/languages路径下打开zh-Hans.yml文件,在menu项下添加guestbook字段,如下:

1
2
3
4
5
6
7
8
9
10
11
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404
guestbook: 留言 #添加的字段

此时就可以正常在博客菜单栏显示‘留言’菜单项了。

2.创建guestbook页面

终端下进入Hexo根目录,运行以下命令创建guestbook页面:

1
hexo new page guestbook

此时在Hexo根目录下的source文件夹中应该就能看到guestbook文件夹了,进入guestbook文件夹打开index.md文件,把title:后的guestbook删掉,不然留言页面会出现一个内容是“guestbook”的标题,比较影响观感,接下来添加一些你希望在留言页面显示文字等,博主的文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
---
title:
date: 2017-04-29 19:07:15
comments: true
---
<blockquote class="blockquote-center">
来都来了,说几句再走咯~<br/>((٩(´͈ᗨ`͈)۶))
</blockquote>
***

保存之后hexo cleanhexo g --d就可以看到效果了。具体效果可以参考博主的留言页面

至此,‘留言’页面就添加完成了。

参考资料

动动手指,NexT主题与Hexo更搭哦(基础篇)

坚持原创技术分享,您的支持将鼓励我继续创作!