简述

自定义Hexo主题

前情提示

系统：

一说

  • 同步更新最新版、完整版请移步PUSDN Powered By PUSDN - 平行宇宙软件开发者网www.pusdn.com ，转载请标明出处！

  • 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤

  • 带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行

前置条件

  1. Hexo已经成功搭建完成且可预览。

使用NexT主题

  1. NexT主题GitHub地址

旧版地址：https://github.com/iissnan/hexo-theme-next

新版地址：https://github.com/theme-next/hexo-theme-next

新版中文介绍地址：https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/README.md

介绍中提供了4中主题的演示地址，可以根据个人喜好选择。

  1. 下载主题

先进入到你的目录cd /home/myblog然后进行git clone https://github.com/theme-next/hexo-theme-next themes/next请耐心等待。

在这里插入图片描述

下载完成后，在/home/myblog/themes/目录下会看到next目录。

  1. 启用主题

找到文件/home/myblog/_config.yml搜索theme，将内容改为next，修改的时候注意：后面有空格，如下图所示位置：

在这里插入图片描述

  1. 验证主题

hexo clean

hexo g

hexo s

访问：http://west.nogit.top:4000/

在这里插入图片描述

  1. 什么？这个主题不太喜欢，想试试其他模式

修改scheme，打开/home/myblog/themes/next/_config.yml搜索scheme，4选一，修改其中一个即可，比如修改成第四个：

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

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

然后重新hexo clean、hexo g、hexo s访问测试：

在这里插入图片描述

  1. 设置语言

默认的英文有点东西，不过你也可以改成自己喜欢的语言。

修改/home/myblog/_config.yml文件开头位置的language：比如修改为简体中文

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: zh-CN
timezone: ''

注意：

language: zh-CN参数值与你的主题文件下语言文件相关/home/myblog/themes/next/languages如zh-CN.yml

目前支持的语言如下所示：

语言 代码 设定示例
English en language: en
简体中文 zh-CN language: zh-CN
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko
  1. 验证字体

hexo clean、hexo g、hexo s

在这里插入图片描述

  1. 更改网站信息

修改/home/myblog/_config.yml文件开头位置的site：比如修改为：

1
2
3
4
5
6
7
8
# Site
title: 标题
subtitle: 子标题
description: 可以一段话描述自己
keywords: 关键词1,关键词2
author: 作者，你的名字
language: zh-CN
timezone: Asia/Shanghai

各参数介绍：

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。使用半角逗号 , 分隔多个关键词。
author 您的名字
language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

设置完成，同理测试验证。成功后显示如下：

在这里插入图片描述

  1. 设置头像、设置圆形、设置滚动

新版本NexT主题内置了配置，不需要像以前那么繁琐，只要一个true、false即可启用/关闭。

在/home/myblog/themes/next/_config.yml文件中搜索Sidebar Avatar修改成如下：

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: https://你的图片或者网络图片地址.jpg
  # If true, the avatar will be dispalyed in circle.如果设置成true，将会圆形显示
  rounded: true
  # If true, the avatar will be rotated with the cursor.设置true，鼠标放上去会滚动
  rotated: true

同理，验证效果：

在这里插入图片描述

  1. 配置菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  归档: /归档/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  commonweal: /404.html/ || heartbeat

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

# Enable/Disable menu icons.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive

NexT 默认的菜单项有（标注 #的项表示需要手动创建这个页面）：

键值 设定值 显示文本（简体中文）
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页 #
tags tags: /tags 标签页 #
about about: /about 关于页面 #
commonweal commonweal: /404.html 公益 404 #

设定菜单项的图标，对应的字段是 menu_icons。 此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。

1
2
3
4
5
6
7
[root@ebs-40617 myblog]# hexo new page about
INFO  Created: /home/myblog/source/about/index.md
[root@ebs-40617 myblog]# hexo new page tags
INFO  Created: /home/myblog/source/tags/index.md
[root@ebs-40617 myblog]# hexo new page categories
INFO  Created: /home/myblog/source/categories/index.md
[root@ebs-40617 myblog]#

并且把对应index.md加上对应type标签，示例如下：

1
2
3
4
5
6
---
title: tags
date: 2020-04-03 04:49:39
type: categories
---

  1. 访问测试，并发布远程。