垃圾桶7 分钟 读完 (大约 980 个字)

Hexo NextT 主题设置

安装和开始

按照 Hexo 官方文档的指导安装 Hexo，并且使用 hexo init 创建一个博客站点。

切换到博客根目录，下载 NextT 主题： 

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

版本说明

hexo 版本: 4.2.0
next 版本: 7.8.0

注意时效性，版本不同配置项可能存在差异。

NextT 主题配置

基础配置

使用 NextT 主题，并且设置语言为中文，修改博客根目录下的 _config.yml 文件： 

1
2
language: zh-CN  
theme: next

接着修改主题风格，在 theme 配置 themes/next/_config.yml 文件找到 scheme 字段，选择主题风格。目前支持四种：Muse, Mist, Pisces 和 Gemini，任意选择一种合适的，我这里用的是 Mist 方案。

设置菜单

在 theme 配置 themes/next/_config.yml 文件找到 menu 字段，可以根据个人偏好设置菜单。我这里保留了分类 categories，标签 tags，归档 archives 和 关于 about，|| 后面表示图标，这里不作修改。 

1
2
3
4
5
6
7
8
9
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

创建页面

设置完菜单，由于新增的菜单栏没有对应的页面，点击会提示找不到页面，执行以下命令为新增的菜单栏添加对应的页面： 

1
2
3
hexo new page tags
hexo new page categories
hexo new page about

成功执行以上命令，在 sources 目录下会生成对应的文件夹，每个文件夹里包含一个 index.md 文件。

文章显示

默认首页的文章会显示全文，可以在原文插入 <!-- more --> 标签，会自动把该标签前面的文本生成摘要显示。 

1
2
3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- more -->
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

显示头像和 favicon

在 theme 配置 themes/next/_config.yml 文件找到 avatar 字段，设置 url 为头像文件(头像放置的路径为 themes/next/source/images) 。我比较喜欢头像呈圆形，这里把 rounded 的值改为了 true。 

1
2
3
4
5
6
7
8
avatar:
  # Replace the default image and set the url here.
  # url: #/images/avatar.gif
  url: /images/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

可以使用 favicon-generator 网站制作 favicon，制作完之后下载，把制作好的 favicon 放置到 themes/next/source/images 目录下，在 theme 配置 themes/next/_config.yml 文件找到 favicon 字段，把相应的文件名改成上传的新 favicon 文件名。 

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

搜索功能

在 theme 配置 themes/next/_config.yml 文件找到 local_search 字段，把值改为 true。并且在博客根目录下的_config.yml 文件添加以下内容： 

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

注意，搜索功能依赖 https://github.com/theme-next/hexo-generator-searchdb，在博客根目录执行 npm install hexo-generator-searchdb --save 进行安装。

加载进度条

在 theme 配置 themes/next/_config.yml 文件找到 pace 字段，把值改为 true，根据个人偏好选择任意一种提供的样式填入 pace_theme。

注意，进度条依赖 https://github.com/theme-next/theme-next-pace，按照 theme-next-pace 的 README 说明进行安装。

Fork me on GitHub

在 github-corners 或者 github-ribbons 选择自己喜欢的样式，复制插入到 themes/next/layout/_layout.swig 文件中 <div class="headband"></div> 位置后面。 

1
2
<div class="headband"></div>
<a href="https://github.com/kysonlok">......
#

评论

×