---
title: "一个朋友圈风格 Hugo 主题"
date: 2025-11-08
draft: false
tags: []
categories: ["折腾"]
markup: "html"
---

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