基于 Hugo 的功能丰富博客主题，集成搜索、公式、图标与性能优化

方案简介

LoveIt 是一个基于 Hugo 的干净、优雅但功能先进的博客主题。它基于原有的 LeaveIt 主题和 KeepIt 主题发展而来，同时相比原主题做了大量改进，包括自定义 Header、自定义 CSS 样式、兼容最新版本 Hugo 的新首页、深色模式、CSS 动画等。

这套方案面向希望用 Hugo 搭建个人博客的用户：如果你偏爱 LoveIt 主题的设计语言和自由度，想方便地使用扩展的 Font Awesome 图标，想在文章中嵌入数学公式、流程图、音乐或 Bilibili 视频，LoveIt 主题可能更适合你。主题内置了基于 Lunr.js 或 algolia 的搜索、KaTeX 数学公式、mermaid 图表、ECharts 数据可视化、APlayer 音乐播放器等多种扩展能力，并在性能和 SEO 方面做了深度优化。

亮点与能力

• 性能优化：Google PageSpeed Insights 移动端 99/100、桌面端 100/100
• 基于 JSON-LD 的 SEO SCHEMA 优化
• 支持 Google Analytics、Fathom Analytics、Plausible Analytics、Yandex Metrica
• 支持搜索引擎验证（Google、Bing、Yandex、百度）
• 支持第三方库 CDN
• 通过 lazysizes 自动实现图片懒加载
• 桌面/移动响应式布局，明暗模式切换
• 支持分页、多语言与 i18n
• 由 Lunr.js 或 algolia 提供搜索
• 一键复制代码、代码高亮、Twemoji
• KaTeX 数学公式、mermaid 图表、ECharts 交互式数据可视化
• Font Awesome 图标、注音、分数等扩展 Markdown 语法
• 支持 Disqus、Gitalk、Valine、utterances、giscus 等多种评论系统
• 最多支持 84 个社交链接和 27 个分享站点

组成与分工

• Hugo：静态站点生成器，是整个主题运行的基础框架
• Lunr.js / algolia：提供站内搜索能力，前者为本地搜索，后者为托管搜索服务
• KaTeX：渲染数学公式
• mermaid：以 shortcode 形式渲染图表/流程图
• ECharts：以 shortcode 形式渲染交互式数据可视化
• Font Awesome：通过扩展 Markdown 语法使用图标
• lazysizes：自动实现图片懒加载，优化性能
• APlayer + MetingJS：嵌入式音乐播放器
• TypeIt：打字机动画效果
• cookieconsent：Cookie 同意横幅
• lightGallery：图片画廊

前置要求

LoveIt 对 Hugo 版本有明确的兼容性要求：

| LoveIt 分支或版本 | 支持的 Hugo 版本 |
|:--|:--|
| master(Unstable) | >= 0.146.0 |
| 0.3.X(Recommended) | 0.128.0 - 0.145.0 |
| 0.2.X(Outdated) | 0.68.0 - 0.127.0 |

推荐使用 0.3.X 版本搭配对应区间的 Hugo 版本。

实施步骤

1. 本地构建文档预览

克隆仓库后，可在本地启动示例站点进行预览：

bash
hugo server --source=exampleSite

该命令使用仓库自带的 exampleSite 作为源目录启动 Hugo 开发服务器，可在浏览器中实时查看主题渲染效果。

使用与配置要点

• 搜索：在配置中选择 Lunr.js（本地搜索）或 algolia（云端搜索）作为搜索引擎。
• 评论系统：可在 Disqus、Gitalk、Valine、Facebook comments、Telegram Comments、Commento、utterances、giscus 中按需选择并配置。
• 内容扩展：通过 shortcode 使用 mermaid 图表、ECharts 可视化、Mapbox 地图、APlayer 音乐播放器、Bilibili 播放器、admonitions 提示块、自定义样式/脚本等。
• 第三方库可通过 CDN 引入以提升加载性能。
• 可查看官方 demo 站点了解实际效果：https://hugoloveit.com/

注意事项与常见问题

• 注意 Hugo 版本与主题版本的兼容性：master 分支（不稳定）需要 Hugo >= 0.146.0；推荐的 0.3.X 版本对应 Hugo 0.128.0 - 0.145.0；0.2.X 已过时，对应 0.68.0 - 0.127.0。
• LoveIt、LeaveIt、KeepIt 三个主题外观相似，如有疑问可阅读 "Why choose LoveIt" 部分来选择最适合自己的主题。
• 遇到问题、想法或 bug，可前往 issue tracker 反馈。

优缺点

• ✓ 性能优化：移动端99/100分
• ✓ 内置搜索、公式、图表等扩展
• ✕ Hugo 版本兼容要求严格
• ✕ 主题配置较复杂

出处

本方案挖掘自开源项目 dillonzq/LoveIt，方案内容与实施命令均来自其 README 原文。