Hexo Fluid 主题配置教程

Hexo Fluid 主题配置教程

🧩 一、Fluid 主题简介

Hexo 的 Fluid 是目前非常流行的一款主题，特点：

  • 🎨 简洁优雅（Material Design 风格）
  • ⚡ 加载快（SEO友好）
  • 🧩 功能丰富（无需大量插件）
  • 📱 自适应移动端

🚀 二、安装 Fluid 主题

1️⃣ 克隆主题

在 Hexo 根目录执行：

1
git clone https://github.com/fluid-dev/hexo-theme-fluid.git themes/fluid

2️⃣ 配置主题

编辑 Hexo 根目录 _config.yml：

1
theme: fluid

3️⃣ 复制配置文件（关键）

1
cp themes/fluid/_config.yml _config.fluid.yml

👉 后续所有主题配置都在这个文件里改！

🌐 三、基础配置

1️⃣ 网站信息

编辑 _config.yml：

1
2
3
4
5
6
title: 我的博客
subtitle: 记录技术与生活
description: 一个基于Hexo的个人博客
author: 你的名字
language: zh-CN
timezone: Asia/Shanghai

2️⃣ 菜单栏配置

编辑 _config.fluid.yml：

1
2
3
4
5
6
7
8
navbar:
  blog_title: 我的博客
  menu:
    首页: /
    归档: /archives/
    分类: /categories/
    标签: /tags/
    关于: /about/

3️⃣ 创建页面

1
2
3
hexo new page about
hexo new page categories
hexo new page tags

🎨 四、主题外观美化

1️⃣ 首页 Banner

1
2
3
4
5
banner:
  enable: true
  parallax: true
  width: 100
  height: 100

自定义背景图：

1
2
index:
  banner_img: /img/bg.jpg

2️⃣ 自定义头像

1
2
about:
  avatar: /img/avatar.png

3️⃣ 暗黑模式 🌙

1
2
3
dark_mode:
  enable: true
  default: auto

4️⃣ 代码高亮

1
2
3
highlight:
  enable: true
  theme: github

🔌 五、常用功能配置

1️⃣ 搜索功能 🔍

1
2
3
search:
  enable: true
  path: /local-search.xml

安装插件：

1
npm install hexo-generator-search --save

2️⃣ 评论系统 💬

推荐使用：

  • ✅ Valine
  • ✅ Waline（更推荐）

Waline 配置：

1
2
3
4
5
6
comment:
  enable: true
  type: waline

waline:
  serverURL: https://你的域名

3️⃣ 阅读统计 👀

1
2
3
4
post:
  meta:
    views:
      enable: true

4️⃣ 文章目录 📑

1
2
3
toc:
  enable: true
  number: true

⚡ 六、SEO 优化

1
2
seo:
  enable: true

建议安装：

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

🖼 七、图片优化

1
2
lazyload:
  enable: true

👉 图片懒加载，大幅提升速度！

📊 八、统计 & 分析

Google Analytics

1
2
3
4
web_analytics:
  enable: true
  google:
    measurement_id: G-XXXXXXX

🚀 九、部署到 GitHub Pages

1️⃣ 安装部署工具

1
npm install hexo-deployer-git --save

2️⃣ 配置 _config.yml

1
2
3
4
deploy:
  type: git
  repo: https://github.com/你的用户名/你的仓库.git
  branch: main

3️⃣ 发布

1
2
3
hexo clean
hexo g
hexo d

🔥 十、进阶美化技巧（重点）

✅ 1. 添加自定义 CSS

创建：

1
source/css/custom.css

然后：

1
2
custom_css:
  - /css/custom.css

✅ 2. 添加打字机效果

1
2
typing:
  enable: true

✅ 3. 页脚美化

1
2
3
footer:
  content: |
    <span>© 2026 我的博客</span>

✅ 4. 添加音乐播放器 🎵

可用：

  • ✅ APlayer

✅ 5. 添加看板娘 🤖

1
2
live2d:
  enable: true

🛠 十一、本地预览

1
hexo s

访问：
👉 http://localhost:4000

❗ 常见问题

Q1：页面不生效？

👉 执行：

1
2
3
hexo clean
hexo g
hexo s

Q2：中文乱码？

1
language: zh-CN

Q3：样式没加载？

👉 检查：

  • ✅ 路径是否 / 开头
  • ✅ 是否执行 clean

🎯 总结

Fluid 主题核心配置就三步：

1️⃣ 安装主题
2️⃣ 修改 _config.fluid.yml
3️⃣ 按需开启功能

📚 相关资源

资源 链接
Fluid 主题 GitHub https://github.com/fluid-dev/hexo-theme-fluid
Fluid 文档 https://hexo.fluid-dev.com/docs/
Hexo 官网 https://hexo.io

作者：iomelons
博客：https://iomelons.github.io
更新日期：2026-03-22

技术教程
#教程 #Hexo #Fluid #主题配置 #博客搭建
Hexo Fluid 主题配置教程
https://iomelons.github.io/2026/03/22/cmn6ntcce000csk21es11czri/
作者
iomelons
发布于
2026年3月22日
许可协议