Redefine 主题美化与定制指南

昊萌 Lv2
  2026-07-06 12:00 2026-07-06 12:00 创建   2026-07-06 00:41:19 2026-07-06 00:41:19 更新    

前言

本博客使用 Hexo 搭建，主题是 Redefine。Redefine 是一个现代、简约、高度可定制的 Hexo 主题。本文记录了它的主要可定制项和美化方法，方便后续调整。

所有配置都在博客根目录下的 _config.redefine.yml 文件中。修改后需要执行：

1
npx hexo clean && npx hexo generate

一、基础信息

修改站点名称、作者、头像等：

1
2
3
4
5
6
7
8
9
info:
  title: 昊萌的随笔        # 站点标题
  subtitle: 常见常新        # 副标题
  author: 昊萌              # 作者名
  url: https://zilongTian.github.io

defaults:
  favicon: /img/头像.jpg    # 浏览器标签页图标
  avatar: /img/头像.jpg     # 侧边栏头像

可扩展的：

  • 标题、副标题随时可改
  • 头像和 favicon 替换为新图片即可，放在 source/img/ 目录下

二、主题颜色

1
2
3
colors:
  primary: "#4A90D9"        # 主色调（当前为蓝色）
  default_mode: light       # 默认模式：light / dark

可扩展的：

颜色 色值 风格
克莱因蓝 #002FA7 深邃、艺术感
墨绿 #2D5016 自然、沉稳
暖橙 #E8734A 温暖、活泼
暗紫 #6C5CE7 科技感
玫瑰红 #E91E63 热情、醒目
默认红 #A31F34 Redefine 原色

换成喜欢的颜色后，整个网站的链接、按钮、高亮都会随之变化。

三、封面 Banner

首页顶部的大封面是最显眼的视觉元素：

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
home_banner:
  enable: true
  style: fixed                    # static（随页面滚动）/ fixed（背景固定+模糊）
  image:
    light: /images/wallhaven-wqery6-light.webp   # 亮色模式背景
    dark: /images/wallhaven-wqery6-dark.webp     # 暗色模式背景
  title: 昊萌的随笔               # 大标题
  subtitle:
    text:                          # 副标题数组，打字机动画循环展示
      - 常见常新
      - 记录学习，分享思考
    typing_speed: 80               # 打字速度（ms）
    backing_speed: 50              # 退格速度（ms）
    loop: true                     # 是否循环
  text_color:
    light: "#ffffff"               # 亮色模式下文字颜色
    dark: "#d1d1b6"                # 暗色模式下文字颜色
  text_style:
    title_size: 2.8rem             # 标题字号
    subtitle_size: 1.3rem          # 副标题字号
  social_links:
    enable: true
    links:
      - icon: github
        url: https://github.com/zilongTian
      # 可添加更多社交图标

可扩展的：

  1. 换背景图：在 wallhaven.cc 或 unsplash.com 找高清壁纸，放到 source/images/，修改 image.light 和 image.dark 路径
  2. 换副标题文字：subtitle.text 数组可以加任意多条，会逐个打字-删除-循环
  3. 加社交图标：支持 GitHub、Twitter、B站、知乎、邮箱等。如需 B 站图标，使用自定义图片：icon: /images/bilibili.svg
  4. 改成一言：如果要接入一言 API，设置 subtitle.hitokoto.enable: true
  5. 关掉 Banner：enable: false 即可

四、导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
navbar:
  links:
    Home:
      path: /
      icon: fa-regular fa-house
    Archives:
      path: /archives
      icon: fa-regular fa-archive
    About:
      path: /about
      icon: fa-regular fa-user
    朋友们:
      path: /friends
      icon: fa-regular fa-link
  search:
    enable: true

可扩展的：

  • 加新页面：先 npx hexo new page "页面名" 创建，再加到 links 里
  • 图标库：使用 FontAwesome 免费图标，搜索喜欢的图标名替换 icon 字段
  • 二级菜单：支持 submenu，比如：
1
2
3
4
5
6
关于:
  icon: fa-regular fa-user
  submenus:
    我: /about
    GitHub: https://github.com/zilongTian
    朋友们: /friends

五、文章页设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
articles:
  style:
    font_size: 16px               # 正文字号
    line_height: 1.5               # 行高
    image_border_radius: 14px      # 图片圆角
    title_alignment: left          # 标题对齐：left / center
  word_count:
    enable: true                   # 显示字数统计
    min2read: true                 # 显示阅读时间
  code_block:
    copy: true                     # 代码块复制按钮
    style: mac                     # mac（macOS 风格）/ simple（简洁）
    highlight_theme:
      light: github                # 亮色代码主题
      dark: vs2015                 # 暗色代码主题
  toc:
    enable: true                   # 显示目录
  mathjax: true                    # LaTeX 数学公式

可扩展的：

  • 代码主题：亮色可选 github、atom-one-light、default；暗色可选 monokai-sublime、night-owl、tokyo-night-dark、nord 等
  • 正文字号：觉得小可以调到 17px 或 18px
  • 图片圆角：可以调到 0px（直角）或 20px（更圆）
  • 数学公式：写 ML 笔记时用 $E=mc^2$（行内）或 $$...$$（独立行）即可渲染

六、评论系统

当前使用 giscus（基于 GitHub Discussions，免费、无广告）：

1
2
3
4
5
6
7
8
9
10
11
comment:
  enable: true
  system: giscus
  config:
    giscus:
      repo: zilongTian/zilongTian.github.io
      repo_id: R_kgDOK3ut9w
      category: Announcements
      category_id: DIC_kwDOK3ut984DAjpx
      mapping: pathname
      lang: zh-CN

可扩展的：

  • 换评论系统：Redefine 也支持 Waline、Twikoo、Gitalk、Artalk、Utterances。改 system 和对应的 config 即可
  • 关掉评论：enable: false

七、页脚

1
2
3
4
5
6
7
footer:
  runtime: true                   # 显示"博客已运行 X 天"
  start: 2023/12/10 23:35:11     # 建站时间
  statistics: true                # 文章数、总字数
  powered:
    hexo: true
    redefine: true

可扩展的：

  • 修改 start 时间会影响运行天数显示
  • powered 可以关掉 Hexo/Redefine 的展示

八、首页侧边栏

1
2
3
4
5
6
7
home:
  sidebar:
    enable: true
    position: left                # left / right
    first_item: menu              # menu / info
    announcement:                 # 公告文字（支持 Markdown）
    show_on_mobile: true

可扩展的：

  • 公告栏：在 announcement 里写 Markdown 文本，会显示在侧边栏顶部
  • 侧边栏位置：position: right 可以调到右边
  • 添加侧边栏链接：在 links 里加标签、分类等快捷入口

九、全局设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
global:
  content_max_width: 1000px       # 文章区域最大宽度
  hover:
    shadow: true                  # 卡片悬停阴影
    scale: false                  # 卡片悬停放大
  scroll_progress:
    bar: false                    # 顶部进度条
    percentage: true              # 右下角百分比
  website_counter:
    enable: true                  # 访问量统计
    site_pv: true
    site_uv: true
    post_pv: true
  single_page: true               # 单页应用体验（swup，类似 PJAX）
  preloader:
    enable: false                 # 全屏加载动画

可扩展的：

  • 内容宽度：屏幕大的可以调到 1200px
  • 悬停效果：scale: true 会让文章卡片悬停时轻微放大
  • 加载动画：preloader.enable: true 可以开启全屏加载效果
  • 访问统计：数据来自 vercount.one，部署后自动统计真实访问量

十、高级美化思路

1. 自定义字体

1
2
3
4
5
6
global:
  fonts:
    chinese:
      enable: true
      family: 'Noto Sans SC'
      url: 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap'

Google Fonts 上有大量免费中文字体：Noto Sans SC、LXGW WenKai（霞鹜文楷）、ZCOOL 系列等。

2. 自定义 CSS

在 source/css/ 下创建 .css 文件，然后在 _config.redefine.yml 的 inject 节点引入，可以实现更细粒度的样式覆盖。

3. 添加友情链接

在 source/friends/index.md 中按格式添加：

1
- [博客名](https://example.com) — 一句话介绍

Redefine 会自动渲染成卡片形式。

4. 开启 Mermaid 图表

1
2
3
plugins:
  mermaid:
    enable: true

然后可以在文章中用 ```mermaid 代码块画流程图、时序图等。

5. 音乐播放器

1
2
3
4
5
6
7
8
plugins:
  aplayer:
    enable: true
    audios:
      - name: 歌名
        artist: 歌手
        url: 音乐链接
        cover: 封面图链接

总结

想改什么 在哪改
站点名/头像 info / defaults
主题色 colors.primary
Banner 背景图 home_banner.image
Banner 文字 home_banner.title / subtitle.text
导航栏 navbar.links
代码主题 articles.code_block.highlight_theme
评论系统 comment
友链 source/friends/index.md
字体 global.fonts
访问统计 global.website_counter

后续美化博客时，对照这张表找到对应的配置项修改即可。别忘了改完执行 npx hexo clean && npx hexo generate 让更改生效！

  • 标题: Redefine 主题美化与定制指南
  • 作者: 昊萌
  • 创建于 : 2026-07-06 12:00:00
  • 更新于 : 2026-07-06 00:41:19
  • 链接: https://zilongtian.github.io/2026/07/06/Redefine主题美化与定制指南/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
Redefine 主题美化与定制指南
  1. 前言
  2. 一、基础信息
  3. 二、主题颜色
  4. 三、封面 Banner
  5. 四、导航栏
  6. 五、文章页设置
  7. 六、评论系统
  8. 七、页脚
  9. 八、首页侧边栏
  10. 九、全局设置
  11. 十、高级美化思路
    1. 1. 自定义字体
    2. 2. 自定义 CSS
    3. 3. 添加友情链接
    4. 4. 开启 Mermaid 图表
    5. 5. 音乐播放器
  12. 总结