滴水穿石

种一棵树最好的时间是十年前，其次是现在

0%

如何用Hexo+Github搭建个人博客2

发表于 分类于 ， 阅读次数： Valine：

如何用Hexo+Github搭建个人博客（下）。主要涉及分类和标签的添加、文章加密和主题的配置等。

添加分类和标签

创建“分类”选项

生成“分类”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

1
hexo new page categories

成功后会提示：
1
INFO  Created: ~/Documents/blog/source/categories/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：
1
2
3
4
---
title: 文章分类
date: 2018-10-31 13:47:40
---

添加type: "categories"到内容中，添加后是这样的：
1
2
3
4
5
---
title: 文章分类
date: 2018-10-31 13:47:40
type: "categories"
---

保存并关闭文件。

给文章添加“categories”属性

打开需要添加分类的文章，为其添加categories属性。下方的categories: web前端表示添加这篇文章到“web前端”这个分类。注意：hexo一篇文章只能属于一个分类，也就是说如果在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

1
2
3
4
5
6
---
title: Hexo博客+Github博客教程：03添加分类，标签
date: 2018-11-01 14:17:46
categories: 
- hexo
---

至此，成功给文章添加分类，点击首页的“分类”可以看到该分类下的所有文章。当然，只有添加了categories: xxx的文章才会被收录到首页的“分类”中。

创建“标签”选项

生成“标签”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

1
$ hexo new page tags

成功后会提示：
1
INFO  Created: ~/Documents/blog/source/tags/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：
1
2
3
4
---
title: 标签
date: 2018-10-31 13:47:40
---

添加type: "tags"到内容中，添加后是这样的：
1
2
3
4
5
---
title: 文章分类
date: 2018-10-31 13:47:40
type: "tags"
---

保存并关闭文件。

给文章添加“tags”属性

打开需要添加标签的文章，为其添加tags属性。下方的tags:下方的- jQuery - 表格 - 表单验证就是这篇文章的标签了

1
2
3
4
5
6
7
8
9
10
11
---
title: Hexo博客+Github博客教程：03添加分类，标签
date: 2018-11-01 14:17:46
categories: 
- 基础知识
- hexo
tags:
- hexo
- github
- 博客
---

至此，成功给文章添加分类，点击首页的“标签”可以看到该标签下的所有文章。当然，只有添加了tags: xxx的文章才会被收录到首页的“标签”中。

文章加密

  1. 安装 Hexo-blog-encrypt 插件
1
npm install --save hexo-blog-encrypt
  1. 修改 _config.yml
1
2
3
# Security
encrypt:
  enable: true # 开启为true，关闭为false

default_template ，这个是指在文章详情页，我们看到的输入密码阅读的模板，同理，这个也是针对所有文章的。
最后的 content 显示 div 的 id 必须 是 encrypt-blog同时为了好看，也希望进行隐藏。
必须要有一个 input 输入框，id 必须是"pass"，用来供用户输入密码。
输入密码之后，务必要有一个触发器，用来调用decryptAES 函数。样例中以 button 来触发。

  1. 文章开头设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    title: hello world
    date: 
    categories: 
    - cate1
       tags:
        - tag1
        - tag2
       password: xxx
       abstract: '有东西被加密了, 请输入密码查看.'
       message: '您好, 这里需要密码.'
       wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试.'
       wrong_hash_message: '抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容'

主题优化

设置site基本信息

打开站点文件 blog/_config.yml，设置博客的基础信息。

1
2
3
4
5
6
7
8
# Site
title: "滴水穿石"
subtitle: "action like a dog"
author: ShuilinL
description: "种一棵树最好的时间是十年前，其次是现在"
keywords: 'Bioinformatics'
language: zh-CN
timezone:

设置主题风格

下载自己喜欢的主题文件，可以到这里找。放到Hexo目录下的themes文件夹下，然后在config.yml文件中找到。

打开主题配置文件 thems/next/config.yml，修改scheme主题风格

1
2
3
4
5
6
7
8
9
10
11
12
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# Dark Mode
darkmode: true

设置菜单项显示文本和图标

设置菜单项文件目录和对应图标：打开 themes/next/_config.yml 文件，搜索 menu 关键字，修改对应图标名称或者新增对应 menu 的图标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
  message: /message/ || fa fa-comment
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true

设置菜单项对应的中文： 打开 themes/next/languages/zh-CN.yml 文件,搜索 menu 关键字，修改对应中文或者新增。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
name: 简体中文
title:
  archive: 归档
  category: 分类
  tag: 标签
  schedule: 日程表
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  message: 留言
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404

创建菜单项对应文件目录：在终端窗口下，cd到博客目录

1
2
cd your-hexo-site
hexo new page about

编辑菜单项的新建页面 blog/source/about/index.md

1
2
3
4
5
6
7
---
title: 关于
date: 2020-04-02 09:14:53
layout: page
type: about
comments: false
---

头像设置

添加头像： 打开 themes/next/_config.yml 文件，搜索 Sidebar Avatar 关键字，在url后添加头像图片地址，图片需要存放在themes/next/source/images,若没有则新建该目录

1
2
3
4
5
6
7
8
9
# Sidebar Avatar
avatar: 
  # Replace the default image and set the url here.
  url: /images/avatar.png 
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true
  opacity: 1  # 透明度

返回网页头尾和显示浏览进度

打开 themes/next/_config.yml ,搜索关键字 scrollpercent ,把 false 改为 true

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

首页只显示摘要

有时文章比较长，或者想首页更简洁一些，希望在首页只显示摘要而不是全文。Hexo是支持摘要的功能的，只要在文章中插入代码：

1
2
3
4
5
6
7
title: Hexo示例文档
---

本篇为Hexo示例文档.  # 这里是摘要部分,写1~2句话,就实现不全显示博文了..
<!-- more -->

### 下面是正常的 markdown 博客,就可以了.......

侧栏设置

侧边栏设置和社交图片设计

打开 themes/next/_config.yml 文件,搜索关键字 social ,然后添加社交站点名称与地址即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
social:
  GitHub: https://github.com/ShuilinLiao || fab fa-github
  E-Mail: mailto:liaoshuilin@outlook.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  
social_icons:
  enable: true
  icons_only: false
  transition: false

定阅RSS

RSS定阅某个网址后，该网址更新所有新内容将以标题或者摘要形式推送给你，你只需要点击RSS链接即可以跳转到该文章网址，从而避免搜索网址后大规模查询该文章。首先需要加载插件：

1
npm install hexo-generator-feed --save

站点配置文件_config.yml，添加如下配置：

1
2
3
4
5
6
7
8
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

开启版权声明

在themes/next/_config.yml文件内搜索关键词 creative_commons, 设置license

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

修改文章底部的那个带#号的标签

1
2
3
4
5
6
<div class="post-tags">
    {% for tag in post.tags %}
-       <a href="{{ url_for(tag.path) }}" rel="tag">#</i> {{ tag.name }}</a>
+	   <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
    {% endfor %}
</div>

本地搜索

安装插件

1
npm install hexo-generator-searchdb --save

打开 Hexo 站点的 _config.yml,添加配置

1
2
3
4
5
# local search
search:
  path: search.json
  field: post
  limit: 100

打开 themes/next/_config.yml ,搜索关键字 local_search ,设置为 true：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
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
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

博文置顶

安装插件

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

然后在需要置顶的文章的Front-matter中对top:增加数字即可，数字大小反应热度：

1
2
3
4
5
6
7
8
9
title: 如何用Hexo+Github搭建个人博客
declare: true
toc: true
categories: 
	- 工具
	- blog
tags: 
	- Hexo
top: 100  #(数字可以调节)

统计功能，统计功能,显示文章字数统计,阅读时长,总字数

安装插件

1
npm install hexo-wordcount --save

打开 themes/next/_config.yml ，添加如下信息：

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true  # false会显示一行
  item_text_post: true  # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
  item_text_total: true # 底部footer是否显示字数统计属性文字
  awl: 4                # 计算字数的一个设置,没设置过
  wpm: 275              # 一分钟阅读的字数

每篇文章末尾统一添加“本文结束”标记

在路径 /themes/next/layout/_macro 中新建 post-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
6
7
8
9
<div>
  {% if not is_index %}
    <div style="text-align:center;color:#bfbfbf;font-size:16px;">
      <span>-------- 本文结束 </span>
      <i class="fa fa-{{ config.post_end_tag.icon }}"></i>
      <span> 感谢阅读 --------</span>
    </div>
  {% endif %}
</div>

打开 themes/next/layout/_macro/post.swig 文件,添加:

1
2
3
4
5
6
7
8
{#####################}
    {### END POST BODY ###}
    {#####################}
	{% if config.post_end_tag.enabled and not is_index %}
	  <div>
	    {% include 'post-end-tag.swig' %}  # 添加内容
	  </div>
	{% endif %}

打开blog/_config.yml文件，添加：

1
2
3
post_end_tag:
  enabled: true  # 是否开启文末的本文结束标记
  icon: paw # 结束标记之间的图标

文章顶部显示更新时间

打开blog/_config.yml ,搜索关键字 updated_at 设置为 true ：

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

给代码块添加复制功能

打开themes/next/_config.yml，搜索关键词copy_buttom:

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night bright # 代码内置颜色背景
  # Add copy button on codeblock
  copy_button:
    enable: true # 设置为true，开启复制
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

网站标题栏背景颜色

在 next/source/css/_custom/custom.styl 添加如下内容，如果没有则新建：

1
2
3
4
// Custom styles.
.site-meta {
  background: $blue; //修改为自己喜欢的颜色
}

修改Logo字体

在 themes/next/source/css/_custom/custom.styl 中添加如下代码：

1
2
3
4
5
6
7
8
@font-face {
    font-family: Zitiming;
    src: url('/fonts/Zitiming.ttf');
}
.site-title {
    font-size: 40px !important;
    font-family: 'Zitiming' !important;
}

设置博客背景

将想要的背景图片放入 themes/next/source/images。打开 themes/next/source/css/ _custom/custom.styl 文件，这个是 Next 故意留给用户自己个性化定制一些样式的文件，添加以下代码即可：

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
body {
    background:url(/images/yourbackground.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}
  • background:url 为图片路径，也可以直接使用链接。
  • background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕。
  • background-attachment：背景是否随着网页上下滚动而滚动，fixed 为固定。
  • background-size：图片展示大小，这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

PS : 其中 header-inner 不能使用 opacity 进行配置。因为 header-inner 包含 header.swig 中的所有内容。若使用 opacity 进行配置，子结点会出很多问题

添加音乐

  • 选择网易云音乐没有版权的歌曲生成外链播放器；

  • 将代码放到./themes/next/layout/_macro/sidebar.swig；

  • 修改侧边栏宽度，打开主题配置文件../themes/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    sidebar:
      # Sidebar Position.
      position: left
      #position: right

      # Manual define the sidebar width. If commented, will be default for:
      # Muse | Mist: 320
      # Pisces | Gemini: 240
      width: 300

添加近期文章

打开next/layout/_macro/sidebar.swig 文件，并在其if theme.links 对应的 endif 后面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
      <div class="links-of-blogroll-title">
        <!-- modify icon to fire by szw -->
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
      </div>
      <ul class="links-of-blogroll-list">
-        {% set posts = site.posts.sort('-date') %}
+        {% set posts = site.posts.sort('-date').toArray() %}   # 后面修改很重要
        {% for post in posts.slice('0', '5') %}
          <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
{% endif %}

为了配置方便，在主题的_config.yml 中添加了几个变量，如下：

1
2
3
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

back2top 标签

安装插件：

1
npm install hexo-cake-moon-menu --save

然后在站点配置文件_config.yml 中添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
moon_menu:
  back2top:
    enable: true
    icon: fa fa-chevron-up
    func: back2top
    order: -1
  back2bottom:
    enable: true
    icon: fa fa-chevron-down
    func: back2bottom
    order: -2

简体繁体一键切换

  • 首先，我们可以在这里右键另存下载简繁字体切换所需的 tw_cn.js 文件，我们把这个文件放到 ~/themes/next/source/js 文件夹下。
  • 修改模板，在我们想要显示简繁转换按钮的地方添加如下代码。例如，我在 NexT 主题的布局文件 ~/themes/next/layout/_partials/footer.swig 里添加了如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="translate-style">
繁/简：<a id="translateLink" href="javascript:translatePage();">繁体
</a>
</div>
<script type="text/javascript" src="/js/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 2; //网站编写字体是否繁体，1-繁体，2-简体
var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "https://tding.top/"; //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁体"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上，但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>

添加pdf文件在文章内部

安装插件：

npm install —save hexo-pdf

修改主题配置文件:

1
2
3
4
5
6
7
8
9
pdf:
  enable: true
  # Default height
  height: 500px
  pdfobject:
    # Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

文章内部添加代码:

1
2
3
4
外部链接：
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
本地连接：把pdf放置到source文件夹下pdf文件夹下
{% pdf /pdf/文件名.pdf %}

添加打赏功能

打开theme/next/_config.yml文件，对其内容做如下修改。图片保存在 next/source/images 目录

1
2
3
4
5
6
7
8
9
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: false
  #comment: 赞赏一瓶优酸乳

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png

发布文章

使用Rmarkdown写文章

直接使用kinr包的knit函数将Rmd转化成md格式，但是尤其注意一定要把图片放在同目录下的figure文件夹中。
在Hexo系统下的source/_posts创建一个test.Rmd文件。在R里面运行下面两行命令：

1
2
3
setwd("E:/02GDL/Blog/ShuilinLiao.github.io/source/_posts") #这里写上你自己_posts所在的路径  
knitr::knit(input = "boxplot.Rmd") #没有安装包的请加载knitr包
# rmarkdown::render('boxplot.Rmd', output_file='boxplot.md', output_dir='boxplot')

hexo所在目录，hexo g, hexo s 预览一下效果

插入图片

默认情况下，在 hexo 中新建一篇markdown博文，在文章中插入本地图片，再部署到 github 上面，是无法显示这些图片的。
首先找到博客根目录下面的_config.yml文件，修改post_assrt_folder的值为true.
接着 git bash 切换到博客根目录下面，安装第三方插件hexo-assrt-image

1
npm install hexo-asset-image --save

接着hexo new "文章名" 新建一篇文章，会发现source/_posts/目录下面会生成一个和 markdown 文件同名的文件夹。再将当前这篇文章中需要插入的图片放到这个文件夹中，再到 markdown 中引用该文件夹中的图片，最后hexo g -> hexo d，就可以正常的查看这些图片了。

本地引用

绝对路径

当Hexo项目中只用到少量图片时，可以将图片统一放在source/images文件夹中，通过markdown语法访问它们。

1
2
# source/images/image.jpg
![](/images/image.jpg)

图片既可以在首页内容中访问到，也可以在文章正文中访问到。

相对路径

  • 图片除了可以放在统一的images文件夹中，还可以放在文章自己的目录中。文章的目录可以通过配置_config.yml来生成。
1
2
# _config.yml
post_asset_folder: true

将_config.yml文件中的配置项post_asset_folder设为true后，执行命令$ hexo new post_name，在source/_posts中会生成文章post_name.md和同名文件夹post_name。将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。

  • git bash安装插件

    1
    npm install https://github.com/7ym0n/hexo-asset-image --save

  • 使用标签插件语法。

    1
    2
    # _posts/post_name/image.jpg
    {% asset_img image.jpg This is an image %}

    其中test.jpg就是你要引用的图片，我这里就是image.jpg，后面的This is an test image是图片描述，可以自己修改。

渲染公式

安装渲染器

1
2
npm uninstall hexo-renderer-marked --save 
npm install hexo-renderer-kramed --save

修改配置文件
到主题配置文件中_config.yml，找到mathjax，将其修改为true即可

1
2
mathjax:
  enable: true

文章渲染标签
为加快渲染速度，渲染器只会在标签中有mathjax: true的文章中使用利用mathjax渲染。

1
2
3
4
5
title: 燃料消耗问题
date: 2020-01-21 17:55:00
categories: 算法
comments: true
mathjax: true

添加评论和留言板功能

注册 Leancloud 账号

在leancloud官网注册一个账号

注册完成后进入app 控制面板->创建应用->创建开发版应用。

接下来我们配置一下我们的leancloud。点击 设置->安全中心->Web 安全域名，输入你的域名来保证其他人就算获取了你的appid也没办法操作你的数据库。例如，输入 https://shuilinliao.github.io/

接下来点击应用keys获取你的appid和appkey。

在next主题中配置valine

打开 _config.next.yml，找到comments栏目并开启valine。

1
2
comments:
  active: valine

往下滑动进入valine设置栏，开启valine并填入你的appid和appkey。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
valine:
  enable: true
  appId:  # Your leancloud application appid
  appKey:  # Your leancloud application appkey
  placeholder: "输入你的评论\n昵称为必填项目，输入QQ号可以直接获取用户名和头像，并且省去了填写邮箱的麻烦！\n虽然email不是必选，但是填写了email可以收到推送通知哦！" # Comment box placeholder
  avatar: "" # Gravatar style
  meta: [nick, mail] # Custom comment header
  pageSize: 10 # Pagination size
  lang: # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: true # 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)
  enableQQ: true # Whether to enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: [nick] # Set required fields: [nick] | [nick, mail]

这里稍微解释一下各个参数的用途。
placeholder是在用户未输入任何参数时默认显示的值；
avatar是默认用户头像，参考link；
meta是可以选择的用户信息栏；
enableQQ可以自动匹配用户在nick栏目的输入，若是QQ，直接拉取用户的QQ头像和昵称作为评论使用，推荐开启（目前有个bug，若用户QQ昵称小于三个字符，可能出现拉取失败，等待大佬更新）；
其他的配置可以参考link。

在菜单栏添加留言板

添加一个新的page

1
$ hexo new page guestbook

进入 source/guestbook/index.md。加入你想显示的内容，如：

1
2
3
4
5
6
7
---
title: 留言板
date: 2020-09-13 13:34:29
---
# 欢迎来到我的博客！

> 欢迎在这里留言！任何问题都可以在这里留言，我会及时回复的，添加email可以获得更快的回复速度，在nickname栏目输入QQ号可以直接获取你的QQ头像。

进入 _config.next.yml， 找到menu栏目，添加留言板功能：

1
2
menu:
  guestbook: /guestbook/ || fa fa-book

图标支持font awesome，可以按自己喜好修改。

如果有多语言支持需求，可以更改 themes/next/languages 下对应语言的翻译。

en.yml:

1
2
menu:
  guestbook: guestbook

zh-CN.yml:

1
2
menu:
  guestbook: 留言板

重新生成页面即可

1
2
$ hexo clean
$ hexo g -d

注意：在跟着上面的流程配置的时候，已经在首页配置过message功能，所以需要在站点的config文件和next主题的config文件中，把menu中关于原来的message功能删除。

参考链接

  1. Hexo+Github博客教程3
  2. Hexo+Github博客教程2
  3. hexo文章加密
  4. Hexo-Next主题美化 - hua
  5. hexo下部署Rmd文档
  6. 解决hexo中发布文章后图片无法显示的问题
  7. Hexo博客搭建之在文章中插入图片
  8. hexo + next8.0开启Valine评论系统及添加留言板功能
-------- 本文结束 感谢阅读 --------
# 添加内容