HTML 슬롯으로 목차 자동 생성 방법
목차 크게 예를 들어, 많은 웹 사이트의 사용자 경험을 향상시킬 수 있습니다 문서화 사이트 또는 온라인 백과 사전 Wikipedia처럼. 잘 디자인 된 목차 페이지 개요 사용자가 관심있는 섹션으로 빠르게 이동할 수 있도록 도와줍니다..
전통적으로 HTML 또는 JavaScript로 목차를 만들 수 있지만 최근에 표준화 된 HTML 슬롯은 두 사람 사이의 중간 길. HTML 슬롯 웹 표준으로 웹 페이지에 자리 표시 자 추가 나중에 내용을 동적으로 채우다..
언제 사용 하는가?
배치 할 수 있습니다.
이 기술을 사용하면 목차의 HTML 소스 코드를 수동으로 만들어야합니다. JavaScript는 목차의 텍스트 내용을 자동으로 생성합니다., 페이지의 표제 또는 부제목에 기초.
목차를 HTML에 표시하고 싶지 않으면 자바 스크립트로 레이아웃과 콘텐트를 생성한다..
1. HTML 만들기
목차 (목차)의 HTML 소스 코드는 내부 꼬리표. 내부의 코드 JavaScript에 의해 문서에 추가 될 때까지 렌더링되지 않습니다. TOC는 자리 표시 자, 개최
그만큼 이름 각각의 속성 슬롯 문서의 해당 표제와 부제목의 속성.
아래에서 샘플 HTML Velociraptor (라틴어로 '스위프트 seizer'를 의미)는 ... Velociraptor는 성인과 함께 중형 dromaeosaurid였습니다 ... dromaeosaurids의 화석은 원시보다 ... 미국 자연사 박물관 탐험 중에 ... Velociraptor는 Eudromaeosauria의 파생 된 하위 집단 인 ...의 구성원입니다. 1971 년에 발견 된 "Fighting Dinosaurs"표본은 ... 2010 년, Hone과 동료들은 논문을 출판했습니다 ... Velociraptor는 어느 정도까지 온혈했습니다. Velociratoptor mongoliensis 두개골이 두개의 곰을 ... 보시다시피 각 제목은 독특한 그리고, 여기에 목차의 HTML 코드, 내부 위의 두 코드 스 니펫에서 어울리는 TOC를 추가 할 자바 스크립트 코드를 살펴보기 전에 해당 이제는 다음과 같은 스크립트를 추가합니다. TOC를 위의 코드 스 니펫 사본을 만듭니다. 그런 다음 복제 된 CSS 카운터를 재설정하면 다음은 출력의 스크린 샷입니다. 네가 원한다면 목차 제목을 해당 제목 및 부제목에 연결 추가하여 Velociraptor (라틴어로 '스위프트 seizer'를 의미)는 ... Velociraptor는 성인과 함께 중형 dromaeosaurid였습니다 ... dromaeosaurids의 화석은 원시보다 ... 위에서 볼 수 있듯이 그리고 목차 안의 제목은 고정되어 있습니다.: 위의 여분의 줄에서 모두 해당 스크린 샷보기 링크 된 목차 이하: 이 게시물에 사용 된 코드를 Github Repo에서 체크 아웃, 다운로드 또는 포크 할 수 있습니다.. 일부 표목과 소제목이있는. 그만큼
기술
깃털
발견의 역사
분류
고생물학
청소 행동
대사
병리학
슬롯 값. 꼬리표.
슬롯 과 이름 속성들 표제와 2. 제목 매기기
문서에 CSS 카운터를 사용하여 제목에 일련 번호 추가. 기사 counter-reset : heading; article h2 :: before 카운터 증가 : 표제; 내용 : '0'카운터 (제목) ':';
카운터 리셋 규칙은 요소에 속합니다. 모든 직위의 부모 슬롯 속성 (이것은 우리 코드의 요소).3. 목차를 문서에 넣습니다.
꼬리표, 내부 컨테이너. templateContent = document.querySelector ( 'template'). content; article = document.querySelector ( 'article') .cloneNode (true); appendChild (templateContent.cloneNode (true)); article.attachShadow (mode : '닫힌'). document.querySelector ( '# toc'). appendChild (article);
과 그림자 DOM 트리를 첨부합니다.. 또한 우리 사본을 추가하십시오. 님의 내용 이 음영 DOM 트리에. 에 삽입된다. 요소는 지금 TOC에도 나와 있습니다., 그러나 TOC 안에 자리 표시자를 찾은 표제와 부제목 만 표시됩니다.. 신체 또는 HTML 요소 대신에 조, 카운터는 TOC 내부 표제 목록도 계산했을 것입니다. 그래서 당신은 표제의 직계 부모에서 카운터를 재설정하십시오..
4. 하이퍼 링크 추가
신분증 해당 TOC 텍스트를 제목에 고정하고 고정해야합니다. 반복적으로 제거하다 신분증 복제 된 값 조.
기술
깃털
신분증 속성은 기사의 모든 표제와 소제목에 추가됨..
신분증 속성은 복제 된 기사에서 삭제됨 전에 그림자 DOM 트리를 첨부. templateContent = document.querySelector ( 'template'). content; article = document.querySelector ( 'article') .cloneNode (true); appendChild (templateContent.cloneNode (true)) :이 속성을 true로 설정하면이 속성이 true로 설정됩니다. )); document.querySelector ( '# toc'). appendChild (article);
Github 데모
