# 链接

> 内部链接、外部链接和锚点链接、页面 URL 以及基础路径。

每个页面都在它自己的文件夹 URL 上提供：`guides/build.html` 对应 `/guides/build/`，`index.html` 则在其所在文件夹提供， `guides/index.html` 对应 `/guides/`。与 Livemark 一样，每个文件夹名和文件名都会转换为 slug：`User Guide/Getting Started.html` 对应 `/user-guide/getting-started/`。可以按 URL 链接页面，也可以按文件链接：指向页面文件的链接，无论是相对的还是根相对的，都会被改写为该页面的 URL，其他相对 URL 则从源文件所在位置解析。

## 内部链接

链接到文档中的其他页面，可以相对于根目录，也可以相对于当前页面：

**HTML**

```html
<a href="/introduction/">Introduction</a>
<a href="headings.html">Headings</a>
```

**Markdown**

```md
[Introduction](/introduction/)
[Headings](headings.html)
```

渲染为：[简介](/zh/introduction/)

在 `htmlpress.yaml` 中设置 `base` 后，构建中的每个根相对 URL（位于 `href`、`src`、`srcset`、`poster` 和 `action` 中，无论是在页面、布局还是配置的 HTML 里）都会加上它作为前缀：写 `/guide/`，站点就会链接到 `/repo/guide/`。相对 URL 和绝对 URL 保持不变，页面自身 CSS 中的 `url()` 也一样。`start` 和 `preview` 同样在基础路径下提供站点，并把 `/` 重定向到那里。

导航把一个文件夹的页面归到它的 `index.html` 之下，组名取自该页面的标题。组名链接到该索引页，旁边的箭头可以折叠该组。没有 `index.html` 的文件夹不构成分组：其页面与根目录的页面一起位于顶层。

## 外部链接

链接到外部资源：

**HTML**

```html
<a href="https://github.com">GitHub</a>
```

**Markdown**

```md
[GitHub](https://github.com)
```

渲染为：[GitHub](https://github.com)

## 锚点链接

通过 ID 链接到当前页面的某个标题：

**HTML**

```html
<a href="#internal-links">See Internal Links</a>
```

**Markdown**

```md
[See Internal Links](#internal-links)
```

渲染为：[参见内部链接](#内部链接)

其他页面上的标题就是该页 URL 加上 ID： [自定义标题 ID](/zh/authoring/headings/#custom-ids)。ID 的生成方式见 [标题](/zh/authoring/headings/)。

## 自动链接

正文中的裸 URL 会在构建时变成链接，与 GitHub 风格的 Markdown 一样： `http://` 和 `https://` URL、`www.` 地址以及电子邮件地址。末尾的标点留在链接之外。

**HTML**

```html
<p>See https://htmlpress.dev, or mail team@example.com.</p>
```

**Markdown**

```md
See https://htmlpress.dev, or mail team@example.com.
```

渲染为：详见 <https://htmlpress.dev> ，或发邮件至 <team@example.com> 。

链接、代码、代码块和终端中的文本保持原样，任何带 `data-literal` 的元素也是如此，适用于必须显示原始 URL 的正文：

**HTML**

```html
<p data-literal>Type https://htmlpress.dev in the address bar.</p>
```

**Markdown**

```html
<p data-literal>Type https://htmlpress.dev in the address bar.</p>
```