↓跳到主要内容
  1. 文章/

利用 Memos 给 Hugo 站点增加了一个“想法”页面

·3 分钟
得心应手 Hugo Memos 前端
目录

日常有些碎片化的闪念、思考，有记录价值，但又没到单独成文的程度，想要在 Blog 站点单独增加一个页面，对这部分内容做记录和分享。

最终实现效果可以看这里。

本文方案已经开源到Github，欢迎 Star 和 Fork： hugo-memos-integration

需求 #

简单列一下对这个页面的需求：

  • 展示碎片化的思考记录，按时间倒序排列，类似 Twitter 时间线
  • 支持 Markdown 格式渲染
  • 响应式设计，适配桌面和移动端
  • 与现有站点风格保持一致
  • 发布、更新操作便捷

经过一番搜索、调研，最终选择利用 Memos 来实现。上次知道 Memos，还是 flomo 的开发者控诉 Memos 界面抄袭，这次再看 Memos 已经大变样了。

实现 #

本着不折腾的原则，采用了比较简单的实现方案：页面前端 JavaScript 调用 Memos API：

Hugo站点 → JavaScript → Memos API → 动态渲染内容

这样做的优点是：

  • 实现简单，无需后端开发
  • 内容的发布、更新、管理，在 Memos 端完成即可
  • 与 Hugo 站点的构建流程解耦

缺点也有：

  • 由于是 API 动态获取内容后渲染，对 SEO 不友好
  • 不支持中英双语

先部署一个 Memos #

不展开了，参照官方文档即可，我在自己的服务器上用 Docker 部署了一个，绑定了自己的二级域名 https://memos.yandong.xyz

创建页面结构 #

像创建普通文章一样，新增一个内容页：

# 中文页
content/thoughts/index.zh.md

# 英文页
content/thoughts/index.en.md

内容：

---
title: " 想法 "
description: " 记录日常生活中的碎片化想法和思考 "
layout: "thoughts"
build:
    render: true
    list: never
---

💡在这里记录我的闪念想法，它可能碎片化以及未经太多思考。

这里最关键的字段是：layout: "thoughts"，表示这个页面要用 thoughts.html 模板来渲染。 接下来我们就创建这个模板。

创建自定义模板 #

只需在这个路径创建 thoughts.html 文件：layouts/_default/thoughts.html。

代码在 Vibe Coding 的帮助下实现，具体就不展开了，可以去 Github 获取源码： hugo-memos-integration。

唯一需要特别注意的是CORS。

完成 Hugo 配置 #

在 config/_default/params.toml 中添加 Memos 相关配置：

[memos]
# Memos 服务器地址 (必需)
serverURL = "https://memos.yandong.xyz"

# 访问令牌 (可选，如果memos需要认证)
# accessToken = "your-access-token"

# 用户ID (可选，用于过滤特定用户的memos)
# userID = "your-user-id"

总结 #

通过集成 Memos，为基于 Hugo 的 Blog 站点添加了动态的 thoughts 页面功能。 其实借助 Memos 的能力还有更多玩法，比如实现一个相册。

如前文所述，当前方案两个明显的缺点：

  1. 不支持英文
  2. 动态内容对 SEO 不友好

后续有空再尝试折腾，两个方向：

  1. 利用 Memos 的 Webhook，发布中文内容时，调用 AI 同步发布英文内容
  2. 在 Hugo 部署阶段，对动态内容做静态渲染

如果你有更好的解决方案，欢迎分享。遇到任何问题，欢迎联系我。😉

参考文档 #