Hexo 配置 Stellar 主题

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

1. 安装环境说明

• 首先粘贴本教程测试使用的环境，如果在安装配置中，环境有差异，请酌情修改或调整参数．

$hexo v
INFO  Validating config
INFO  Welcome to Stellar 1.29.1
DOCS  https://xaoxuu.com/wiki/stellar/
REPO  https://github.com/xaoxuu/hexo-theme-stellar.git

hexo: 7.3.0
hexo-cli: 4.3.2
os: linux 6.8.8-300.fc40.x86_64 Fedora Linux 40 (Workstation Edition)
node: 20.12.2
acorn: 8.11.3
ada: 2.7.6
ares: 1.27.0
base64: 0.5.2
brotli: 1.1.0
cjs_module_lexer: 1.2.2
cldr: 44.1
icu: 74.2
llhttp: 8.1.2
modules: 115
napi: 9
nghttp2: 1.60.0
nghttp3: 0.7.0
ngtcp2: 0.8.1
openssl: 3.0.13+quic
simdutf: 4.0.8
tz: 2024a
undici: 5.28.4
unicode: 15.1
uv: 1.46.0
uvwasi: 0.0.20
v8: 11.3.244.8-node.19
zlib: 1.3.0.1-motley-40e35a7

• 本文是接上一篇文章使用 Hexo 搭建自己的博客网站的续篇，经过上一篇文章的安装配置，目前的目录结构如下：

$tree -L 1
.
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── scaffolds
├── source
├── themes
└── yarn.lock

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

2. 安装 Stellar 主题

安装 Icarus 主题有两种方式:

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

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

这种安装方式适用于以内容创作为主，不需要自定义主题，追求稳定和可靠性的用户。

npm install hexo-theme-stellar

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

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

# 把 Stellar 主题仓库 fork 到您的 GitHub 账号下
# 初始化git仓库
git init
# 把您 fork 的 Stellar 主题仓库添加为博客仓库的子模块
git submodule add https://github.com/#yourname#/hexo-theme-stellar.git themes/stellar
# 在 blog/_config.yml 文件中找到并修改：
theme: stellar

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

• 进入项目

  $cd blog
  $pwd
  your_project_dir/blog

  项目目录结构如上节所示

• 找到对应的压缩包

  • 打开https://github.com/xaoxuu/hexo-theme-stellar/releases/
  • 找到对应的 release 版本，在对应的版本的 release notes 下面找到 Source code(targ.gz)

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

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

• 一键安装

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

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

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

    mkdir themes/stellar
    
    echo  "https://github.com/xaoxuu/hexo-theme-stellar/archive/refs/tags/1.29.1.tar.gz" | wget -i - -O- | tar -zx -C themes/stellar --strip-components=1

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

  $tree -L 1 themes/stellar/
  themes/stellar/
  ├── _config.yml
  ├── _data
  ├── giscus.json
  ├── languages
  ├── layout
  ├── LICENSE
  ├── npm-publish.sh
  ├── package.json
  ├── README.md
  ├── scripts
  └── source
  
  6 directories, 6 files

3. 配置 Stellar 主题

3.1. 启用主题

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

theme: stellar

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

hexo config theme icarus

3.2. 验证主题

• 首先启动 Hexo 本地站点

  hexo server

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

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

侧边栏配置

Logo

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

blog/_config.yml

title: 网站名称
avatar: 头像

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

blog/_config.stellar.yml

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

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

blog/_config.stellar.yml

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

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

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"/>](/)'

侧边栏背景

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

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) # 模糊颜色

主导航栏 (Navbar)

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

# 侧边栏主功能导航菜单
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/

头部标签自定义

Open Graph

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

8. 参考文档

stellar 侧边栏设置