从零搭建一个朋友圈风格的Hugo博客主题

为什么要做这个主题？

在博客的世界里，大多数主题都遵循着传统的"文章列表"模式——标题、摘要、分页。这种模式固然经典，但对于想要记录日常生活、分享碎片想法的博主来说，显得过于正式了。

我一直在想，能不能做一个像微信朋友圈一样的博客？每条动态可以是几句话，也可以是一篇长文；可以配图，可以发音乐，甚至可以发语音。访客浏览你的博客，就像在刷朋友圈一样自然。

技术选型

经过一番调研，我选择了 Hugo 作为静态站点生成器。原因很简单：

1. 速度：Hugo 的构建速度是所有 SSG 中最快的，几千篇文章也能在几秒内构建完成
2. 模板语言：Go 模板虽然语法有些独特，但逻辑清晰，适合处理复杂的页面结构
3. 资源管道：内置的 Asset Pipeline 支持 SCSS 编译、JS 压缩、图片处理等
4. 短代码系统：Shortcode 机制让内容创作者可以用简洁的语法插入复杂的组件

前端框架方面，我选择了原生 CSS + 少量 JavaScript 的方案，没有引入 React 或 Vue。理由是博客不需要复杂的交互，原生方案足够轻量，首屏加载更快。

核心功能设计

朋友圈信息流

首页的核心是一个类似朋友圈的信息流。每条动态包含头像、作者名、正文内容、图片画廊、时间地点标签，以及点赞评论的交互区域。

为了实现"短内容直接展示，长内容可折叠"的效果，我设计了一个文本溢出检测机制：页面渲染后比较 scrollHeight 和 clientHeight，如果内容超出限制高度，就显示"全文"按钮。

PJAX 无刷新导航

为了让浏览体验更流畅，我加入了 PJAX（PushState + Ajax）支持。点击链接时只替换页面主内容区域，不会触发整页刷新。这意味着：

• 背景音乐不会中断
• 页面切换更丝滑
• 减少了重复资源的加载

多媒体短代码

为了让文章内容更丰富，我开发了一系列短代码：

• 音乐播放器：支持网易云音乐外链，带进度条和歌词显示
• 视频播放器：支持普通视频和 B 站视频嵌入
• 语音消息：模仿微信语音气泡的样式
• 实况照片：支持 iOS 风格的 Live Photo 展示

遇到的坑

开发过程中遇到了不少问题，比如：

1. Bilibili 嵌入的自动播放问题：B 站的 iframe 默认会自动播放，需要在 URL 中显式设置 autoplay=0
2. PJAX 下的音乐播放器状态同步：页面切换后需要重新绑定播放器 UI 到全局 Audio 实例
3. 首页图片重复显示：正文中的图片既要在九宫格展示，又要在文本区域渲染，需要巧妙地剥离和保留

最终效果

经过几周的开发，Amigo 主题已经具备了完整的功能：

• 朋友圈风格的信息流
• 长文章卡片展示
• PJAX 无刷新导航
• 全局音乐播放器
• 暗色模式
• Artalk 评论系统集成
• 弹幕功能

这个主题已经在我的博客上运行了一段时间，访客反馈都很不错。如果你也想做一个有个性的博客，不妨试试这种朋友圈风格的设计。