0%

hexo 博客搭建之配置篇

发表于 更新于 分类于 Disqus：
本文字数： 4.4k 阅读时长 ≈ 7 分钟

hexo 默认是没有分类、标签页的，我们可以通过创建分类、标签页将不同文章归结到一个页面。

本篇将介绍以下内容

  • 配置博客作者、语言
  • 添加页面：标签、分类、关于
  • 为 github-pages 仓库增加 README.md 文件

Tips:

  • 站点配置文件 是 _config.yml。

  • 主题配置文件 是 _config.next.yml （需手动创建，可从 cp themes/next/_config.yml ./_config.next.yml 拷贝一份用来更改）

Hexo 加载配置文件优先顺序: _config.yml > _config.next.yml > themes/next/_config.yml 。即：_config.yml 配置文件优先级最高。

基本信息设置

编辑 站点配置文件：_config.yml，修改如下配置：

1
2
3
4
5
6
7
title: codezm 的个人博客
subtitle: ''
description: ''
keywords:
author: codezm
language: zh-CN
timezone: ''

头像、网站缩略图设置，编辑 主题配置文件：_config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Custom Logo (Do not support scheme Mist)
custom_logo: /images/avatar.jpg

# ---------------------------------------------------------------
# Site Information Settings
# See: https://theme-next.org/docs/getting-started/
# ---------------------------------------------------------------

favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico
  #apple_touch_icon: /images/apple-touch-icon-next.png
  #safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

Next 主题样式设置

Next 有4种风格供我们选择，编辑 主题配置文件：_config.next.yml

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

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

添加「标签」页面

1
$ hexo new page tags

执行以上命令，将创建 source/tags/index.md 文件，编辑文件内容为：

1
2
3
4
5
6
---
title: tags
date: 2020-09-26 15:28:36
type: "tags"
comments: false
---

Tips:

  • 若开启 disqus 等文章评论功能，可在 分类、标签 页中增加 comments: false 来禁止评论。

  • 这里的 title 可自定义设定，但 type 类型是固定，下同 categories。

  • 一篇文章可以设置多个标签。标签是 has a 关系。

编辑 source/_posts/hello-world.md 文件，增加 tags。

1
2
3
4
5
6
---
title: Hello World
tags:
  - hello-world
  - hexo
---

在菜单中添加链接。编辑 主题配置文件：_config.next.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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

添加「分类」页面

1
$ hexo new page categories

执行以上命令，将创建 source/categories/index.md 文件，编辑文件内容为：

1
2
3
4
5
---
title: categories
date: 2020-09-26 15:38:52
type: "categories"
---

注：一篇文章最多只采用一个分类，第一个设定分类。分类是 is a 关系。

编辑 source/_posts/hello-world.md 文件，增加 categories。

1
2
3
4
5
6
7
---
title: Hello World
tags:
  - hello-world
  - hexo
categories: hello-world
---

在菜单中添加链接。编辑 主题配置文件：_config.next.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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

更多样式图标，可参考：https://fontawesome.com/icons?from=io

添加「关于」页面

添加 关于 页面与 标签、分类 类似，通过以下命令生成 关于 目录及文件： source/about/index.md 。

1
$ hexo new page about

之后，像创建 标签 一样，编辑 主题配置文件：_config.next.yml ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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

为 github-pages 仓库增加 README.md 文件

如果你是用 github-pages 服务来展示博客的，那肯定知道 README.md 文件。那如何创建它呢？

首先在 source 目录下创建 README.md 文件，然后编辑 站点配置文件：_config.yml 跳过渲染引擎处理：

1
skip_render: README.md

效果图

image-20200926202628778