我的学习笔记

Appearance

深入理解 CMS：如何实现“点击即改”？ ​

你提到的功能——“开启编辑模式，直接修改组件文本并保存”——正是 CMS (内容管理系统) 的核心愿景之一，特别是现代的 “可视化编辑器” (Visual Editor)。

什么是 CMS？ ​

CMS (Content Management System) 是一个用来帮助非技术人员管理网站内容的软件。 最经典的例子是 WordPress。在 WordPress 里，你写文章不是写代码，而是像在 Word 里一样打字。当你点击“发布”时，CMS 会把你的文字存入数据库，然后生成网页给用户看。

你构想的功能：即时编辑 (In-place Editing) ​

你描述的场景非常具体：

“插入网站之后，开启该功能就可以对组件的文本进行编辑然后保存更改”

在技术上，这通常被称为 In-place Editing（原位编辑） 或 Live Editing。

1. 它是如何实现的？ ​

前端技术其实很简单，HTML 有一个属性叫 contenteditable。

html
<div contenteditable="true">
  你可以直接点击这里修改文字...
</div>

只要加上这个属性，浏览器就允许用户修改这段文字。

2. 难点在于“保存” ​

修改文字很容易，但保存很难。

  • 对于动态网站（如 WordPress）：当你修改完，点击保存，浏览器发送一个请求给服务器，服务器把新文字更新到数据库里。
  • 对于静态网站（如 VitePress）：没有数据库！ 网站只是一堆文件。要“保存”修改，意味着必须去修改服务器上的源代码文件，然后重新打包发布。

静态网站的特种兵：Git-based CMS ​

因为 VitePress 是静态的，没办法直接连数据库。所以出现了一类专门针对这种场景的 CMS，比如 TinaCMS 或 Decap CMS (原 Netlify CMS)。

它们完美实现了你的构想：

  1. 侧边栏编辑：当你登录后，页面侧边会弹出一个面板，或者直接允许你不跳页直接点击文字修改。
  2. API 保存：当你点击“保存”时，它不会去连数据库，而是直接调用 GitHub 的 API。
  3. 自动提交：它会自动帮你生成一个新的 Git Commit（提交记录），把修改后的内容推送到你的代码仓库。
  4. 自动触发构建：GitHub 收到提交后，触发 CI/CD 自动构建，几分钟后，你的网站就更新了。

例子：TinaCMS ​

TinaCMS 是目前最接近你描述的工具。它可以集成到 VitePress 或 Next.js 中。

  • 你看到的就是最终的页面。
  • 点击标题，直接打字修改。
  • 点击图片，直接上传替换。
  • 点击保存，它自动帮你改代码、推仓库。

使用 CMS 必须配合 GitHub 吗？ ​

这涉及到一个非常关键的问题：你的数据存放在哪里？

核心前提：数据存在哪，就得连哪里 ​

你想要的“点击即改并保存”的功能，核心在于保存。

1. 如果你是用 TinaCMS / Decap CMS (Git-based) ​

是的，必须配合 GitHub（或 GitLab/Bitbucket）。

原因很简单：你的博客是静态的，也就意味着你没有自己的数据库，也没有后台服务器来接收数据。唯一的“存储介质”就是你的代码仓库。

这些 CMS 的工作原理是：

  1. 你在网页上修改文字。
  2. CMS 调用 GitHub API。
  3. GitHub API 修改仓库里的 .md 文件。
  4. 修改触发自动构建，更新网站。

所以，GitHub 在这里充当了免费的“数据库”和“内容服务器”。

2. 如果你是用 Strapi / Contentful (Headless CMS) ​

不需要 GitHub 也可以实现编辑，但发布可能还需要它。

这类 CMS 自己就是一套后端服务（拥有独立的数据库）。

  1. 你需要把 Markdown 内容迁移到 Strapi 的数据库里。
  2. 编辑时，直接连 Strapi 的后台，数据存得很快。
  3. 但是，展示给用户看的时候，为了性能，我们通常还是会把内容“静态化”。
  4. 所以，当你修改完内容，它还是会触发一次构建流程（Webhooks），这时候通常还是需要通过 CI/CD 平台（如 Vercel）去拉取最新的代码和内容重新打包。

3. 本地开发能用吗？ ​

能，但仅限于“自己玩”。

比如 TinaCMS 支持“本地模式 (Local Mode)”。

  • 当你在本地运行 npm run docs:dev 时，TinaCMS 会启动一个本地的小型后端。
  • 你在浏览器里修改内容，点击保存。
  • 它会直接修改你电脑硬盘上的 .md 文件！
  • 这个体验非常爽，完全是你想要的“所见即所得”。

但这个功能仅限本地电脑。一旦你把网站发给别人看（部署上线），就没有“本地文件系统”可以改了，这时候必须依赖 GitHub API。

结论 ​

如果你想让别人（或者自己在任何电脑上）都能通过网页直接编辑并保存： 是的，最简单、最免费的方案就是托管在 GitHub 上。

因为它不仅提供了代码托管，还免费提供了 API 接口，让 CMS 能够远程修改文件。如果不依赖 GitHub，你就需要购买服务器、配置数据库、搭建后端接口，成本会高很多。

Released under the MIT License.

Copyright © 2024-present |