Skip to content
人生即体验
Go back

博客折腾小记,添加 Memos 展示和 Moe Counter 统计

| Updated:
Edit page

整件事情在 Codex 的帮助下还是比较顺利的,添加 Memos 的公开内容作为内容数据源大概花费两小时,使用 moe counter 统计并展示整站访问量大概花费一小时,其中还包含在 VPS 上部署 moe counter 服务端。

功能都比较简单,而且还都是 Codex 干活,本篇只做简单记录。

添加 Memos 作为 CMS

主要的功能在 Codex 总结之后,是下面这些:

- 顶栏 Posts 后增加 Memos 导航
- /memos/ 展示公开 memo 列表
- 支持 pageToken 加载更多
- 支持置顶 memo 优先展示
- 列表 memo 可点击进入详情
- 详情页可渲染 memo markdown
- 详情页接入 Giscus 评论
- 每条 memo 使用独立评论 term,避免所有 memo 共用一个评论区
- 列表和详情都支持跳转到原始 Memos 实例:

  https://memos.guanglai.me/memos/{memoId}

- 列表支持图片附件预览
- Memos 页面增加返回顶部按钮
- 列表支持 Compact / Preview 两种展示模式,并记住用户选择

添加 Moe Counter 统计整站访问量

想添加 moe counter 的来源是这个博客,我的实现结果也基本和这个博客类似。

添加 moe counter 统计整站访问量这件事情还是比较简单的,moe counter 的部署也就一行 docker 命令的事情,部署完成后添加域名映射和 nignx 反代也是很常见的操作了。

最后在 Footer 里添加 moe counter 的 Image SVG 组件引用就可以。

<figure class="flex flex-col items-center justify-center gap-1.5 pt-6 sm:pt-4">
<img
    src={counterUrl}
    alt="博客访问次数"
    class="visit-counter"
    loading="lazy"
    decoding="async"
/>
<figcaption class="text-sm opacity-70">
    访问次数 · 自 {counter.startedAt}起统计
</figcaption>
</figure>

不过本质上 count 计数是访问一次就 +1 访问次数,不会去重,识别机器人流量等等,数据并不完全准确,只是图一个好玩。

其他

最后还用 Codex 把上游 astro-paper 最新版本的内容合并了,现在是由 Astro Paper v6.1 驱动的博客,不过后面我可能不再打算合并上游的更新了。我博客的现在已经有不少的定制功能,每次合并都是很多的冲突,这次虽然有 Codex 的帮忙,合并之后也对博客原有的内容,样式照成了一些影响,也不知道那里少了什么,多了什么。


Edit page
Share this post:
文章标题:博客折腾小记,添加 Memos 展示和 Moe Counter 统计
文章链接:https://blog.guanglai.me/posts/astro-blog-add-memos-and-moe-counter/

商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接。您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但分发衍生作品时必须采用相同的许可协议。

本文采用 CC BY-NC-SA 4.0 进行许可。


Next Post
近况,碎碎念和焦虑

Comments