如何在我的网页结构片段标识符

Question

这更像是一个最佳实践/易于维护的问题。

我有几个网页，我想使浏览更容易。因此，要做到这一点，我将使用片段标识符(内部链接)。下面是我的一些HTML示例:

<article>
     <h1>Name of WebPage</h1>
          <h2>Section One</h2>
               Here is the content of my Section one.
          <h2>Section Two</h2>
               Here is the content of my Section two.
          <h2>Section Three</h2>
               Here is the content of my Section three.
          ....(may have additional h2 sections)
</article>

如果有很多h2标签，这些网页很难导航。我希望使用一个侧面菜单栏，利用片段标识符链接到"第一节"，"第二节"，"第三节"等。

现在，我需要转换这个html代码来使用片段标识符，但在我去改变这个代码之前，我想得到一些关于我应该如何做到这一点的额外想法。

我有两个选项:

1)手动更改

<h2> NameOfH2 </h2>   

<h2 id='NameOfH2'> NameOfH2 </h2>

然后，在侧菜单中手动添加片段标识符链接。

2)手动更改

<h2> NameOfH2 </h2>

<h2 id='NameOfH2'> NameOfH2 </h2>

然后，每次页面加载时，使用Javascript构建侧边菜单栏的Fragment Identifier链接。

我想使用方法2，这样当我添加更多的内容到我的页面，它会自动显示在侧边菜单栏，但我想看看是否有任何理由我不应该这样做。

另外，我有很多标签要编辑，不知道你们是否有什么想法，我应该如何添加id到html。现在，我正在考虑编写一个程序来浏览每个页面并编辑每个标签，但我想看看是否已经存在解决方案。

提前感谢您的帮助!

Answer 1

如果您不介意内部链接只在启用JavaScript时工作，您可以使用JavaScript生成TOC和片段标识符。

PPK有一个脚本就是这样做的:http://www.quirksmode.org/dom/toc.html

如果你需要它在JS关闭的情况下工作，你可以同时生成TOC和id服务器端。