Github Markdown 锚点仅链接到页面顶部

Question

我不确定这个地方是否适合询问 Github wiki markdown 问题。如果是的话我会把它删除。

所以，我正在为存储库编写一个 wiki 页面，并且我一直在尝试添加锚点。然而，锚点似乎只导致重新加载页面，或者导致页面顶部。我很确定我的语法是正确的，但我不知道出了什么问题。

我有一个例子：

链接为：

<a name="#dinpanel"></a>

然后我通过以下方式访问它：

[text to show](myrepositoryweburl#dinpanel)

另外，如果我只是在 URL 中输入“myrepositoryweburl#dinpanel”，它仍然会加载到页面顶部。我想知道 Markdown 是怎么回事。任何帮助将不胜感激！

Answer 1

使用 Markdown 标头而不是原始 HTML 锚点。

如github/markup中所述，Markdown 转换为 HTML 后...

HTML 已被清理，积极删除可能伤害您和您的亲属的内容，例如

script

标签、内联样式和

class

或

id

属性。

虽然没有具体提及

name

属性，但

id

属性是并且它们具有类似的功能。链接到 sanitation script 的文档的之前版本，该脚本不包括已批准属性白名单中的

name

属性。换句话说，GitHub 的清理程序正在删除您的

name

属性。

事实上，如果您使用浏览器的

view source

功能，我希望您会发现该页面的 HTML 中缺少

name

属性。然而，一切并没有失去。如果您注意到，步骤 4 包括（已添加重点）：

HTML 通过 html 管道中的其他过滤器传递，这些过滤器添加了特殊的酱料，例如表情符号、任务列表、命名锚、CDN 图像缓存和自动链接。

换句话说，文档中的每个标题（

h1

、

h2

、...

h6

）都被分配了一个唯一的

id

。因此，您可以指向分配给任何标头的

id

，您将获得您想要的行为。

# Din Panel

...

[link](#din-panel)

请注意，要生成

id

，所有字符都将转换为小写 ASCII 字符，删除所有标点符号（连字符和空格除外），并将所有空格替换为连字符 (

-

)。最后，如果需要，会在末尾附加一个递增数字，以确保每个

id

都是唯一的。

如果您无法正确猜测自动生成的

id

，您可以随时在 GitHub 上查看生成的页面，当将鼠标悬停在标题上时，文本旁边会出现一个锚点图标。该图标将包含指向该特定标题的链接，并带有正确的

id

。或者，您可以使用浏览器的

view source

功能（或

inspect

开发人员工具）来确定分配给标头的

id

。

Answer 2

GitHub wiki 删除了您可能嵌入 HTML 中的所有“id=”标签。这意味着您的页面内链接将不起作用，除非您链接到 GitHub wiki 自动生成的 ID。

例如，在 GitHub wiki 中做脚注：

首先，为 wiki 页面的每个部分使用标题。该标题将自动生成一个 ID，您可以通过预览页面并将鼠标光标稍微悬停在标题左侧来查看链接。转换是可预测的：“A Heading Like This”变成相对 URL“

#a-heading-like-this

”。

在您的 wiki 文档中，链接到带有内联 HTML 的脚注，如下所示，每个脚注都有自己的编号，从 1 开始：

<sup><a href="#93">[93]</a></sup>

在维基页面的末尾，像这样排列脚注，每个脚注都指向脚注链接所在的标题：

***

###### [1]
Here is the text of footnote number 1 [↩](#a-heading-like-this)

###### [2]
Here is the text of footnote number 2 [↩](#a-heading-like-this)

Answer 3

我按如下方式使用 Markdown 作为页面内的锚点。

链接为：

<a id="idtext"></a>  

然后我通过以下方式访问它：

[text to show](#idtext)

Answer 4

我可能是错的，但我认为你的问题可能源于GitHub自动将a标签的name属性更改为

content-user-originalName

（其中originalName是a标签的href属性中指定的名称）。

举个例子，

<a name="dinpanel"></a>

需要被引用为

<a href="#content-user-dinpanel">text to display</a>

或

[text to display](#content-user-dinpanel)