--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base' title: '构建知识库 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:24:43+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 这里您构建帮助中心首页：深蓝色页头、三张各带图标的分类卡片、两份热门文章列表和支持行动号召。当帮助分散在多篇文章中时使用它。要简短问答列表，请遵循 构建常见问题页面。 本视频构建软件产品的帮助中心。 tags: - 'Volg een tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 构建知识库 description: |- 这里您构建帮助中心首页：深蓝色页头、三张各带图标的分类卡片、两份热门文章列表和支持行动号召。当帮助分散在多篇文章中时使用它。要简短问答列表，请遵循 构建常见问题页面。 本视频构建软件产品的帮助中心。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:24:43+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base' description: |- 这里您构建帮助中心首页：深蓝色页头、三张各带图标的分类卡片、两份热门文章列表和支持行动号召。当帮助分散在多篇文章中时使用它。要简短问答列表，请遵循 构建常见问题页面。 本视频构建软件产品的帮助中心。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 构建知识库. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) - [构建 FAQ 页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/faq-page) - [Link](/hc/documentation/learn-dxpr-builder/elements/link) 这里您构建帮助中心首页：深蓝色页头、三张各带图标的分类卡片、两份热门文章列表和支持行动号召。当帮助分散在多篇文章中时使用它。要简短问答列表，请遵循 [构建常见问题页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/faq-page)。 本视频构建软件产品的帮助中心。 ## 开始之前 - 您的角色有 **Edit with DXPR Builder** 权限。 - 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**. - 新元素落在版块或列顶部。逆序添加列的元素，或之后拖拽到位。 ## 第 1 步：添加页头 1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。 2. 悬停版块并打开 **More** > **Settings**。在以下位置的下方 **HTML classes** 选择 **Align text center**。在 **Style** 面板选择深蓝色 **Background** 和白色 **Font color**，然后点击 **Save**. 3. 点击 **+** 在版块上并选择 **Text**。输入 "Help centre" 为 **Heading 2** 并添加 "How can we help you today?"。设置 **Font color** 为白色，在 **Style** 面板并点击 **Save**。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 [构建 SEO 友好页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)。 ## 第 2 步：添加分类 1. 悬停版块并点击 **Add Section Below**。给新版块 **Align text center** 类。 2. 点击 **+** 在版块上并选择 **Row**。点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**. 3. 点击 **+** 在第一列中并选择 **Card**。打开其 **More** > **Settings**，设置 **Header** 到分类名称和 **Title** 到文章数，然后点击 **Save**. 4. 点击 **+** 在同一列中并选择 **Icon**；它落在卡片上方。选择 **Font Awesome Free Solid** 设置，搜索 `rocket` 并点击图标。设置 **Size** 为 **Extra Large (2x)** 并点击 **Save**. 5. 对第二列重复，带 `credit-card` 和第三个 `screwdriver-wrench`. ## 第 3 步：添加热门文章 1. 添加第三个版块，其中包含 **Add Section Below**。打开其 **More** > **Settings**，选择浅灰色 **Background**：**Style** 面板并点击 **Save**. 2. 点击 **+** 在版块上并选择 **Row**；它带有两个等宽列。 3. 点击 **+** 在每列中并选择 **Text**。输入三个文章标题，每行一个，并点击 **Save**. 4. 点击 **+** 在版块上并选择 **Text**；它落在行上方。输入 "Popular articles" 为 **Heading 2** 并点击 **Save**。 ## 第 4 步：添加支持行动号召 1. 添加第四个版块并打开其 **More** > **Settings**。选择 **Align text center** 在 **HTML classes**，然后紫色 **Background** 和白色 **Font color**：**Style** 面板。点击 **Save**. 2. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Contact support"， **Link** 为 `/support`, **Type** 为 **Light** 和 **Size** 为 **Large**，然后点击 **Save**. 3. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "Can't find what you need?" 为 **Heading 2** 并添加一行。设置 **Font color** 为白色并点击 **Save**. ## 第 5 步：保存并预览 1. 点击 **Save** 在页面构建器工具栏上。 2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**. ## 进一步了解 视频中未展示： - **搜索框**：打开核心 **Search** 模块，位于 **Extend**。点击 **+** 在页头版块中，打开 **Drupal Blocks** 选项卡并选择 **Block: Forms: Search form**。访客落在 `/search/node`. - **可点击卡片**：添加一个 **Link** 元素先放到列中并设置其 **Link** 到分类页面。然后添加 **Card** 其中。 - **文章链接**：选择列表中的每个标题，并通过工具栏上的链接按钮链接它。 - **更多分类**：使用同一预设添加第二个 **Row**。常见分类包括 Using the editor、Templates and design 和 API and development。 ## 您会看到的内容 深蓝色页头以白色 "Help centre" 迎接访客。随后是三个居中分类，每个是卡片及其名称和文章数上方的图标。灰带用两列列出六篇热门文章，紫色横幅提供 **Contact support**。 ## 如果您看不到如图所示的页面 - **添加后卡片不显示设置对话框。** 卡片空白打开，无对话框。悬停卡片并打开 **More** > **Settings** 以填写 **Header** 和 **Title**. - **图标位于其卡片下方。** 图标在卡片之前放入，新元素落在列顶部。用其控制栏上的拖动手柄将图标拖到卡片上方。 - **标题在 navy 上保持深色。** Text 元素没有 **Font color** 自己的。打开其 **Style** 面板并设置 **Font color** 为白色。 - **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。 ## 接下来做什么？ - [Drupal 区块集成](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) 用于可插入的其他区块 - [常见问题页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/faq-page) 用于分类页面中的折叠答案 - [Link 元素](/hc/documentation/learn-dxpr-builder/elements/link) 用于卡片周围的可点击外层