당신의 사이트에 간단한 목록을 추가합니다

카탈로그의 목표는 독자에게 글 내용의 안내서와 미리보기를 제공하고 내용을 쉽게 조회할 수 있는 방식을 제공하는 것이다.이것은 당신의 내용이 이미 의미 구조를 가지고 있다고 가정합니다.

무엇이 어의 구조입니까?

어의 구조는 무슨 뜻입니까?철학적으로 말하자면, 이것은 너의 내용이 의미 있는 방식으로 조직되었다는 것을 의미한다.실제로 이것은 당신의 내용이 제목 라벨을 사용하는 제목으로 구성되어 있다는 것을 의미한다. (예: <h2>이 제목들은 문장의 중요한 부분을 지적하고 아무도 좋아하지 않는 거대한 텍스트 벽을 깨뜨렸다.
제목 라벨은 h1로 시작하여 보통 문장의 제목으로 보존하고 아래로h6.최적 실천 규정h3 라벨 앞에는 반드시 h2 라벨이 있어야 하며 각 부제목 앞에는 항상 상급 제목이 있어야 한다.다시 말하면 h2 라벨은 문장의 주요 부분을 정의하고 h3 라벨은 h2 부분의 하위 부분을 정의한다.다음 예는 다음과 같습니다.

<h1>Food: A Tasty Article</h1>

    <h2>Fruits: Nature's Candy</h2>

        <h3>Oranges: Truth in Advertising</h3>  

        <h3>Apples: How Do You Like 'Em?</h3>

            <h4>Red Delicious: False Advertising</h4>

    <h2>Vegetables of Contents</h2>

        <h3>Lettuce End This Example</h3>

의미 구조 예

고급 솔루션

내가 제공한 디렉터리를 만드는 해결 방안은 매우 간단하다.그것은 임무를 완성했다.

그러나 만약에 카탈로그를 찾고 있다면, 글의 위치를 독자에게 보여주고, 여러 변두리 사례에서 시험과 테스트를 하고, 다른 일을 할 수 있는 카탈로그를 보십시오. tocbot 당신의 모든 TOC 수요를 알아보십시오.

단순한 솔루션

나의 실현은 문장의 모든 제목을 찾아서 이루어진 것이다.코드는 내용 용기에 클래스가 있다고 가정합니다. .article이 클래스를 실제 클래스로 업데이트해야 합니다.

const articleContainer = document.querySelector('.article');
const headings = articleContainer.querySelectorAll('h2, h3, h4, h5, h6');

제목 선택
글의 제목이 두 개보다 적으면 스크립트가 중단되고 디렉터리를 만들지 않습니다.여기의 가정은 단편 문장에 TOC가 있기를 원하지 않고, 긴 문장에 두 개 이상의 제목이 있다는 것이다.이러한 행위가 필요하지 않은 가장자리가 있을 수 있습니다. 이 경우, 사용자의 요구를 충족시키기 위해if검사를 수정할 수 있습니다.

if (headings.length > 2) {
    // Create table of contents
}

헤더 수량 확인

전환 생성

다음에 우리는 브라우저의 원본 요소<details>를 이용하여 예쁘고 크로스 브라우저가 호환되는 드롭다운 전환을 만듭니다.details 요소는 <summary> 표시를 포함하고, 이 표시에서 전환을 닫아도 표시된 텍스트를 포함할 수 있습니다.이 아이디어는 목록을 필요로 할 때까지 숨기는 것이지, 특히 당신의 TOC가 긴 상황에서 불필요하게 방해하는 것이 아니다.
스타일 설정을 허용하고 텍스트로 summary 요소를 채운 다음 summary 표시에 details 클래스를 추가했습니다.

const details = document.createElement('details');
details.setAttribute('class', 'toc-content'); // You can use any class name you want
const summary = document.createElement('summary');
summary.innerHTML = '<strong>Table of Contents</strong>';
details.append(summary);

세부 전환 생성

TOC 구축

다음 단계는 글의 제목을 순환해서 디렉터리에 추가하는 것입니다.이 단계에서 네 가지 일이 발생할 것이다.

제목에서 텍스트를 추출하여 p 태그

의 디렉토리에 추가합니다.

우리는 제목 단계에 따라 디렉터리 요소에 클래스를 분배한다

우리는 디렉터리 요소에 대한 링크를 추가하여 독자를 글의 이 부분으로 안내했다

페이지에 TOC 추가

headings.forEach((el) => {
    const p = document.createElement('p');

    // Add a class to the p tag with the heading like "toc-h2"
    p.setAttribute('class', 'toc-' + el.tagName.toLocaleLowerCase());
    const a = document.createElement('a');
    a.setAttribute('class', 'toc-link');
    a.textContent = el.textContent;

    // Add a link to the section in the text
    a.href = '#' + el.id;
    p.append(a);
    details.append(p);
  });

// Add the table of contents to the beginning of the article  
articleContainer.prepend(details);

디렉토리를 만들고 페이지에 추가
👍
TOC는 페이지를 로드할 때 동적으로 작성되므로 컨텐트의 변화에 따라 달라집니다.일부분을 추가하거나 삭제하시겠습니까?TOC는 이를 자동으로 반영합니다.무미건조한 편집은 없다!

내 제목에 아이디가 없으면 어떡해?

TOC를 만들려면 제목에 앵커 마크<a>의 대상으로 사용되는 ID가 있어야 합니다.많은 CMS에서 자동으로 이 ID를 생성합니다.만약 네가 없다면 걱정하지 마라. 해결 방법은 매우 간단하다.

headings.forEach((el) => {
    // Generate IDs if they don't exist
    el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g,"-");

    // Rest of the loop
}

ID 생성
여기서 제목에 ID가 있는지 확인합니다. 있는 경우 ID를 사용합니다.그렇지 않으면, 우리는 정규 표현식을 사용하여 모든 비단어 문자 (예를 들어 빈칸) 를 연결 문자로 바꿉니다.이러한 ID는 TOC에서 탐색할 수 있도록 heading 요소에 추가됩니다.

요약: 코드

const articleContainer = document.querySelector(".article");

const headings = articleContainer.querySelectorAll("h2, h3, h4, h5, h6");

if (headings.length > 2) {
   // Generate IDs if they don't exist - optional
   el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g,"-");

  const details = document.createElement("details");
  details.setAttribute("class", "toc-content"); // You can use any class name you want
  const summary = document.createElement("summary");
  summary.innerHTML = "<strong>Table of Contents</strong>";
  details.append(summary);

  headings.forEach((el) => {
    el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g,"-"); // Create IDs if missing - optional
    const p = document.createElement("p");

    // Add a class to the p tag with the heading like "toc-h2"
    p.setAttribute("class", "toc-" + el.tagName.toLocaleLowerCase());
    const a = document.createElement("a");
    a.setAttribute("class", "toc-link");
    a.textContent = el.textContent;

    // Add a link to the section in the text
    a.href = "#" + el.id;
    p.append(a);
    details.append(p);
  });

  // Add the table of contents to the beginning of the article
  articleContainer.prepend(details);
}

전체 TOC 코드
결과 TOC 태그는 다음과 같습니다.

<details class="toc-content">
    <summary>
        <strong>Table of Contents</strong>
    </summary>
    <p class="toc-h2">
        <a class="toc-link" href="#heading-id">Heading Name</a>
    </p>
    <p class="toc-h3">
        <a class="toc-link" href="#heading-id-2">Heading Name 2</a>
    </p>
    <!-- And so on -->
</details>

TOC의 예제 태그

디자인 TOC 스타일

이 TOC 성대의 마지막 체리는 그것을 정형화하는 것이다.물론 사이트의 심미에 부합하도록 할 수 있지만, 아래에 기본 양식을 공유합니다.TOC의 글꼴 크기와 행 높이를 줄이고 제목 수준에 따라 들여쓰기를 추가합니다.

/* Reduce the size and line-height of the TOC */
.toc-content {
  font-size: .8rem;
  line-height: 1.1;
  cursor: pointer;
}

/* Indent headings based on their level */
.toc-h3 {
  padding-left: 1em;
}

.toc-h4 {
  padding-left: 2em;
}

.toc-h5 {
  padding-left: 3em;
}

.toc-h5 {
  padding-left: 4em;
}

TOC 스타일 설계

데모

증거는 푸딩에 있다. 만약 당신이 다른 곳에서 읽는다면 top of this page 또는 this article's source의 목록을 참고하십시오.너도 the source code 내 사이트에서 사용하는 TOC를 볼 수 있다.
내 디렉터리에서 너의 디렉터리로😍