Fluid 主题配置与美化实践

前言

Fluid 是一款优雅、简洁的 Hexo 主题，但默认配置可能无法完全满足你的个性化需求。本文将深入探讨 Fluid 主题的各种配置选项和美化技巧，帮助你打造一个独一无二的博客。

1. 首页布局定制

1.1 首页标语（Slogan）

首页的大标题和副标题是访客的第一印象，务必精心设计。

# _config.fluid.yml

index:
  banner_img: /img/default.png
  banner_img_height: 100
  banner_mask_alpha: 0.3
  
  slogan:
    enable: true
    text: 分享Java、数据结构与算法的学习之旅
    api:
      enable: false

配置说明：

  • banner_img: 首页背景图片
  • banner_img_height: 背景图片高度（百分比）
  • banner_mask_alpha: 遮罩透明度（0-1，数值越大越暗）
  • slogan.text: 显示在首页的标语

进阶技巧：使用动态标语 API

slogan:
  enable: true
  text: ""
  api:
    enable: true
    url: "https://v1.hitokoto.cn/"
    method: "GET"
    headers: {}
    keys: ["hitokoto"]

这样每次刷新首页都会显示不同的一言（诗词、名言等）。

1.2 文章列表样式

# _config.fluid.yml

index:
  post_meta:
    date:
      enable: true
      format: "YYYY-MM-DD"
    category:
      enable: true
    tag:
      enable: true

2. 导航栏个性化

2.1 自定义导航菜单

# _config.fluid.yml

navbar:
  blog_title: 李国强的技术博客
  menu:
    - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
    - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
    - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
    - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
    - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
    - { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }

添加自定义菜单项：

menu:
  - { key: "projects", link: "/projects/", icon: "iconfont icon-code-fill", name: "我的项目" }

2.2 导航栏样式

# _config.fluid.yml

navbar:
  ground_glass:
    enable: true
    px: 3
    alpha: 0.7

这会启用毛玻璃效果，让导航栏更加现代化。

3. 文章页增强

3.1 目录（TOC）配置

# _config.fluid.yml

post:
  toc:
    enable: true
    placement: right
    headingSelector: "h1,h2,h3,h4,h5,h6"
    collapseDepth: 0

配置说明：

  • placement: 目录位置（left/right）
  • headingSelector: 包含哪些级别的标题
  • collapseDepth: 默认折叠深度（0 表示全部展开）

3.2 代码块增强

# _config.fluid.yml

code:
  copy_btn: true
  highlight:
    enable: true
    line_number: true
    lib: "prismjs"
    prismjs:
      style: "default"
      preprocess: true

支持的代码高亮主题：

  • default
  • coy
  • dark
  • funky
  • okaidia
  • solarizedlight
  • tomorrow
  • twilight

3.3 文章版权声明

# _config.fluid.yml

post:
  copyright:
    enable: true
    content: '本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-SA 4.0 协议</a>。转载请注明出处！'

3.4 文章打赏

# _config.fluid.yml

post:
  reward:
    enable: true
    content: 如果觉得文章对你有帮助，可以请我喝杯咖啡~
    wechatpay: /img/wechatpay.png
    alipay: /img/alipay.png

4. 评论系统集成

Fluid 支持多种评论系统，我推荐使用 Waline（免费、开源、支持 Markdown）。

4.1 Waline 配置

# _config.fluid.yml

post:
  comments:
    enable: true
    type: waline

waline:
  serverURL: 'https://your-waline-server.vercel.app'
  path: window.location.pathname
  meta: ['nick', 'mail', 'link']
  requiredMeta: ['nick', 'mail']
  lang: 'zh-CN'
  emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
  dark: 'auto'
  avatar: 'mp'
  avatarCDN: 'https://sdn.geekzu.org/avatar/'
  pageSize: 10
  highlight: true

Waline 部署教程：

  1. Fork Waline 仓库
  2. 在 Vercel 上导入并部署
  3. 配置数据库（推荐使用 LeanCloud 免费版）
  4. 将 Vercel 提供的 URL 填入 serverURL

4.2 其他评论系统

Fluid 还支持：

  • Disqus
  • Gitalk
  • Utterances
  • Giscus
  • Twikoo
  • Valine

根据你的需求选择合适的评论系统。

5. 统计与分析

5.1 访问统计（不蒜子）

# _config.fluid.yml

footer:
  statistics:
    enable: true
    source: "busuanzi"
    pv_format: "总访问量 {} 次"
    uv_format: "总访客数 {} 人"

5.2 Google Analytics

# _config.fluid.yml

web_analytics:
  enable: true
  google:
    id: "G-XXXXXXXXXX"
    gtag_id: ""

5.3 百度统计

# _config.fluid.yml

web_analytics:
  baidu:
    id: "your_baidu_analytics_id"

6. 页脚个性化

6.1 基础配置

# _config.fluid.yml

footer:
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener">
      <span>Hexo</span>
    </a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">
      <span>Fluid</span>
    </a>
  '

6.2 添加备案信息

# _config.fluid.yml

footer:
  beian:
    enable: true
    icp_text: 京ICP备xxxxxxxx号
    police_text: 京公网安备xxxxxxxx号
    police_code: xxxxxxxx
    police_icon: /img/police_beian.png

7. 自定义样式和脚本

7.1 自定义 CSS

在 source 目录下创建 css/custom.css：

/* /source/css/custom.css */

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #49b1f5;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
}

/* 文章标题动画 */
.post-title {
  transition: all 0.3s ease;
}

.post-title:hover {
  color: #49b1f5;
  transform: translateX(5px);
}

/* 代码块样式优化 */
pre {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

然后在 _config.fluid.yml 中引入：

# _config.fluid.yml

custom_css: /css/custom.css

7.2 自定义 JavaScript

创建 source/js/custom.js：

// /source/js/custom.js

// 添加页面加载动画
document.addEventListener('DOMContentLoaded', function() {
  console.log('欢迎来到我的博客！');
  
  // 平滑滚动
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' });
      }
    });
  });
});

// 添加返回顶部按钮动画
const scrollBtn = document.querySelector('.scroll-top-button');
if (scrollBtn) {
  window.addEventListener('scroll', function() {
    if (window.scrollY > 300) {
      scrollBtn.style.opacity = '1';
    } else {
      scrollBtn.style.opacity = '0';
    }
  });
}

在 _config.fluid.yml 中引入：

# _config.fluid.yml

custom_js: /js/custom.js

8. 关于页面定制

编辑 source/about/index.md：

---
title: 关于我
layout: about
---

## 👋 你好，我是李国强

一名热爱编程的 Java 后端开发者，专注于：

- 🔥 Java 后端开发
- 📊 数据结构与算法
- 🚀 Spring Boot / Spring Cloud
- 💾 MySQL / Redis
- 🐳 Docker / Kubernetes

## 📫 联系方式

- GitHub: [@Hjjjkh](https://github.com/Hjjjkh)
- Email: your-email@example.com

## 🎯 技能树

<div class="skill-bar">
  <div class="skill-name">Java</div>
  <div class="skill-level" style="width: 90%"></div>
</div>

<div class="skill-bar">
  <div class="skill-name">Spring Boot</div>
  <div class="skill-level" style="width: 85%"></div>
</div>

<div class="skill-bar">
  <div class="skill-name">MySQL</div>
  <div class="skill-level" style="width: 80%"></div>
</div>

配合自定义 CSS 实现技能条动画效果。

9. 友情链接页面

编辑 source/links/index.md：

---
title: 友情链接
layout: links
---

这里是我的朋友们：

- name: 示例博客
  link: https://example.com
  avatar: https://example.com/avatar.jpg
  descr: 一个很棒的博客

10. 高级技巧

10.1 添加 Live2D 看板娘

# _config.fluid.yml

fun_features:
  live2d:
    enable: true
    model: 'hijiki'
    display:
      position: 'right'
      width: 150
      height: 300

10.2 鼠标点击特效

在 custom.js 中添加：

// 鼠标点击特效
document.addEventListener('click', function(e) {
  const heart = document.createElement('div');
  heart.innerHTML = '❤';
  heart.style.cssText = `
    position: fixed;
    left: ${e.clientX}px;
    top: ${e.clientY}px;
    color: #f00;
    font-size: 20px;
    pointer-events: none;
    animation: heartFloat 1s ease-out;
  `;
  document.body.appendChild(heart);
  
  setTimeout(() => heart.remove(), 1000);
});

10.3 夜间模式优化

# _config.fluid.yml

color_scheme:
  enable: true
  default: auto
  toggle: true

总结

通过以上配置和美化技巧，你可以打造一个功能丰富、美观大方的 Hexo 博客。记住，美化是一个持续的过程，不断尝试和调整，找到最适合自己的风格。

最重要的是：内容永远比形式更重要！ 在追求美观的同时，不要忘记持续创作高质量的文章。

相关资源

至此，我们的 Hexo 博客优化三部曲就全部完成了！希望这三篇文章能帮助你打造一个快速、美观、易用的博客。如果有任何问题，欢迎在评论区留言交流！

博客搭建 > 主题定制
#Hexo #Fluid #主题美化 #个性化
Fluid 主题配置与美化实践
https://hjjjkh.github.io/posts/c6983b5
作者
李国强
发布于
2025年11月15日
许可协议