NexT主题美化

发表于 分类于 阅读次数： 本文字数： 7k 阅读时长 ≈ 17 分钟

简介：本文章介绍Hexo-NexT主题美化设置，如字体大小、主题颜色、图标优化等……

1.分类与标签设置

在Hexo里内置有分类页面与标签页面，但在使用中文标签时候，有时候会导致网页地址乱码，无法浏览，故需要使用分类地图与标签地图以便中英对应，避免网页地址乱码。
在博客的根目录内找到Hexo的配置文件 _config.yml，打开后找到以下代码：

1
2
3
4
5
6
7
8
# Category & Tag
default_category: uncategorized
category_map:
#在这里添加分类，格式为中文分类: 对应英文，如：
  数据分析: analysis
tag_map:
#在这里添加分类，格式为中文分类: 对应英文，如：
  其他: other

假如文章的设置为：

1
2
3
4
5
---
title: NexT主题美化
tags: [其他]
categories: [数据分析]
---

设置分类与标签地图前：
分类页内[数据分析]标签的网址为：http://localhost:4000/categories/数据分析/
标签页内[其他] 标签的网址为：http://localhost:4000/tags/其他/

设置分类与标签地图后：
分类页内[数据分析]标签的网址为： http://localhost:4000/categories/analysis/
标签页内[其他]标签的网址为：http://localhost:4000/tags/other/

2.修改博客字体大小（总体）

在next主题文件夹下找到以下文件/themes/next/source/css/_variables/base.styl，打开文件，找到以下代码，修改即可：

1
2
3
4
5
6
7
8
9
// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
$font-size-smallest       = .75em;  //文章下发表时间等字段
$font-size-smaller        = .8125em;  //博客侧边栏字体（标题与网页分类）
$font-size-small          = .875em;  //代码格式文字字体
$font-size-medium         = 1em;  //博客侧边栏字体（头像下字体）
$font-size-large          = 1.125em;  //文章总字体大小（包含所有标题及内容）
$font-size-larger         = 1.25em;
$font-size-largest        = 1.5em;  //文章标题

3.修改博客字体大小（细分项目）

在next主题文件夹下找到以下文件/themes/next/source/css/_variables/base.styl，打开文件：
博客标题字体大小
找到以下代码，修改最后数值即可：

1
$font-size-title                = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : 1.5em;

博客副标题字体大小
找到以下代码，修改最后数值即可：

1
2
$font-size-subtitle             = $font-size-smaller;  //修改前
$font-size-subtitle             = 0.9em;               //修改后

4.修改主题颜色

头部、侧边栏颜色
在next主题文件夹下找到以下文件/themes/next/_config.yml，打开文件，找到以下代码修改即可：

1
2
3
4
# Browser header panel color.
theme_color:
  light: "#222"  #日间模式
  dark: "#222"  #夜间模式

提示

颜色为十六进制，可使用支持十六进制软件进行颜色挑选。

修改侧边栏标签颜色
在next主题文件夹下找到以下文件/themes/next/source/css/_variables/base.styl，打开文件，找到以下代码修改即可：

1
2
$menu-item-bg-color           = $whitesmoke;  //日间模式标签选择后颜色
$menu-item-bg-color-dark      = $black-light;

5.修改标签前面的符号

在next主题文件夹下找到以下文件/themes/next/layout/_macro/post.njk，打开文件，找到以下代码将修改即可：

1
2
3
4
5
6
7
8
{%- if post.tags and post.tags.length %}
  {%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %}  /*修改此行代码，将#修改为你所需的图标*/
  <div class="post-tags">
    {%- for tag in post.tags.toArray() %}
      <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
    {%- endfor %}
  </div>
{%- endif %}

如修改为：

1
{%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else 'fa fa-tag' %}  /*修改此行代码，将#修改为你所需的图标*/

提示

图标样式可自行在网上查找 Font Awesome。

6.修改网站建站时间

修改网站建站时间，主要影响博客最下方的显示：

打开next主题文件夹，找到以下文件/themes/next/_config.yml，打开文件，找到以下代码，修改即可：

1
2
3
4
footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  since: 2000
  #修改以上数值即可

7.增加阅读进度条

在next主题文件夹下找到以下文件/themes/next/_config.yml，打开文件，找到以下代码修改即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
back2top:
  enable: true                 #是否开启回到顶部按钮
  # Back to top in sidebar.
  sidebar: false               #将回到顶部按钮放到侧边栏最下方（false则默认放在右下角）
  # Scroll percent label in b2t button.
  scrollpercent: false         #是否显示阅读进度百分比

# 页面顶部阅读进度条
# Reading progress bar
reading_progress:
  enable: false               #是否开启页面顶部阅读进度条
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false            #false则显示已阅读进度，true则显示剩余阅读进度
  color: "#37c6c0"          #进度条颜色
  height: 3px              #进度条宽度

8.开启代码框复制按钮

在next主题文件夹下找到以下文件/themes/next/_config.yml，打开文件，找到以下代码修改即可：

1
2
3
4
5
6
7
# Add copy button on codeblock
copy_button:
  #是否开启复制按钮
  enable: false
  # Available values: default | flat | mac
  # 代码框风格
  style:

9.开启图片单击放大功能

1
2
3
4
5
6
7
8
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: false

# A JavaScript library for zooming images like Medium.
# Warning: Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://medium-zoom.francoischalifour.com
mediumzoom: false

以上两个图片单击放大功能，选择其中一个并修改数值为true即可。

10.添加背景图片

在next主题文件夹下找到以下文件/themes/next/source/css/_schemes/Gemini/index.styl，打开文件，在最下面添加一下代码即可：

1
2
3
4
5
6
7
body {
    background:url(/images/yourbackground.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}

11.将中文链接改为绝对值的英文链接

当我们在写文章的时候，Markdowm文件使用中文命名时，生成的网页文件也是中文，链接地址也会包含中文。这是因为hexo文章链接默认的生成规则是：:year/:month/:day/:title/,我们想要把链接改为绝对值的英文链接，可以借助hexo-abbrlink插件。

11.1 安装插件

1
npm install hexo-abbrlink --save

11.2 配置插件

打开博客根目录下的_config.yml文件（非next主题的_config.yml文件），找到以下代码：

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://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: posts/:abbrlink/
#permalink: :year/:month/:day/:title/
abbrlink:
  alg: crc32
  rep: hex
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

abbrlink参数主要有两个，alg和rep，具体参数设置如下：

1
2
3
4
5
6
7
8
9
10
11
crc16 & hex
https://www.dobeblog.cn/posts/66c8.html

crc16 & dec
https://www.dobeblog.cn/posts/65535.html

crc32 & hex
https://www.dobeblog.cn/posts/8ddf18fb.html

crc32 & dec
https://www.dobeblog.cn/posts/1690090958.html

12.增加文章字数及阅读时间

12.1 安装hexo-word-counter

hexo-word-counter GitHub

1
npm install hexo-word-counter

12.2 文件修改

打开博客根目录下的_config.yml文件（非next主题的_config.yml文件），在代码最下方添加以下代码：

1
2
3
4
5
6
7
8
9
10
# 设置博客单词统计
symbols_count_time:
  symbols: true    # 文章文字统计
  time: true       # 文章阅读时间统计
  total_symbols: false   # 站点总总数统计
  total_time: false   # 站点阅读时间统计
  exclude_codeblock: false
  awl: 2
  wpm: 200   #每分钟阅读字数
  suffix: "mins."

在next主题文件夹下找到以下文件/themes/next/_config.yml，打开文件，找到以下代码修改即可：

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
# 添加文章字数统计、阅读时常
symbols_count_time:
  # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  separated_meta: true
  # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  item_text_total: false

13.侧边栏文章目录展开

在next主题文件夹下找到以下文件/themes/next/_config.yml，打开文件，找到以下代码修改即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Table of Contents in the Sidebar
# Front-matter variable (nonsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  # 文章目录是否自动生成数字排序
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  # 文章目录是否自动换行
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  # 文章目录是否全部展开
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

将上述expand_all改为true即可。

14.图片增加边框

在next主题文件夹下找到以下文件themes/next/source/css/_common/components/post/post-body.styl，打开文件，找到以下代码修改即可：

1
2
3
iframe, img, video, embed {
  margin-bottom: 20px;
}

在以上代码增加部分代码，如下所示：

1
2
3
4
5
6
iframe, img, video, embed {
  margin-bottom: 20px;
  border-style: solid;
  border-width: 1.5px;
  border-color: #aaaaaa;
}

border-style:：边框样式。
border-width：边框宽度。
border-color：边框颜色。