NexT主题配置

发表于 更新于 分类于 本文字数： 5.3k 阅读时长 ≈ 5 分钟

摘要：本文主要是基于hexo + github pages搭建博客的教程，在此必须申明的一点是，本文并非从0开始，你需要会git、hexo基础命令，并且会基础的博客搭建。本文主要用途是next主题的配置。

基础命令

  • 找一个空文件夹，用vscode打开，终端运行npm install -g hexo -cil安装hexo，如果报错没有权限的话先运行Set-ExecutionPolicy RemoteSigned。

  • 运行hexo init初始化博客

  • 运行git clone https://github.com/next-theme/hexo-theme-next themes/next安装NexT主题，或运行npm install hexo-theme-next命令，在node_modules中找

  • 运行npm install hexo-deployer-git --save安装git部署命令工具，在博客配置文件中的deploy修改为：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/illusionaryDaytime-l/illusionaryDaytime-l.github.io.git
  branch: main

主题基础配置

主题配置参考这个博主的文章，写的非常全面。

夜间模式

  • 在主题配置文件中搜索darkmode

主题设置

  • 在主题配置文件中搜索scheme

文章模板

  • 在blog/scaffolds/post中，修改为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: {{ title }}
date: {{ date }}
categories: 
tags: 
mathjax: 
---



<!--more-->



---
  • 在主题配置文件搜索math，开启mathjax

标签、分类、关于页面

  • 运行命令hexo new page tags添加标签页面，把tags分别换成categories和about添加分类页和关于页

  • 将以上三个文件夹的.md中，title改成自己需要的，分别添加type值为"tags"、"categories"、"about"

  • 搜索主题配置文件的menu，修改需要的显示内容

搜索页面（插件）

  • 终端运行npm install hexo-generator-searchdb --save，安装搜索框插件

  • 在博客配置文件最后新增：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • 在主题配置文件下搜索local_search，开启搜索功能

边栏外观行为

  • 在主题配置文件中搜索sidebar

  • 修改width_expanded: 350

  • 修改展示方式display: always

边栏头像

  • 在在主题配置文件中搜索avatar，具体设置参考如下（ps: images文件夹在/themes/source下）：
1
2
3
4
5
6
7
8
9
10
11
# Sidebar Avatar
avatar: # 个人头像设置
  # Replace the default image and set the url here.
  url: /images/avatar.jpg
  # If true, the avatar will be displayed in circle.
  rounded: true # 是否是圆形显示
  # If true, the avatar will be rotated with the cursor.
  rotated: true # 鼠标放置头像上可以旋转

# Posts / Categories / Tags in sidebar.
site_state: true # 侧边栏头像下是否显示文章、分类和标签设置

友链设置

  • 在主题配置文件中搜索social，具体设置参考如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
social: # 友情链接，直接添加自己的社会链接即可，||前面是地址，||后面是图标
  GitHub: https://github.com/illusionaryDaytime-l || fab fa-github
  E-Mail: mailto:3474737385@qq.com || fa fa-envelope

social_icons: # 友链的图标，默认就好
  enable: true
  icons_only: false
  transition: false

# Blog rolls # 默认
links_settings:
  icon: fa fa-globe
  # Available values: block | inline
  layout: block

links: # 上面是设置，这里是添加链接，title + 链接
  知行博客: https://zxblog.eu.org/

页脚设置

  • 主题配置文件搜索footer，具体配置如下：

  • 开启时间设置：since: 2025

  • 关闭版本号：powered: false

代码高亮设置

  • 在主题配置文件中搜索codeblock，参考设置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme: 
    light: an-old-hope
    dark: an-old-hope
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: flat
  # Fold code block
  fold:
    enable: true
    height: 250
  # Display language name
  language: true

字数统计（插件）

  • 终端运行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."
  • 在主题配置文件下搜索symbols_count_time，具体配置如下：
1
2
3
4
# 字数统计
symbols_count_time:
  separated_meta: false
  item_text_total: true

添加运行天数

  • 在themes/next/layout/_partials/footer.njk文件最后一行添加：
1
2
3
4
<div style="font-size: 0.85rem">
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script src="/runtime.js"></script>
  • 在blog/source/runtime.js文件（这个是新建的哦）写入：
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
!(function() {
  /** 计时起始时间，自行修改 **/
  var start = new Date("2025/11/04 00:00:00");

  function update() {
    var now = new Date();
    now.setTime(now.getTime()+250);
    days = (now - start) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - start) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if(String(hnum).length === 1 ){
      hnum = "0" + hnum;
    }
    minutes = (now - start) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if(String(mnum).length === 1 ){
      mnum = "0" + mnum;
    }
    seconds = (now - start) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if(String(snum).length === 1 ){
      snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = "本站已安全运行&nbsp"+dnum+"&nbsp天";
    document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
  }

  update();
  setInterval(update, 1000);
})();

修改文章永久链接为随机编号（插件）

  • 运行npm install hexo-abbrlink --save

  • 博客配置文件中：

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://illusionaryDaytime-l.github.io
permalink: posts/:abbrlink/ # :year/:month/:day/:title/
# 文章链接数字插件
abbrlink:
  alg: crc16
  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

右上角设置、文章底部标签、彩带

  • 主题配置文件搜索tag_icon，开启

  • 主题配置文件搜索bookmark，设置color: "#8CE"

  • 主题配置文件搜索github，开启

  • 主题配置文件搜索canvas_ribbon，开启

博客文章背景

  • 找到blog/themes/source/css/common/components/post/index.styl文件，搜索.post-block

  • 代码块修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block {
      background: rgba(51, 51, 51, 1);
      visibility: hidden;
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 50px;
      -webkit-box-shadow: 0 0 5px rgba(51, 51, 51, 1);
      -moz-box-shadow: 0 0 5px rgba(51, 51, 51, 1);
    }
    .pagination, .comments {
      visibility: hidden;
    }
  }
  • 圆角处理则需新建blog/source/_data/variables.styl，并写入：
1
2
$border-radius-inner = 30px 30px 30px 30px;
$border-radius = 30px;
  • 在主题配置文件打开variable