自動化された目次にマークダウンを解析します

このチュートリアルでは、長い形式のマークダウンコンテンツのインタラクティブな目次の作成を示しています。マークダウンの解析、アクティブなセクション検出のための交差点オブザーバー、スムーズなスクロールアニメーション、アニメーションリストアップデートのVUE.JSトランジションなど、ユーザーエクスペリエンスを強化するためのいくつかの手法を活用しています。

目次は、ページ内で迅速なナビゲーションを提供します。これは、長い記事に特に役立ち、ユーザーに明確な概要とさまざまなセクションへの簡単なアクセスを提供します。このガイドでは、マークダウンテキストをリンクされた見出しでHTML目次に変換する方法を詳しく説明し、現在閲覧されているセクションを強調しています。また、vue.jsを使用して、スムーズなスクロールとアニメーションリストの更新を実装します。

マークダウンの解析とHTML生成

多くの場合、WebコンテンツはMarkdownを使用します。マークダウンをHTMLに解析するために、 markedライブラリ（代替案が適切ですが）を使用します。 Markdownコンテンツは、Github Gistからフェッチされます。 marked関数は、フェッチされたマークダウンテキストをHTMLに変換し、その後DOMに注入します。

 async function fetchandparsemarkdown（）{
  const url = 'https://gist.githubusercontent.com/lisilinhart/e9dcf5298adff7c2c2a4da9ce2a9ce2a9ce2a9ce2a9ce2a9ce2a9ceba64756c22460b5d2919d45d818d42/red__d__d42/red__d42/
  const response = await fetch（url）;
  const data = await respons.text（）;
  const htmlfrommarkdown = marked（data、{sanitize：true}）;
  htmlfrommarkdownを返します。
}

解析されたHTMLは、 innerHTMLを使用して指定されたDOM要素に挿入されます。

 async関数init（）{
  const $ main = document.queryselector（ '＃app'）;
  const htmlcontent = await fetchandparsemarkdown（）;
  $ main.innerhtml = htmlcontent;
}

init（）;

目次の生成

次のステップは、解析されたHTML内の見出し（H1およびH2）から目次を作成することです。 querySelectorAllを使用して、これらの見出しを選択し、テキストコンテンツ、深さ（H1またはH2）、およびID属性を抽出します。

関数GenerateLinkMarkup（$ contentelement）{
  const見出し= [... $ contentelement.queryselectorall（ 'h1、h2'）];
  const parsedheadings = headings.map（heading =>（{
    タイトル：Heading.innertext、
    深さ：heading.nodename.replace（/\ d/g、 ''）、
    ID：Heading.getAttribute（ 'id'）
  }））;
  // ...（HTMLマークアップを生成するための関数の残り）
}

これにより、それぞれが見出しを表すオブジェクトの配列が生成されます。このデータを使用して、ES6テンプレートリテラルを使用して目次のHTMLを作成し、サブヘディング（H2）のインデントを追加します。結果のHTMLは、ARDATERENTELENTに追加されます。

交差点オブザーバーの実装

目次のアクティブセクションを動的に強調表示するには、交差点オブザーバーAPIを使用します。このAPIを使用すると、要素（この場合、見出し）がビューポートと交差する場合に監視できます。

関数CreateObserver（$ links）{
  const options = {rootmargin： "0px 0px -200px 0px"、しきい値：1};
  const callback =（エントリ、オブザーバー）=> handleObserver（エントリ、オブザーバー、$ links）; //コールバックは更新を処理します
  new IntersectionObserver（コールバック、オプション）を返します。
}

function handleobserver（エントリ、オブザーバー、$ links）{
  entries.foreach（entry => {
    if（entry.isinterecting && entry.intersectionRatio> = 1）{
      updateLinks（ `＃$ {entry.target.getAttribute（ 'id'）}`、$ links）;
    }
  }）;
}

関数updateLinks（visibleId、$ links）{
  $ 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 = window.matchmedia（ '（refers-reduced-motion）'）;

$ links.foreach（link => {
  link.addeventlistener（ "click"、evt => handlelinkclick（evt、$ headings、motionquery））;
}）;

function handlelinkclick（evt、$ headings、motionquery）{
  evt.preventdefault（）;
  const id = evt.target.getAttribute（ "href"）。置換（ '＃'、 ''）;
  const section = $ headings.find（heading => heading.getAttribute（ 'id'）=== id）;
  section.focus（）;
  window.scroll（{
    動作：MotionQuery.Matches？ 「インスタント」：「滑らか」、
    上：section.offsettop -20
  }）;
}

Vue.jsで目次をアニメーション化します

最後に、vue.js<transition-group></transition-group>コンポーネントは、目次のリスト項目の追加と削除をアニメーション化するために使用されます。これにより、セクションがアクティブまたは非アクティブになると、スムーズな遷移が提供されます。アニメーションを処理するために、適切なCSS遷移が定義されています。 （VUE統合とCSSのコードは簡潔にするために省略されていますが、実装の最終部分を形成します。）迅速なスクロールでアニメーションの問題を防ぐために、デバウンス関数が推奨されます。

この完全なアプローチは、長い形式のマークダウンコンテンツのために、非常にインタラクティブでユーザーフレンドリーな目次を提供します。

以上が自動化された目次にマークダウンを解析しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。