开发了一个本地 CMS(内容管理系统)

什么是 local-cms

local-cms 顾名思义,就是"本地的内容管理系统"。

它是在开发 vitepress 工具 vitepress-helper 的过程中,为了进一步完善功能,实现对内容更便捷的管理而开发的。

local-cms 除了能够配合 VitePress 使用,也适合其他使用 markdown 管理文件的使用场景。

不过因为目前默认搭配 VitePress 使用,所以 markdown 编辑器的渲染样式为 VitePress 的文档主题样式,后续会考虑增加更多的主题风格,类似掘金编辑器那样,让大家能够按需使用。

为什么开发

CMS 系统有很多已经成熟的项目,直接搭配使用就行,为何要再造一个轮子呢?

因为,据我目前了解大多数 CMS 系统需要服务器和数据库来搭配对内容管理和存储。 这种使用方式比较成熟,但对于当前的使用场景来说体量过重了,增加额外的开发成本、使用成本。另外和 VitePress 的使用体验也有所割裂,而且通过 CMS 提供的接口来获取内容对 SEO 也不够友好。

最主要的是,比较好用的 CMS,它们往往还需要额外付费订阅才能使用。

还有一种基于 Git 的 CMS 管理系统,相比较更适合,但也存在使用成本和体验的问题。当然这并不是这些 CMS 系统的问题,只是使用场景没有契合。

所以我认为在使用 VitePress 的场景下需要的是一个使用简单,没有太多概念和配置,甚至用起来像一个 markdown 编辑器的本地 CMS。

功能实现

因为计划的使用场景为辅助管理本地内容,所以功能十分简单。

cms

这个CMS(内容管理系统)是一个基于 Express 的服务器,主要提供了以下功能:

  1. 设置和获取目录:默认目录为"docs",可以通过命令行参数或API接口来设置新的目录。

  2. 获取目录下所有文件和文件夹:提供了一个API接口,可以获取指定目录下的所有文件和文件夹,支持递归获取子目录下的所有文件和文件夹。

  3. 获取所有md文件:通过接口,可以获取所有的Markdown文件。

  4. 读取单个文件:通过接口,可以读取指定路径的文件内容。

  5. 新建文件和目录:通过接口,可以在指定目录下新建文件或目录。

  6. 修改文件:通过接口,可以更新指定文件的内容。

  7. 删除文件和目录:通过接口,可以删除指定的文件或目录。

  8. 重命名文件和目录:通过接口,可以重命名指定的文件或目录。

UI

UI 使用了 ant-design-vue 实现。通过请求 Express 提供的接口来进行相应的交互功能。

初始化向导

为了方便快速上手使用,提供了一个命令行工具。

运行时首先会让你选择要执行的操作:

  1. 在当前目录添加 local-cms 来管理内容。
  2. 新建一个基于 vitepress 管理的 CMS 的项目。

第一个选项,适合在现有项目中添加 local-cms。 工具会自动安装并在项目的 package.json 中添加 cms 的运行脚本。

第二个选项,适合开启一个全新的文档项目。工具会预设一些项目基本信息的填写。

这个初始化向导工具,不仅能够兼容既有项目,还能够开箱即用的快速开始一个新的项目。

使用

初始化向导

local-cms 提供了一个初始化向导。你可以选择以下方式来使用初始化向导:

npx

可以通过 npx 直接运行初始化引导。

shell 复制代码
npx @huyikai/local-cms init

全局安装依赖

全局安装 local-cms, 然后通过 cms 命令运行初始化引导。

shell 复制代码
npm i @huyikai/local-cms -g
cms init

手动安装

将 local-cms 安装到项目的开发依赖中。

sh 复制代码
npm i @huyikai/local-cms -D

然后修改 package.json 文件,添加 cms 命令。

json 复制代码
{
  "scripts": {
    "cms": "node node_modules/@huyikai/local-cms/cms.js docs"
  }
}

运行 npm run cms

结尾

欢迎大家尝试使用 local-cms ,并提出宝贵的意见和建议。

以上是目前为止想跟大家分享的关于 local-cms 的所有内容,这个工具我平时一直在使用,在使用过程中也在不断思考有哪些优化的可能,也欢迎感兴趣的伙伴参与开源。

仓库地址:github.com/huyikai/loc...

相关推荐
Da Da 泓21 分钟前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目
zxcvb1531 小时前
远程查看本地文档:一条轻量 Web 文件服务的工程化链路
前端·远程查看文档
niucloud-admin1 小时前
NIUCLOUD PHP SAAS上门家政使用文档:城市管理
java·前端·php
程序员大阳1 小时前
副队长JavaScript教程(50)-DOM:网页开发的起点
javascript·dom·es·节点·概念·document·关系
北岛贰2 小时前
啵啵音乐迎来全新升级!
前端
captain3762 小时前
MyBatis操作数据库(入门2)
java·数据库·spring boot·后端·spring·mybatis
hkNaruto3 小时前
【AI】基于大模型的AI游戏地图生成、控制方案:AI Native Game Harness 迁移操作手册
前端·人工智能·游戏
IT_陈寒4 小时前
Java序列化踩坑记:对象循环引用让我加班两小时
前端·人工智能·后端
泡海椒4 小时前
05-雷达图多维画像-信用评级多维画像
后端
王中阳Go4 小时前
5.27 分钟干完后端和全部测试:一场三小时笔试的五个失分点,四个不在代码上
大数据·数据库·人工智能·后端·大语言模型