为 Hexo 博客接入 Material Design 风格主题

方案简介

Fluid 是一个面向 Hexo 的 Material Design 风格主题，用于为基于 Hexo 构建的博客提供统一的页面主题与内容展示能力。项目同时提供中文简体和英文文档入口，并通过主题配置、文章配置和关于页布局完成博客内容组织。\n\n这套方案适合已经使用 Hexo 建站，或准备按照 Hexo 官方文档搭建个人博客的用户。主题可以通过 npm 安装，也可以下载 release 放入 themes 目录；安装后在 Hexo 配置中指定 fluid，再按需设置语言。它还覆盖代码高亮、评论、统计、搜索、暗色模式、脚注、数学公式和流程图等常见博客场景。

亮点与能力

Fluid 主题提供以下实际能力：\n\n- 提供详实的用户文档，覆盖主题配置与使用说明。\n- 支持页面组件懒加载。\n- 支持多种代码高亮方案。\n- 支持多语言配置。\n- 内置多款评论插件。\n- 内置网页访问统计和文章本地搜索。\n- 支持暗色模式、脚注语法、LaTeX 数学公式和 mermaid 流程图。

组成与分工

• Hexo：作为博客生成与运行基础，负责按照博客目录、文章和主题配置生成站点。\n- Fluid：作为 Hexo 主题，提供 Material Design 风格的页面、布局及博客功能。\n- npm：在 Hexo 5.0.0 及以上版本中，用于直接安装 hexo-theme-fluid。\n- Node.js：作为材料中与 Hexo、主题安装相关的运行环境入口。\n- Markdown：用于撰写文章正文和关于页内容。\n- HTML：关于页正文支持的另一种内容格式。

前置要求

开始前需要先有一个 Hexo 博客。如果还没有博客，应按照 Hexo 官方文档完成安装和建站。采用 npm 安装方式时，材料明确面向 Hexo 5.0.0 及以上版本，并需要在博客目录中执行安装。\n\n在博客目录执行：\n\n``sh\nnpm install --save hexo-theme-fluid\n`\n\n安装后，在博客目录创建 _config.fluid.yml，并将主题仓库 _config.yml 的内容复制进去。也可以不使用 npm，下载最新 release，解压到 themes 目录，并将解压出的文件夹重命名为 fluid`。

实施步骤

1. 搭建 Hexo 博客\n\n如果尚未有 Hexo 博客，先按照 Hexo 官方文档完成安装和建站；后续命令都应在博客目录中执行。\n\n### 2. 获取 Fluid 主题\n\n推荐使用 npm 获取主题：\n\n``sh\nnpm install --save hexo-theme-fluid\n`\n\n然后在博客目录创建 _config.fluid.yml，把主题的 _config.yml 内容复制到该文件中。若采用 release 方式，则下载最新 release，解压到 themes 目录，并把文件夹重命名为 fluid。\n\n### 3. 指定主题与语言\n\n修改 Hexo 博客目录中的 _config.yml：\n\n`yaml\ntheme: fluid # 指定主题\n\nlanguage: zh-CN # 指定语言，会影响主题显示的语言，按需修改\n`\n\n### 4. 创建关于页\n\n首次使用主题的关于页需要手动创建：\n\n`bash\nhexo new page about\n`\n\n然后编辑 /source/about/index.md，加入 layout 属性。示例配置为：\n\n`yaml\n---\ntitle: about\nlayout: about\n---\n\n这里写关于页的正文，支持 Markdown, HTML\n``

使用与配置要点

完成安装和主题指定后，博客会使用 Fluid 作为主题。日常配置主要分为两部分：\n\n- 在 _config.yml 中通过 theme: fluid 指定主题。\n- 通过 language: zh-CN 设置主题显示语言，必要时按需修改。\n- 在 _config.fluid.yml 中维护主题配置；该文件内容来源于主题的 _config.yml。\n- 使用 /source/about/index.md 编写关于页正文，并保留 layout: about，正文可使用 Markdown 或 HTML。\n\n验证时可检查主题是否已指定为 fluid、语言是否符合预期，以及关于页是否能按照 about 布局展示。主题还可通过页面组件懒加载、评论、统计、本地搜索、暗色模式、数学公式和流程图等能力服务博客内容。

注意事项与常见问题

• npm 安装版本：材料建议 Hexo 5.0.0 版本以上使用 npm 直接安装。\n- 配置文件位置：npm 安装后仍需在博客目录创建 _config.fluid.yml，并复制主题 _config.yml 的内容。\n- 关于页不会自动完成：首次使用主题时需要手动执行页面创建命令，并在生成的 Markdown 文件中添加 layout: about。\n- 更新主题：主题更新方式应参照项目文档中的更新说明。\n- 语言设置：language 会影响主题显示语言，应根据博客需求调整。

优缺点

• ✓ 提供详实用户文档
• ✓ 内置多种博客能力
• ✕ 关于页首次使用需手动创建

出处

本方案挖掘自开源项目 fluid-dev/hexo-theme-fluid，方案内容与实施命令均来自其 README 原文。