Drupal - 静态页面
Drupal - 创建基本页面(静态内容)
Section titled “Drupal - 创建基本页面(静态内容)”在 Drupal 中,通常被称为“静态页面”的内容通常是使用“基本页面(Basic page)”内容类型创建的。这种内容类型非常适合不经常更改的内容,例如“关于我们”、“服务”或“联系信息”页面。虽然 Drupal 是一个动态的 CMS(内容管理系统),但这些页面可以被大量缓存以实现快速访问,对于匿名用户而言,其速度可媲美真正的静态 HTML 文件。
让我们一步步创建 Drupal 中的“基本页面”。
创建基本页面的步骤
Section titled “创建基本页面的步骤”步骤 1:导航到内容创建页面
在 Drupal 后台管理菜单中,点击“内容(Content)”。
然后,点击“+ 添加内容(+ Add content)”按钮。
说明:从主管理导航栏中,选择“内容”,这通常会带你到 /admin/content 页面。在此页面上,找到并点击“+ 添加内容”按钮。
步骤 2:选择“基本页面(Basic page)”内容类型
你将看到可用内容类型的列表。点击“基本页面”。
说明:Drupal 提供了一个列表,如“文章(Article)”和“基本页面”。选择“基本页面”继续。
步骤 3:填写页面详细信息
将出现一个用于创建新的基本页面的表单。以下是关键字段:
- **标题(Title):**输入页面标题(例如,“关于我们公司”、“我们的服务”)。这通常会用作页面的主标题(H1)。
- **正文(Body):**这是主要内容区域。使用富文本编辑器(现代 Drupal 默认使用 CKEditor 5)添加文本、图像、链接和其他内容。你可以根据你的权限和需要添加的内容类型切换文本格式(例如,“基本 HTML”、“受限 HTML”、“完整 HTML”)。
- **URL 别名(URL alias,在 URL 路径设置下):**Drupal 会自动生成一个类似
/node/123的 URL。强烈建议设置一个用户友好的别名(例如,/about-us、/our-services)。确保你在别名字段本身中不添加开头的或结尾的斜杠(例如,输入about-us,而不是/about-us/)。Pathauto 模块(一个非常常见的贡献模块)可以根据模式自动生成别名。 - **菜单设置(Menu settings,可选):**如果你想在网站的某个菜单(例如,主导航)中添加指向此页面的链接,可以勾选“提供菜单链接(Provide a menu link)”,输入“菜单链接标题(Menu link title)”,然后选择“父项(Parent item)”。
- **发布选项(Publishing options):**默认情况下,新内容是“已发布(Published)”的。你可以取消勾选此选项以将其保存为草稿。你可能还有其他选项,如“推广到首页(Promoted to front page)”或“置顶列表(Sticky at top of lists)”。
例如,“关于我们”页面的设置:
- 标题:
关于我们公司 - 正文:
[关于公司历史、使命和价值观的详细信息] - URL 别名:
about-our-company
步骤 4:保存页面
填写所有必要信息后,点击表单底部的“保存(Save)”按钮。
说明:保存后,你通常会被重定向到网站前台查看新创建的页面。
查看你的新页面
Section titled “查看你的新页面”保存后,你可以导航到你设置的 URL 别名(例如,your-site.com/about-our-company),或者在“内容”列表(/admin/content)中找到该页面。如果你添加了菜单链接,它应该会出现在指定的菜单中。
真正的静态网站生成(高级)
Section titled “真正的静态网站生成(高级)”对于需要生成真正的静态 HTML 文件的场景(例如,为了实现极致性能、安全性或部署到简单托管环境),Drupal 可以用作静态网站生成器(SSG),结合以下工具:
- **Tome:**一个模块,允许你生成 Drupal 网站的完全静态 HTML 版本。
- **解耦方法(Decoupled Approach):**将 Drupal 用作无头 CMS(headless CMS),并使用单独的静态网站生成器(例如 Gatsby, Next.js, Hugo)通过 API 获取内容并生成静态文件。
然而,对于大多数常见用例,Drupal 的内部缓存和“基本页面”内容类型足以创建快速加载的“类似静态”页面。
更多资源:
- Drupal Content Authoring Guide: https://www.drupal.org/docs/user-guide/en/content-chapter.html
- Pathauto module: https://www.drupal.org/project/pathauto