--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/blog-layout' title: '设计博客列表布局 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:23:43+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 这里您构建列出博客文章的页面：顶部精选文章、带侧边栏的 Drupal 视图列表和订阅横幅。新文章自动出现，无需编辑页面。要深入讲述一个客户故事，请遵循 撰写案例研究。 本视频构建报告产品的博客。 tags: - 'Follow a tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 设计博客列表布局 description: |- 这里您构建列出博客文章的页面：顶部精选文章、带侧边栏的 Drupal 视图列表和订阅横幅。新文章自动出现，无需编辑页面。要深入讲述一个客户故事，请遵循 撰写案例研究。 本视频构建报告产品的博客。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:23:43+0000' dateModified: '2026-10-24T17:19:22+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/blog-layout' articleSection: 跟着教程做 - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/blog-layout' description: |- 这里您构建列出博客文章的页面：顶部精选文章、带侧边栏的 Drupal 视图列表和订阅横幅。新文章自动出现，无需编辑页面。要深入讲述一个客户故事，请遵循 撰写案例研究。 本视频构建报告产品的博客。 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 --- [帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[跟着教程做](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/overview) # 设计博客列表布局. 学习 DXPR Builder搭建页面跟着教程做 ## 本指南内容 相关指南 - [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms) - [在页面上显示 Drupal 视图](/zh-hans/hc/documentation/learn-dxpr-builder/integrations/drupal-views) - [在页面添加 Drupal 区块](/zh-hans/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) - [创建关于我们页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/about-page) 这里您构建列出博客文章的页面：顶部精选文章、带侧边栏的 Drupal 视图列表和订阅横幅。新文章自动出现，无需编辑页面。要深入讲述一个客户故事，请遵循 [撰写案例研究](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/case-study)。 本视频构建报告产品的博客。 ## 开始之前 - 您的角色有 **Edit with DXPR Builder** 权限。 - 您的网站有列出博客文章的视图。DXPR CMS 随附 **Blog** 视图，含 **Blog** 列表和 **Featured posts** 显示。 - 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**. - 新元素落在列顶部。逆序添加列的元素，或之后拖拽到位。 ## 第 1 步：添加精选文章 1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。 2. 点击 **+** 在版块上并选择 **Row**；它带有两个等宽列。点击其网格图标（**Column layout**），选择 **2/3 + 1/3** 预设并点击 **Save**. 3. 点击 **+** 在宽列中并选择 **Image** 从 **Content** 选项卡。点击 **Select Image**，勾选一张照片并点击 **Insert selected**。输入 **Alt attribute**：**SEO** 面板并点击 **Save**. 4. 点击 **+** 在窄列中并选择 **Button**。设置 **Title** 为 "Read more"，**Link** 到文章并保持 **Type**：**Primary**，然后点击 **Save**. 5. 点击 **+** 在窄列中再次并选择 **Text**；它落在按钮上方。输入文章标题为 **Heading 2**，在下方添加摘要并点击 **Save**。 ## 第 2 步：添加列表和侧边栏 1. 悬停版块并点击 **Add Section Below**。添加 **Row** 到它，用 **2/3 + 1/3** 预设。 2. 点击 **+** 在宽列中并打开 **Drupal Views** 选项卡。选择 **View: Blog (Blog)** 并点击 **Save**；它呈现您的文章。 3. 点击 **+** 在窄列中并打开 **Drupal Views** 选项卡。选择 **View: Blog (Featured posts)** 并点击 **Save**. 4. 点击 **+** 在窄列中再次并打开 **Drupal Blocks** 选项卡。选择 **Block: Forms: Search form** 并点击 **Save**；它落在精选文章上方。 ## 第 3 步：添加订阅横幅 1. 添加第三个版块，其中包含 **Add Section Below**。打开其 **More** > **Settings**，选择深蓝色 **Background**：**Style** 面板并点击 **Save**. 2. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Subscribe to the newsletter"， **Link** 为 `/newsletter` 和 **Type** 为 **Light**，然后点击 **Save**. 3. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "Stay updated" as **Heading 2** 及其下方关于订阅的一行。设置 **Font color** 为白色，在 **Style** 面板并点击 **Save**. ## 第 4 步：保存并预览 1. 点击 **Save** 在页面构建器工具栏上。 2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**. ## 进一步了解 视频中未展示： - **注册表单**：从 **Drupal Blocks** 选项卡添加订阅表单区块，代替按钮；参见 [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms) - **分类**：向侧边栏添加博客分类视图 - **侧边栏底色**：打开窄列的设置并给它浅灰色 **Background** 并在以下位置加一些内边距 **Style** 面板 ## 您会看到的内容 精选文章开启页面：左侧宽照片，其标题、摘要和 **Read more** 右侧的按钮。其下方文章填满宽列，搜索表单和精选文章在侧边栏。深蓝色横幅以下列内容收尾 **保持更新** 标题和 **Subscribe to the newsletter** 按钮。 ## 如果您看不到文章 - **Blog 视图不在 Drupal Views 选项卡中。** 该视图禁用，或页面构建器用户资料隐藏它。在以下位置启用 **Structure** > **Views** (`/admin/structure/views`），或请管理员在以下位置勾选 **Views** 在您的用户资料中。 - **列表列保持为空。** 该视图没有已发布文章可显示。在以下位置发布文章 **Content** > **Add content** > **博客文章**，然后重新加载页面。 - **搜索表单不在 Drupal Blocks 选项卡中。** 核心 **Search** 模块提供该区块。在以下位置打开它 **Extend** (`/admin/modules`). - **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。 ## 接下来做什么？ - [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms) 用于注册表单 - [Drupal Views 集成](/zh-hans/hc/documentation/learn-dxpr-builder/integrations/drupal-views) 用于配置视图 - [Drupal 区块集成](/zh-hans/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) 用于侧边栏区块 - [关于页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/about-page) 用于下一篇教程