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

什么是 local-cms

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

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

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

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

为什么开发

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

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

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

还有一种基于 GitCMS 管理系统,相比较更适合,但也存在使用成本和体验的问题。当然这并不是这些 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...

相关推荐
柏箱几秒前
PHP基本语法总结
开发语言·前端·html·php
黄俊懿10 分钟前
【深入理解SpringCloud微服务】手写实现各种限流算法——固定时间窗、滑动时间窗、令牌桶算法、漏桶算法
java·后端·算法·spring cloud·微服务·架构
新缸中之脑11 分钟前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz85614 分钟前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
看到请催我学习20 分钟前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript
2401_8574396937 分钟前
“衣依”服装销售平台:Spring Boot技术应用与优化
spring boot·后端·mfc
blaizeer1 小时前
深入理解 CSS 浮动(Float):详尽指南
前端·css
Jerry.ZZZ1 小时前
系统设计,如何设计一个秒杀功能
后端
速盾cdn1 小时前
速盾:网页游戏部署高防服务器有什么优势?
服务器·前端·web安全
小白求学11 小时前
CSS浮动
前端·css·css3