164 lines
7.2 KiB
Markdown
164 lines
7.2 KiB
Markdown
---
|
||
layout: post
|
||
title: 一个朋友圈风格 Hugo 主题
|
||
date: 2026-02-15T10:00:00.000Z
|
||
author: 小赵同学
|
||
categories:
|
||
- 折腾
|
||
tags:
|
||
- Hugo
|
||
- EdgeOne
|
||
- 开源
|
||
- GitHub Actions
|
||
ai_comment: >-
|
||
技术层面将社交动态复刻到静态博客的思路很巧妙，尤其通过Artalk
|
||
API实现点赞/评论动态化是个讨巧的解法。不过版本强绑定2.8.7确实存在维护风险，或许可以考虑加个API兼容层？另外，PJAX的实现是否考虑了回退兼容性，这对纯静态站点很关键。字体选择很有品味，但建议在文档中注明各字体的版权状态。
|
||
slug: 20260215
|
||
---
|
||
|
||
首先祝大家新年快乐，身体健康，阖家幸福，事业长虹！
|
||
|
||
在这个碎片化阅读的时代，我们习惯了在朋友圈分享生活的点滴，却又常常在各种社交平台的喧嚣中感到疲惫。
|
||
|
||
作为一名博主，我一直在想：能不能在静态的 Hugo 博客里，复刻出一份属于自己的“朋友圈”？
|
||
|
||
## 所谓“拙作”的由来
|
||
|
||
其实，仿朋友圈风格的主题在 Typecho 和 WordPress 社区早已有了非常优秀且成熟的先例。比如小胖脸大佬的 [Icefox](https://github.com/xiaopanglian/icefox)，或是 [Kam](https://kam.space) 那款售价 499 元、精致到极致的商业主题。看着这些前辈的作品，我深知自己水平有限，代码写得比较稚嫩，很多逻辑甚至可以用邪修来形容。
|
||
|
||
但我还是想在 Hugo 这个“静态”的领域发起一点小小的挑战。主要动力源于一点：我没有长期稳定的服务器（说白了就是穷）
|
||
|
||
趁着过年这段时间，我把之前攒下的 Bug 勉强修了修，理顺了 README。虽然它还只是个“半成品”，但我还是决定把它开源出来。
|
||
|
||
作为作者，有人使用我的主题，我还是很开心的。虽然它不够完美，但我希望它能给喜欢折腾的朋友们带来一些乐趣。
|
||
|
||
## 🎨 那些勉强称得上“特性”的功能
|
||
|
||
在开发 **Amigo** 的过程中，我尽量在还原视觉体验和保持轻量之间寻找平衡。
|
||
|
||
既不花里胡哨，也不完全放弃一些小细节。以下是我觉得还算有点特色的几个功能：
|
||
|
||
### 1. 极致还原的“朋友圈”视觉
|
||
我不只是想做一个列表，而是想还原那份熟悉感。主题支持：
|
||
|
||
- **九宫格图片展示**：自动提取正文中的图片，并根据数量自动排列成 1-9 宫格。
|
||
|
||
- **地理位置标记**：通过 Front Matter 中的 `location` 字段，你可以在动态右下角标记你当时所在的位置，比如“武汉·东湖”。
|
||
|
||
- **毛玻璃效果 (Glassmorphism)**：在顶栏、友链卡片等处大量运用了毛玻璃特效，希望能增加一点现代感（老机子风扇可能风扇会狂转，不过这样说可能有点夸张，主题其实没有过多的毛玻璃特效）。
|
||
|
||
### 2. 追求丝滑的 PJAX 无刷新体验
|
||
为了让切换页面不那么生硬，我集成了 PJAX。这意味着你在点击文章、进入其他页面时，页面不会闪烁白屏。
|
||
|
||
虽然适配 pjax 踩了不少坑，但实现流畅的页面切换体验还是很有必要的。
|
||
|
||
### 3. 三模评论系统
|
||
|
||
考虑到不同人的需求，我内置了三种模式：
|
||
|
||
- **Artalk (强烈推荐)**：深度适配，支持首页直接显示点赞和评论。
|
||
|
||
- **Giscus**：基于 GitHub Discussions 的方案，适合程序员。
|
||
|
||
- **None**：如果你只想安静地记录，也可以选择关闭。
|
||
|
||
- **Twikoo**：暂时没有适配，老铁精力有限，后续如果有时间再看看能不能适配一下
|
||
|
||
### 4. 个性化字体支持
|
||
我内置了三种我觉得还不错的字体：`ZQL`、`PingFangQiaoMuTi` 和 `AlimamaFangYuanTi`。
|
||
|
||
你只需要在配置文件里改一个配置，即可瞬间切换字体。
|
||
|
||
## 🛠️ 核心命门：深度依赖 Artalk 2.8.7
|
||
|
||
这是我最想和大家交待的一点。由于 Hugo 本身不产生任何动态数据，所有的“朋友圈灵魂”——即**首页点赞显示**和**实时评论流**，全部都是通过 JavaScript 调用 **Artalk** 的 API 接口实现的。
|
||
|
||
如果你没有部署 Artalk，或者部署的版本过高/过低导致 API 变动，这个主题的功能会瞬间“塌陷”。我目前测试最稳定的版本是 **2.8.7**。
|
||
|
||
如果你想尝试，我建议使用官方的 Docker 镜像快速起步：
|
||
|
||
```bash
|
||
docker run -d \
|
||
--name artalk \
|
||
-p 3378:23366 \
|
||
-v $(pwd)/data:/data \
|
||
-e "TZ=Asia/Shanghai" \
|
||
-e "ATK_LOCALE=zh-CN" \
|
||
artalk/artalk-go:2.8.7
|
||
```
|
||
|
||
## 📝 撰写动态的小贴士 (避坑指南)
|
||
|
||
为了让主题能够正确解析图片，我建议采用 **Page Bundles** 模式。
|
||
|
||
1. **目录结构**：
|
||
建议在 `content/posts/` 目录下为每篇动态创建一个独立的文件夹，里面放一个 `index.md` 和配套的图片。
|
||
2. **图片插入**：
|
||
直接在 Markdown 里使用 `` 语法即可。主题会自动抓取这些图片并生成九宫格预览，同时在详情页里也会做排版优化。
|
||
3. **“全文/收起”逻辑**：
|
||
参考了微信的设计，首页动态如果文字超过 6 行，会自动折叠并显示“全文”按钮。点击“收起”时，页面会自动平滑回滚到动态顶部，防止迷失视口。
|
||
|
||
## 🚀 顺带聊聊 EdgeOne 国际版部署
|
||
|
||
最近我把博客从 Vercel 迁到了 **EdgeOne 国际版**（EdgeOne International），体验确实很香。
|
||
|
||
如果你也想通过 GitHub Actions 实现“推送即发布”，可以参考我的工作流配置。在 Secrets 中添加 `EDGEONE_API_TOKEN` 后，创建一个 `.github/workflows/deploy.yml`：
|
||
|
||
```yaml
|
||
name: Deploy to EdgeOne
|
||
|
||
on:
|
||
push:
|
||
branches: [ main ]
|
||
|
||
jobs:
|
||
deploy:
|
||
runs-on: ubuntu-latest
|
||
steps:
|
||
- uses: actions/checkout@v4
|
||
- name: Setup Node
|
||
uses: actions/setup-node@v4
|
||
with:
|
||
node-version: '20'
|
||
cache: 'npm'
|
||
- name: Build Hugo
|
||
run: |
|
||
# 建议使用 Hugo 0.128.2 保证兼容性
|
||
hugo --gc --minify
|
||
- name: Deploy
|
||
env:
|
||
EDGEONE_API_TOKEN: ${{ secrets.EDGEONE_API_TOKEN }}
|
||
run: |
|
||
# 关键！如果是国际版，必须带上 --area overseas
|
||
npx edgeone pages deploy ./public -n your-site-name -t $EDGEONE_API_TOKEN --area overseas
|
||
```
|
||
|
||
**特别提醒**：EdgeOne 国内版和国际版是完全隔离的。如果你用的是国际版却没加 `--area overseas`，CLI 会报 `Project not found` 错误，这个坑我替大家踩过了。
|
||
|
||
## 📦 仓库与致谢
|
||
|
||
代码水平虽然一般，但开源的心是真的。
|
||
|
||
👉 **仓库地址**：[https://github.com/zqlit/Hugo-Theme-Amigo](https://github.com/zqlit/Hugo-Theme-Amigo)
|
||
|
||
如果你觉得还行，麻烦点个 **Star** 支持一下，这将是我继续维护（修 Bug）的最大动力。
|
||
|
||
最后，要特别感谢以下项目和博友的启发与支持：
|
||
|
||
- [Hugo 官方](https://gohugo.io)
|
||
|
||
- [Artalk](https://artalk.js.org/)
|
||
|
||
- [ViewImage.js](https://github.com/tokimeitoshite/ViewImage)
|
||
|
||
- [EdgeOne](https://www.edgeone.com/)
|
||
|
||
- [Icefox](https://github.com/xiaopanglian/icefox)
|
||
|
||
- 以及所有在开发期间提供建议的朋友们。
|
||
|
||
如果在使用过程中遇到了困难，或者有更好的改进建议，非常欢迎在 GitHub 提 Issue 指教。
|
||
|
||
|
||
|