# 内容管理 - CMS | Creght 可视化文档

> 视频教程： CMS（内容管理系统）用于管理网站中的动态内容，例如： 案例（Case Studies） 新闻（News） 博客（Blog） 帮助文档（Docs） 例如：新闻页面（ https://oc2wp6b7n7te.site.cregh…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

CMS/

# 内容管理 \- CMS

视频教程：

CMS（内容管理系统）用于管理网站中的动态内容，例如：

- 案例（Case Studies）
- 新闻（News）
- 博客（Blog）
- 帮助文档（Docs）

例如：新闻页面（ [https://oc2wp6b7n7te.site.creght.com/news）就是基于](https://oc2wp6b7n7te.site.creght.com/news%EF%BC%89%E5%B0%B1%E6%98%AF%E5%9F%BA%E4%BA%8E) CMS 实现的动态内容管理。

## 管理内容

在编辑器左侧切换到CMS Tab下，就可以进入 CMS 管理页面

![](https://fsu.creght.com/user/3/mqqyMiDUjrv__image.png)

在这里，您可以：

- 管理字段
- 创建内容集合
- 新增文章
- 编辑内容
- 发布上线

## 草稿与发布

在编辑 CMS 文章时，程序会进行自动保存更改，保存的内容为草稿，草稿在线上不可见，如果要发布上线，请点击发布按钮。

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/macgGghlHNr__image.png)

### 字段管理

CMS 字段是可以动态添加的，常见的字段有 “标题”、“封面图” 等字段。

在 CMS 详情中，进入 ”字段管理“，可以添加自定义字段，Creght 支持如 文本、富文本、图片等字段类型。

![](https://fsu.creght.com/user/3/mqqyODKxyfV__image.png)

鼠标右击字段可以删除已存在的字段：

![](https://fsu.creght.com/user/3/mqqyPtoUHtk__image.png)

### 在网站页面中显示 CMS 内容

通过 **循环组件（Loop Component）**，可以将 CMS 内容动态渲染到页面中

循环组件可在任意页面使用。

在任何页面都可以使用循环组件，在“插入面板“ \- “CMS“ 可以找到循环组件。

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/macgJIQWgAo__image.png)

**第一步：绑定 CMS 数据源**

插入循环组件后，需要先为其绑定 CMS 集合。

选中循环组件后，在右侧面板中选择需要显示的 CMS 数据源即可。

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/macgKoCESZK__image.png)

**第二步：添加子元素**

绑定 CMS 后，需要在循环组件内部添加子元素。

下面是一个简单示例：使用列表展示文章内容。

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/macgKWweSsC__image.png)

在上图中：

- 左侧树结构中仅添加了一个子元素
- 但页面中自动重复渲染出了多个列表项

这就是循环组件的核心作用：

> 自动循环渲染子元素。

**第三步：绑定变量**

默认情况下，组件中的文本内容是固定的。

如果希望显示 CMS 中真实的数据（例如文章标题），则需要使用 **变量绑定**。

选中文字组件后，点击 “文本” 设置项右侧的 **+** 按钮，即可绑定变量。

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/macgLvFLjdN__image.png)

例如：

- 标题绑定 `title`
- 描述绑定 `description`
- 图片绑定 `cover`

通过变量绑定后，图片与文本都可以动态展示 CMS 内容。

一个基础版本的图文列表即可完成。

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/macgMfuZgWX__image.png)

## 更多内容

关于：

- 字段类型
- 富文本使用
- 动态详情页
- 分类与筛选
- 更复杂的 CMS 用法

我们将在后续发布更详细的进阶文档。

CMS 的概念相对复杂，如果您在使用过程中遇到任何问题，欢迎随时联系我们，我们会尽可能详细地为您提供帮助。

本文目录

- [管理内容](#管理内容)
- [草稿与发布](#草稿与发布)
- [字段管理](#字段管理)
- [在网站页面中显示 CMS 内容](#在网站页面中显示-cms-内容)
- [更多内容](#更多内容)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)