关于云开发:Mdpress-云开发-CMS-打造动态内容站点

印记中文（以下简称印记）作为国内当先的前端技术流传社区，通过一段时间的倒退，曾经领有了 React、Webpack、Babel 等优质中文文档站点，并且还开辟了周刊类业务。为了进步印记技术流传和翻译的效率，以及建设印记的品牌一致性，印记开始研发本人的一系列平台和工具。而 Mdpress，就是其中之一，它是一个网站生成器。详见 >>

CloudBase CMS 是 云开发 推出的，基于 Node.js 的 Headless 内容治理平台，提供了丰盛的内容治理性能。反对动静生成内容治理界面，毋庸编写代码即可应用，疾速治理云开发中的业务数据。反对字符串、数字、多媒体、图片、文件、富文本、Markdown、关联类型等数十种内容类型的可视化编辑。

已在云开发扩大利用、小程序开发者工具中上线，反对一键装置到已有的环境中，治理小程序 / Web 等多端产生的内容数据。同时，CloudBase CMS 曾经在 GitHub 开源，能够间接在 CloudBase CMS 上进行二次开发，满足业务的多样化需要。

印记中文社区就使用 Mdpress + 云开发内容治理 CMS 打造了动静内容站点（代号 jsweekly 我的项目），下文将具体介绍实现流程：

首页间接应用 readme 文件来作为网站的首页，这个页面是动态的。文档
配置

配置文件应用 .mdpress/config 文件来进行配置。
动态资源应用 .mdpress/public 文件夹来寄存你的动态资源。

插件通过装置一个插件，拉取云开发 CMS 上的动态数据，实现动静建站。

npm install @mdpress/tencent-cloud-cms --save

点击云开发：

进入一个环境：

如果还没有 CMS 利用的话，能够参考云开发的这篇文档创立一个

咱们须要一个 document（文档）表和一个 sidebar（侧边栏）表：

数据结构示例：document：

"fields": [
    {
        "displayName": "名称",
        "id": "wid07nOCkgB7l8-3QD3oLqFueziDAIY2",
        "isHidden": false,
        "name": "name",
        "order": 0,
        "type": "Number"
    },
    {
        "description": "值越大在 CMS 列表中越靠前",
        "displayName": "排序",
        "id": "rmg15_TLU9Tmxx77SNav5C9QuqMNobrY",
        "isHidden": false,
        "isOrderField": true,
        "name": "order",
        "order": 1,
        "orderDirection": "desc",
        "type": "Number"
    },
    {
        "description": "留空时会在服务端主动写入批改工夫",
        "displayName": "内容",
        "id": "nyKjwWVm8Zj259YCd38IvjVWZVW1oiKv",
        "isHidden": false,
        "name": "content",
        "order": 4,
        "type": "Markdown"
    },
    {
        "displayName": "拜访门路",
        "id": "pB-9QEglnABKpF7FCZGD9QObWz4YABpm",
        "isHidden": false,
        "isRequired": true,
        "name": "path",
        "order": 5,
        "type": "String"
    }
]

sidebar：

"fields": [
    {
        "displayName": "名称",
        "id": "IVALl1u3eDtWFNYN3e3WFJuyW2LJEXF9",
        "isHidden": false,
        "name": "name",
        "order": 0,
        "type": "String"
    },
    {"defaultValue": [],
        "description": "侧边栏的值",
        "displayName": "值",
        "id": "2p0dqdvyxruxijov4ma30dzqrc3ffvpk",
        "isRequired": true,
        "name": "value",
        "order": 2,
        "type": "Object"
    },
    {
        "connectField": "path",
        "connectMany": true,
        "connectResource": "4d5a19345ede173a005376bf3bbe1977",
        "displayName": "关联文档",
        "id": "udqilz1aj38mieisc17y7gvas0rv6s1t",
        "name": "pages",
        "order": 3,
        "type": "Connect"
    }
]

CMS 的具体操作参考这里

因为云开发的 js sdk 带有鉴权机制，所以还须要回到控制台配置权限。

用户首先开启用户的鉴权设置，比方匿名登录：

用户鉴权设置具体可参考这里

域名而后是域名（包含端口）的鉴权：

域名鉴权设置具体可参考这里

数据库最初是数据库的鉴权：

比方点击 js_weekly_document：

数据库鉴权设置具体可参考这里

document 示例

能够一条条新建，也能够批量导入。

sidebar 示例

sidebar 是一个对象数组。

关上 .mdpress/config.js 文件，在插件项中填入参数：

tencentCloudEnv 指的是 云开发 控制台中的环境，tencentCloudModel 指的是 document 和 sidebar 两个数据库名称。

其实插件次要就干了这几件事：

从云开发 CMS 获取数据源；
笼罩 mdpress 默认布局，应用动静数据源，并且将动静数据源中的题目抽取进去作为锚点目录；
新增 /docs/* 路由，由它渲染动静页面。

印记中文目前翻译了很多文档，但最大的一个问题就是内容过于扩散，读者在寻找本人想要的内容的时候并不是很不便（比方像要中英文文档对照、某个技术文档和相干的技术博客对照等），所以咱们想做一个不便能将所有文档聚合起来的站点。

而用动态建站器（如 Hexo、Vuepress）搭建网站的话尽管很不便，但却要求文档必须是本地文档的模式。动静建站器（如 Nuxt 等）尽管反对线上文档数据，但它封装的内容更多是为了一个通用的前端利用而筹备的，你须要学习很多相干的常识，搭建起一个文档站并不容易。

工具 / 能力	本地 Markdown	线上 Markdown	反对的组件类型	上手难度
Vuepress	✅	❌	Vue	易
Nuxt	❌	✅	React	难
Mdpress	✅	✅	React	易

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、主动弹性扩缩的后端云服务，蕴含计算、存储、托管等 serverless 化能力，可用于云端一体化开发多种端利用（小程序，公众号，Web 利用，Flutter 客户端等），帮忙开发者对立构建和治理后端服务和云资源，防止了利用开发过程中繁琐的服务器搭建及运维，开发者能够专一于业务逻辑的实现，开发门槛更低，效率更高。
开明云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/product/tcb?from=12763
技术文档：https://cloudbase.net?from=10004
技术交换群、最新资讯关注微信公众号【腾讯云云开发】

关于云开发:Mdpress-云开发-CMS-打造动态内容站点

前言

我的项目构造

装置插件

关上云开发控制台

进入 cms

建表

权限配置

录入数据

应用插件

插件源码介绍

总结

产品介绍