blog/themes/butterfly/layout/includes/third-party/comments/remark42.pug

- const { host, siteId, option } = theme.remark42
script.
  var remark_config = Object.assign({
    host: '!{host}',
    site_id: '!{siteId}',
    components: ['embed'],
    theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
  },!{JSON.stringify(option)})

  function addRemark42(){
    for (let i = 0; i < remark_config.components.length; i++) {
      const s = document.createElement('script')
      s.src = remark_config.host + '/web/' + remark_config.components[i] + '.js'
      s.defer = true
      document.head.appendChild(s)
    }
  }

  function initRemark42() {
    if (window.REMARK42) {
      if (this.remark42Instance) {
        this.remark42Instance.destroy()
      }

      this.remark42Instance = window.REMARK42.createInstance({
        ...remark_config
      })
    }
  }

  function getCount () {
    const ele = document.querySelector('.remark42__counter')
    if (ele) {
      const s = document.createElement('script')
      s.src = remark_config.host + '/web/counter.js'
      s.defer = true
      document.head.appendChild(s)
    }
  }

  function loadRemark42 () {
    if (window.REMARK42) {
      this.initRemark42()
      getCount()
    } else {
      addRemark42()
      window.addEventListener('REMARK42::ready', () => {
        this.initRemark42()
        getCount()
      })
    }
  }

  function remarkChangeMode (theme) {
    if (!window.REMARK42) return
    window.REMARK42.changeTheme(theme)
  }

  btf.addGlobalFn('themeChange', remarkChangeMode, 'remark42')

  if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42)
    else loadRemark42()
  } else {
    function loadOtherComment () {
      loadRemark42()
    }
  }