博客网站配置更新

发表于 更新于 分类于

前言

自从2021-11-26首次用 Hexo 配置博客后，配置内容以及插件已经有段时间没有更新了，此次重新安装配置，并简单记录一下。

安装 Hexo 并初始化

安装

Hexo官方文档

  • 安装 Git 和 Node.js

    • 参考 Hexo 官方文档，安装 Hexo 前需安装 Git 和 Node.js

  • 正式安装 Hexo

    所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

    # 安装
npm install -g hexo-cli

hexo init 初始化

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹 <folder> 中新建所需要的文件。

hexo init <folder> 
cd <folder>
npm install

我以 new_blog 文件夹为例

# 初始化配置
hexo init new_blog
cd new_blog
npm install

初始化后，您的项目文件夹将如下所示：

.
├── _config.yml  # 网站的配置文件。 您可以在此配置大部分的参数。
├── package.json
├── scaffolds  # 模版 文件夹。 当您新建文章时，Hexo 会根据 scaffold 来创建文件。
├── source
|   ├── _drafts
|   └── _posts
└── themes

git 初始化、名字、邮箱信息配置

初始化完成后，进行一下

# git init初始化
git init

并设置 git 信息，以我的名字和邮箱为例

# 并设置 git 信息，以我的名字和邮箱为例
git config --global user.name "xuanyabulema"
git config --global user.email "xuanyabulema@qq.com"

个人博客基础信息更新

打开 /_config.yml 文件夹，进行基础的信息的更新，以我的为例

# Site
title: 悬崖不勒马的小站
subtitle: ''
description: 'The time you enjoy wasting is not wasted time!'
keywords:
author: 悬崖不勒马
language: zh-CN
timezone: Asia/Shanghai

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://xuanyabulema.github.io

添加阅读全文

常见问题 - NexT 使用文档

如何设置「阅读全文」？

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

  1. 在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式 推荐

将下述内容添加到想添加的范围即可

<!-- more -->

设置文章模板

模板文件信息位于./scaffold 文件夹下的 post.md 和 draft.md

对应就是 hexo new [layout] <title> 中的 layout , 默认为 post, 草稿为 draft, 如果标题包含空格的话，请使用引号括起来。

---
title: {{ title }}
date: {{ date }}
tags: 
categories: 
---



点击阅读前文前，首页能看到的文章的简短描述



<!-- more -->

配置使用 Markdown 嵌入图片

资源文件夹 | Hexo

hexo博客中如何插入图片Hexo是一个静态的博客网站生成器，生成一个博客只需要分分钟的时间就能搞定。 Hexo的博文是 - 掘金

修改站点配置 /_config.yml 文件

post_asset_folder: true # 配置使用 Markdown 嵌入图片
marked:
  prependRoot: true
  postAsset: true

此外，需要修改修改站点配置 /_config.yml 文件如下内容（同属于URL优化），否则如 <img src="test.jpg" alt="test" style="width:50%;" /> 格式的图片无法链接正确而无法显示

# permalink: :year/:month/:day/:title/
permalink: posts/:title.html    # 修改   三层结构  于 posts/ 下

URL优化

一般来说，网站的最佳结构是 用户从首页点击三次就可以到达任何一个页面，但是Hexo编译的是：域名/年/月/日/文章标题 这样五层的结构。这样的结构很不利于SEO，爬虫会经常爬不到我们的文章，所以我们需要优化一下URL。

需要修改修改站点配置 /_config.yml 文件如下内容：

# permalink: :year/:month/:day/:title/
permalink: posts/:title.html    # 修改   三层结构  于 posts/ 下

即在配置使用 Markdown 嵌入图片时，同步完成配置。

更新 NexT 主题配置

基础配置

之前通过直接编辑主题配置文件来配置 NexT 主题，给升级是带来了不便，现参考官方推荐的新方式进行配置：

Configuration | NexT

如何配置 NexT 主题？传统的方法是直接编辑默认主题配置文件（ themes/next/_config.yml 或 node_modules/hexo-theme-next/_config.yml ）。然而，当通过 git 或 npm 升级 NexT 主题时，配置文件会被覆盖，这给主题配置带来了不便。

目前，NexT 鼓励用户使用 Alternate Theme Config。这是 Hexo 的一个功能，文档位于：Hexo Configuration

配置方式

  • 在站点根目录创建名为 _config.next.yml 的 NexT 配置文件。

  • 将所需的 NexT 主题选项从默认主题配置文件复制到这个配置文件中。如果是首次安装 NexT，则可以通过以下命令复制整个默认主题配置文件：

    # Installed through npm
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

安装

npm install hexo-theme-next

修改 /_config.yml 文件，以更新启用 next 主题

theme: next

Alternate Theme Config 方式配置 NexT 主题

cp node_modules/hexo-theme-next/_config.yml _config.next.yml

Theme Settings | NexT

修改 _config.next.yml 文件进行如下配置

NexT 主题改为 Gemini

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini # 修改为Gemini主题

启用 显示知识共享 4.0 国际许可协议

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
license: by-nc-sa
# Available values: big | small
size: small
sidebar: true  # 启用 显示知识共享 4.0 国际许可协议
post: true  # 启用 显示知识共享 4.0 国际许可协议
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
language:

open_graph设置（效果未验证）

# Open graph settings
# See: https://hexo.io/docs/helpers#open-graph
open_graph:
enable: true
options:
 twitter_card: <twitter:card>  # open_graph设置
 twitter_id: <twitter:creator>
 twitter_site: <twitter:site>
 twitter_image: <twitter:image>
 google_plus: <g+:profile_link>
 fb_admins: <fb:admin_id>
 fb_app_id: <fb:app_id>

配置菜单项

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:  # 配置菜单项
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat

在上述的修改的基础上，还需要新建对应的分类、标签界面

  • 新建分类界面

    hexo new page categories

    • 修改对应 /source/categories/index.md 内容如下：

      ---
title: 文章分类
date: 2026-06-07 15:29:43
type: "categories"
---

    • 给文件添加对应分类信息：如下添加了“折腾”一级分类、“Hexo”二级分类信息

      ---
title: Hexo安装日志
date: 2021-11-26 07:39:29
categories: 
- 折腾
- Hexo
tags: [Hexo,ubuntu]
---

  • 新建标签界面（与上类似）

    hexo new page tags

    • 修改对应 /source/tags/index.md 内容如下：

      ---
title: 标签
date: 2026-06-07 15:41:19
type: "tags"
---

  • 新建关于界面

    hexo new page "about"
    • 修改对应 /source/about/index.md 内容，及可添加个人信息介绍

设置博客头像

修改 _config.next.yml 文件进行如下配置

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png  # 设置头像，avatar.png 位于主目录 source/images/avatar.png
  # If true, the avatar will be displayed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

赞赏配置

修改 _config.next.yml 文件进行如下配置

# Donate (Sponsor) settings
# Front-matter variable (nonsupport animation).
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: false
  # comment: 赏杯可乐🥤  # 没生效

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

添加社交网站信息

修改 _config.next.yml 文件进行如下配置

social:
  GitHub: https://github.com/xuanyabulema || fab fa-github # 添加GitHub
  E-Mail: mailto:xuanyabulema@qq.com || fa fa-envelope # 添加邮箱
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  Bilibili: https://space.bilibili.com/45045474/ || fab fa-bilibili  # 添加B站

侧栏标题设置

修改 _config.next.yml 文件进行如下配置

# Table of Contents in the Sidebar
# Front-matter variable (nonsupport wrap expand_all).
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: false
  # Maximum heading depth of generated toc.
  max_depth: 6

代码块设置

修改 _config.next.yml 文件进行如下配置

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true # 代码块复制按钮
    # Available values: default | flat | mac
    style:
  # Fold code block
  fold:
    enable: false
    height: 500
  # Display language name
  language: false

返回顶部按钮设置

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true # 添加进度

顶部阅读进度条

# Reading progress bar
reading_progress:
  enable: true # 启用
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#455667" # 修改配色
  height: 3px

facybox 设置

fancybox 可以在点击图片时放大该图片，并且可以快速浏览当前文章的所有图片

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

本地搜索设置

安装

npm install hexo-generator-searchdb

修改站点配置文件 /_config.yml，添加如下内容

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
search:
  path: search.json
  field: post
  content: true
  format: striptags

修改 _config.next.yml 文件进行如下配置

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

关闭加载动画

修改 _config.next.yml 文件进行如下配置

motion:
  enable: false # 关闭动画
  async: false

Mermaid 绘图支持

Mermaid 支持甘特图（gantt）、类图、时序图等

Mermaid | NexT

修改 _config.next.yml 文件进行如下配置

# Mermaid tag
mermaid:
  enable: true # 添加 mermaid 支持
  # Available themes: default | dark | forest | neutral
  theme:
    light: forest
    dark: forest

配置站点_config.yml文件

highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
  exclude_languages:
    - mermaid  # 添加 mermaid 支持

添加GitHub推送支持

One-Command Deployment | Hexo

  1. 安装 hexo-deployer-git 。

    npm install hexo-deployer-git --save

  2. 配置站点_config.yml文件

    ## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: git
  repo: ssh://git@ssh.github.com:443/xuanyabulema/xuanyabulema.github.io.git
  branch: master

添加站点文件

安装扩展

npm install hexo-generator-sitemap --save

配置站点_config.yml文件

# 自动生成sitemap
sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  # template: ./sitemap_template.xml
  # template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true

配置robots.txt

在hexo根目录下的 source 目录下新建一个robots.txt文件，内容如下：

# 允许所有用户代理的浏览器爬虫进行访问（爬起数据）
User-agent: *

# 允许访问的内容
Allow: /
Allow: /about/
Allow: /archives/
Allow: /book/
Allow: /categories/
Allow: /microchip/
Allow: /page/
Allow: /posts/
Allow: /surfing/
Allow: /tags/

# 网站地图Sitemap
Sitemap: https://xuanyabulema.github.io/sitemap.xml
Sitemap: https://xuanyabulema.github.io/baidusitemap.xml
Sitemap: https://xuanyabulema.github.io/sitemap.txt

添加 Emoji 支持

Hexo中添加emoji表情 - 五毛钱的饼 - 博客园 实际测试发现好像不需要执行 npm install markdown-it-emoji --save

hexojs/hexo-renderer-markdown-it: Markdown-it is a Markdown parser, done right. A faster and CommonMark compliant alternative for Hexo.

  • 卸载原有 Markdown 渲染器

    npm un hexo-renderer-marked --save

  • 安装 hexo-renderer-markdown-it 渲染器

    npm i hexo-renderer-markdown-it --save

  • 修改站点配置 /_config.yml 文件，末尾添加如下内容：

    # Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji  # add emoji
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol:

  • hexo s 预览效果前，需要 hexo clean 一下，清除之前的缓存

添加 LaTeX 公式显示

Hexo Fluid 主题配置 LaTeX 数学公式渲染 | Fishのblog

  • 在上述安装 hexo-renderer-markdown-it 插件的基础上，安装 markdown-it-mathjax3 插件

    # 安装 MathJax 插件
npm install markdown-it-mathjax3 --save

  • 修改站点配置 /_config.yml 文件

    # Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji  # add emoji
    - markdown-it-mathjax3 # 添加 LeTeX 渲染支持
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol:

hexo toc 修复

hexo一级标题不跳转问题解决

最新配置上述内容后，点击一级标题竟然还是无法跳转，按老办法竟然可以解决。。。。

执行如下：

npm install hexo-toc

然后修改该目录下的node_modules\hexo-toc\lib\filter.js的“28-31行”为如下

$title.attr('id', id);
// $title.children('a').remove();
// $title.html( '<span id="' + id + '">' + $title.html() + '</span>' );
// $title.removeAttr('id');

添加插入音视频支持

安装和基本介绍

安装命令

npm install hexo-tag-mmedia@1 --save

配置

  • 配置项较多目的是给予最大的自定义权限，默认情况下不做配置也可以使用。
  • 配置文件放在博客根目录的 _config.yml 中
  • default 为默认配置，在 _config.yml 中填写就不需要在每个标签全部写入了，所有允许在 mmedia 标签上写入的配置项，均可在 default 下配置。

模板

mmedia:
  audio:
    default:
  video:
    default:
  aplayer:
    js: https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js
    css: https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css
    default:
      contents:
  meting:
    js: https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js
    api:
    default:
  dplayer:
    js: https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js
    hls_js: https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js
    dash_js: https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js
    shaka_dash_js: https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js
    flv_js: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
    webtorrent_js: https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js
    default:
      contents:
  bilibili:
    default:
      page: 1
      danmaku: true
      allowfullscreen: allowfullscreen
      sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups
      width: 100%
      max_width: 850px
      margin: auto
  xigua:
    default:
      autoplay: false
      startTime: 0
      allowfullscreen: allowfullscreen
      sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups
      width: 100%
      max_width: 850px
      margin: auto

示例

{% mmedia "bilibili" "bvid:BV1vJ411U7Ji" %}

添加时效性提醒

随着时间的推移，很多程序都会更新，网上很多关于对程序记录的内容往往会过时，出现不能在复现的问题。因此根据文章发布时间设置时效性提醒，有助于读者辨别信息的可靠性。

  • 添加注入器

    Hexo提供了 注入器（Injector），可以将指定的静态代码片段注入到生成的静态页面中。

    在主题的 scripts 目录（没有则新建一个）下新建一个名为 injector.js 的文件，

    内容如下：

    //注入文章过期提示
hexo.extend.injector.register('body_end', `<script src="/js/outdate.js"></script>`, 'post')
    • body_end 代表注入到文章开头。
    • 由于注入的代码有点长，我们就用一个 Javascript 文件单独处理，作为注入的代码片段引入
    • post 代表只注入到文章详情页面中。

  • 添加静态代码片段

    在主题或根目录下的 source 目录下新建 js 文件夹，新建一个名为 outdate.js 的文件，

    添加以下代码：

    (function() {
    //不同的日期显示不同的样式，200 天为黄色提示，400天为红色提示，可以自己定义。
    let warningDay = 200;
    let errorDay = 400;
    // 确保能够获取到文章时间以及在文章详情页
    let times = document.getElementsByTagName('time');
    if (times.length === 0) { return; }
    let posts = document.getElementsByClassName('post-body');
    if (posts.length === 0) { return; }

    // 获取系统当前的时间
    let pubTime = new Date(times[0].dateTime); /* 文章发布时间戳 */
    let now = Date.now() /* 当前时间戳 */
    let interval = parseInt(now - pubTime)
    let days = parseInt(interval / 86400000)
        /* 发布时间超过指定时间（毫秒） */
        //note warning 以及 note danger 是 Next 主题的自定义模板语法，如果使用其他主题，请自行更改样式以达到最佳显示效果
    if (interval > warningDay * 3600 * 24 * 1000 && interval < errorDay * 3600 * 24 * 1000) {
        posts[0].innerHTML = '<div class="note warning">' +
            '<h5>文章时效性提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
            '</div>' + posts[0].innerHTML;
    } else if (interval >= errorDay * 3600 * 24 * 1000) {
        posts[0].innerHTML = '<div class="note danger">' +
            '<h5>文章时效性提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
            '</div>' + posts[0].innerHTML;
    }
})();

命令合集

初始化

# 安装
npm install -g hexo-cli

# 初始化配置
hexo init new_blog
cd new_blog
npm install

# git init初始化
git init
# 并设置 git 信息，以我的名字和邮箱为例
git config --global user.name "xuanyabulema"
git config --global user.email "xuanyabulema@qq.com"

# 安装 NexT 主题
npm install hexo-theme-next