Hexo博客

发布日期: 2020-05-04

文章字数: 1.7k

阅读时长: 6 分

阅读次数:

博客搭建成功后，下一步进行主题选择及配置工作等。如何创建hexo博客，看之前一篇记录：

更多主题样式参考：
Hexo官网 https://hexo.io/themes/
一些Hexo主题介绍

看有文章说NexT是应用最广泛的主题，最开始对博客还不熟悉，为尽快写文章，先选定NexT上手。熟悉之后，再看看其他主题样式，或许可以选定其他更喜欢的。

1. 更换主题

1.1. 克隆下载主题

cd到博客本地文件夹，

cd方法：
终端界面输入cd+空格
将想要定位的文件夹拖进终端，就能自动填充文件路径，点击回车就OK了

再输入以下命令：

git clone https://github.com/theme-next/hexo-theme-next themes/next

格式：
git clone 主题的GitHub链接 themes/主题名
（themes是本地博客文件夹名，主题名是将要保存到本地的主题文件夹名称。这个是NexT主题，本地文件夹名为next）

等待下载完成:

01-克隆主题

最后本地 themes 文件夹下载成功next文件。

02-下载成功

1.2. 启用主题

打开博客本地文件夹的配置文件 _config.yml，找到theme字段，并将其值从默认的 landscape 更改为 next。

注：Hexo中有两份主要的配置文件，其名称都是_config.yml。
一份位于博客根目录里，包含Hexo本身的配置。
另一份位于主题目录里，包含主题相关的一些配置。
为描述方便，以下说明中将前者称为 站点配置文件，后者称为主题配置文件。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

此时即可使用浏览器访问 http://localhost:4000，最终显示如下图。

03-切换成功-主题页面

若博客关联了GitHub，终端界面输入hexo g -d命令，next主题便成功部署到GitHub上了。

主题安装之后，需要进行一些基础属性的配置，这样才能更美观，更方便使用。

2. 选择主题风格

Scheme 是 NexT 提供的一种特性，几乎所有的配置都可以在 Scheme 之间共用。它提供了四种不同的外观风格：
- Muse
- Mist
- Pisces
- Gemini
如何配置
- 打开主题配置文件，搜索 scheme 关键字。你会看到有四行 scheme 的配置，将需启用的 scheme 前面注释#去除即可。
- 可以自己切换一下，看看线上效果。喜欢哪一种就选哪个。
- 下面我选中的是Gemini风格。

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

3. 修改基本属性

其次我们就要修改标题、副标题、描述、作者、语言这些基本属性了，这是博客页面最直观的一些个人信息的展示。

打开站点配置文件，找到Site，修改以下属性值

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

语言默认为en，中文简体为zh-CN，中文繁體为zh-hk 或者 zh-tw

4. 设置菜单

4.1. 开启–网页显示菜单

打开主题配置文件，找到menu。配置项如下：

menu:
  home: / || fa fa-home
  categories: /categories/ || fa fa-th
  tags: /tags/ || fa fa-tags
  archives: /archives/ || fa fa-archive
  about: /about/ || fa fa-user
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

同scheme一致，将需启用的菜单前面的注释 # 删去即可。也可以上下移动位置，改变网页上显示的上下位置。
如上，启用了home/about/tags/categories/archives

格式：
item name: link || icon name
item name 这个名称并不直接显示在页面上，它将用于匹配图标以及翻译。
|| 之前的是目标链接，之后的是 Font Awesome 图标的名字。
你可以再代码中找到图标引用的网址。

4.2. 自定义菜单项的显示文本

在上一步中设置的菜单的名称并不直接用于界面上的展示。

Hexo 在生成的时候将使用item name查找对应的翻译文本，并提取显示。
这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。打开zh-CN.yml，如下：

menu:
  home: 首页
  categories: 分类
  tags: 标签
  archives: 归档
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404

如果不喜欢默认的，可以自定义修改这些汉字。

4.2.1. 开启–关闭图标

menu下面有如下设置项：

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

icons: true控制显不显示图标。可以设置成 false 不显示图标。

在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome 图标名字）的情况下，NexT 将会使用?作为图标。
不显示的话，将上面的代码复制到配置文件menu下面。

4.3. badges-设定菜单项的数额展示

在上面的设置项下方，还有一个badges的设置，这个具体有什么效果呢，试一试。
修改为true。效果如下：

04-徽章

在分类、标签、归档后面会显示对应的统计数额。我现在有1个分类、5个标签、5篇文章归档。

4.4. 如何添加菜单项

以简体中文为例，若你需要添加一个菜单项，在比如 something。那么就需要：

在主题配置文件的menu中增加：

something: /something/ ||

修改简体中文对应的翻译文件 languages/zh-CN.yml，在 menu 字段下添加一项：

something: 有料
配置图标

在 Font Awesome 上找到一个图标，将相应的名称填入上面代码 ||的后面，即可生效。比如名称为coffee的图标，上面的代码补充完整：

something: /something/ || fa fa-coffee

效果如下：

05-添加菜单

以下2020年5月14日更新

5. 配置侧栏

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于左侧位置。
打开主题配置文件，找到 sidebar 字段。
侧栏的设置包括两个部分，其一是侧栏的位置，其二是侧栏显示的时机。

5.1. 左右位置

sidebar:
  # Sidebar Position.
  #position: left
  position: right

06-右侧侧栏

放在右侧有点奇怪，根据喜好设置。

5.2. 设置侧栏显示的时机

修改 sidebar.display 的值，支持的选项有：

post - 默认行为，在文章页面（拥有目录列表）时显示
always - 在所有页面中都显示
hide - 在所有页面中都隐藏（可以手动展开）
remove - 完全移除

代码如下：

# Sidebar Display (only for Muse | Mist), available values:
#  - post    expand on posts automatically. Default.
#  - always  expand for all pages automatically.
#  - hide    expand only when click on the sidebar toggle icon.
#  - remove  totally remove sidebar including sidebar toggle.
display: post