내 웹 페이지에서 조각 식별자를 구성하는 방법

Question

이것은 유지 관행의 우수 사례/편의성과 관련이 있습니다.

나는 쉽게 탐색 할 수 있도록 여러 웹 페이지가 있습니다. 따라서, 조각 식별자 (내부 링크)를 사용하려고합니다. 여기 내 HTML의 일부의 예입니다 : H2 태그 수십있을 경우

<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> 

이 웹 페이지를 탐색 할 어려울 수 있습니다. 프래그먼트 식별자를 사용하는 사이드 메뉴 모음을 사용하여 '섹션 1', '섹션 2', '섹션 3'등으로 연결하려고합니다.

이제이 HTML 코드를 조각 식별자, 하지만이 코드를 변경하기 전에 어떻게해야하는지에 대해 몇 가지 추가 생각을하고 싶었습니다.

1) 수동 변경

<h2> NameOfH2 </h2> 

그런

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

에 수동으로 사이드 메뉴의 조각 식별자 링크를 추가 :

나는 몇 가지 옵션이 있습니다.

2) 수동 변경

<h2> NameOfH2 </h2> 

그런

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

에, 때마다 사이드 메뉴 표시 줄의 조각 식별자 링크 페이지가로드를 구축하기 위해 자바 스크립트를 사용합니다.

방법 2를 사용하고 싶습니다. 따라서 내 페이지에 더 많은 콘텐츠를 추가하면 자동으로 사이드 메뉴 모음에 표시되지만,이 작업을 수행해서는 안되는 이유가 있는지 알고 싶습니다.

또한 편집 할 태그가 많으며, HTML에 ID를 추가하는 방법에 대한 생각이 있다면 궁금합니다. 지금 당장은 각 페이지를 검토하고 각 태그를 편집하는 프로그램을 작성하는 것을 고려하고 있지만 솔루션이 이미 존재하는지 확인하고 싶습니다.

미리 도움 주셔서 감사합니다.

Answer 1

JavaScript가 활성화되었을 때만 내부 링크가 작동하는 것을 신경 쓰지 않는다면 JavaScript를 사용하여 TOC와 조각 식별자를 생성 할 수 있습니다. http://www.quirksmode.org/dom/toc.html

당신이 JS을 끄고 작업을해야 할 경우, 당신은 TOC 및 ID가 서버 측 모두를 생성 할 수 있습니다 :

PPK 그냥이하는 스크립트가 있습니다.