フロントガーデンリフォームのブログを学習することにより、チキン料理（ディレクトリを追加します）

以下で説明する内容は、庭のブログのディレクトリを追加することです

あなたは、互換性の値下げとTinyMCEのエディタである必要が
アクティブな見出しスタイルに追加
オプションの固定位置

エラーまたは不適切な場合は、私を修正してください！

オプションの設定

catalog: {
    enable: true,
    position: 'left',
},

廃止するかどうかを有効にします
固定位置のディレクトリの場所
- 左側に固定されたまま
- 右側の右側
- サイドバーの「記事のディレクトリナゲッツ効果に似た固定効果」

プラグインアーキテクチャ

私は次のようにあなたがここでアイデアを整理することができ、プラグインの基本的な構造で、プロジェクトへのプラグインとして記事のディレクトリ統合を置きます。

import { pageName, userAgent, hasPostTitle, getClientRect, throttle } from '@tools'
const { enable, position } = opts.catalog

// 在这里写几个 func

function catalog() {
  if (conditions) return // 在入口处做一些基本的判断
  // 在这里执行上面的 func
}

export default catalog

インポート

現在のページ名にページ名の戻り、そうでない場合は記事の詳細ページには、コードを実行する必要はありません
userAgentには、記事のディレクトリになくても、ユーザーのクライアントタイプ、モバイル端末を返します。
hasPostTitleは、記事のタイトルに現在の記事の存在を返します。
ブラウザのビューポートの要素に対するgetClientRect戻り位置

HTMLの構築

アイデア：ブログキャンパスエッセイコンテンツ子要素のDOMトラバースは、タイトルによって得られた正規表現は、ディレクトリのHTML要素を作成し、アンカーリンクを追加します。その値を通過すると、タイトルであるとき、非値下げエディタのタイトルIDなしているので、IDを追加する必要があります。非値下げタイトルコンテンツエディタが直接H123タグがネストされないことがあり、それはわずかに決意処理することができます。

function build() {
  let $catalogContainer = $(
    `<div id="catalog">
            <div class='catListTitle'><h3>目录</h3></div>
        </div>`
  )
  const $ulContainer = $('<ul></ul>')
  const titleRegExp = /^h[1-3]$/

  $('#cnblogs_post_body')
    .children()
    .each(function () {
      if (titleRegExp.test(this.tagName.toLowerCase())) {
        let id
        let text

        if (this.id !== '') {
          id = this.id
          text = this.childNodes.length === 2 ? this.childNodes[1].nodeValue : this.childNodes[0].nodeValue
        } else {
          if (this.childNodes.length === 2) {
            const value = this.childNodes[1].nodeValue
            text = value ? value : $(this.childNodes[1]).text()
          } else {
            const value = this.childNodes[0].nodeValue
            text = value ? value : $(this.childNodes[0]).text()
          }
          id = text.trim()
          $(this).attr('id', id)
        }

        const title = `
                            <li class='${this.nodeName.toLowerCase()}-list'>
                                <a href='#${id}'>${text}</a>
                            </li>
                        `

        $ulContainer.append(title)
      }
    })

  $($catalogContainer.append($ulContainer)).appendTo('#sideBar')
  setCatalogPosition()
}

修正されたディレクトリ

次に、ユーザの位置に応じた構成が、指定されたディレクトリの位置に固定されています。

function setCatalogPosition() {
  const actions = {
    sidebar: () => {
      setCatalogToggle()
    },
    left: () => {
      $('#catalog').addClass('catalog-sticky-left')
    },
    right: () => {
      $('#catalog').addClass('catalog-sticky-right')
    },
  }

  actions[position]()
}

あなたは、より簡潔な文言、ここで考えスケーラビリティ、このようなアプローチの使用を採用することができます。

固定サイドバーの取り扱い

ディレクトリは、サイドバーに固定されている場合は、元のサイドバーにスクロールだけでディレクトリの場所を表示する表示されていない、非常にシンプルで、我々は、それが画面固定ディレクトリ消えたとき、非常にオリジナルのサイドバーを取得し、scrollイベントに耳を傾ける必要があります。逆に、反対。

function setCatalogToggle() {
  if (position !== 'sidebar') return
  var p = 0,
    t = 0
  $(window).scroll(
    throttle(
      function () {
        const bottom = getClientRect(document.querySelector('#sideBarMain')).bottom
        if (bottom <= 0) {
          $('#catalog').addClass('catalog-sticky')
          p = $(this).scrollTop()
          t <= p ? $('#catalog').addClass('catalog-scroll-up') : $('#catalog').removeClass('catalog-scroll-up')
          setTimeout(function () {
            t = p
          }, 0)
        } else {
          $('#catalog').removeClass('catalog-sticky')
        }
      },
      50,
      1000 / 60
    )
  )
}

アクティブな見出しスタイルに追加

記事のディレクトリは、画面を超えて、私たちはそれに対応するアクティブなスタイルにタイトルを追加する場合、このステップは基本的に同じ固定サイドバー、の場合のアイデアやプロセスの実現です。

function setActiveCatalogTitle() {
  $(window).scroll(
    throttle(
      function () {
        for (let i = $('#catalog ul li').length - 1; i >= 0; i--) {
          const titleId = $($('#catalog ul li')[i]).find('a').attr('href').replace(/[#]/g, '')
          const postTitle = document.querySelector(`#cnblogs_post_body [id='${titleId}']`)
          if (getClientRect(postTitle).top <= 10) {
            if ($($('#catalog ul li')[i]).hasClass('catalog-active')) return
            $($('#catalog ul li')[i]).addClass('catalog-active')
            $($('#catalog ul li')[i]).siblings().removeClass('catalog-active')
            return
          }
        }
      },
      50,
      1000 / 60
    )
  )
}