在您的博客页面上创建目录

为什么目录很重要

添加目录 (TOC) 有助于读者和搜索引擎更好地理解您的内容结构。

• 提高可读性： 读者可以快速浏览你的文章，直接跳转到他们最感兴趣的部分。
• 增强用户体验： 特别是对于长篇博客文章来说，目录可以保持页面布局清晰有序，便于浏览。
• 提升搜索引擎优化效果： 搜索引擎使用目录中的锚链接来了解您的页面层级结构，这可以提高您出现在富媒体摘要中的几率。
• 降低跳出率： 如果游客能够轻松找到所需信息，他们就更有可能停留更长时间。

如何在 GemPages 中创建目录？

在本文中，我们将逐步讲解如何为您的博客页面构建带有 H2 标题的下拉目录。

步骤 1：访问 GemPages 编辑器

• 从 Shopify 管理员，转到 GemPages 构建器 > 前往 > 博客文章.

• 点击要添加目录的目标博客文章。

如果您还没有创建任何博客文章，请点击 建立新页面 建造一个。

选择 用例 至 博客文章. 然后，您可以从头开始（使用空白博客文章模板）进行完全自定义，或者使用 GemPages 预先设计的模板来节省时间。

您将被引导至 GemPages 编辑器。

步骤 2：向博客页面添加手风琴元素

在编辑器中输入后，使用搜索栏查找 手风琴元素.

将元素拖放到博客文章中的所需位置。

点击该元素即可打开其设置选项卡。在下方 物品管理 将鼠标悬停在“手风琴 2”和“手风琴 3”上，然后单击 箱子 图标将其删除。

找到 Arccodion 1 并将其名称更改为“目录”。

在下面 个人设置 在该选项卡中，您可以自定义“目录”的可见性，以符合您的品牌形象。

步骤 3：在手风琴内添加文本块元素

拖放 文本块元素 在折叠面板“目录”下。

然后，修改文本以使其与标题一致。

在下面 个人设置 点击选项卡，即可根据喜好修改文本样式、大小、背景等。

满意后，点击该元素并复制，以节省时间和精力。每个文本块元素都将链接到一个二级标题。

例如，我们有 5 个二级标题，然后我们将有 5 个文本块。

现在，逐一更改每个文本，使其与每个标题相匹配。

步骤 4：为每个标题 2 创建交互

点击每个文本块元素，导航至 高级选项卡，然后向下滚动到 互动 部分。

点击 创建 打开 交互设置 左侧边栏面板。在“1. 从……开始”部分，设置 日期 至 点击元素.

在下面 ”2. 然后，做这些”，点击 在页面上选择目标然后，在设计区域中选择目标标题并选择 更改 至 滚动到.

对剩余的文本块重复相同的步骤，使每个文本块都链接到其对应的标题。

步骤 5：预览、保存并发布您的博客页面

点击 预览交互 预览目录。

满意后，您可以保存更新并点击。 发布 重新发布您的博客文章，并添加目录。

结果：