✨「¡HolaH! CMS Blog」MOC

正文

致谢清单

以下罗列——在吾辈开发博客项目中，为其提供了莫大帮助的（博客）站点（或开源项目）（排名不分先后）：

shadcn/ui

📌 shadcn/ui
- 💎 github 开源： https://github.com/shadcn-ui/ui
- 😉 作者： https://github.com/shadcn
- 📔 介绍/印象点：
  - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
  - 其提供了良好的常用 UI 组件封装，基于 RadixUI 无头组件库，应用方便。
- 👍 为本站点开发过程中提供帮助包括有：
  - 常用 UI 组件；
  - 为对组件的封装定义提供了有效参考；
  - 博文侧边栏目录的实现参考了其源码
  - ...以及其他细节方面的帮助...

Timothy 的开源项目

📌 Timothy 开源项目
- 💎 github 开源： https://github.com/timlrx/tailwind-nextjs-starter-blog
- 💎 github 开源（rehype 插件）： https://github.com/timlrx/rehype-prism-plus
- 😉 作者： https://github.com/timlrx
- 📔 介绍/印象点：
  - 全英文技术博客；
  - 编程开发的掌握程度；
- 👍 为本站点开发过程中提供帮助包括有：
  - rehype-prism-plus （作者博文）插件服务于 MD 代码块的语法高亮等需求；
  - 为吾辈 rehype remark 插件自定义提供有效参考，比如源码文件 | 源码文件
  - metadata 的初始化及引用的风格借鉴，源码可见
  - ...以及其他细节方面的帮助...

Cali Castle 个人博客

📌 Cali Castle 个人博客
- 💎 github 开源： https://github.com/CaliCastle/cali.so
- 😉 作者： https://github.com/CaliCastle
- 📔 介绍/印象点：
  - 作者对 UI/UX 设计（追求）和编程开发的双精通（👍👍👍👍）；
  - UI 设计精美，交互效果高级，各处充满了用心的细节设计；
  - 站点整体无服务架构的应用；
- 👍 为本站点开发过程中提供帮助包括有：
  - 为本站点无服务架构的 —— 技术选型以及使用提供了莫大帮助；
  - 博文封面卡片的组件定义（源码可见）；
    博文封面的精美 UI 设计
  - 对按钮/弹窗/导航栏等组件的细节 UI 设计、动画效果提供有效参考（比如：弹窗呼出退出的动画效果；按钮/弹窗的(高级质感的)背景色定义）；
  - 对如何组织页面布局、和布局组件的封装定义提供有效参考（ Container.Outer / Container.Inner , 源码可见）
  - 基于 Framer Motion 实现高级动画效果；
  - ...以及其他细节方面的帮助...

Innei 个人博客

📌 Innei 个人博客
- 💎 github 开源： https://github.com/innei/Shiro
- 😉 作者： https://github.com/Innei
- 📔 介绍/印象点：
  - 作者对 UI/UX 设计（追求）和编程开发的双精通（👍👍👍👍）；
  - 博客源码中各处可见的 Hack 写法，对于想要复用借鉴存在一定门槛
- 👍 为本站点开发过程中提供帮助包括有：
  - 博文内图片展示的 UI 组件封装，涉及懒加载以及 Zoom 放大查看等功能特性（源码可见）
  - 基于 Framer Motion 实现高级动画效果；
  - ...以及其他细节方面的帮助...

其他

开发本博客项目中，主要借鉴参考的站点就上面陈列的 4+ 个。另外有参考的其他优秀（博客）站点不完整罗列如下（排名无先后）：
- Sukka`s Blog（备注：非开源
  - 😉 作者：https://github.com/sukkaw
- JanaSundar Blog
  - 😉 作者：https://github.com/JanaSundar
- BMPI Blog
  - 😉 作者：https://github.com/madawei2699
- findxc`s Blog
  - 😉 作者：https://github.com/findxc
- Darmau`s Blog
  - 😉 作者：https://github.com/Darmau
- Third Shire`s Blog
  - 😉 作者：
- Docusaurus
- ...以及其他（未罗列在此的）优秀站点...

无服务架构

可以以无糖可乐的角度简要理解无服务架构：

就像无糖可乐并不是真的无“糖”一样，这里的无糖指的是无蔗糖，但是为了提供甜味，还是会添加代糖的。选择的是无服务器架构，其实并不是顾名思义的意思，因为我们并没有用另外一种实体去代替服务器本身，只不过做了一层抽离，就是说并没有一个服务器单例在某个数据中心 24 小时无间断地为你运行着而已。这种做法可以让开发者专注于代码，而不用去管理自己的 VPS 或者单例服务器，那也就代表着可以多花时间写业务代码而不是忙碌建立稳定可拓展的基础架构（比如担心实例是否宕机了，焦虑自己的 NGINX 有没有在正常运转，不清楚数据库进程有没有报错等等）

以上引用来自：开发者 Cali 的博文：如何用 Upstash 为网站保驾护航

同时，本站的无服务架构也极大的参考了开发者 Cali 的另篇博文如何复刻本网站，零氪快速建博客

但总的来说，任务事物都存在其两面性，上面的引用简要谈到了采用“无服务架构”的优点，但无服务架构也有让人忧患的地方在于：比如担心提供服务的厂商是否某一天跑路了，这样的问题。

所以以下，吾辈简要罗列本博客项目的无服务架构的技术选型，主要当作备忘，日后服务商跑路情况发生，吾辈或者更换另一家服务商，或者选用麻烦折腾但拥有最高掌控权的本地部署。

a. 内容管理

选择使用了 Sanity CMS。

当前主要用来：博文数据的存储；当作图床。

（备选方案：Stapi，两者同属 Headless CMS 范畴，但是 Stapi 需要提供自用数据库（所以不完全符合无服务架构的需求），好处即是：相比 Sanity，数据掌握在自己手里，缺点在于：意味着更多的经济花销）

b. 数据库

选择使用了 Supabase

当前主要用来：配合 umami 对站点访问数据的存储。

（备选方案：PlanetScale，也是上述提及博文中推荐的数据库选型，其比 Supabase 为免费用户提供了更大的存储空间，但是当前注册需要绑定境外信用卡，无奈暂时放弃，选择了 Supabase。

c. 缓存

选择使用了 Upstash

当前主要用来：存储表情回复的统计数据；以及对第三方链接的站点图标的请求路径的缓存（主要用来在博文中显示第三方链接的图标）。

d. 用户鉴权

暂未使用。

上述提及博文中推荐：Clerk

e. 部署平台

选择使用了 Vercel

为开发者带来了友好的持续性部署特性，缺点在于有时国内访问速度欠佳

（备选方案： Cloudflare | Netlify

f. 实时聊天(留言)功能

选择使用了 Channel.io

让吾辈耳目一新的（可基于 web 端的）实时聊天类应用，上手平滑，UI 美观，嵌入站点非常方便，目前当作站点的留言空间。

（备选方案： Discord）

(略) 本项目相关定制备忘

MD 语法扩充

跳转至博文：MD 自定义语法备忘，查阅自用

MD 文档头部元数据约定

一个简单的 Markdown 文档头部元数据示例：

---
title: "文档标题"
author: "作者"
date: "2023-12-11"
categories:
  - 技术
  - 编程
tags: [Markdown, 元数据]
---
# 正文开始
这是文档的正文内容。

而在本博客项目中，目前约定的元数据字段包括有（也同步给 Sanity CMS 管理的博文条目下属性）：

title | 标题
date | （创建）日期
update | 更新日期
category | 类别
tags | 标签
notOriginal | 布尔值 | 是否非原创
tagAging | 布尔值 | 时效性 - 是否对时效敏感
tagTopTop | 布尔值 | 是否置顶
tagVitalMark | 布尔值 | 是否特别标记（优先级次于置顶概念）
draft | 布尔值 | 是否处于草稿状态 (部署下是否予以展示)
manualNo | 手动编号
summary | or: description | 总结（或概述）

约定可用代码片段

同时，这里对当初始创建 MD、MDX 文档后，如何便捷地初始化 MD 文档头部元数据 —— 该点作额外补充（备份），在以 vscode 作为 Markdown 编辑器情况下，可以在 (设置 -> User Snippets 弹出菜单) 中，先后选择 markdown.json 、mdx.json （这么两份配置文件），约定配置如下：

mdx.json

{
	// Place your snippets for mdx here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"mdYamlMeta4Blog": {
		"prefix": "metablog",
		"body": [
			"---",
			"title: ${1}",
			"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
			"update:",
			"category: ${2}",
			"tags: [${3}]",
			"notOriginal: false",
			"tagAging: false",
			"tagTopTop: false",
      "tagVitalMark: false",
			"draft: false",
			"manualNo: ${4}",
			"summary: ${5}",
			"---",
			"",
			"$0"
		],
		"description": "博客使用 | MDX 顶部使用 yaml 格式声明 meta 元数据 | 预先指定字段"
	}
}