Hexo的Next主题入门

发表于 分类于

Hexo的next主题简介好用且强大，但是默认的配置并不够方便，本文整理了我配置下来的经验。
Next主题的官网：https://theme-next.js.org/
如果你没有配置过Hexo，参见这篇文章使用Hexo和GitHub构建个人空间.

1. 初始化配置

1
2
3
4
5
6
# 进入目录
cd [blog]
# npm 安装
npm install hexo-theme-next  --save
# 将默认配置文件copy到目录
cp [blog]/node_modules/hexo-theme-next/_config.yml [blog]/_config.next.yml

另外，确保source目录下有:categories、tags、img三个文件夹，并初始化：
在categories目录下创建index.markdown文件并输入：

1
2
3
4
5
---
title: categories
date: 2021-04-05 23:50:49
type: categories
---

在tags目录下创建index.markdown文件并输入：

1
2
3
4
5
---
title: tags
date: 2021-04-05 23:50:49
type: tags
---

2. 默认效果

先看下默认效果：
默认效果
再看
修改后图片

几个点：

  1. 左侧sidebar默认展开
  2. sidebar展示更多内容：首页、标签、分类、归档、搜索
  3. 在展示文章详情时，sidebar的“文章目录”不要自动添加索引
  4. 关闭页面切换的动画效果

接下来我们逐一配置。

3. sidebar默认效果

3.1 修改scheme

在主题文件里，找到如内容，并开放Pisces

1
2
3
4
5
# Schemes
# scheme: Muse
# scheme: Mist
scheme: Pisces
#scheme: Gemini

3.2 修改头像

在这个模块，/img/是在/source/目录下的子目录

1
2
3
4
5
6
favicon:
  small: /img/favicon-32.avif
  medium: /img/favicon-32.avif
  apple_touch_icon: img/favicon.avif
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

3.3 修改菜单

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  # about: /about/ || fa fa-user
  archives: /archives/ || fa fa-archive
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  # schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

翻译下：
home:主页
about:关于我
archives:归档
tags:标签
categories:分类
其他的我不怎么用，大家可以自行研究

3.4 sidebar位置

在这里:
position:位置
display:是否默认展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # 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: always

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12

3.5 关闭动画

1
2
3
4
5
6
7
8
9
10
11
motion:
  enable: false
  async: false
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp

4. 文章目录

4.1 目录配置

在文章详情页里，sidebar的展示效果：
enable：是否开启目录的功能
number：是否自动生成索引编号。如果你在文章里添加了索引，那么就不需要这里的自动索引了
wrap：是否自动换行
expand_all：是否自动展开所有的目录
max_depth：目录的最大展示层级

1
2
3
4
5
6
7
8
9
10
toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: true
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6

4.2 回到顶部

是否添加“回到顶部”的按钮

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: false

4.3 给文章添加评分

注册一个账号https://widgetpack.com，然后将会获得的账号id填在下面。

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id:     账号id
  color:  "#fc6423"

5. 代码块效果

5.1 代码块主题

在这里可以预览不同的主题:https://theme-next.js.org/highlight/。
hexo自己的配置如下：

1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
prismjs:
  enable: false

next-theme的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    # light: tomorrow-night
    light: darcula
    dark: darcula
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: flat

5.2 代码块的选中问题

5.2.1 问题现象

你会遇到问题：选中代码时，选中效果非常弱，如下图：
问题示例1

更明显：
问题示例2

5.2.2 改完效果

3

5.2.3 修改方式

这个效果在配置文件里无法配置，只能改css。
路径在[blog]/node_modules/hexo-theme-next/source/css/_variables/base.styl，修改$selection-color，如下位置：

1
2
3
// Selection
$selection-bg                 = #E6E6FA;
$selection-color              = #5a7ea5;

可以直接改为：#5a7ea5
这样，选中就是蓝色了。

6. 其他样式

6.1 超链接样式

next8的配置在[blog]/node_modules/hexo-theme-next/source/css/_common/components/post/post-body.styl
遗憾的是，这里是node module的目录，如果你后续升级的话，这里的修改将会失效，需要你重新配置。
放在.post-body的区块里：

1
2
3
4
5
6
7
8
9
a:not(.btn){
  color: #428bca;
  border-bottom: none;
  &:hover {
    color: #428bca;
    font-weight: bold;
    text-decoration: underline;
  }
}

6.2 行间距

h1、h2之类的标题的行间距太宽，修改[blog]/node_modules/hexo-theme-next/source/css/_common/components/post/post-body.styl：
添加margin-top和margin-bottom

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
h1, h2, h3, h4, h5, h6 {
  // Supported plugins: hexo-renderer-markdown-it hexo-renderer-marked
  .header-anchor, .headerlink {
    border-bottom-style: none;
    color: inherit;
    float: right;
    font-size: $font-size-small;
    margin-left: 10px;
    opacity: 0;

    &::before {
      font-family-icons('\f0c1');
    }
  }
  margin-top: 5px
  margin-bottom: 10px
  &:hover {
    .header-anchor, .headerlink {
      opacity: .5;

      &:hover {
        opacity: 1;
      }
    }
  }
}

普通文本添加line-height

1
2
3
4
5
.post-body {
  font-family: $font-family-posts;
  line-height: 1.6em;
  word-wrap();