进阶(二)：hexo博客配置

Posted on | In | Visitors:
Words : 986 | Reading ≈ 4 min

进阶(二)：hexo博客配置

进阶配置内容：

  1. 添加评论系统
  2. 添加 tags 页面
  3. 添加 categories 页面
  4. 添加 about 页面
  5. 配置404页
  6. 设置 ‘阅读全文’
  7. 配置博客文档模版

1. 添加评论系统

hexo官方提供了很多评论系统的配置，我选择的是’来必力’。
我先注册了来必力，
然后创建了一个 liverre city，获取到代码中的 data-uid ，
然后编辑 hexo 主题配置文件 _config.yml , 编辑 livere_uid :

1
liverre_uid: #我在来必力获取的uid

2. 添加 tags 页面

  1. 在终端：

    1
    hexo new page tags

  2. 在生成的 tags 目录下，编辑 index.md ，设置 type 属性为 tags，并屏蔽该页的评论功能：

    1
    2
    3
    4
    5
    6
    ---
    title: 标签
    date: 2018-09-19 22:51:31
    type: "tags"
    comments: false
    ---

  3. 在 _config.yml 文件中，编辑 menu 字段，放开 tags：

    1
    2
    3
    4
    5
    6
    menu:
      home: / || home
      archives: /archives/ || archive
      tags: /tags/ || tags
      #categories: /categories/ || th
      #about: /about/ || user

    || 左侧是页面路径，|| 右侧是图标在 FontAwesome 字体中的名称。

3. 添加 categories 页面

  1. 在终端：

    1
    hexo new page categories

  2. 在生成的 categories 目录下，编辑 index.md ，设置 type 属性为 categories ，并屏蔽该页的评论功能：

    1
    2
    3
    4
    5
    6
    ---
    title: 分类
    date: 2018-09-19 22:51:31
    type: "categories"
    comments: false
    ---

  3. 在 _config.yml 文件中，编辑 menu 字段，放开 categoris 字段：

    1
    2
    3
    4
    5
    6
    menu:
      home: / || home
      archives: /archives/ || archive
      tags: /tags/ || tags
      categories: /categories/ || th
      #about: /about/ || user

4. 添加 about 页面

  1. 在终端：

    1
    hexo new page about

  2. 在生成的 about 目录下，编辑 index.md ，屏蔽该页的评论功能：

    1
    2
    3
    4
    5
    ---
    title: 标签
    date: 2018-09-19 22:51:31
    comments: false
    ---

  3. 在 _config.yml 文件中，编辑 menu 字段，放开 about 字段：

    1
    2
    3
    4
    5
    6
    menu:
      home: / || home
      archives: /archives/ || archive
      tags: /tags/ || tags
      categories: /categories/ || th
      about: /about/ || user

about页面的设置Tip

注意：about页面还有一些地方要处理，因为 Next主题中 默认会把页面跟文章一样处理，当你在yml中设置了显示文章目录时，自定义页面也会统一被添加toc目录（这是我不想要的）。于是我DIY了一下：

  • 在 about页 的 index.md 文件头部加上自定义属性 toc: false;

    1
    2
    3
    4
    5
    6
    ---
    title: 
    date: 2018-09-19 21:35:29
    toc: false
    comments: false
    ---

  • 然后找到 themes/next/layout/_macro 目录下的 sidebar.swig 模版文件，将 toc 渲染条件由

    1
    {% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}

    改为

    1
    {% set display_toc = is_post and theme.toc.enable or page.toc !== false %}

  • 重启 hexo 服务，刷新 about 页，即可看到不再显示右侧的toc目录了。

5. 配置404页

给自己的站点设置404页面，可以让网站体验更加友好。
hexo中配置404页的步骤很简单，在/source目录下，或者themes/next/source 目录下创建 404.html 文件即可。404页面的内容可以发挥自己的创意个性来设计，也可以利用404为社会公益做一些贡献。我放的是腾讯公益，帮助找回走失儿童，页面代码如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <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://www.champyin.com"></script>
  </body>
</html>

6. 设置 ‘阅读全文’

效果：在首页提供文章的部分内容，并提供一个链接跳转到全文页面。
在 NextT 中提供了三种方式，我比较喜欢它推荐的那种，也是 Hexo 提供的方式：
在文章中使用 <!-- more --> 手动进行截断。

7. 配置博客文档模版

hexo 中，运行 hexo new "xxx" 是调用了 scaffolds 目录下的 post.md 文件作为模版来创建的。
所以修改这个模版，就可以达到每次创建文档可以使用自己习惯的模版了。
默认模版是没有 categories 的，我需要这个字段，所以在模版中加上了这个字段：

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags: 
categories:
---