首先祝大家新年快乐,身体健康,阖家幸福,事业长虹!

在这个碎片化阅读的时代,我们习惯了在朋友圈分享生活的点滴,却又常常在各种社交平台的喧嚣中感到疲惫。

作为一名博主,我一直在想:能不能在静态的 Hugo 博客里,复刻出一份属于自己的“朋友圈”?

所谓“拙作”的由来

其实,仿朋友圈风格的主题在 Typecho 和 WordPress 社区早已有了非常优秀且成熟的先例。比如小胖脸大佬的 Icefox,或是 Kam 那款售价 499 元、精致到极致的商业主题。看着这些前辈的作品,我深知自己水平有限,代码写得比较稚嫩,很多逻辑甚至可以用邪修来形容。

但我还是想在 Hugo 这个“静态”的领域发起一点小小的挑战。主要动力源于一点:我没有长期稳定的服务器(说白了就是穷)

趁着过年这段时间,我把之前攒下的 Bug 勉强修了修,理顺了 README。虽然它还只是个“半成品”,但我还是决定把它开源出来。

作为作者,有人使用我的主题,我还是很开心的。虽然它不够完美,但我希望它能给喜欢折腾的朋友们带来一些乐趣。

🎨 那些勉强称得上“特性”的功能

在开发 Amigo 的过程中,我尽量在还原视觉体验和保持轻量之间寻找平衡。

既不花里胡哨,也不完全放弃一些小细节。以下是我觉得还算有点特色的几个功能:

1. 极致还原的“朋友圈”视觉

我不只是想做一个列表,而是想还原那份熟悉感。主题支持:

  • 九宫格图片展示:自动提取正文中的图片,并根据数量自动排列成 1-9 宫格。

  • 地理位置标记:通过 Front Matter 中的 location 字段,你可以在动态右下角标记你当时所在的位置,比如“武汉·东湖”。

  • 毛玻璃效果 (Glassmorphism):在顶栏、友链卡片等处大量运用了毛玻璃特效,希望能增加一点现代感(老机子风扇可能风扇会狂转,不过这样说可能有点夸张,主题其实没有过多的毛玻璃特效)。

2. 追求丝滑的 PJAX 无刷新体验

为了让切换页面不那么生硬,我集成了 PJAX。这意味着你在点击文章、进入其他页面时,页面不会闪烁白屏。

虽然适配 pjax 踩了不少坑,但实现流畅的页面切换体验还是很有必要的。

3. 三模评论系统

考虑到不同人的需求,我内置了三种模式:

  • Artalk (强烈推荐):深度适配,支持首页直接显示点赞和评论。

  • Giscus:基于 GitHub Discussions 的方案,适合程序员。

  • None:如果你只想安静地记录,也可以选择关闭。

  • Twikoo:暂时没有适配,老铁精力有限,后续如果有时间再看看能不能适配一下

4. 个性化字体支持

我内置了三种我觉得还不错的字体:ZQLPingFangQiaoMuTiAlimamaFangYuanTi

你只需要在配置文件里改一个配置,即可瞬间切换字体。

🛠️ 核心命门:深度依赖 Artalk 2.8.7

这是我最想和大家交待的一点。由于 Hugo 本身不产生任何动态数据,所有的“朋友圈灵魂”——即首页点赞显示实时评论流,全部都是通过 JavaScript 调用 Artalk 的 API 接口实现的。

如果你没有部署 Artalk,或者部署的版本过高/过低导致 API 变动,这个主题的功能会瞬间“塌陷”。我目前测试最稳定的版本是 2.8.7

如果你想尝试,我建议使用官方的 Docker 镜像快速起步:

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 里使用 ![描述](./image.jpg) 语法即可。主题会自动抓取这些图片并生成九宫格预览,同时在详情页里也会做排版优化。
  3. “全文/收起”逻辑: 参考了微信的设计,首页动态如果文字超过 6 行,会自动折叠并显示“全文”按钮。点击“收起”时,页面会自动平滑回滚到动态顶部,防止迷失视口。

🚀 顺带聊聊 EdgeOne 国际版部署

最近我把博客从 Vercel 迁到了 EdgeOne 国际版(EdgeOne International),体验确实很香。

如果你也想通过 GitHub Actions 实现“推送即发布”,可以参考我的工作流配置。在 Secrets 中添加 EDGEONE_API_TOKEN 后,创建一个 .github/workflows/deploy.yml

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

如果你觉得还行,麻烦点个 Star 支持一下,这将是我继续维护(修 Bug)的最大动力。

最后,要特别感谢以下项目和博友的启发与支持:

如果在使用过程中遇到了困难,或者有更好的改进建议,非常欢迎在 GitHub 提 Issue 指教。

就这样,下机了,大家新年快乐!