---
layout: post
title: 搓了一个仿朋友圈的Hugo主题
date: 2026-02-07T12:20:00.000Z
author: 小赵同学
categories:
  - 折腾
tags:
  - Hugo
  - Artalk
  - 开源
ai_comment: >-
  静态博客实现动态交互确实是个有趣的挑战。利用Artalk作为外部数据层是个聪明的折中方案，类似将React组件状态托管给Redux。不过这种强依赖第三方服务的架构，后续可以考虑用Service
  Worker+IndexedDB实现离线缓存，或通过GitHub Actions自动构建时预取评论数据。代码潦草是原型阶段的特权，建议用Hugo的Data
  Templates将外部API数据固化到构建流程中。
slug: 20260207
---

上周，我的项目组所在的项目进入了项目维护阶段

果不其然，公司以资金无法周转的理由，进行了一波裁员

裁员那几天，坐在工位都是蒙的，凳子如同热炕，浑身不自在

可能是在项目上没怎么出过岔子，这次裁员名单没有我，我也是幸运的被留了下来

项目闲下来了，就想做点demo玩一下，上班的时候，突发奇想

想从0开始尝试模仿朋友圈的风格，搓一个Hugo主题，当然WordPress和typecho已经有很多作者实现

说干就干，从搭建hugo基础项目到第一行css，添砖加瓦

其实从写代码到部署还是踩了不少坑的，但是最后查文档或者问ai，还是解决了

## 一点碎碎念

其实功能上没什么太多新意，为了浏览顺畅一些，加上了 **Pjax** 实现无刷新跳转，也适配了 **昼夜模式**

做这个主题过程中，遇到的最大难题其实是 **静态博客的先天局限性** —— Hugo 生成的是静态 HTML，没有后端数据库，没法持久化存储数据。这就导致很多朋友圈该有的动态交互（比如点赞、评论互动）很难实现

所以，这个主题目前能实现 **文章点赞**、**评论点赞** 以及 **首页直接展示评论** 这些功能，是完全依赖了 **Artalk (v2.8.7)** 提供的 API

通过调用 Artalk 的接口，把评论区的数据取出来展示在首页，利用它的存储能力来实现点赞和交互

如果离开了 Artalk，基本上很多功能就做不了，而动态博客可以通过博客的接口去查询数据库，实现一些丰富的功能

目前代码写得还比较潦草，还有不少细节需要打磨。等我把逻辑理顺、Bug 修得差不多了，会整理开源到 GitHub

## 演示站点

演示站放在这，感兴趣的朋友可以看看：

[https://5b2.cn](https://5b2.cn)

## 演示图

![演示图](1.png)

![演示图](2.png)

![演示图](3.png)

写主题还是很累的，就这样，下机了！