Mdpress + cloud development CMS to create a dynamic content site

Preface

As a leading front-end technology communication community in China, Yinji Chinese (hereinafter referred to as Yinji) has developed high-quality Chinese document sites such as React, Webpack, and Babel after a period of development, and has also developed weekly magazine business. In order to improve the efficiency of imprint technology dissemination and translation, and to build imprint’s brand consistency, imprint began to develop its own series of platforms and tools. And Mdpress is one of them, it is a website generator. for details >>

CloudBase CMS is cloud development . It is a Headless content management platform based on Node.js and provides rich content management functions. Supports dynamic generation of content management interface, which can be used without writing code, and quickly manage business data in cloud development. Supports visual editing of dozens of content types such as strings, numbers, multimedia, pictures, files, rich text, Markdown, and associated types.

The cloud development extension application , applet developer tool has been launched online, supports one-click installation into the existing environment, and manages the content data generated by multiple terminals such as applets/Web. At the same time, CloudBase CMS has been open sourced on GitHub, and secondary development can be carried out directly on CloudBase CMS to meet the diverse needs of the business.

The imprint Chinese community has used Mdpress + cloud to develop a content management CMS to create a dynamic content site (codenamed jsweekly project). The implementation process will be described in detail below:

Project structure

1. The homepage directly uses the readme file as the homepage of the website, and this page is static. Documentation
2. Configuration

• The configuration file uses the .mdpress/config file for configuration.
• Static resources use the .mdpress/public folder to store your static resources.

1. The plug-in installs a plug-in, pulls the dynamic data on the cloud development CMS, realizes the dynamic establishment of the website.

Install plugin

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

Open the cloud development console

Click Cloud Development:

Enter an environment:

Enter cms

If you don’t have a CMS application yet, you can refer to this document developed by the cloud to create one

Build a table

We need a document table and a sidebar table:

Data structure example: 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"
    }
]

For the specific operation of CMS, please refer to here

Rights Profile

Because the js sdk developed by the cloud has an authentication mechanism, you also need to go back to the console to configure permissions.

1. The user first turns on the user's authentication settings, such as anonymous login:

For user authentication settings, please refer to here

1. The domain name is then the authentication of the domain name (including port):

For details on domain name authentication settings, please refer to here

1. At the end of the database is the authentication of the database:

For example, click js_weekly_document:

For details on database authentication settings, please refer to here

Input data

1. document example

You can create new items one by one, or import them in batches.

1. sidebar example

The sidebar is an array of objects.

Use plugin

Open the .mdpress/config.js file and fill in the parameters in the plug-in item:

tencentCloudEnv refers to the environment in the cloud development console, tencentCloudModel refers to the two database names of document and sidebar.

Plug-in source code introduction

In fact, the plug-in mainly does the following things:

1. Obtain data sources from cloud development CMS;
2. Override the default layout of mdpress, use a dynamic data source, and extract the title from the dynamic data source as an anchor directory;
3. Add /docs/* route, which renders dynamic pages.

to sum up

Imprint Chinese currently translates a lot of documents, but the biggest problem is that the content is too scattered, and it is not very convenient for readers to find the content they want (such as comparing Chinese and English documents, a technical document and related technical blogs) Contrast, etc.), so we want to make a convenient site that can aggregate all the documents.

While it is very convenient to build a website with a static website builder (such as Hexo, Vuepress), it requires that the document must be in the form of a local document. Although dynamic site builders (such as Nuxt, etc.) support online document data, the content it encapsulates is more prepared for a general front-end application. You need to learn a lot of relevant knowledge, and it is not easy to build a document site.

Tools/Ability	Local Markdown	Online Markdown	Supported component types	Difficulty
Vuepress	✅	❌	Vue	easy
Nuxt	❌	✅	React	difficult
Mdpress	✅	✅	React	easy

product description

Cloud Development (Tencent CloudBase, TCB) is a cloud-native integrated development environment and tool platform provided by Tencent Cloud. It provides developers with highly available, automatically and elastically scalable back-end cloud services, including serverless capabilities such as computing, storage, and hosting. , Can be used for cloud integration to develop a variety of end applications (small programs, official accounts, web applications, Flutter clients, etc.) to help developers build and manage back-end services and cloud resources in a unified manner, avoiding cumbersome servers in the application development process With construction and operation and maintenance, developers can focus on the realization of business logic, with lower development thresholds and higher efficiency.
Open cloud development: https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
Product documentation: https://cloud.tencent.com/product/tcb?from=12763
Technical document: https://cloudbase.net?from=10004
Technical exchange group, latest information, follow WeChat public account [Developed by Tencent Cloud Cloud]