add theme

themes/butterfly/layout/includes/third-party/comments/artalk.pug

@@ -0,0 +1,73 @@
+- const { server, site, option } = theme.artalk
+- const { use, lazyload } = theme.comments
+
+script.
+  (() => {
+    let artalkItem = null
+    const option = !{JSON.stringify(option)}
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+
+    const destroyArtalk = () => {
+      if (artalkItem) {
+        artalkItem.destroy()
+        artalkItem = null
+      }
+    }
+
+    const artalkChangeMode = theme => artalkItem && artalkItem.setDarkMode(theme === 'dark')
+
+    const initArtalk = (el = document, pageKey = location.pathname) => {
+      artalkItem = Artalk.init({
+        el: el.querySelector('#artalk-wrap'),
+        server: '!{server}',
+        site: '!{site}',
+        darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
+        ...option,
+        pageKey: isShuoshuo ? pageKey : (option && option.pageKey) || pageKey
+      })
+
+      if (GLOBAL_CONFIG.lightbox === 'null') return
+      artalkItem.on('list-loaded', () => {
+        artalkItem.ctx.get('list').getCommentNodes().forEach(comment => {
+          const $content = comment.getRender().$content
+          btf.loadLightbox($content.querySelectorAll('img:not([atk-emoticon])'))
+        })
+      })
+
+      if (isShuoshuo) {
+        window.shuoshuoComment.destroyArtalk = () => {
+          destroyArtalk()
+          if (el.children.length) {
+            el.innerHTML = ''
+            el.classList.add('no-comment')
+          }
+        }
+      }
+
+      btf.addGlobalFn('pjaxSendOnce', destroyArtalk, 'destroyArtalk')
+      btf.addGlobalFn('themeChange', artalkChangeMode, 'artalk')
+    }
+
+    const loadArtalk = async (el, pageKey) => {
+      if (typeof Artalk === 'object') initArtalk(el, pageKey)
+      else {
+        await btf.getCSS('!{theme.asset.artalk_css}')
+        await btf.getScript('!{theme.asset.artalk_js}')
+        initArtalk(el, pageKey)
+      }
+    }
+
+    if (isShuoshuo) {
+      '!{use[0]}' === 'Artalk'
+        ? window.shuoshuoComment = { loadComment: loadArtalk }
+        : window.loadOtherComment = loadArtalk
+      return
+    }
+
+    if ('!{use[0]}' === 'Artalk' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
+      else setTimeout(loadArtalk, 100)
+    } else {
+      window.loadOtherComment = loadArtalk
+    }
+  })()

themes/butterfly/layout/includes/third-party/comments/disqus.pug

@@ -0,0 +1,80 @@
+- const disqusPageTitle = page.title.replace(/'/ig,"\\'")
+- const { shortname, apikey } = theme.disqus
+- const { use, lazyload, count } = theme.comments
+
+script.
+  (() => {
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+
+    const disqusReset = conf => {
+      window.DISQUS && window.DISQUS.reset({
+        reload: true,
+        config: conf
+      })
+    }
+
+    const loadDisqus = (el, path) => {
+      if (isShuoshuo) {
+        window.shuoshuoComment.destroyDisqus = () => {
+          if (el.children.length) {
+            el.innerHTML = ''
+            el.classList.add('no-comment')
+          }
+        }
+      }
+
+      window.disqus_identifier = isShuoshuo ? path : '!{ url_for(page.path) }'
+      window.disqus_url = isShuoshuo ? location.origin + path : '!{ page.permalink }'
+
+      const disqus_config = function () {
+        this.page.url = disqus_url
+        this.page.identifier = disqus_identifier
+        this.page.title = '!{ disqusPageTitle }'
+      }
+
+      if (window.DISQUS) disqusReset(disqus_config)
+      else {
+        const script = document.createElement('script')
+        script.src = 'https://!{shortname}.disqus.com/embed.js'
+        script.setAttribute('data-timestamp', +new Date())
+        document.head.appendChild(script)
+      }
+
+      btf.addGlobalFn('themeChange', () => disqusReset(disqus_config), 'disqus')
+    }
+
+    const getCount = async() => {
+      try {
+        const eleGroup = document.querySelector('#post-meta .disqus-comment-count')
+        if (!eleGroup) return
+        const cleanedLinks = eleGroup.href.replace(/#post-comment$/, '')
+
+        const res = await fetch(`https://disqus.com/api/3.0/threads/set.json?forum=!{shortname}&api_key=!{apikey}&thread:link=${cleanedLinks}`,{
+          method: 'GET'
+        })
+        const result = await res.json()
+
+        const count = result.response.length ? result.response[0].posts : 0
+        eleGroup.textContent = count
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    if (isShuoshuo) {
+      '!{use[0]}' === 'Disqus'
+        ? window.shuoshuoComment = { loadComment: loadDisqus }
+        : window.loadOtherComment = loadDisqus
+      return
+    }
+
+    if ('!{use[0]}' === 'Disqus' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus)
+      else {
+        loadDisqus()
+        !{ count ? `GLOBAL_CONFIG_SITE.pageType === 'post' && getCount()` : '' }
+      }
+    } else {
+      window.loadOtherComment = loadDisqus
+    }
+  })()

themes/butterfly/layout/includes/third-party/comments/disqusjs.pug

@@ -0,0 +1,87 @@
+- let disqusjsPageTitle = page.title && page.title.replace(/'/ig,"\\'")
+- const { shortname:dqShortname, apikey:dqApikey, option:dqOption } = theme.disqusjs
+
+script.
+  (() => {
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'== 'shuoshuo'
+    const dqOption = !{JSON.stringify(dqOption)}
+
+    const destroyDisqusjs = () => {
+      disqusjs.destroy()
+      window.disqusjs = null
+    }
+
+    const themeChange = (el, path) => {
+      destroyDisqusjs()
+      initDisqusjs(el, path)
+    }
+
+    const initDisqusjs = (el = document, path) => {
+      if (isShuoshuo) {
+        window.shuoshuoComment.destroyDisqusjs = () => {
+          destroyDisqusjs()
+          if (el.children.length) {
+            el.innerHTML = ''
+            el.classList.add('no-comment')
+          }
+        }
+      }
+
+      disqusjs = new DisqusJS({
+        shortname: '!{dqShortname}',
+        title: '!{ disqusjsPageTitle }',
+        apikey: '!{dqApikey}',
+        ...dqOption,
+        identifier: isShuoshuo ? path : (dqOption && dqOption.identifier) || '!{ url_for(page.path) }',
+        url: isShuoshuo ? location.origin + path : (dqOption && dqOption.url) || '!{ page.permalink }'
+      })
+
+      disqusjs.render(el.querySelector('#disqusjs-wrap'))
+
+      btf.addGlobalFn('themeChange', () => themeChange(el, path), 'disqusjs')
+    }
+
+    const loadDisqusjs = async(el, path) => {
+      if (window.disqusJsLoad) initDisqusjs(el, path)
+      else {
+        await btf.getCSS('!{url_for(theme.asset.disqusjs_css)}')
+        await btf.getScript('!{url_for(theme.asset.disqusjs)}')
+        initDisqusjs(el, path)
+        window.disqusJsLoad = true
+      }
+    }
+
+    const getCount = async() => {
+      try {
+        const eleGroup = document.querySelector('#post-meta .disqusjs-comment-count')
+        if (!eleGroup) return
+        const cleanedLinks = eleGroup.href.replace(/#post-comment$/, '')
+
+        const res = await fetch(`https://disqus.com/api/3.0/threads/set.json?forum=!{dqShortname}&api_key=!{dqApikey}&thread:link=${cleanedLinks}`,{
+          method: 'GET'
+        })
+        const result = await res.json()
+        const count = result.response.length ? result.response[0].posts : 0
+        eleGroup.textContent = count
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    if (isShuoshuo) {
+      '!{theme.comments.use[0]}' === 'Disqusjs'
+        ? window.shuoshuoComment = { loadComment: loadDisqusjs }
+        : window.loadOtherComment = loadDisqusjs
+      return
+    }
+
+    if ('!{theme.comments.use[0]}' === 'Disqusjs' || !!{theme.comments.lazyload}) {
+      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqusjs-wrap'), loadDisqusjs)
+      else {
+        loadDisqusjs()
+        !{ theme.comments.count ? `GLOBAL_CONFIG_SITE.pageType === 'post' && getCount()` : '' }
+      }
+    } else {
+      window.loadOtherComment = loadDisqusjs
+    }
+  })()