Hexo+Next部署博客配置及注意事项

发表于 分类于 阅读次数： 本文字数： 4.6k
Hexo+Next部署博客配置及注意事项

注意：本文只介绍一些容易带坑的配置和个性化配置，常规配置或Hexo的博客搭建过程详见Hexo博客搭建

适用版本

Hexo：4.2.0

OS：Windows 10 1909 （18636.752）

Next：7.8.0

Node：12.1.0

Hexo配置

Language

配置注意：language如果配置为中文，网上许多教程写的应该用zh-Hans，实际上应该使用主题中提供的字体包名，例如我使用Next7.8.0，中文字体包叫做zh-CN，所以此处就应该配置为

1
2
# site
  language: zh-CN

创建tags/categories/about

在cmd命令行中进入hexo的目录下

执行hexo new pages "tags/categories/about"

会在hexo/sources/目录下创建相应的文件夹，文件夹下有一个index.md文件

title网页上显示的名称，可以进行自定义

添加type: tags/categories

最后配置如下：

1
2
3
title: 分类
date: 2020-04-12 10:59:21
type: categories

注意：archives和about不需要设置type，会自动生成页面，如果对于关于我的页面需要定制，直接在hexo/source/about/index.md中进行编辑即可

在文章开头添加yaml批注就能自动进行分类归档了。

注意：yaml的批注是--- ---包裹的内容，

例如：

1
2
3
4
5
6
7
8
9
10
11
12
---
date: 2020-04-11 21:01:24
updated: 2020-04-12 15:16:24
tags:
  - Windows
  - Linux
  - Hexo
  - 教程
categories:
  - 教程
  - Hexo
---

注意：tags下的标签是并列关系，categories下的标签是父子关系

文章加密

1
npm install --save hexo-blog-encrypt

安装该插件，然后在文章的yaml配置中添加：

1
2
password: password
abstract: 有东西被加密了, 请输入密码查看.

高级配置详见hexo-blog-encrypt

Next配置

网页图标

网页title前的link图标，一般只需要配置small，但是保险起见可以将small和medium都配置好，图片需要是ico格式（我使用png格式不显示，但是默认配置的png图片能显示），图片的位置放在/hexo/themes/next/source/images/下，配置如下：

1
2
3
favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico

主题选择

Next提供了四种风格的主题，可以根据个人喜好进行配置，具体样式见Muse、Mist、Pisces、Gemini

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

顶部菜单

menu配置的是网页顶部的导航链接，可以按照自己的需求配置，前面是显示的文件，中间为链接，||后面的为图标，如果需要自定义链接，建议将所有的图标都去掉，以免影响整体美观

1
2
3
4
5
6
menu:
  首页: / || fa fa-home
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-th
  归档: /archives/ || fa fa-archive
  关于: /about/ || fa fa-user

侧边栏位置

sidebar主要配置在文章中或者在其他页面显示文章目录或站点概览的位置

1
2
3
4
sidebar:
  # Sidebar Position.
  #position: left
  position: right

个人头像

avatar配置的是站点概览的头像，默认是没有头像的，可以自定义配置一张，rounded为裁剪为圆形，rotated为跟随鼠标转动

1
2
3
4
avatar:
  url: /images/header.jpg
  rounded: false
  rotated: false

个人社交

social配置的是站点概览的个人社交地址，可以按照自己使用自定义，||后面的是站点的图标，可以用social_icons来定义显示方式

1
2
3
4
5
6
7
8
social:
  GitHub: https://github.com/stolenzc || fab fa-github
  Weibo: https://weibo.com/u/3333060672 || fab fa-weibo
 
social_icons:
  enable: true
  icons_only: false
  transition: true

个人页关联网站

links配置的是站点概览的个人链接，可以自定义一些链接在里面快速跳转，用links_settings来配置显示方式

1
2
3
4
5
6
7
8
9
10
links:
  个人网站: https://www.stolenzc.com
  日程管理: https://schedule.stolenzc.com/schedule/
  gitee主页: https://stolenzc.gitee.io

links_settings:
  icon: fa fa-link
  title: Links
  # Available values: block | inline
  layout: inline

首页文章预览

Next默认首页是显示文章的全部内容，但是这样会显得首页非常凌乱，网上说的使用auto_excerpt来配置预览字数，但是我是用的7.8.0已经没有了该配置，正确的配置有两种方法

  1. 在文章开头的yaml配置中添加description，然后设置excerpt_description为true
  2. 编辑markdown文件在你想要截断的地方添加<!-- more -->，文章显示出来就会在此处截断，并且会添加一个阅读全文的链接（官方推荐）

添加访问统计

在hexo/themes/next/_config.yml中找到footer并添加：

1
2
footer:
  counter: true

找到busuanzi_count并将enable改为true

1
2
busuanzi_count:
  enable: true

在hexo/themes/next/layout/_partials/footer.swig最后添加：

1
2
3
{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

文末结束标记

在路径hexo\themes\next\layout\_macro文件夹中新建passage-end-tag.swig文件，编辑内容

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

打开hexo\themes\next\layout\_macro\post.swig，在END POST BODY后面添加以下代码：

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

修改主题配置文件_config.yml，在末尾添加：

1
2
passage_end_tag:
  enabled: true

文章字数和时间统计

安装插件npm install hexo-symbols-count-time

配置hexo的_config.yml设置：

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

设置含义参考：hexo-symbols-count-time

配置搜索功能

NexT题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。本文介绍Local Search的安装。

安装hexo-generator-search和hexo-generator-searchdb

1
2
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save

编辑hexo的_config.yml配置，在末尾添加：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑NexT的_config.yml配置，将local-search设置修改为true：

1
2
local_search:
  enable: ture

来必力评论

  1. 在来必力网站注册账号，创建一个应用
  2. 进入应用找到配置的代码，将date-uid后面的内容拷贝下来
  3. 打开Next的_config.yml文件，找到livere_uid，将刚刚拷贝下来的id粘贴在后面
  4. 显示的详细配置在来必力管理页面中进行配置

配置首页隐藏文章

  1. 编辑themes/next/layout/index.swig，添加以下代码的第三行和第五行

    1
    2
    3
    4
    5
    6
    7
    <div class="posts-expand">
      {%- for post in page.posts.toArray() %}
        {%- if post.hidden != true %}
          {{ partial('_macro/post.swig', {post: post, is_index: true}) }}
        {%- endif %}
      {%- endfor %}
    </div>

  2. 编辑scaffolds/post.md，添加一下代码的第四行

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

  3. 在使用时，文章最顶部添加hidden: True即可在博客首页隐藏文章

跳过指定文件的渲染

编辑_config.yaml

1
skip_render: [_posts/*]

支持正则表达式

更多配置参考：Hexo-NexT配置超炫网页效果