开发了一个本地 CMS(内容管理系统)
什么是 local-cms
local-cms
顾名思义,就是“本地的内容管理系统”。
它是在开发 vitepress
工具 vitepress-helper
的过程中,为了进一步完善功能,实现对内容更便捷的管理而开发的。
local-cms
除了能够配合 VitePress
使用,也适合其他使用 markdown
管理文件的使用场景。
为什么开发
CMS
系统有很多已经成熟的项目,直接搭配使用就行,为何要再造一个轮子呢?
因为,据我目前了解大多数 CMS
系统需要服务器和数据库来搭配对内容管理和存储。
这种使用方式比较成熟,但对于当前的使用场景来说体量过重了,增加额外的开发成本、使用成本。另外和 VitePress
的使用体验也有所割裂,而且通过 CMS
提供的接口来获取内容对 SEO
也不够友好。
最主要的是,比较好用的 CMS
,它们往往还需要额外付费订阅才能使用。
还有一种基于 Git
的 CMS
管理系统,相比较更适合,但也存在使用成本和体验的问题。当然这并不是这些 CMS
系统的问题,只是使用场景没有契合。
所以我认为在使用 VitePress
的场景下需要的是一个使用简单,没有太多概念和配置,甚至用起来像一个 markdown
编辑器的本地 CMS
。
功能实现
因为计划的使用场景为辅助管理本地内容,所以功能十分简单。
cms
这个CMS(内容管理系统)是一个基于 Express
的服务器,主要提供了以下功能:
-
设置和获取目录:默认目录为"docs",可以通过命令行参数或API接口来设置新的目录。
-
获取目录下所有文件和文件夹:提供了一个API接口,可以获取指定目录下的所有文件和文件夹,支持递归获取子目录下的所有文件和文件夹。
-
获取所有md文件:通过接口,可以获取所有的Markdown文件。
-
读取单个文件:通过接口,可以读取指定路径的文件内容。
-
新建文件和目录:通过接口,可以在指定目录下新建文件或目录。
-
修改文件:通过接口,可以更新指定文件的内容。
-
删除文件和目录:通过接口,可以删除指定的文件或目录。
-
重命名文件和目录:通过接口,可以重命名指定的文件或目录。
UI
UI
使用了 ant-design-vue
实现。通过请求 Express
提供的接口来进行相应的交互功能。
初始化向导
为了方便快速上手使用,提供了一个命令行工具。
运行时首先会让你选择要执行的操作:
- 在当前目录添加
local-cms
来管理内容。 - 新建一个基于
vitepress
管理的 CMS 的项目。
第一个选项,适合在现有项目中添加 local-cms
。 工具会自动安装并在项目的 package.json
中添加 cms
的运行脚本。
第二个选项,适合开启一个全新的文档项目。工具会预设一些项目基本信息的填写。
这个初始化向导工具,不仅能够兼容既有项目,还能够开箱即用的快速开始一个新的项目。
使用
初始化向导
local-cms
提供了一个初始化向导。你可以选择以下方式来使用初始化向导:
npx
可以通过 npx
直接运行初始化引导。
npx @huyikai/local-cms init
全局安装依赖
全局安装 local-cms
, 然后通过 cms
命令运行初始化引导。
npm i @huyikai/local-cms -g
cms init
手动安装
将 local-cms
安装到项目的开发依赖中。
npm i @huyikai/local-cms -D
然后修改 package.json
文件,添加 cms
命令。
{
"scripts": {
"cms": "node node_modules/@huyikai/local-cms/cms.js docs"
}
}
运行 npm run cms
结尾
欢迎大家尝试使用 local-cms
,并提出宝贵的意见和建议。
以上是目前为止想跟大家分享的关于 local-cms
的所有内容,这个工具我平时一直在使用,在使用过程中也在不断思考有哪些优化的可能,也欢迎感兴趣的伙伴参与开源。
如果它对您有用,请帮忙点个 ⭐️ star
转载自:https://juejin.cn/post/7337211350043197476