内部链接

¥Internal links

你可以创建从一张幻灯片到另一张幻灯片的链接。首先为目标幻灯片添加一个唯一的 id 属性。接下来,你可以创建一个带有 #/<id> 格式 href 的锚点。以下是一个完整的工作示例:

¥You can create links from one slide to another. Start by giving your target slide a unique id attribute. Next, you can create an anchor with an href in the format #/<id>. Here's a complete working example:

<section>
	<a href="#/grand-finale">Go to the last slide</a>
</section>
<section>
	<h2>Slide 2</h2>
</section>
<section id="grand-finale">
	<h2>The end</h2>
	<a href="#/0">Back to the first</a>
</section>

编号链接

¥Numbered Links

它还可以根据幻灯片索引链接到幻灯片。编号链接的 href 格式为 #/0,其中 0 表示水平幻灯片编号。要链接到 垂直幻灯片,请使用 #/0/0,其中第二个数字是垂直幻灯片目标的索引。

¥It's also possible to link to slides based on their slide index. The href format for an numbered link is #/0 where 0 is the horizontal slide number. To link to a vertical slide use #/0/0 where the second number is the index of the vertical slide target.

<a href="#/2">Go to 2nd slide</a>
<a href="#/3/2">Go to the 2nd vertical slide inside of the 3rd slide</a>

导航链接

¥Navigation Links

你可以添加相对导航链接,其工作方式类似于内置方向控制箭头。通过将以下类之一添加到 .reveal 容器内的任何可点击 HTML 元素即可实现此操作。

¥You can add relative navigation links that work similarly to the built in directional control arrows. This is done by adding one of the following classes to any clickable HTML element inside of the .reveal container.

<button class="navigate-left">Left</button>
<button class="navigate-right">Right</button>
<button class="navigate-up">Up</button>
<button class="navigate-down">Down</button>

<!-- Previous vertical OR horizontal slide -->
<button class="navigate-prev">Prev</button>

<!-- Next vertical OR horizontal slide -->
<button class="navigate-next">Next</button>

当导航元素是基于当前幻灯片的有效导航路由时,每个导航元素都会自动被赋予一个 enabled 类。例如,如果你在第一张幻灯片上,则只有 navigate-right 会具有 enabled 类,因为无法向左导航。

¥Each navigation element is automatically given an enabled class when it's a valid navigation route based on the current slide. For example, if you're on the first slide only navigate-right will have the enabled class since it's not possible to navigate towards the left.

灯箱链接

¥Lightbox Links

如果你链接的网站支持 iframe 嵌入,你可以使用 data-preview-link 属性在 iframe 灯箱中打开链接。这样,你无需离开幻灯片即可显示外部网站。在 Lightbox 文档 中了解更多信息。

¥If the website you're linking to supports iframe embedding, you can use the data-preview-link attribute to open the link in an iframe lightbox. This way you can show an external website without leaving the slide deck. Learn more in the Lightbox docs.

<a href="https://hakim.se" data-preview-link>Open Link</a>

请注意,此功能仅在链接允许嵌入时才有效。许多网站禁止通过 x-frame-optionsContent-Security-Policy 嵌入。

¥Note that this will only work if the link allows for embedding. Many websites prevent embedding via x-frame-options or Content-Security-Policy.