Person Cloud
0%

Hexo NexT 主题一站式部署

发表于 更新于 阅读次数： 评论： 本文字数： 5.9k 阅读时长 ≈ 5 分钟

前言

当我们成功使用 Hexo 搭建静态博客框架后，可以选择许多美观的主题运用，当然如果有能力和时间也可自己造一套主题使用。

本文主要是关于流行主题NexT的部署，其大部分操作已在官网上呈现，但由于时间久远且不够全面导致笔者走了一些弯路，故记录下该文章。

如果使用主题， Hexo 应该有两份配置文件 _config.yml ，为叙述方便， Hexo 的配置文件称为站点配置文件； /themes/next 下的配置文件称为主题配置文件。

安装NexT

主题下载

推荐使用 Git 来克隆最新版本，终端定位到 Hexo 站点目录后输入：

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

便克隆到了 themes/next 目录下，注意官网教程中的地址已经过时，务必使用上述代码中的最新版本地址。

主题启用

在站点配置文件中，更改theme后面的字段以启用该主题。 

1
theme: next

主题验证

使用一键三连： 

1
2
3
hexo g //生成静态文件
hexo d //部署文件到远程仓库
hexo s //启动本地服务器
此时便可在浏览器访问http://localhost:4000以检查主题是否正确运行。

主题设定

语言设置

编辑站点配置文件，找到language更改为简体中文： 

1
language: zh-CN

作者名字与站点描述

编辑站点配置文件，找到author和description进行更改： 

1
2
author: 作者名字
description: 站点描述
站点配置文件中的其他参数详情可见相关文档。

头像与社交链接

修改头像：编辑主题配置文件，修改头像字段avatar即可更改：

1
2
3
4
avatar:
  url: /img/my_avatar.jpg # 可以用完整的互联网URL，也可以是站点地址
  rounded: true # 设置 true，头像形状改为圆形
  rotated: false # 设置 true，鼠标在头像上悬停会旋转

修改社交链接：包括链接和图标两部分，编辑主题配置文件，修社交链接字段social即可更改： 

1
2
3
4
5
6
7
8
9
10
11
12
13
# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等
  ...
# Social Icons
social_icons:
  enable: true # 设置 true 可启用图标
  GitHub: github
  Twitter: twitter
  微博: weibo

NexT 使用的是 Font Awesome 提供的图标，也可以在 相关文档 查看对应的icon代码，注意不必带 fa- 前缀

Scheme设定

Scheme 是 NexT 提供的不同外观选择方案，目前提供了四种外观：

  • Muse —— NexT 最初的版本，黑白主调，大量留白
  • Mist —— Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces —— 双栏 Scheme，小家碧玉似的清新
  • Gemini —— 双栏 Scheme，分块更加明显

默认使用 Muse，可在主题配置文件中找到Schemes进行修改： 

1
2
3
4
5
#Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
启用哪个就选择哪个，不用的注释掉即可。

注意：如果用 hexo d 部署后访问网站发现没有生效，大概率是因为浏览器缓存的问题，此时清除浏览器的浏览数据后刷新即可解决。

菜单设定

在 NexT 主题中，我们可以在主题配置文件中配置菜单栏，配置包括菜单项和菜单名两个部分：

  • 菜单项：格式为item name: link || icon，注意这里的item name并不是显示在屏幕中的菜单名；link指的是从Hexo Site/source开始的文件位置，除了首页和归档页都要自己手动创建页面；icon指的是图标代码，可以在 相关文档 查看对应的icon代码。我们先在主题配置文件中修改成如下：
1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  archives: /archives/ || fa fa-archive
  #categories: /categories/ || fa fa-th
  #about: /about/ || fa fa-user
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

此时我们的页面出现了标签页，但点进去会发现Cannot GET /tags/。这是因为 Hexo 在 Hexo Site/public 中找不到tags文件夹，因此我们需要在Hexo Site/source中创建并生成静态文件，然后 Hexo 会自动把上述文件保存在Hexo Site/public中。说做就做，我们先在 Git Bash 终端输入：

1
hexo new page tags

指令成功会提示：

1
2
INFO  Validating config
INFO  Created: D:\Blogs\source\tags\index.md

Amazing！居然在 source 下自动生成了 tags ，还附赠了一个 index.md，为了使用 NexT 主题自带的标签功能，我们将该.md文档修改如下：

1
2
3
title: tags
type: tags
date: 2024-10-31 23:47:52

Markdown 编写可参见我的Markdown速成指南

在 Git Bash 终端输入三连：

1
2
3
hexo g
hexo d
hexo s

此时菜单栏中的标签页就起作用了：

  • 菜单名：进入themes/next/languages/zh-CN.yml，找到menu，不难看出item name后面接着的便是在导航栏中显示的文字：
1
2
3
4
5
6
7
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索

了解了这些，我们就可以创建一个新的菜单项了，首先在主题配置文件中输入自己想要的菜单项：

1
2
menu:
  mine: /mine/ || fa fa-at

然后在themes/next/languages/zh-CN.yml中填写菜单名：

1
2
menu:
  mine: 我的

然后用终端命令创建就大功告成了：

1
hexo new page mine

站内搜索

在终端安装插件：

1
npm install hexo-generator-searchdb --save

在站点配置文件中新增以下内容：

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

在主题配置文件中修改以下内容：

1
2
3
4
5
6
7
8
local_search:
  # 开启搜索功能
  enable: true
  # 一旦更改输入，自动触发搜索
  trigger: auto
  top_n_per_article: 1
  unescape: false
  preload: false

网站图标

保存一个自己喜欢的图标在/themes/next/source/images里，修改主题配置文件中的favicon即可：

1
2
3
4
5
favicon:
  small: /images/favicon.jpg
  medium: /images/favicon.jpg
  apple_touch_icon: /images/favicon.jpg
  safari_pinned_tab: /images/favicon.jpg

浏览进度

搜索主题配置文件中的powered字段并改为true即可：

1
scrollpercent: true

隐藏网页页脚 Powered By

搜索主题配置文件中的powered字段并改为false即可：

1
powered: false

文章设定

字体设置

NexT 开放了五个特定范围的字体设定：

  • 全局字体（global）：定义的字体应用在全局body元素上
  • 文章标题字体（title）：文章的标题字体
  • 标题字体（headings）：文章内标题的字体（h1, h2, h3, h4, h5, h6）
  • 文章字体（posts）：文章所使用的字体
  • 代码字体（codes）：代码块所使用的字体

各项所指定的字体将作为首选字体，当他们不可用时会自动 Fallback 到 NexT 设定的基础字体组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
font:
  enable: true
  host:    # 外接字体库地址，默认为 https://fonts.googleapis.com 

  # 全局字体
  global:
    external: true  # 是否使用外链字体库
    family: Roboto  # 字体family
    size:           # 字体大小

  # 文章标题字体
  title:
    external: true
    family: Monda
    size:

  # 标题字体（h1~h6）
  headings:
    external: true
    family: Roboto
    size:

  # 文章字体
  posts:
    external: true
    family:

  # 代码块字体
  codes:
    external: true
    family:

代码高亮

NexT 使用 Tomorrow Theme 作为代码高亮，内置多款主题。 NexT 默认使用的是 白色的 normal 主题，可选的值有： normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic

修改主题设置文件中的codeblock即可：

1
2
3
4
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  highlight_theme: night bright

代码复制

修改主题设置文件中的copy_button即可：

1
2
3
4
5
6
7
copy_button:
  # 设置 true，打开代码复制
  enable: true
  # 设置 true，显示复制成功信息
  show_result: true
  # 可选: default | flat | mac
  style: default

打赏功能

修改主题设置文件中的reward_settings:

1
2
3
4
5
6
7
8
9
10
11
12
13
reward_settings:
  # 设置 true，启用打赏功能  
  enable: ture
  # 设置 true，启用动画效果  
  animation: false
  # 显示文字，可注释掉
  comment: 谢谢~

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  paypal: /images/paypal.png
  bitcoin: /images/bitcoin.png

版权声明

修改主题设置文件中的creative_commons:

1
2
3
4
creative_commons:
  license: by-nc-sa # 可选 by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
  sidebar: false    # 侧边栏显示版权信息
  post: true        # 文章末尾显示版权信息

优化篇

字数统计/阅读时间

安装插件： 

1
npm install hexo-symbols-count-time

在站点配置文件新增如下内容： 

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."

在主题配置文件新增如下内容：

1
2
3
4
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true

渲染结果如下：

文章永久链接格式

Hexo 默认的永久链接格式目录层级太复杂，不仅不利于 SEO，而且也不美观，这里提供一种不带插件的简单方法，首先前往站点配置文件：

1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://peronli.github.io # 自己的网站地址
permalink: urlname/:year/:month/:day/ # 修改此处
permalink_defaults:
pretty_urls:
  trailing_index: false # true 显示「页面」永久链接结尾的'index.html'部分
  trailing_html: false # true 显示「文章」永久链接结尾的'.html'部分

permalink支持的所有属性详见官方文档，这里我自定义了一个urlname来个性化每篇文章的永久链接，同学们也可以根据上述文档定义自己喜欢的链接格式。

如果按照我的自定义，在写 Markdown 文件时在 front-matter 部分新增字段urlname:就大功告成了。但为了方便使用，我们可以在Hexo Site/scaffolds/post.md模板文件中修改如下：

1
2
3
4
title: {{ title }}
urlname: 
date: {{ date }}
tags:

hexo clean、hexo g后新建一个文章试试，在终端输入：

1
hexo new "test"

进入文档，我们给它起个名字就可以了

1
2
3
4
title: test
urlname: test
date: 2024-11-01 10:28:18
tags:

最后部署得到的永久链接格式为：

https://peronli.github.io/test/2024/11/01/

黑暗模式

如果使用 NexT 主题自带的黑暗主题，只需要在主题配置文件中修改：

1
darkmode: true

也可以使用其他更美观的方法：https://www.techgrow.cn/posts/abf4aee1.html

如果快乐太难，那么祝你平安。