자동화 된 목차로 마크 다운

이 튜토리얼은 긴 형식 마크 다운 컨텐츠에 대한 대화식 목차를 작성하는 것을 보여줍니다. Markdown Parsing, Active Section Detection 용 교차로 관찰자, 부드러운 스크롤 애니메이션 및 애니메이션 목록 업데이트를위한 Vue.js 전환을 포함하여 사용자 경험을 향상시키기 위해 여러 기술을 활용합니다.

목차는 한 페이지 내에서 빠른 탐색을 제공합니다. 이것은 긴 기사에 특히 유용하며 사용자에게 명확한 개요와 다른 섹션에 쉽게 액세스 할 수 있습니다. 이 안내서는 Markdown 텍스트를 연결된 제목을 사용하여 HTML 목차로 변환하는 방법에 대해 자세히 설명합니다. vue.js를 사용하여 부드러운 스크롤 및 애니메이션 목록 업데이트도 구현합니다.

마크 다운 파싱 및 HTML 생성

웹 콘텐츠는 종종 Markdown을 사용합니다. 우리는 marked 다운 (대안이 적합하지만)을 사용합니다. Markdown 컨텐츠는 Github 요점에서 가져옵니다. marked 함수는 페치 된 마크 다운 텍스트를 HTML로 변환 한 다음 DOM에 주입됩니다.

 비동기 함수 fetchandparsemarkdown () {
  const url = 'https://gist.githubusercontent.com/lisilinhart/e9dcf5298adff7c2c2a4da9ce2a3db3f/raw/2f1a0d47eba64756c22460b5d2919d45d8118d42/red_panda.md';
  const response = fetch (URL)를 기다립니다.
  const data = await response.text ();
  const htmlfrommarkdown = marked (data, {sanitize : true});
  htmlfrommarkdown을 반환합니다.
}

구문 분석 된 HTML은 innerHTML 사용하여 지정된 DOM 요소에 삽입됩니다.

 비동기 함수 init () {
  const $ main = document.querySelector ( '#app');
  const htmlcontent = awate retchandparsemarkdown ();
  $ main.innerhtml = htmlContent;
}

init ();

목차 생성

다음 단계는 구문 분석 HTML 내의 제목 (H1 및 H2)에서 목차를 만드는 것입니다. querySelectorAll 사용하여 이러한 제목을 선택하고 텍스트 내용, 깊이 (H1 또는 H2) 및 ID 속성을 추출합니다.

 함수 generatelinkmarkup ($ contentElement) {
  Const Headings = [... $ contentElement.querySelectorAll ( 'H1, H2')];
  const parsedHeadings = headings.map (heading => ({{
    제목 : Heading.innerText,
    깊이 : Heading.nodename.replace (/\ d/g, ''),
    id : wading.getAttribute ( 'id')
  });
  // ... (HTML 마크 업 생성 기능의 나머지)
}

이것은 각각의 객체를 생성하며, 각각은 제목을 나타냅니다. 그런 다음이 데이터를 사용하여 ES6 템플릿 리터럴을 사용하여 목차에 대한 HTML을 생성하여 소제목 (H2)에 대한 계약을 추가합니다. 결과 HTML이 따로 요소에 추가됩니다.

교차로 관찰자 구현

목차의 활성 섹션을 동적으로 강조하기 위해 교차로 관찰자 API를 사용합니다. 이 API를 사용하면 요소 (이 경우 제목)가 뷰포트와 교차하는 경우 모니터링 할 수 있습니다.

 함수 createObserver ($ links) {
  const 옵션 = {rootmargin : "0px 0px -200px 0px", 임계 값 : 1};
  const callback = (entries, 옵저버) => handleObserver (entries, 옵저버, $ 링크); // 콜백은 업데이트를 처리합니다
  새로운 intersectionObserver를 반환합니다 (콜백, 옵션);
}

함수 handleObserver (항목, 관찰자, $ 링크) {
  entries.foreach (entry => {
    if (EntrysIntersecting && entry.intersectionRatio> = 1) {
      updateLinks (`#$ {enlice.target.getAttribute ( 'id')}`, $ links);
    }
  });
}

함수 updateLinks (visibleId, $ 링크) {
  $ links.foreach (link => {
    link.classlist.remove ( 'is-active');
    if (link.getAttribute ( 'href') === visibleId) link.classlist.add ( 'is-active');
  });
}

handleObserver 함수는 교차로를 점검하고 updateLinks 호출하여 목차의 해당 링크에서 is-active 클래스를 추가/제거합니다.

매끄러운 스크롤 및 링크 클릭 처리

목차에서 링크를 클릭하면 해당 섹션으로 매끄럽게 스크롤해야합니다. 각 링크에 이벤트 리스너를 추가하여 기본 동작을 방지하고 window.scroll 사용하여 smooth 동작 옵션을 사용합니다 (사용자가 모션 감소를 선호하지 않는 한).

 const motionquery = wind

$ links.foreach (link => {
  link.addeventListener ( "클릭", evt => handlelinkclick (evt, $ headings, motionquery));
});

함수 handlelinkClick (EVT, $ 제목, MotionQuery) {
  evt.preventDefault ();
  const id = evt.target.getAttribute ( "href"). 대체 ( '#', '');
  const section = $ headings.find (heading => heading.getAttribute ( 'id') === id);
  섹션 .focus ();
  window.scroll ({
    행동 : MotionQuery.Matches? '인스턴트': '매끄러운',
    상단 : Section.offSetTop -20
  });
}

vue.js로 목차를 애니메이션합니다

마지막으로 vue.js 's<transition-group></transition-group> 구성 요소는 목차에서 목록 항목의 추가 및 제거를 애니메이션하는 데 사용됩니다. 이는 섹션이 활성화되거나 비활성화되면 원활한 전환을 제공합니다. 적절한 CSS 전환은 애니메이션을 처리하도록 정의됩니다. (VUE 통합 및 CSS를위한 코드는 간결하게 생략되었지만 구현의 최종 부분을 형성합니다.) 빠른 스크롤과 관련된 애니메이션 문제를 방지하기 위해 분동 기능이 권장됩니다.

이 완전한 접근 방식은 긴 형식의 마크 다운 컨텐츠에 대한 대화식 및 사용자 친화적 인 목차를 제공합니다.

위 내용은 자동화 된 목차로 마크 다운의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!