diff --git a/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/1.png b/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/1.png new file mode 100644 index 00000000..cb1b1b72 Binary files /dev/null and b/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/1.png differ diff --git a/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/2.png b/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/2.png new file mode 100644 index 00000000..22480143 Binary files /dev/null and b/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/2.png differ diff --git a/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/3.png b/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/3.png new file mode 100644 index 00000000..d1f7390a Binary files /dev/null and b/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/3.png differ diff --git a/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/index.md b/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/index.md new file mode 100644 index 00000000..bc059d21 --- /dev/null +++ b/content/post/2026/2026-02-07-用一周时间搓了一个朋友圈Hugo主题/index.md @@ -0,0 +1,58 @@ +--- +layout: post +title: 搓了一个仿朋友圈的Hugo主题 +date: 2026-02-07T20:20:00.000Z +author: 小赵同学 +categories: + - 折腾 +tags: + - Hugo + - Artalk + - 开源 +--- + +上周,我的项目组所在的项目进入了项目维护阶段 + +果不其然,公司以资金无法周转的理由,进行了一波裁员 + +裁员那几天,坐在工位都是蒙的,凳子如同热炕,浑身不自在 + +可能是在项目上没怎么出过岔子,这次裁员名单没有我,我也是幸运的被留了下来 + +项目闲下来了,就想做点demo玩一下,上班的时候,突发奇想 + +想从0开始尝试模仿朋友圈的风格,搓一个Hugo主题,当然WordPress和typecho已经有很多作者实现 + +说干就干,从搭建hugo基础项目到第一行css,添砖加瓦 + +其实从写代码到部署还是踩了不少坑的,但是最后查文档或者问ai,还是解决了 + +## 一点碎碎念 + +其实功能上没什么太多新意,为了浏览顺畅一些,加上了 **Pjax** 实现无刷新跳转,也适配了 **昼夜模式** + +做这个主题过程中,遇到的最大难题其实是 **静态博客的先天局限性** —— Hugo 生成的是静态 HTML,没有后端数据库,没法持久化存储数据。这就导致很多朋友圈该有的动态交互(比如点赞、评论互动)很难实现 + +所以,这个主题目前能实现 **文章点赞**、**评论点赞** 以及 **首页直接展示评论** 这些功能,是完全依赖了 **Artalk (v2.8.7)** 提供的 API + +通过调用 Artalk 的接口,把评论区的数据取出来展示在首页,利用它的存储能力来实现点赞和交互 + +如果离开了 Artalk,基本上很多功能就做不了,而动态博客可以通过博客的接口去查询数据库,实现一些丰富的功能 + +目前代码写得还比较潦草,还有不少细节需要打磨。等我把逻辑理顺、Bug 修得差不多了,会整理开源到 GitHub + +## 演示站点 + +演示站放在这,感兴趣的朋友可以看看: + +[https://5b2.vercel.app/](https://5b2.vercel.app) + +## 演示图 + +![演示图](1.png) + +![演示图](2.png) + +![演示图](3.png) + +就这样,下机了!