共计 3030 个字符,预计需要花费 8 分钟才能阅读完成。
前言
印记中文(以下简称印记)作为国内当先的前端技术流传社区,通过一段时间的倒退,曾经领有了 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
如果还没有 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
技术交换群、最新资讯关注微信公众号【腾讯云云开发】