发表更新tools / hexo11 分钟读完 (大约1578个字)

Hexo 配置 Webstack 主题

本文讲述如何给 hexo 博客网站配置 Webstack 主题。

1. 安装环境说明

  • 首先粘贴本教程测试使用的环境，如果在安装配置中，环境有差异，请酌情修改或调整参数．
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
$hexo v
INFO  Validating config
hexo: 8.1.1
hexo-cli: 4.3.2
os: linux 6.8.8-300.fc40.x86_64 Fedora Linux 40 (Workstation Edition)
node: 20.19.6
acorn: 8.15.0
ada: 2.9.2
ares: 1.34.5
brotli: 1.1.0
cjs_module_lexer: 2.1.0
cldr: 47.0
icu: 77.1
llhttp: 9.3.0
modules: 115
napi: 9
nghttp2: 1.61.0
openssl: 3.0.17
simdutf: 6.4.2
tz: 2025b
undici: 6.22.0
unicode: 16.0
uv: 1.46.0
uvwasi: 0.0.23
v8: 11.3.244.8-node.33
zlib: 1.3.1-470d3a2

1
2
3
4
5
6
7
8
9
10
11
12
$tree -L 1
.
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── scaffolds
├── source
└── themes

source 目录下已经有两篇文章，项目能发布到 github 上，能在公网上通过https://pengtech.net正常访问了．下一步实现尝试一下修改默认的主题，将其替换为 webstack 主题．

2. 安装 Webstack 主题

安装 Webstack 主题有三种方式:

  • 通过 npm 安装
  • 通过 git clone 安装
  • 通过压缩包安装

2.1. 安装依赖

1
2
3
4

# Install dependencies
pnpm install hexo-renderer-pug pug --save

2.2. 安装方式一： 通过 npm 安装

这种安装方式适用于以内容创作为主，不需要自定义主题，追求稳定和可靠性的用户。优点是，有统一的依赖项目管理，切点是修改主题源码不太方便。适合：自动化部署、服务器环境。

1
2
3

pnpm install hexo-theme-webstack --save

2.3. 安装方式二： 通过 git 克隆安装

这种安装方式适用适用于对主题有自定义需求，且掌握了一定的前端知识和动手能力强的用户。

1
2
3
4
5
6
7
8
# 把 webstack 主题仓库 fork 到您的 GitHub 账号下
# 初始化git仓库
git init
# 把您 fork 的 webstack 主题仓库添加为博客仓库的子模块
git submodule add https://github.com/HCLonely/hexo-theme-webstack.git themes/webstack

# 在 blog/_config.yml 文件中找到并修改：
theme: webstack

2.4. 安装方式三： 通过压缩包安装

压缩包安装: 操作最简单, 不需要 git 或 npm, 更新麻烦（需重新下载）, 不方便版本管理, 适合：新手快速尝试主题。

  • 进入项目

    1
    2
    3
    $cd blog
    $pwd
    your_project_dir/blog

    项目目录结构如上节所示

  • 找到对应的压缩包

  • 下载
    源代码包 Source code(tar.gz)

  • 解压缩
    将源码包解压到 themes/webstack 目录下即可．

  • 一键安装

    • 前提是你的电脑支持 curl, wget, grep 等命令，针对大多数 windows 用户，建议还是参考上面的步骤一步一步安装主题，对于 MacOs 和 windows 用户，可以使用如下命令一键安装

    • 理解以上步骤，能更好地帮助你理解一键安装命令

    • 这里将以上步骤压缩成一条命令

      1
      2
      3
      4

      mkdir themes/webstack

      echo  "https://github.com/HCLonely/hexo-theme-webstack/archive/refs/tags/3.0.5.tar.gz" | wget -i - -O- | tar -zx -C themes/webstack --strip-components=1

    • 安装完成后,　 themes/webstack 目录的结构如下所示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $tree -L 1 themes/webstack/
    themes/webstack/
    ├── _config.yml
    ├── _data
    ├── giscus.json
    ├── languages
    ├── layout
    ├── LICENSE
    ├── npm-publish.sh
    ├── package.json
    ├── README.md
    ├── scripts
    └── source

    6 directories, 6 files

3. 配置 webstack 主题

3.1. 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件_config.yml， 找到 theme 字段，并将其值更改为 webstack

1
theme: webstack

也可以使用 hexo 命令启用 webstack 主题

1
hexo config theme webstack

3.2. 验证主题

  • 首先启动 Hexo 本地站点

    1
    hexo server

  • 当命令行输出中提示出：
    INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

  • 此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

3.3. 侧边栏配置

左上角的 logo 和标题取自站点根目录的配置文件：

blog/_config.yml

1
2
title: 网站名称
avatar: 头像

设置鼠标指上 subtitle 后翻转另一行字。

blog/_config.webstack.yml

1
2
logo:
  subtitle: "" # '文字1 | 文字2' (鼠标放上去会切换到文字2)

如果您想用一个图片作为 logo，可以直接在主题配置文件 logo 中设置：

blog/_config.webstack.yml

1
2
logo:
  subtitle: "" # '文字1 | 文字2' (鼠标放上去会切换到文字2)

如果您想用一个图片作为 logo，可以直接在主题配置文件 logo 中设置：

1
2
3
logo:
  avatar: "[{config.avatar}](/about/)" # you can set avatar link in _config.yml or '[https://xxx.png](/about/)'
  title: "[{config.title}](/)" # you can set html tag like: '[<img no-lazy height="32px" src="xxx"/>](/)'

3.3.2. 侧边栏背景

此功能在 1.26.0 中支持，可以设置：纯色/渐变色/图片作为背景。

1
2
3
4
5
6
7
8

style:
  ...
  leftbar:
    background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)
    blur-px: 100px # 模糊半径
    blur-bg: var(--alpha60) # 模糊颜色

3.3.3. 主导航栏 (Navbar)

自己可以增加任意的键值对，键：就是 menu_id，后面需要用到，值：就是显示的 md 链接，方括号内支持文字和图片标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 侧边栏主功能导航菜单
menubar:
  columns: 4 # 一行多少个
  items:# 可按照自己需求增加，符合以下格式即可
    # - id: post # 页面中高亮的 menu_id
    #   theme: '#1BCDFC' # 高亮时的颜色，仅 svg 中 fill="currentColor" 时有效
    #   icon: solar:documents-bold-duotone # 支持 svg/img 标签，可以定义在 icons.yml 文件中，也支持外部图片的 URL
    #   title: 博客 # 标题
    #   url: / # 跳转链接，支持相对路径和绝对路径
    # - id: wiki
    #   theme: '#3DC550'
    #   icon: solar:notebook-bookmark-bold-duotone
    #   title: 文档
    #   url: /wiki/
    # - id: explore
    #   theme: '#FA6400'
    #   icon: solar:planet-bold-duotone
    #   title: 探索
    #   url: /explore/
    # - id: social
    #   theme: '#F44336'
    #   icon: solar:chat-square-like-bold-duotone
    #   title: 社交
    #   url: /friends/

3.4. 头部标签自定义

3.4.1. Open Graph

默认生成 Open Graph 标签，如果您不希望生成它，可以在主题配置文件中关闭：

4. 参考文档

webstack 侧边栏设置

一款基于webstack的hexo主题

相关文章

Hexo 配置 Webstack 主题

https://pengtech.net/hexo/hexo_apply_webstack_theme.html

作者

鹏叔

发布于

2025-01-20

更新于

2026-02-21

许可协议

#
评论

热门文章

最新文章

follow.it

分类

热门文章

×