---
title: "搓了一个仿朋友圈的Hugo主题"
date: 2025-03-14
draft: false
tags: ["Hugo", "主题", "朋友圈"]
categories: ["折腾"]
markup: "html"
---

<p>上周，我的项目组所在的项目进入了项目维护阶段</p><p>果不其然，公司以资金无法周转的理由，进行了一波裁员</p><p>裁员那几天，坐在工位都是蒙的，凳子如同热炕，浑身不自在</p><p>可能是在项目上没怎么出过岔子，这次裁员名单没有我，我也是幸运的被留了下来</p><p>项目闲下来了，就想做点demo玩一下，上班的时候，突发奇想</p><p>想从0开始尝试模仿朋友圈的风格，搓一个Hugo主题，当然WordPress和typecho已经有很多作者实现</p><p>说干就干，从搭建hugo基础项目到第一行css，添砖加瓦</p><p>其实从写代码到部署还是踩了不少坑的，但是最后查文档或者问ai，还是解决了</p><h2 id=一点碎碎念>一点碎碎念</h2><p>其实功能上没什么太多新意，为了浏览顺畅一些，加上了 <strong>Pjax</strong> 实现无刷新跳转，也适配了 <strong>昼夜模式</strong></p><p>做这个主题过程中，遇到的最大难题其实是 <strong>静态博客的先天局限性</strong> —— Hugo 生成的是静态 HTML，没有后端数据库，没法持久化存储数据。这就导致很多朋友圈该有的动态交互（比如点赞、评论互动）很难实现</p><p>所以，这个主题目前能实现 <strong>文章点赞</strong>、<strong>评论点赞</strong> 以及 <strong>首页直接展示评论</strong> 这些功能，是完全依赖了 <strong>Artalk (v2.8.7)</strong> 提供的 API</p><p>通过调用 Artalk 的接口，把评论区的数据取出来展示在首页，利用它的存储能力来实现点赞和交互</p><p>如果离开了 Artalk，基本上很多功能就做不了，而动态博客可以通过博客的接口去查询数据库，实现一些丰富的功能</p><p>目前代码写得还比较潦草，还有不少细节需要打磨。等我把逻辑理顺、Bug 修得差不多了，会整理开源到 GitHub</p><h2 id=演示站点>演示站点</h2><p>演示站放在这，感兴趣的朋友可以看看：</p><p><a class=link-card href="https://5b2.cn" 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>5b2.cn</span>
<span class=link-card-url>https://5b2.cn</span>
</span><span class=link-card-arrow>↗</span></a></p><h2 id=演示图>演示图</h2><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/1.png alt=演示图 class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/2.png alt=演示图 class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/3.png alt=演示图 class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>写主题还是很累的，就这样，下机了
