返回到支持 内容和媒体 创建页面跳转

创建页面跳转

页面跳转(也称为锚点链接或跳转链接)是指您点击某个链接,就会立即在一个篇幅较长的页面中向上或向下移动。下面的“目录”就是页面跳转的一个例子。

为什么使用页面跳转?

页面跳转是将访客链接到页面某一部分的好方法。在长页面中,站点访客可以通过点击从页面的一部分跳转到另一部分。

例如,假设您在某篇文章的顶部添加了一个区域名称列表。您可以将各个名称链接到该文章后面的相关部分,以便访客跳转到他们感兴趣的特定信息的部分。然后,您可以将读者直接链接回文章开头包含所有部分的原始列表中。

💡

您还可以使用内容区块目录自动创建始以文章/页面所有标题为起点的页面跳转。

在区块编辑器中创建页面跳转

第一步:创建锚

第一步是选择您希望读者在点击页面跳转后到达的区域。为此,我们需要所谓的“锚”。您可以将锚添加到内容中的任何区块

  1. 点击您想要添加锚点链接的区块。此操作将打开右侧边栏中的区块设置。如果没有看到边栏,请点击右上角的“齿轮”图标(发布/更新按钮旁边)。
可在边栏中找到区块设置。
可在边栏中找到区块设置。
  1. 在右侧边栏的区块设置中,点击高级
  2. 输入一个词,它将成为 HTML 锚字段中的链接。确保使用没有在页面其他地方使用过的独特锚文本。如欲使用多个字词,请在这些字词之间添加连字符 (-),如下所示:two-words
在“HTML 锚”部分中添加两个带连字符的字词以创建页面跳转。
第二步:链接到锚

下一步,我们将创建页面跳转链接。您的访客将点击此链接,以到达您第一步所创建的部分。

  1. 输入一些文本,或添加图片按钮,这些是您希望读者进行点击的内容。
  2. 点击选中该文本、图片或按钮,并从区块的工具栏中选择链接选项。链接选项是一个看起来像实际链条的图标,如突出显示部分所示:
  3. 输入您第一步所创建的 HTML 锚,以话题标签 (#) 符号开头。例如,假设您创建了一个名为 create-a-page-jump 的锚,您将链接到 #create-a-page-jump
  4. 点击箭头图标或按键盘上的 Enter/Return 键,以保存链接。现在,当访客点击您创建的链接时,他们将转到您在创建页面跳转时添加 HTML 锚的部分。

⚠️

页面跳转在您预览站点时无法使用,但您可以在发布文章/页面后对其进行测试。

区块编辑器中的返回顶部

要创建返回页面顶部的跳转链接:

  1. 在页面顶部,添加您选择的任何区块为其创建锚
  2. 在页面下方,创建指向页面顶部初始锚区块的链接

在经典编辑器中创建页面跳转

您需要使用目标文本链接在经典编辑器中创建页面跳转。访客点击该链接后即可跳转到页面中含有目标文本的部分。

第一步:创建 HTML ID
  1. 可视化编辑器切换到文本编辑器。
如何添加 HTML ID 以在经典编辑器中创建页面跳转。

  1. HTML ID 添加到预期的目标文本中,或者添加到读者在点击页面跳转链接后将会到达的位置。目标文本书写形式如下:

<h3 id="unique-identifier">I am the target text.</h3>

将上方 HTML 代码中的 unique-identifier I am the target text 替换为您自己的内容。

h3 表示 3 级标题。您可以按需将其更改为其他标题等级,甚至更改为段落。了解有关使用 HTML 的更多信息

💡

确保 HTML ID 中没有空格,使用连字符 (-) 来分隔字词。此外,确保为您创建的每个目标使用不同的 HTML ID。

第二步:链接到 HTML ID

创建 HTML ID 后,您可以按照以下步骤创建指向它的链接。访客在点击该链接后即可到达您第一步所创建的部分。

  1. 文本编辑器切换到可视化编辑器。
  2. 选中通过链接可直接跳转到的文本。
  3. 点击工具栏中的链接图标。
  4. 在出现的方框中输入话题标签 (#) 符号,后跟您第一步所创建的目标 HTML ID 名称,如下所示: #unique-identifier
  5. 点击箭头图标或按键盘上的 Return/Enter 键,以保存链接。
如何在经典编辑器中创建页面跳转链接。
在经典编辑器中的返回顶部

您可以按照以下说明在经典编辑器中为文章或页面顶部的跳转链接创建一个不可见的目标:

  1. 可视化编辑器切换到文本编辑器。
  2. 将此代码 <div id="top"></div> 添加到页面中所有其他 HTML 的上方。这将在您的文章或页面顶部创建一个不可见的目标,其 HTML IDtop
如何在经典编辑器中为文章或页面顶部的跳转链接创建一个不可见的目标。
  1. 文本编辑器切换回可视化编辑器。
  2. 选中通过链接可直接跳转到的文本。
  3. 点击工具栏中的链接图标。
  4. 在出现的方框中,输入话题标签 (#) 符号,后跟您第二步所创建的目标 HTML ID 的名称,如下所示: #top
  5. 点击箭头图标或按键盘上的 Return/Enter 键,以保存链接。
如何在经典编辑器中创建页面跳转链接。

跳转至其他页面或文章上的锚

页面跳转不必只用于页面内的跳转。您可以使用页面跳转从一个页面链接到另一个页面上的特定区域。

当您查看使用页面跳转创建的页面的实时版本时,可以点击页面跳转链接,您将看到浏览器栏中的页面地址附加了跳转链接文本。

示例:

现在,您有了目标位置的 URL,可将其用于从站点上的任何其他页面或文章链接到该目标位置,格式如下:

https://yourgroovydomain.com/example/#unique-identifier

如何使用页面跳转从一个页面链接到另一个页面上的特定区域。

导航菜单中的页面跳转

您可以从导航菜单创建链接到页面特定部分的页面跳转。对于只能不停滚动以查看主页内容的站点来说,这十分常见。借助页面跳转,访客可以更容易查看他们想要的主页部分。

  1. 第一步是创建锚(如果使用区块编辑器)添加 HTML ID(如果使用经典编辑器)。这是将要跳转至的地方。
  2. 在菜单设置中,使用自定义链接选项添加新的项目。
  3. 文本字段中,编写您设想的菜单项名称。
  4. URL 字段中,在锚的前面加上话题标签 (#) 符号。
如何使用自定义链接选项将页面跳转添加到导航菜单。
在菜单中添加页面跳转

请记住,像 #my-anchor 这样的页面跳转只能在锚所在的页面上正常运行。如果您站点上的页面不止一个,且您想要确保页面跳转在所有页面都能正常运行,请在锚前加上完整的页面 URL,如下所示:

https://yourgroovydomain.com/example-page/#my-anchor

将页面跳转创建为脚注

查看如何使用页面跳转创建脚注的指南。

Copied to clipboard!