plato de pollo al aprender el blog frontal actualización jardín (añadir directorio)

El contenido se describe a continuación es añadir un directorio de blogs jardín

Tienes que ser compatibles rebaja y editor TinyMCE
Añadir al estilo de título activa
posición fija opcional

Si un error o inadecuada, por favor, corríjanme!

configuración opcional

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

permitir que si la depreciación
Fija la ubicación del directorio posición
- a la izquierda Fija a la izquierda
- el lado derecho en la derecha
- barra lateral 'efectos fijos similares a los directorios del artículo Nuggets efecto'

Arquitectura plug-in

Pongo la integración de directorios artículo como un plugin para el proyecto, la siguiente es la estructura básica del plugin, que le permite ordenar las ideas aquí.

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

// 在这里写几个 func

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

export default catalog

importar

PageName retorno a nombre de la página actual, si no la página de detalles del artículo no es necesario para ejecutar código
userAgent devuelve el tipo de cliente de usuario, terminal móvil sin tener que el artículo Directorio
hasPostTitle devuelve el título del artículo la existencia del artículo actual
GetClientRect posición de retorno con respecto al elemento de la ventana del navegador

Construcción de html

Ideas: que atraviesan el blog Campus contenido Ensayo elementos secundarios DOM, las expresiones regulares obtenidos por título, crear un directorio de elementos html, y añadir el enlace de anclaje. Desde el título de editor no rebaja ningún id, id necesidades que se añadirán al atravesar su valor es el título. editores de contenido no título de reducción del precio no pueden anidarse directamente h123 etiqueta, puede ser ligeramente proceso de determinación.

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()
}

directorio fijo

A continuación, la configuración de acuerdo con la posición del usuario, se fija en la ubicación del directorio especificado.

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

  actions[position]()
}

Es posible adoptar una redacción más concisa, se considera aquí la escalabilidad, el uso de este tipo de enfoque.

La manipulación de la barra lateral fijo

Cuando el directorio está fijado a la barra lateral, desplazamiento a la barra lateral original no es visible sólo mostrar la ubicación del directorio, es muy simple, sólo tenemos que escuchar evento de desplazamiento, la obtención de la barra lateral muy original, cuando se apagó el directorio fijo pantalla. A la inversa, al contrario.

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
    )
  )
}

Añadir al estilo de título activa

Este paso es la realización de las ideas y procesos en el caso de la barra lateral fija básicamente el mismo, cuando un directorio de artículos allá de la pantalla, se añade el título al estilo activo correspondiente en él.

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
    )
  )
}