5.0

2026-04-16 19:10:53 +08:00 · 2024-10-03 17:29:37 +08:00
parent f5607124fd 2ca779a6ad
commit fe1607260e
160 changed files with 4187 additions and 3531 deletions
--- a/layout/category.pug
+++ b/layout/category.pug
@@ -2,10 +2,8 @@ extends includes/layout.pug

 block content
  if theme.category_ui == 'index'
-    include ./includes/mixins/post-ui.pug
-    #recent-posts.recent-posts.category_ui
-      +postUI
-      include includes/pagination.pug
+    include ./includes/mixins/indexPostUI.pug
+    +indexPostUI
  else
    include ./includes/mixins/article-sort.pug
    #category
--- a/layout/includes/404.pug
+++ b/layout/includes/404.pug
@@ -1,12 +0,0 @@
- var top_img_404 = theme.error_404.background || theme.default_top_img
-
-#body-wrap.error404
-  include ./header/index.pug
-
-  #error-wrap
-    .error-content
-      .error-img
-        img(src=url_for(top_img_404) alt='Page not found')
-      .error-info
-        h1.error_title= '404'
-        .error_subtitle= theme.error_404.subtitle || _p('error404')
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -5,10 +5,8 @@ div
  if theme.translate.enable
    script(src=url_for(theme.asset.translate))

-  if theme.medium_zoom
-    script(src=url_for(theme.asset.medium_zoom))
-  else if theme.fancybox
-    script(src=url_for(theme.asset.fancybox))
+  if theme.lightbox
+    script(src=url_for(theme.asset[theme.lightbox]))

  if theme.instantpage
    script(src=url_for(theme.asset.instantpage), type='module')
@@ -30,7 +28,6 @@ div
      include ./third-party/subtitle.pug

    include ./third-party/math/index.pug
-
    include ./third-party/abcjs/index.pug

    if commentsJsLoad
@@ -38,28 +35,26 @@ div

  != partial("includes/third-party/prismjs", {}, { cache: true })

-  if theme.aside.enable && theme.newest_comments.enable
-    if theme.pjax.enable
-      != partial("includes/third-party/newest-comments/index", {}, { cache: true })
-    else if (!is_post() && page.aside !== false)
+  if theme.aside.enable && theme.aside.card_newest_comments.enable
+    if theme.pjax.enable || (!is_post() && page.aside !== false)
      != partial("includes/third-party/newest-comments/index", {}, { cache: true })

  != fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})

  != partial("includes/third-party/effect", {}, { cache: true })
-
  != partial("includes/third-party/chat/index", {}, { cache: true })

  if theme.aplayerInject && theme.aplayerInject.enable
-    if theme.pjax.enable || theme.aplayerInject.per_page
-      include ./third-party/aplayer.pug
-    else if page.aplayer
+    if theme.pjax.enable || theme.aplayerInject.per_page || page.aplayer
      include ./third-party/aplayer.pug

  if theme.pjax.enable
    != partial("includes/third-party/pjax", {}, { cache: true })

+  if theme.umami_analytics.enable
+    != partial("includes/third-party/umami_analytics", {}, { cache: true })
+
  if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
    script(async data-pjax src= theme.asset.busuanzi || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')

-  !=partial('includes/third-party/search/index', {}, {cache: true})
+  != partial('includes/third-party/search/index', {}, { cache: true })
--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -1,11 +1,12 @@
 #footer-wrap
  if theme.footer.owner.enable
-    - var now = new Date()
-    - var nowYear = now.getFullYear()
-    if theme.footer.owner.since && theme.footer.owner.since != nowYear
-      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
-    else
-      .copyright!= `&copy;${nowYear} By ${config.author}`
+    - const currentYear = new Date().getFullYear()
+    - const sinceYear = theme.footer.owner.since
+    .copyright
+      if sinceYear && sinceYear != currentYear
+        != `&copy;${sinceYear} - ${currentYear} By ${config.author}`
+      else
+        != `&copy;${currentYear} By ${config.author}`
  if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
@@ -14,4 +15,4 @@
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
-    .footer_custom_text!=`${theme.footer.custom_text}`
+    .footer_custom_text!= theme.footer.custom_text
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -45,9 +45,11 @@ link(rel='stylesheet', href=url_for(theme.asset.fontawesome))
 if (theme.snackbar && theme.snackbar.enable)
  link(rel='stylesheet', href=url_for(theme.asset.snackbar_css) media="print" onload="this.media='all'")

-if theme.fancybox
+if theme.lightbox === 'fancybox'
  link(rel='stylesheet' href=url_for(theme.asset.fancybox_css) media="print" onload="this.media='all'")

+!=fragment_cache('injectHeadJs', function(){return inject_head_js()})
+
 //- google_adsense
 !=partial('includes/head/google_adsense', {}, {cache: true})

@@ -63,6 +65,4 @@ if theme.blog_title_font && theme.blog_title_font.font_link

 include ./head/config_site.pug

-!=fragment_cache('injectHeadJs', function(){return inject_head_js()})
-
 !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
--- a/layout/includes/head/Open_Graph.pug
+++ b/layout/includes/head/Open_Graph.pug
@@ -10,5 +10,7 @@ if theme.Open_Graph_meta.enable
  -
  != open_graph(ogOption)
 else
-  meta(name="description" content=page_description())
+  - const description = page.description || page.content || page.title || config.description
+  if description
+    meta(name="description" content=truncate(description, 150))

--- a/layout/includes/head/analytics.pug
+++ b/layout/includes/head/analytics.pug
@@ -7,14 +7,20 @@ if theme.baidu_analytics
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
+    btf.addGlobalFn('pjaxComplete', () => {
+      _hmt.push(['_trackPageview',window.location.pathname])
+    }, 'baidu_analytics')

 if theme.google_analytics
  script(async src=`https://www.googletagmanager.com/gtag/js?id=${theme.google_analytics}`)
  script.
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', '!{theme.google_analytics}');
+    window.dataLayer = window.dataLayer || []
+    function gtag(){dataLayer.push(arguments)}
+    gtag('js', new Date())
+    gtag('config', '!{theme.google_analytics}')
+    btf.addGlobalFn('pjaxComplete', () => {
+      gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname})
+    }, 'google_analytics')

 if theme.cloudflare_analytics
  script(defer data-pjax src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon=`{"token": "${theme.cloudflare_analytics}"}`)
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -1,28 +1,30 @@
 -
-  let algolia = 'undefined';
-  let env = process.env;
-  if (theme.algolia_search.enable) {
+  let algolia = 'undefined'
+  if (theme.search.use === 'algolia_search') {
+    const { ALGOLIA_APP_ID, ALGOLIA_API_KEY, ALGOLIA_INDEX_NAME } = process.env
+    const { appId, applicationID, apiKey, indexName } = config.algolia
    algolia = JSON.stringify({
-      appId: env.ALGOLIA_APP_ID || config.algolia.appId || config.algolia.applicationID,
-      apiKey: env.ALGOLIA_API_KEY || config.algolia.apiKey,
-      indexName: env.ALGOLIA_INDEX_NAME || config.algolia.indexName,
-      hits: theme.algolia_search.hits,
+      appId: ALGOLIA_APP_ID || appId || applicationID,
+      apiKey: ALGOLIA_API_KEY || apiKey,
+      indexName: ALGOLIA_INDEX_NAME || indexName,
+      hitsPerPage: theme.search.algolia_search.hitsPerPage,
      // search languages
      languages: {
-        input_placeholder: _p("search.algolia_search.input_placeholder"),
+        input_placeholder: theme.search.placeholder || _p("search.input_placeholder"),
        hits_empty: _p("search.algolia_search.hits_empty"),
        hits_stats: _p("search.algolia_search.hits_stats"),
      }
    })
  }

-  let localSearch = 'undefined';
-  if (theme.local_search && theme.local_search.enable) {
+  let localSearch = 'undefined'
+  if (theme.search.use === 'local_search') {
+    const { CDN, preload, top_n_per_article, unescape } = theme.search.local_search
    localSearch = JSON.stringify({
-      path: theme.local_search.CDN ? theme.local_search.CDN : config.root + config.search.path,
-      preload: theme.local_search.preload,
-      top_n_per_article: theme.local_search.top_n_per_article,
-      unescape: theme.local_search.unescape,
+      path: CDN || config.root + config.search.path,
+      preload,
+      top_n_per_article,
+      unescape,
      languages: {
        // search languages
        hits_empty: _p("search.local_search.hits_empty"),
@@ -31,7 +33,7 @@
    })
  }

-  let translate = 'undefined';
+  let translate = 'undefined'
  if (theme.translate && theme.translate.enable){
    translate = JSON.stringify({
      defaultEncoding: theme.translate.defaultEncoding,
@@ -41,7 +43,7 @@
    })
  }

-  let copyright = 'undefined';
+  let copyright = 'undefined'
  if (theme.copy.enable && theme.copy.copyright.enable){
    copyright = JSON.stringify({
      limitCount: theme.copy.copyright.limit_count,
@@ -54,7 +56,7 @@
    })
  }

-  let Snackbar = 'undefined';
+  let Snackbar = 'undefined'
  if (theme.snackbar && theme.snackbar.enable) {
    Snackbar = JSON.stringify({
      chs_to_cht: _p("Snackbar.chs_to_cht"),
@@ -67,7 +69,7 @@
    })
  }

-  let noticeOutdate = 'undefined';
+  let noticeOutdate = 'undefined'
  if (theme.noticeOutdate && theme.noticeOutdate.enable) {
    noticeOutdate = JSON.stringify({
      limitDay: theme.noticeOutdate.limit_day,
@@ -77,15 +79,18 @@
    })
  }

-  let highlight = 'undefined';
-  let syntaxHighlighter = config.syntax_highlighter;
-  let highlightEnable = syntaxHighlighter ? ['highlight.js', 'prismjs'].includes(syntaxHighlighter) : (config.highlight.enable || config.prismjs.enable);
+  let highlight = 'undefined'
+  let syntaxHighlighter = config.syntax_highlighter
+  let highlightEnable = syntaxHighlighter ? ['highlight.js', 'prismjs'].includes(syntaxHighlighter) : (config.highlight.enable || config.prismjs.enable)
  if (highlightEnable) {
+    const { copy, language, height_limit, fullpage, macStyle } = theme.code_blocks
    highlight = JSON.stringify({
      plugin: syntaxHighlighter ? syntaxHighlighter : config.highlight.enable ? 'highlight.js' : 'prismjs',
-      highlightCopy: theme.highlight_copy,
-      highlightLang: theme.highlight_lang,
-      highlightHeightLimit: theme.highlight_height_limit
+      highlightCopy: copy,
+      highlightLang: language,
+      highlightHeightLimit: height_limit,
+      highlightFullpage: fullpage,
+      highlightMacStyle: macStyle
    })
  }

@@ -106,7 +111,7 @@ script.
      homepage: !{theme.post_meta.page.date_format === 'relative'},
      post: !{theme.post_meta.post.date_format === 'relative'}
    },
-    runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}',
+    runtime: '!{theme.aside.card_webinfo.runtime_date ? _p("aside.card_webinfo.runtime.unit") : ""}',
    dateSuffix: {
      just: '!{_p("date_suffix.just")}',
      min: '!{_p("date_suffix.min")}',
@@ -115,7 +120,7 @@ script.
      month: '!{_p("date_suffix.month")}'
    },
    copyright: !{copyright},
-    lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
+    lightbox: '!{ theme.lightbox || 'null' }',
    Snackbar: !{Snackbar},
    infinitegrid: {
      js: '!{url_for(theme.asset.egjs_infinitegrid)}',
--- a/layout/includes/head/config_site.pug
+++ b/layout/includes/head/config_site.pug
@@ -2,20 +2,17 @@
  const titleVal = pageTitle.replace(/'/ig,"\\'")

  let isHighlightShrink
-  if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined'
-  else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink
-  else isHighlightShrink = theme.highlight_shrink
+  if (theme.code_blocks.shrink == 'none') isHighlightShrink = 'undefined'
+  else if (typeof page.highlight_shrink == 'boolean') isHighlightShrink = page.highlight_shrink
+  else isHighlightShrink = theme.code_blocks.shrink

  var showToc = false
  if (theme.aside.enable && page.aside !== false) {
    let tocEnable = false
-    if (is_post()) {
-      if (theme.toc.post) tocEnable = true
-    } else if (is_page()) {
-      if (theme.toc.page) tocEnable = true
-    }
-    const pageToc = page.toc === true || page.toc === false ? page.toc : tocEnable
-    showToc = pageToc && (toc(page.content) !== '' || page.encrypt == true )
+    if (is_post() && theme.toc.post) tocEnable = true
+    else if (is_page() && theme.toc.page) tocEnable = true
+    const pageToc = typeof page.toc === 'boolean' ? page.toc : tocEnable
+    showToc = pageToc && (toc(page.content) !== '' || page.encrypt === true)
  }
 -

--- a/layout/includes/head/pwa.pug
+++ b/layout/includes/head/pwa.pug
@@ -1,11 +1,13 @@
-link(rel="manifest" href=url_for(theme.pwa.manifest))
-if(theme.pwa.theme_color) 
-  meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
-if(theme.pwa.apple_touch_icon) 
-  link(rel="apple-touch-icon" sizes="180x180" href=url_for(theme.pwa.apple_touch_icon))
-if(theme.pwa.favicon_32_32) 
-  link(rel="icon" type="image/png" sizes="32x32" href=url_for(theme.pwa.favicon_32_32))
-if(theme.pwa.favicon_16_16)
-  link(rel="icon" type="image/png" sizes="16x16" href=url_for(theme.pwa.favicon_16_16))
-if(theme.pwa.mask_icon)
-  link(rel="mask-icon" href=url_for(theme.pwa.mask_icon) color="#5bbad5")
+- const { manifest, theme_color, apple_touch_icon, favicon_32_32, favicon_16_16, mask_icon } = theme.pwa
+
+link(rel="manifest" href=url_for(manifest))
+if theme_color
+  meta(name="msapplication-TileColor" content=theme_color)
+if apple_touch_icon
+  link(rel="apple-touch-icon" sizes="180x180" href=url_for(apple_touch_icon))
+if favicon_32_32
+  link(rel="icon" type="image/png" sizes="32x32" href=url_for(favicon_32_32))
+if favicon_16_16
+  link(rel="icon" type="image/png" sizes="16x16" href=url_for(favicon_16_16))
+if mask_icon
+  link(rel="mask-icon" href=url_for(mask_icon) color="#5bbad5")
--- a/layout/includes/header/index.pug
+++ b/layout/includes/header/index.pug
@@ -1,52 +1,53 @@
+-
+  const returnTopImg = img => img !== false ? img || theme.default_top_img : false
+  const isFixedClass = theme.nav.fixed ? ' fixed' : ''
+  var top_img = false
+  let headerClassName = 'not-top-img'
+  var bg_img = ''
+
 if !theme.disable_top_img && page.top_img !== false
  if is_post()
-    - var top_img = page.top_img || page.cover || theme.default_top_img
+    - top_img = page.top_img || page.cover || theme.default_top_img
  else if is_page()
-    - var top_img = page.top_img || theme.default_top_img
+    - top_img = page.top_img || theme.default_top_img
  else if is_tag()
-    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
-    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
+    - top_img = theme.tag_per_img && theme.tag_per_img[page.tag]
+    - top_img = top_img || returnTopImg(theme.tag_img)
  else if is_category()
-    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
-    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
+    - top_img = theme.category_per_img && theme.category_per_img[page.category]
+    - top_img = top_img || returnTopImg(theme.category_img)
  else if is_home()
-    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
+    - top_img = returnTopImg(theme.index_img)
  else if is_archive()
-    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
+    - top_img = returnTopImg(theme.archive_img)
  else
-    - var top_img = page.top_img || theme.default_top_img
+    - top_img = page.top_img || theme.default_top_img

  if top_img !== false
-    - var imgSource = top_img && isImgOrUrl(top_img) ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
-    - var bg_img = top_img ? imgSource : ''
-    - var site_title = page.title || page.tag || page.category || config.title
-    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
-    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
-  else
-    - var isHomeClass = 'not-top-img'
-else
-  - var top_img = false
-  - var isHomeClass = 'not-top-img'
+    - bg_img = getBgPath(top_img)
+    - headerClassName = is_home() ? 'full_page' : is_post() ? 'post-bg' : 'not-home-page'

- const isFixedClass = theme.nav.fixed ? ' fixed' : ''
-
-header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
-  !=partial('includes/header/nav', {}, {cache: true})
+header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img)
+  include ./nav.pug
  if top_img !== false
    if is_post()
      include ./post-info.pug
-    else if is_home() 
+    else if is_home()
      #site-info
-        h1#site-title=site_title
+        h1#site-title=config.title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
-        if(theme.social)
+        if theme.social
          #site_social_icons
            !=partial('includes/header/social', {}, {cache: true})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
-        h1#site-title=site_title
+        h1#site-title=page.title || page.tag || page.category
+  else
+    //- improvement seo
+    if !is_post()
+      h1.title-seo=page.title || page.tag || page.category || config.title
--- a/layout/includes/header/menu_item.pug
+++ b/layout/includes/header/menu_item.pug
@@ -3,25 +3,25 @@ if theme.menu
    each value, label in theme.menu
      if typeof value !== 'object'
        .menus_item
-          - const valueArray = value.split('||')
-          a.site-page(href=url_for(trim(valueArray[0])))
-            if valueArray[1]
-              i.fa-fw(class=trim(valueArray[1]))
-            span=' '+label
+          - const [link, icon] = value.split('||').map(part => trim(part))
+          a.site-page(href=url_for(link))
+            if icon
+              i.fa-fw(class=icon)
+            span= ' ' + label
      else
        .menus_item
-          - const labelArray = label.split('||')
-          - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : ''
-          a.site-page.group(class=`${hideClass}` href='javascript:void(0);')
-            if labelArray[1]
-              i.fa-fw(class=trim(labelArray[1]))
-            span=' '+ trim(labelArray[0])
+          - const [groupLabel, groupIcon, groupClass] = label.split('||').map(part => trim(part))
+          - const hideClass = groupClass === 'hide' ? 'hide' : ''
+          span.site-page.group(class=hideClass)
+            if groupIcon
+              i.fa-fw(class=groupIcon)
+            span= ' ' + groupLabel
            i.fas.fa-chevron-down
          ul.menus_item_child
-            each val,lab in value 
-              - const valArray = val.split('||')
+            each val, lab in value
+              - const [childLink, childIcon] = val.split('||').map(part => trim(part))
              li
-                a.site-page.child(href=url_for(trim(valArray[0])))
-                  if valArray[1]
-                    i.fa-fw(class=trim(valArray[1]))
-                  span=' '+ lab
+                a.site-page.child(href=url_for(childLink))
+                  if childIcon
+                    i.fa-fw(class=childIcon)
+                  span= ' ' + lab
--- a/layout/includes/header/nav.pug
+++ b/layout/includes/header/nav.pug
@@ -1,21 +1,22 @@
 nav#nav
  span#blog-info
-    a(href=url_for('/') title=config.title)
+    a.nav-site-title(href=url_for('/'))
      if theme.nav.logo
-        img.site-icon(src=url_for(theme.nav.logo))
+        img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
      if theme.nav.display_title
        span.site-name=config.title
-    
+    if is_post()
+      a.nav-page-title(href=url_for('/'))
+        span.site-name=(page.title || config.title)
  #menus
-    if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
+    if theme.search.use
      #search-button
-        a.site-page.social-icon.search(href="javascript:void(0);")
+        span.site-page.social-icon.search
          i.fas.fa-search.fa-fw
-          span=' '+_p('search.title')
-    !=partial('includes/header/menu_item', {}, {cache: true})
-
-    #toggle-menu
-      a.site-page(href="javascript:void(0);")
-        i.fas.fa-bars.fa-fw
-
+          span= ' ' + _p('search.title')
+    if theme.menu
+      != partial('includes/header/menu_item', {}, {cache: true})

+      #toggle-menu
+        span.site-page
+          i.fas.fa-bars.fa-fw
--- a/layout/includes/header/post-info.pug
+++ b/layout/includes/header/post-info.pug
@@ -4,41 +4,40 @@
    if theme.post_edit.enable
      a.post-edit-link(href=theme.post_edit.url + page.source title=_p('post.edit') target="_blank")
        i.fas.fa-pencil-alt
-        
+
  #post-meta
    .meta-firstline
-      if (theme.post_meta.post.date_type)
+      if theme.post_meta.post.date_type
        span.post-meta-date
-          if (theme.post_meta.post.date_type === 'both')
+          if theme.post_meta.post.date_type === 'both'
            i.far.fa-calendar-alt.fa-fw.post-meta-icon
            span.post-meta-label= _p('post.created')
-            time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))=date(page.date, config.date_format)
+            time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))= date(page.date, config.date_format)
            span.post-meta-separator |
            i.fas.fa-history.fa-fw.post-meta-icon
            span.post-meta-label= _p('post.updated')
-            time.post-meta-date-updated(datetime=date_xml(page.updated) title=_p('post.updated') + ' ' + full_date(page.updated))=date(page.updated, config.date_format)
+            time.post-meta-date-updated(datetime=date_xml(page.updated) title=_p('post.updated') + ' ' + full_date(page.updated))= date(page.updated, config.date_format)
          else
            - let data_type_update = theme.post_meta.post.date_type === 'updated'
            - let date_type = data_type_update ? 'updated' : 'date'
-            - let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt'
+            - let date_icon = data_type_update ? 'fas fa-history' : 'far fa-calendar-alt'
            - let date_title = data_type_update ? _p('post.updated') : _p('post.created')
            i.fa-fw.post-meta-icon(class=date_icon)
            span.post-meta-label= date_title
-            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
-      if (theme.post_meta.post.categories && page.categories.data.length > 0)
+            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))= date(page[date_type], config.date_format)
+      if theme.post_meta.post.categories && page.categories.data.length > 0
        span.post-meta-categories
-          if (theme.post_meta.post.date_type)
+          if theme.post_meta.post.date_type
            span.post-meta-separator |
-
          each item, index in page.categories.data
            i.fas.fa-inbox.fa-fw.post-meta-icon
            a(href=url_for(item.path)).post-meta-categories #[=item.name]
-            if (index < page.categories.data.length - 1)
+            if index < page.categories.data.length - 1
              i.fas.fa-angle-right.post-meta-separator

    .meta-secondline
      - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
-      if (postWordcount)
+      if postWordcount
        span.post-meta-separator |
        span.post-meta-wordcount
          if theme.wordcount.post_wordcount
@@ -51,42 +50,57 @@
            i.far.fa-clock.fa-fw.post-meta-icon
            span.post-meta-label= _p('post.min2read') + ':'
            span= min2read(page.content, {cn: 350, en: 160}) + _p('post.min2read_unit')
-    
+
      //- for pv and count
-      mixin pvBlock(parent_id,parent_class,parent_title)
+      mixin pvBlock(parent_id, parent_class, parent_title)
        span.post-meta-separator |
-        span(class=parent_class id=parent_id data-flag-title=page.title)
+        span(class=parent_class id=parent_id data-flag-title=parent_title)
          i.far.fa-eye.fa-fw.post-meta-icon
-          span.post-meta-label=_p('post.page_pv') + ':'
+          span.post-meta-label= _p('post.page_pv') + ':'
          if block
            block

-      - const commentUse = comments.use
+      - const commentUse = comments.use && comments.use[0]
      if page.comments !== false && commentUse && !comments.lazyload
-        if commentUse[0] === 'Valine' && theme.valine.visitor
-          +pvBlock(url_for(page.path),'leancloud_visitors',page.title)
-            span.leancloud-visitors-count
-              i.fa-solid.fa-spinner.fa-spin
-        else if commentUse[0] === 'Waline' && theme.waline.pageview
-          +pvBlock('','','')
-            span.waline-pageview-count(data-path=url_for(page.path))
-              i.fa-solid.fa-spinner.fa-spin
-        else if commentUse[0] === 'Twikoo' && theme.twikoo.visitor
-          +pvBlock('','','')
-            span#twikoo_visitors
-              i.fa-solid.fa-spinner.fa-spin
-        else if commentUse[0] === 'Artalk' && theme.artalk.visitor
-          +pvBlock('','','')
-            span#ArtalkPV
+        case commentUse
+          when 'Valine'
+            if theme.valine.visitor
+              +pvBlock(url_for(page.path), 'leancloud_visitors', page.title)
+                span.leancloud-visitors-count
+                  i.fa-solid.fa-spinner.fa-spin
+          when 'Waline'
+            if theme.waline.pageview
+              +pvBlock('', '', '')
+                span.waline-pageview-count(data-path=url_for(page.path))
+                  i.fa-solid.fa-spinner.fa-spin
+          when 'Twikoo'
+            if theme.twikoo.visitor
+              +pvBlock('', '', '')
+                span#twikoo_visitors
+                  i.fa-solid.fa-spinner.fa-spin
+          when 'Artalk'
+            if theme.artalk.visitor
+              +pvBlock('', '', '')
+                span#ArtalkPV
+                  i.fa-solid.fa-spinner.fa-spin
+          default
+            if theme.umami_analytics.enable && theme.umami_analytics.UV_PV.page_pv
+              +pvBlock('', '', '')
+                span#umamiPV(data-path=url_for(page.path))
+                  i.fa-solid.fa-spinner.fa-spin
+            else if theme.busuanzi.page_pv
+              +pvBlock('', 'post-meta-pv-cv', '')
+                span#busuanzi_value_page_pv
+                  i.fa-solid.fa-spinner.fa-spin
+      else
+        if theme.umami_analytics.enable && theme.umami_analytics.UV_PV.page_pv
+          +pvBlock('', '', '')
+            span#umamiPV(data-path=url_for(page.path))
              i.fa-solid.fa-spinner.fa-spin
        else if theme.busuanzi.page_pv
-          +pvBlock('','post-meta-pv-cv','')
+          +pvBlock('', 'post-meta-pv-cv', '')
            span#busuanzi_value_page_pv
              i.fa-solid.fa-spinner.fa-spin
-      else if theme.busuanzi.page_pv
-        +pvBlock('','post-meta-pv-cv','')
-          span#busuanzi_value_page_pv
-            i.fa-solid.fa-spinner.fa-spin

      if comments.count && !comments.lazyload && page.comments !== false && comments.use
        - var whichCount = comments.use[0]
@@ -98,7 +112,7 @@
            span.post-meta-label= _p('post.comments') + ':'
            if block
              block
-        
+
        case whichCount
          when 'Disqus'
            +countBlock
--- a/layout/includes/header/social.pug
+++ b/layout/includes/header/social.pug
@@ -1,4 +1,8 @@
 each url, icon in theme.social
-  a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank" 
-  title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
-    i(class=icon style=url.split('||')[2] === undefined ? '' : `color: ${trim(url.split('||')[2]).replace(/[\'\"]/g, '')};`)
+  -
+    const [link, title, color] = url.split('||').map(i => trim(i))
+    const href = url_for(link)
+    const iconStyle = color ? `color: ${color.replace(/[\'\"]/g, '')};` : ''
+    const iconTitle = title || ''
+  a.social-icon(href=href target="_blank" title=iconTitle)
+    i(class=icon style=iconStyle)
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -2,46 +2,35 @@
 - page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
 - var pageType = is_post() ? 'post' : 'page'
+- pageType = page.type ? pageType + ' type-' + page.type : pageType

 doctype html
 html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
  body
-    if theme.preloader.enable
-      !=partial('includes/loading/index', {}, {cache: true})
+    !=partial('includes/loading/index', {}, {cache: true})

    if theme.background
-      #web_bg
+      #web_bg(style=getBgPath(theme.background))
      
    !=partial('includes/sidebar', {}, {cache: true})

-    if page.type !== '404'
-      #body-wrap(class=pageType)
-        include ./header/index.pug
+    #body-wrap(class=pageType)
+      include ./header/index.pug

-        main#content-inner.layout(class=hideAside)
-          if body
-            div!= body
-          else
-            block content
-            if theme.aside.enable && page.aside !== false
-              include widget/index.pug
-
-        - var footerBg = theme.footer_bg
-        if (footerBg)
-          if (footerBg === true)
-            - var footer_bg = bg_img
-          else
-            - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
+      main#content-inner.layout(class=hideAside)
+        if body
+          div!= body
        else
-          - var footer_bg = ''
+          block content
+          if theme.aside.enable && page.aside !== false
+            include widget/index.pug

-        footer#footer(style=footer_bg)
-          !=partial('includes/footer', {}, {cache: true})
-
-    else
-      include ./404.pug
+      - const footerBg = theme.footer_img
+      - const footer_bg = footerBg ? footerBg === true ? bg_img : getBgPath(footerBg) : ''
+      footer#footer(style=footer_bg)
+        !=partial('includes/footer', {}, {cache: true})

    include ./rightside.pug
    include ./additional-js.pug
--- a/layout/includes/loading/fullpage-loading.pug
+++ b/layout/includes/loading/fullpage-loading.pug
@@ -24,10 +24,10 @@ script.
    }

    preloader.initLoading()
-    window.addEventListener('load',() => { preloader.endLoading() })
+    window.addEventListener('load', preloader.endLoading)

    if (!{theme.pjax && theme.pjax.enable}) {
-      document.addEventListener('pjax:send', () => { preloader.initLoading() })
-      document.addEventListener('pjax:complete', () => { preloader.endLoading() })
+      btf.addGlobalFn('pjaxSend', preloader.initLoading, 'preloader_init')
+      btf.addGlobalFn('pjaxComplete', preloader.endLoading, 'preloader_end')
    }
  })()
--- a/layout/includes/loading/index.pug
+++ b/layout/includes/loading/index.pug
@@ -1,4 +1,5 @@
-if theme.preloader.source === 1
-  include ./fullpage-loading.pug
-else
-  include ./pace.pug
+if theme.preloader.enable
+  if theme.preloader.source === 1
+    include ./fullpage-loading.pug
+  else
+    include ./pace.pug
--- a/layout/includes/loading/pace.pug
+++ b/layout/includes/loading/pace.pug
@@ -3,9 +3,10 @@ script.
    restartOnPushState: false
  }

-  document.addEventListener('pjax:send', () => {
+  btf.addGlobalFn('pjaxSend', () => {
    Pace.restart()
-  })
+  }, 'pace_restart')
+

 link(rel="stylesheet", href=url_for(theme.preloader.pace_css_url || theme.asset.pace_default_css))
 script(src=url_for(theme.asset.pace_js))
--- a/layout/includes/mixins/article-sort.pug
+++ b/layout/includes/mixins/article-sort.pug
@@ -1,14 +1,14 @@
 mixin articleSort(posts)
  .article-sort
-    - var year
-    - posts.each(function (article) {
-      - let tempYear = date(article.date, 'YYYY')
-      - let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
-      - let title = article.title || _p('no_title')
+    - let year
+    - posts.forEach(article => {
+      - const tempYear = date(article.date, 'YYYY')
+      - const noCoverClass = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
+      - const title = article.title || _p('no_title')
      if tempYear !== year
        - year = tempYear
        .article-sort-item.year= year
-      .article-sort-item(class=no_cover)
+      .article-sort-item(class=noCoverClass)
        if article.cover && theme.cover.archives_enable
          a.article-sort-item-img(href=url_for(article.path) title=title)
            if article.cover_type === 'img'
--- a/layout/includes/mixins/indexPostUI.pug
+++ b/layout/includes/mixins/indexPostUI.pug
@@ -0,0 +1,122 @@
+mixin indexPostUI()
+  - const indexLayout = theme.index_layout
+  - const masonryLayoutClass = (indexLayout === 6 || indexLayout === 7) ? 'masonry' : ''
+  #recent-posts.recent-posts.nc(class=masonryLayoutClass)
+    .recent-post-items
+      each article, index in page.posts.data
+        .recent-post-item
+          - const link = article.link || article.path
+          - const title = article.title || _p('no_title')
+          - const leftOrRight = indexLayout === 3 ? (index % 2 === 0 ? 'left' : 'right') : (indexLayout === 2 ? 'right' : '')
+          - const post_cover = article.cover
+          - const no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+          
+          if post_cover && theme.cover.index_enable
+            .post_cover(class=leftOrRight)
+              a(href=url_for(link) title=title)
+                if article.cover_type === 'img'
+                  img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+                else
+                  div.post-bg(style=`background: ${post_cover}`)
+          .recent-post-info(class=no_cover)
+            a.article-title(href=url_for(link) title=title)
+              if is_home() && (article.top || article.sticky > 0)
+                i.fas.fa-thumbtack.sticky
+              = title
+            .article-meta-wrap
+              if theme.post_meta.page.date_type
+                span.post-meta-date
+                  if theme.post_meta.page.date_type === 'both'
+                    i.far.fa-calendar-alt
+                    span.article-meta-label=_p('post.created')
+                    time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
+                    span.article-meta-separator |
+                    i.fas.fa-history
+                    span.article-meta-label=_p('post.updated')
+                    time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))= date(article.updated, config.date_format)
+                  else
+                    - const data_type_updated = theme.post_meta.page.date_type === 'updated'
+                    - const date_type = data_type_updated ? 'updated' : 'date'
+                    - const date_icon = data_type_updated ? 'fas fa-history' : 'far fa-calendar-alt'
+                    - const date_title = data_type_updated ? _p('post.updated') : _p('post.created')
+                    i(class=date_icon)
+                    span.article-meta-label= date_title
+                    time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))= date(article[date_type], config.date_format)
+              if theme.post_meta.page.categories && article.categories.data.length > 0
+                span.article-meta
+                  span.article-meta-separator |
+                  each item, index in article.categories.data
+                    i.fas.fa-inbox
+                    a(href=url_for(item.path)).article-meta__categories #[=item.name]
+                    if index < article.categories.data.length - 1
+                      i.fas.fa-angle-right.article-meta-link
+              if theme.post_meta.page.tags && article.tags.length > 0
+                span.article-meta.tags
+                  span.article-meta-separator |
+                  each item, index in article.tags.data
+                    i.fas.fa-tag
+                    a(href=url_for(item.path)).article-meta__tags #[=item.name]
+                    if index < article.tags.data.length - 1
+                      span.article-meta-link #[='•']
+              
+              mixin countBlockInIndex
+                - needLoadCountJs = true
+                span.article-meta
+                  span.article-meta-separator |
+                  i.fas.fa-comments
+                  if block
+                    block
+                  span.article-meta-label= ' ' + _p('card_post_count')
+              
+              if theme.comments.card_post_count && theme.comments.use
+                case theme.comments.use[0]
+                  when 'Disqus'
+                  when 'Disqusjs'
+                    +countBlockInIndex
+                      a.disqus-count(href=full_url_for(link) + '#post-comment')
+                        i.fa-solid.fa-spinner.fa-spin
+                  when 'Valine'
+                    +countBlockInIndex
+                      a(href=url_for(link) + '#post-comment')
+                        span.valine-comment-count(data-xid=url_for(link))
+                          i.fa-solid.fa-spinner.fa-spin
+                  when 'Waline'
+                    +countBlockInIndex
+                      a(href=url_for(link) + '#post-comment')
+                        span.waline-comment-count(data-path=url_for(link))
+                          i.fa-solid.fa-spinner.fa-spin
+                  when 'Twikoo'
+                    +countBlockInIndex
+                      a.twikoo-count(href=url_for(link) + '#post-comment')
+                        i.fa-solid.fa-spinner.fa-spin
+                  when 'Facebook Comments'
+                    +countBlockInIndex
+                      a(href=url_for(link) + '#post-comment')
+                        span.fb-comments-count(data-href=urlNoIndex(article.permalink))
+                  when 'Remark42'
+                    +countBlockInIndex
+                      a(href=url_for(link) + '#post-comment')
+                        span.remark42__counter(data-url=urlNoIndex(article.permalink))
+                          i.fa-solid.fa-spinner.fa-spin
+                  when 'Artalk'
+                    +countBlockInIndex
+                      a(href=url_for(link) + '#post-comment')
+                        span.artalk-count(data-page-key=url_for(link))
+                          i.fa-solid.fa-spinner.fa-spin
+
+            //- Display the article introduction on homepage
+            case theme.index_post_content.method
+              when false
+                - break
+              when 1
+                .content!= article.description
+              when 2
+                .content!= article.description || truncate(article.content, theme.index_post_content.length)
+              default
+                .content!= truncate(article.content, theme.index_post_content.length)
+
+        if theme.ad && theme.ad.index
+          if (index + 1) % 3 === 0
+            .recent-post-item.ads-wrap!= theme.ad.index
+
+    include ../pagination.pug
--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -1,129 +0,0 @@
-mixin postUI(posts)
-  each article , index in page.posts.data
-    .recent-post-item
-      -
-        let link = article.link || article.path
-        let title = article.title || _p('no_title')
-        const position = theme.cover.position
-        let leftOrRight = position === 'both'
-          ? index%2 == 0 ? 'left' : 'right'
-          : position === 'left' ? 'left' : 'right'
-        let post_cover = article.cover
-        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
-      -
-      if post_cover && theme.cover.index_enable
-        .post_cover(class=leftOrRight)
-          a(href=url_for(link) title=title)
-            if article.cover_type === 'img'
-              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
-            else
-              div.post-bg(style=`background: ${post_cover}`)
-      .recent-post-info(class=no_cover)
-        a.article-title(href=url_for(link) title=title)
-          if (is_home() && (article.top || article.sticky > 0))
-            i.fas.fa-thumbtack.sticky
-          = title
-        .article-meta-wrap
-          if (theme.post_meta.page.date_type)
-            span.post-meta-date
-              if (theme.post_meta.page.date_type === 'both')
-                i.far.fa-calendar-alt
-                span.article-meta-label=_p('post.created')
-                time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
-                span.article-meta-separator |
-                i.fas.fa-history
-                span.article-meta-label=_p('post.updated')
-                time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
-              else
-                - let data_type_updated = theme.post_meta.page.date_type === 'updated'
-                - let date_type = data_type_updated ? 'updated' : 'date'
-                - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
-                - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
-                i(class=date_icon)
-                span.article-meta-label=date_title
-                time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
-          if (theme.post_meta.page.categories && article.categories.data.length > 0)
-            span.article-meta
-              span.article-meta-separator |
-              each item, index in article.categories.data
-                i.fas.fa-inbox
-                a(href=url_for(item.path)).article-meta__categories #[=item.name]
-                if (index < article.categories.data.length - 1)
-                  i.fas.fa-angle-right.article-meta-link
-          if (theme.post_meta.page.tags && article.tags.data.length > 0)
-            span.article-meta.tags
-              span.article-meta-separator |
-              each item, index in article.tags.data
-                i.fas.fa-tag
-                a(href=url_for(item.path)).article-meta__tags #[=item.name]
-                if (index < article.tags.data.length - 1)
-                  span.article-meta-link #[='•']
-          
-          mixin countBlockInIndex
-            - needLoadCountJs = true
-            span.article-meta
-              span.article-meta-separator |
-              i.fas.fa-comments
-              if block
-                block
-              span.article-meta-label= ' ' + _p('card_post_count')
-          
-          if theme.comments.card_post_count && theme.comments.use
-            case theme.comments.use[0]
-              when 'Disqus'
-              when 'Disqusjs'
-                +countBlockInIndex
-                  a.disqus-count(href=full_url_for(link) + '#post-comment')
-                    i.fa-solid.fa-spinner.fa-spin
-              when 'Valine'
-                +countBlockInIndex
-                  a(href=url_for(link) + '#post-comment')
-                    span.valine-comment-count(data-xid=url_for(link))
-                      i.fa-solid.fa-spinner.fa-spin
-              when 'Waline'
-                +countBlockInIndex
-                  a(href=url_for(link) + '#post-comment')
-                    span.waline-comment-count(data-path=url_for(link))
-                      i.fa-solid.fa-spinner.fa-spin
-              when 'Twikoo'
-                +countBlockInIndex
-                  a.twikoo-count(href=url_for(link) + '#post-comment')
-                    i.fa-solid.fa-spinner.fa-spin
-              when 'Facebook Comments'
-                +countBlockInIndex
-                  a(href=url_for(link) + '#post-comment')
-                    span.fb-comments-count(data-href=urlNoIndex(article.permalink))
-              when 'Remark42'
-                +countBlockInIndex
-                  a(href=url_for(link) + '#post-comment')
-                    span.remark42__counter(data-url=urlNoIndex(article.permalink))
-                      i.fa-solid.fa-spinner.fa-spin
-              when 'Artalk'
-                +countBlockInIndex
-                  a(href=url_for(link) + '#post-comment')
-                    span.artalk-count(data-page-key=url_for(link))
-                      i.fa-solid.fa-spinner.fa-spin
-
-        //- Display the article introduction on homepage
-        case theme.index_post_content.method
-          when false
-            - break
-          when 1
-            .content!= article.description
-          when 2
-            if article.description
-              .content!= article.description
-            else
-              - const content = strip_html(article.content)
-              - let expert = content.substring(0, theme.index_post_content.length) 
-              - content.length > theme.index_post_content.length ? expert += ' ...' : ''
-              .content!= expert
-          default
-            - const content = strip_html(article.content)
-            - let expert = content.substring(0, theme.index_post_content.length) 
-            - content.length > theme.index_post_content.length ? expert += ' ...' : ''
-            .content!= expert
-
-    if theme.ad && theme.ad.index
-      if (index + 1) % 3 == 0
-        .recent-post-item.ads-wrap!=theme.ad.index
--- a/layout/includes/page/404.pug
+++ b/layout/includes/page/404.pug
@@ -0,0 +1,8 @@
+- var top_img_404 = theme.error_404.background || theme.default_top_img
+
+.error-content
+  .error-img
+    img(src=url_for(top_img_404) alt='Page not found')
+  .error-info
+    h1.error_title= '404'
+    .error_subtitle= theme.error_404.subtitle || _p('error404')
--- a/layout/includes/page/shuoshuo.pug
+++ b/layout/includes/page/shuoshuo.pug
@@ -0,0 +1,103 @@
+//- - author:
+//-   avatar:
+//-   date:
+//-   content:
+//-   tags:
+//-     - tag1
+//-     - tag2
+
+
+- page.comments = false
+- page.toc = false
+#article-container
+  if page.shuoshuo_url
+    script.
+      (() => {
+        const loadShuoshuo = async () => {
+          try {
+            const fetchContent = await fetch('!{url_for(page.shuoshuo_url)}')
+            const shuoshuo = await fetchContent.json()
+
+            let start = 0
+            const container = document.getElementById('article-container')
+
+            const addData = data => {
+              const cLength = data.length
+              const end = start + 10 > cLength ? cLength : start + 10
+              let result = ''
+              data.slice(start, end).forEach((item) => {
+                result += `
+                      <div class="shuoshuo-item">
+                        <div class="shuoshuo-item-header">
+                          <div class="shuoshuo-avatar">
+                            <img class="no-lightbox" src="${item.avatar || '!{url_for(theme.avatar.img)}'}">
+                          </div>
+                          <div class="shuoshuo-info">
+                            <div class="shuoshuo-author">${item.author || '!{config.author}'}</div>
+                            <div class="shuoshuo-date">${btf.diffDate(item.date, true)}</div>
+                          </div>
+                        </div>
+                        <div class="shuoshuo-content">
+                          ${item.content}
+                        </div>
+                        <div class="shuoshuo-footer">
+                          <div class="shuoshuo-tags">
+                            ${item.tags.map(tag => `<span class="shuoshuo-tag">${tag}</span>`).join('')}
+                          </div>
+                        </div>
+                      </div>
+                      `
+              })
+
+              start = end
+              container.insertAdjacentHTML('beforeend', result)
+
+              if (start >= cLength) {
+                observer.disconnect()
+              } else {
+                setTimeout(() => observer.observe(container.lastElementChild), 100)
+              }
+
+              window.lazyLoadInstance.update()
+              btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
+            }
+
+            addData(shuoshuo)
+
+            const observer = new IntersectionObserver((entries) => {
+              if (entries[0].isIntersecting) {
+                observer.unobserve(entries[0].target)
+                addData(shuoshuo)
+              }
+            }, {
+              root: null,
+              rootMargin: '0px',
+              threshold: 1.0
+            })
+
+            if (container.lastElementChild) {
+              observer.observe(container.lastElementChild)
+            }
+          } catch (e) {
+            console.error(e)
+          }
+        }
+
+        window.pjax ? loadShuoshuo() : window.addEventListener('load', loadShuoshuo)
+      })()
+  else
+    if site.data.shuoshuo
+      each i in site.data.shuoshuo
+        .shuoshuo-item
+          .shuoshuo-item-header
+            .shuoshuo-avatar
+              img.no-lightbox(src=i.avatar || url_for(theme.avatar.img))
+            .shuoshuo-info
+              .shuoshuo-author=i.author || config.author
+              .shuoshuo-date=relative_date(i.date)
+          .shuoshuo-content
+            !=markdown(i.content)
+          .shuoshuo-footer
+            .shuoshuo-tags
+              each tag in i.tags
+                span.shuoshuo-tag=tag
--- a/layout/includes/page/tags.pug
+++ b/layout/includes/page/tags.pug
@@ -1,2 +1,2 @@
 .tag-cloud-list.is-center
-  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})
+  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em'})
--- a/layout/includes/pagination.pug
+++ b/layout/includes/pagination.pug
@@ -12,27 +12,25 @@ if is_post()
  nav#pagination.pagination-post
    if(prev)
      - var hasPageNext = next ? 'pull-left' : 'pull-full'
-      .prev-post(class=hasPageNext)
-        a(href=url_for(prev.path) title=prev.title)
-          if prev.cover_type === 'img'
-            img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
-          else
-            .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
-          .pagination-info
-            .label=_p('pagination.prev')
-            .prev_info=prev.title
+      a.prev-post(class=hasPageNext href=url_for(prev.path) title=prev.title)
+        if prev.cover_type === 'img'
+          img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
+        else
+          .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
+        .pagination-info
+          .label=_p('pagination.prev')
+          .prev_info=prev.title
          
    if(next)
      - var hasPagePrev = prev ? 'pull-right' : 'pull-full'
-      .next-post(class=hasPagePrev)
-        a(href=url_for(next.path) title=next.title)
-          if next.cover_type === 'img'
-            img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
-          else
-            .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
-          .pagination-info
-            .label=_p('pagination.next')
-            .next_info=next.title
+      a.next-post(class=hasPagePrev href=url_for(next.path) title=next.title)
+        if next.cover_type === 'img'
+          img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
+        else
+          .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
+        .pagination-info
+          .label=_p('pagination.next')
+          .next_info=next.title
 else
  nav#pagination
    .pagination
--- a/layout/includes/post/post-copyright.pug
+++ b/layout/includes/post/post-copyright.pug
@@ -1,15 +1,15 @@
 if theme.post_copyright.enable && page.copyright !== false
-  - let author = page.copyright_author || config.author
-  - let authorHref = page.copyright_author_href || theme.post_copyright.author_href || config.url
-  - let url = page.copyright_url || page.permalink
-  - let info = page.copyright_info || _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
+  - const author = page.copyright_author || config.author
+  - const authorHref = page.copyright_author_href || theme.post_copyright.author_href || config.url
+  - const url = page.copyright_url || page.permalink
+  - const info = page.copyright_info || _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
  .post-copyright
    .post-copyright__author
      span.post-copyright-meta
        i.fas.fa-circle-user.fa-fw
        = _p('post.copyright.author') + ": "
      span.post-copyright-info
-        a(href=authorHref)=author
+        a(href=authorHref)= author
    .post-copyright__type
      span.post-copyright-meta
        i.fas.fa-square-arrow-up-right.fa-fw
@@ -20,4 +20,4 @@ if theme.post_copyright.enable && page.copyright !== false
      span.post-copyright-meta
        i.fas.fa-circle-exclamation.fa-fw
        = _p('post.copyright.copyright_notice') + ": "
-      span.post-copyright-info!= info
+      span.post-copyright-info!= info
--- a/layout/includes/post/reward.pug
+++ b/layout/includes/post/reward.pug
@@ -5,9 +5,8 @@
  .reward-main
    ul.reward-all
      each item in theme.reward.QR_code
-        - var clickTo = item.link ? item.link : item.img
+        - const clickTo = item.link || item.img
        li.reward-item
          a(href=url_for(clickTo) target='_blank')
            img.post-qr-code-img(src=url_for(item.img) alt=item.text)
-          .post-qr-code-desc=item.text
-
+          .post-qr-code-desc=item.text
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,4 +1,4 @@
- const { readmode, translate, darkmode, aside, chat_btn } = theme
+- const { readmode, translate, darkmode, aside, chat } = theme
 mixin rightsideItem(array)
  each item in array
    case item
@@ -22,9 +22,9 @@ mixin rightsideItem(array)
          button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
            i.fas.fa-list-ul
      when 'chat'
-        if chat_btn
+        if chat.rightside_button && chat.use
          button#chat-btn(type="button" title=_p("rightside.chat"))
-            i.fas.fa-sms
+            i.fas.fa-message
      when 'comment'
        if commentsJsLoad
          a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
--- a/layout/includes/sidebar.pug
+++ b/layout/includes/sidebar.pug
@@ -1,18 +1,18 @@
-#sidebar
-  #menu-mask
-  #sidebar-menus
-    .avatar-img.is-center
-      img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-    .sidebar-site-data.site-data.is-center
-      a(href=url_for(config.archive_dir) + '/')
-        .headline= _p('aside.articles') 
-        .length-num= site.posts.length
-      a(href=url_for(config.tag_dir) + '/' )
-        .headline= _p('aside.tags')
-        .length-num= site.tags.length
-      a(href=url_for(config.category_dir) + '/')
-        .headline= _p('aside.categories') 
-        .length-num= site.categories.length
+if theme.menu
+  #sidebar
+    #menu-mask
+    #sidebar-menus
+      .avatar-img.is-center
+        img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+      .site-data.is-center
+        a(href=url_for(config.archive_dir) + '/')
+          .headline= _p('aside.articles')
+          .length-num= site.posts.length
+        a(href=url_for(config.tag_dir) + '/' )
+          .headline= _p('aside.tags')
+          .length-num= site.tags.length
+        a(href=url_for(config.category_dir) + '/')
+          .headline= _p('aside.categories') 
+          .length-num= site.categories.length

-    hr.custom-hr
-    !=partial('includes/header/menu_item', {}, {cache: true})
+      !=partial('includes/header/menu_item', {}, {cache: true})
--- a/layout/includes/third-party/abcjs/abcjs.pug
+++ b/layout/includes/third-party/abcjs/abcjs.pug
@@ -3,13 +3,15 @@ script.
    const abcjsInit = () => {
      const abcjsFn = () => {
        document.querySelectorAll(".abc-music-sheet").forEach(ele => {
+          if (ele.children.length > 0) return
          ABCJS.renderAbc(ele, ele.innerHTML, {responsive: 'resize'})
        })
      }
      
      typeof ABCJS === 'object' ? abcjsFn()
-        : getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
+        : btf.getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
    }

    window.pjax ? abcjsInit() : window.addEventListener('load', abcjsInit)
+    btf.addGlobalFn('encrypt', abcjsInit, 'abcjs')
  })()
--- a/layout/includes/third-party/abcjs/index.pug
+++ b/layout/includes/third-party/abcjs/index.pug
@@ -1,4 +1,4 @@
-if theme.abcjs && theme.abcjs.enable
+if theme.abcjs.enable
  if theme.abcjs.per_page
    if is_post() || is_page()
      include ./abcjs.pug
--- a/layout/includes/third-party/aplayer.pug
+++ b/layout/includes/third-party/aplayer.pug
@@ -1,3 +1,23 @@
 link(rel='stylesheet' href=url_for(theme.asset.aplayer_css) media="print" onload="this.media='all'")
 script(src=url_for(theme.asset.aplayer_js))
-script(src=url_for(theme.asset.meting_js))
+script(src=url_for(theme.asset.meting_js))
+if theme.pjax.enable
+  script.
+    (() => {
+      const destroyAplayer = () => {
+        if (window.aplayers) {
+          for (let i = 0; i < window.aplayers.length; i++) {
+            if (!window.aplayers[i].options.fixed) {
+              window.aplayers[i].destroy()
+            }
+          }
+        }
+      }
+
+      const runMetingJS = () => {
+        typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
+      }
+
+      btf.addGlobalFn('pjaxSend', destroyAplayer, 'destroyAplayer')
+      btf.addGlobalFn('pjaxComplete', loadMeting, 'runMetingJS')
+    })()
--- a/layout/includes/third-party/card-post-count/fb.pug
+++ b/layout/includes/third-party/card-post-count/fb.pug
@@ -1,5 +1,5 @@
- const fbSDKVer = 'v16.0'
- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
+- const fbSDKVer = 'v20.0'
+- const fbSDK = `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`

 script.
  (()=>{
--- a/layout/includes/third-party/card-post-count/twikoo.pug
+++ b/layout/includes/third-party/card-post-count/twikoo.pug
@@ -28,7 +28,7 @@ script.
        if (typeof twikoo === 'object') {
          runTwikoo()
        } else {
-          getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
+          btf.getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
        }
    }

--- a/layout/includes/third-party/card-post-count/valine.pug
+++ b/layout/includes/third-party/card-post-count/valine.pug
@@ -13,7 +13,7 @@ script.
      }

      if (typeof Valine === 'function') initValine() 
-      else getScript('!{url_for(theme.asset.valine)}').then(initValine)
+      else btf.getScript('!{url_for(theme.asset.valine)}').then(initValine)
    }

    window.pjax ? loadValine() : window.addEventListener('load', loadValine)
--- a/layout/includes/third-party/chat/chatra.pug
+++ b/layout/includes/third-party/chat/chatra.pug
@@ -1,8 +1,8 @@
 //- https://chatra.io/help/api/
 script.
  (() => {
-    const isChatBtn = !{theme.chat_btn}
-    const isChatHideShow = !{theme.chat_hide_show}
+    const isChatBtn = !{theme.chat.rightside_button}
+    const isChatHideShow = !{theme.chat.button_hide_show}

    if (isChatBtn) {
      const close = () => {
@@ -15,22 +15,15 @@ script.
        Chatra('show')
      }

-      window.ChatraSetup = {
-        startHidden: true
-      }
+      window.ChatraSetup = { startHidden: true }
    
      window.chatBtnFn = () => {
-        const isShow = document.getElementById('chatra').classList.contains('chatra--expanded')
-        isShow ? close() : open()
+        document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
      }
    } else if (isChatHideShow) {
      window.chatBtn = {
-        hide: () => {
-          Chatra('hide')
-        },
-        show: () => {
-          Chatra('show')
-        }
+        hide: () => Chatra('hide'),
+        show: () => Chatra('show')
      }
    }

@@ -38,13 +31,12 @@ script.
      w.ChatraID = '#{theme.chatra.id}'
      var s = d.createElement('script')
      w[c] = w[c] || function() {
-          (w[c].q = w[c].q || []).push(arguments)
+        (w[c].q = w[c].q || []).push(arguments)
      }
      s.async = true
      s.src = 'https://call.chatra.io/chatra.js'
      if (d.head) d.head.appendChild(s)
    })(document, window, 'Chatra')
-
  })()


--- a/layout/includes/third-party/chat/crisp.pug
+++ b/layout/includes/third-party/chat/crisp.pug
@@ -11,8 +11,8 @@ script.
    })();
    $crisp.push(["safe", true])

-    const isChatBtn = !{theme.chat_btn}
-    const isChatHideShow = !{theme.chat_hide_show}
+    const isChatBtn = !{theme.chat.rightside_button}
+    const isChatHideShow = !{theme.chat.button_hide_show}

    if (isChatBtn) {
      const open = () => {
@@ -20,26 +20,18 @@ script.
        $crisp.push(["do", "chat:open"])
      }

-      const close = () => {
-        $crisp.push(["do", "chat:hide"])
-      }
+      const close = () => $crisp.push(["do", "chat:hide"])

      close()
-      $crisp.push(["on", "chat:closed", function() {
-        close()
-      }])

-      window.chatBtnFn = () => {
-        $crisp.is("chat:visible") ? close() : open()
-      }
+      $crisp.push(["on", "chat:closed", close])
+
+      window.chatBtnFn = () => $crisp.is("chat:visible") ? close() : open()
+
    } else if (isChatHideShow) {
      window.chatBtn = {
-        hide: () => {
-          $crisp.push(["do", "chat:hide"])
-        },
-        show: () => {
-          $crisp.push(["do", "chat:show"])
-        }
+        hide: () => $crisp.push(["do", "chat:hide"]),
+        show: () => $crisp.push(["do", "chat:show"])
      }
    }
  })()
--- a/layout/includes/third-party/chat/daovoice.pug
+++ b/layout/includes/third-party/chat/daovoice.pug
@@ -3,8 +3,8 @@ script.
  (() => {
    (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice")

-    const isChatBtn = !{theme.chat_btn}
-    const isChatHideShow = !{theme.chat_hide_show}
+    const isChatBtn = !{theme.chat.rightside_button}
+    const isChatHideShow = !{theme.chat.button_hide_show}

    daovoice('init', {
      app_id: '!{theme.daovoice.app_id}',},{
--- a/layout/includes/third-party/chat/index.pug
+++ b/layout/includes/third-party/chat/index.pug
@@ -1,10 +1,9 @@
-if theme.chatra && theme.chatra.enable
-  include ./chatra.pug
-else if theme.tidio && theme.tidio.enable
-  include ./tidio.pug
-else if theme.daovoice && theme.daovoice.enable
-  include ./daovoice.pug
-else if theme.crisp && theme.crisp.enable
-  include ./crisp.pug
-else if theme.messenger && theme.messenger.enable
-  include ./messenger.pug
+case theme.chat.use
+  when 'chatra'
+    include ./chatra.pug
+  when 'tidio'
+    include ./tidio.pug
+  when 'daovoice'
+    include ./daovoice.pug
+  when 'crisp'
+    include ./crisp.pug
--- a/layout/includes/third-party/chat/messenger.pug
+++ b/layout/includes/third-party/chat/messenger.pug
@@ -1,44 +0,0 @@
- let { pageID, lang } = theme.messenger
- lang = theme.comments.use && theme.comments.use.includes('Facebook Comments') ? theme.facebook_comments.lang : lang
-
-#fb-customer-chat.fb-customerchat(page_id=pageID attribution='biz_inbox')
-
-script.
-  (() => {
-    document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
-
-    window.fbAsyncInit = function() {
-      FB.init({
-        xfbml: true,
-        version: 'v16.0'
-      });
-    };
-
-    (function(d, s, id) {
-      var js, fjs = d.getElementsByTagName(s)[0];
-      if (d.getElementById(id)) return;
-      js = d.createElement(s); js.id = id;
-      js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js';
-      fjs.parentNode.insertBefore(js, fjs);
-    }(document, 'script', 'facebook-jssdk'));
-
-    const isChatBtn = !{theme.chat_btn}
-    const isChatHideShow = !{theme.chat_hide_show}
-
-    if (isChatBtn) {
-      window.chatBtnFn = () => {
-        const isShow = document.querySelector('.fb_customer_chat_bounce_in_v2')
-        isShow ? FB.CustomerChat.hide() : FB.CustomerChat.show()
-      }
-    } else if (isChatHideShow) {
-      window.chatBtn = {
-        hide: () => {
-          FB.CustomerChat.hide()
-        },
-        show: () => {
-          FB.CustomerChat.show(false)
-        }
-      }
-    }
-  })()
-
--- a/layout/includes/third-party/chat/tidio.pug
+++ b/layout/includes/third-party/chat/tidio.pug
@@ -1,8 +1,8 @@
 script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
 script.
  (() => {
-    const isChatBtn = !{theme.chat_btn}
-    const isChatHideShow = !{theme.chat_hide_show}
+    const isChatBtn = !{theme.chat.rightside_button}
+    const isChatHideShow = !{theme.chat.button_hide_show}

    if (isChatBtn) {
      let isShow = false
@@ -33,12 +33,8 @@ script.
      }
    } else if (isChatHideShow) {
      window.chatBtn = {
-        hide: () => {
-          window.tidioChatApi && window.tidioChatApi.hide()
-        },
-        show: () => {
-          window.tidioChatApi && window.tidioChatApi.show()
-        }
+        hide: () => window.tidioChatApi && window.tidioChatApi.hide(),
+        show: () => window.tidioChatApi && window.tidioChatApi.show()
      }
    }
  })()
--- a/layout/includes/third-party/comments/artalk.pug
+++ b/layout/includes/third-party/comments/artalk.pug
@@ -25,14 +25,14 @@ script.
        artalkItem.destroy()
      }

-      btf.addGlobalFn('pjax', destroyArtalk, 'destroyArtalk')
+      btf.addGlobalFn('pjaxSendOnce', destroyArtalk, 'destroyArtalk')
    }

    const loadArtalk = async () => {
      if (typeof Artalk === 'object') initArtalk()
      else {
-        await getCSS('!{theme.asset.artalk_css}')
-        await getScript('!{theme.asset.artalk_js}')
+        await btf.getCSS('!{theme.asset.artalk_css}')
+        await btf.getScript('!{theme.asset.artalk_js}')
        initArtalk()
      }
    }
@@ -48,7 +48,7 @@ script.

    if ('!{use[0]}' === 'Artalk' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
-      else loadArtalk()
+      else setTimeout(loadArtalk, 100)
    } else {
      window.loadOtherComment = loadArtalk
    }
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/layout/includes/third-party/comments/disqusjs.pug
@@ -28,8 +28,8 @@ script.
    const loadDisqusjs = async() => {
      if (window.disqusJsLoad) initDisqusjs()
      else {
-        await getCSS('!{url_for(theme.asset.disqusjs_css)}')
-        await getScript('!{url_for(theme.asset.disqusjs)}')
+        await btf.getCSS('!{url_for(theme.asset.disqusjs_css)}')
+        await btf.getScript('!{url_for(theme.asset.disqusjs)}')
        initDisqusjs()
        window.disqusJsLoad = true
      }
--- a/layout/includes/third-party/comments/facebook_comments.pug
+++ b/layout/includes/third-party/comments/facebook_comments.pug
@@ -1,5 +1,5 @@
- const fbSDKVer = 'v16.0'
- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
+- const fbSDKVer = 'v20.0'
+- const fbSDK = `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`

 script.
  (()=>{
--- a/layout/includes/third-party/comments/giscus.pug
+++ b/layout/includes/third-party/comments/giscus.pug
@@ -1,13 +1,11 @@
- const { repo, repo_id, category_id, theme:themes, option } = theme.giscus
- const giscusUrl = theme.asset.giscus || 'https://giscus.app/client.js'
- const giscusOriginUrl = new URL(giscusUrl).origin
 - const { use, lazyload } = theme.comments
+- const { repo, repo_id, category_id, light_theme, dark_theme, js, option } = theme.giscus
+- const giscusUrl = js || 'https://giscus.app/client.js'
+- const giscusOriginUrl = new URL(giscusUrl).origin

 script.
  (()=>{
-    const getGiscusTheme = theme => {
-      return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
-    }
+    const getGiscusTheme = theme => theme === 'dark' ? '!{dark_theme}' : '!{light_theme}'

    const loadGiscus = () => {
      const config = Object.assign({
@@ -30,17 +28,17 @@ script.
    }

    const changeGiscusTheme = theme => {
-      const sendMessage = message => {
-        const iframe = document.querySelector('iframe.giscus-frame')
-        if (!iframe) return
-        iframe.contentWindow.postMessage({ giscus: message }, '!{giscusOriginUrl}')
-      }
-
-      sendMessage({
-        setConfig: {
-          theme: getGiscusTheme(theme)
+      const iframe = document.querySelector('#giscus-wrap iframe')
+      if (iframe) {
+        const message = {
+          giscus: {
+            setConfig: {
+              theme: getGiscusTheme(theme)
+            }
+          }
        }
-      });
+        iframe.contentWindow.postMessage(message, '!{giscusOriginUrl}')
+      }
    }

    btf.addGlobalFn('themeChange', changeGiscusTheme, 'giscus')
--- a/layout/includes/third-party/comments/gitalk.pug
+++ b/layout/includes/third-party/comments/gitalk.pug
@@ -19,8 +19,8 @@ script.
    const loadGitalk = async() => {
      if (typeof Gitalk === 'function') initGitalk()
      else {
-        await getCSS('!{url_for(theme.asset.gitalk_css)}')
-        await getScript('!{url_for(theme.asset.gitalk)}')
+        await btf.getCSS('!{url_for(theme.asset.gitalk_css)}')
+        await btf.getScript('!{url_for(theme.asset.gitalk)}')
        initGitalk()
      }
    }
--- a/layout/includes/third-party/comments/twikoo.pug
+++ b/layout/includes/third-party/comments/twikoo.pug
@@ -33,7 +33,7 @@ script.

    const loadTwikoo = () => {
      if (typeof twikoo === 'object') setTimeout(init,0)
-      else getScript('!{url_for(theme.asset.twikoo)}').then(init)
+      else btf.getScript('!{url_for(theme.asset.twikoo)}').then(init)
    }

    if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) {
--- a/layout/includes/third-party/comments/utterances.pug
+++ b/layout/includes/third-party/comments/utterances.pug
@@ -1,34 +1,42 @@
 - const { use, lazyload } = theme.comments
- const { repo, issue_term, light_theme, dark_theme } = theme.utterances
+- const { repo, issue_term, light_theme, dark_theme, js, option } = theme.utterances
+- const utterancesUrl = js || 'https://utteranc.es/client.js'
+- const utterancesOriginUrl = new URL(utterancesUrl).origin

 script.
  (() => {
+    const getUtterancesTheme = theme => theme === 'dark' ? '#{dark_theme}' : '#{light_theme}'
+
    const loadUtterances = () => {
-      let ele = document.createElement('script')
-      ele.id = 'utterances_comment'
-      ele.src = 'https://utteranc.es/client.js'
-      ele.setAttribute('repo', '!{repo}')
-      ele.setAttribute('issue-term', '!{issue_term}')
-      const nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{dark_theme}' : '#{light_theme}'
-      ele.setAttribute('theme', nowTheme)
-      ele.crossOrigin = 'anonymous'
-      ele.async = true
+      const config = Object.assign({
+        id: 'utterances_comment',
+        src: '!{utterancesUrl}',
+        repo: '!{repo}',
+        'issue-term': '!{issue_term}',
+        theme: getUtterancesTheme(document.documentElement.getAttribute('data-theme')),
+        crossorigin: 'anonymous',
+        async: true
+      },!{JSON.stringify(option)})
+
+      const ele = document.createElement('script')
+      for (let key in config) {
+        ele.setAttribute(key, config[key])
+      }
      document.getElementById('utterances-wrap').appendChild(ele)
    }

-    const utterancesTheme = theme => {
-      const iframe = document.querySelector('.utterances-frame')
+    const changeUtterancesTheme = theme => {
+      const iframe = document.querySelector('#utterances-wrap iframe')
      if (iframe) {
-        const theme = theme === 'dark' ? '#{dark_theme}' : '#{light_theme}'
        const message = {
          type: 'set-theme',
-          theme: theme
+          theme: getUtterancesTheme(theme)
        };
-        iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+        iframe.contentWindow.postMessage(message, '!{utterancesOriginUrl}')
      }
    }

-    btf.addGlobalFn('themeChange', utterancesTheme, 'utterances')
+    btf.addGlobalFn('themeChange', changeUtterancesTheme, 'utterances')

    if ('!{use[0]}' === 'Utterances' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
--- a/layout/includes/third-party/comments/valine.pug
+++ b/layout/includes/third-party/comments/valine.pug
@@ -23,7 +23,7 @@ script.
    const loadValine = async () => {
      if (typeof Valine === 'function') initValine()
      else {
-        await getScript('!{url_for(theme.asset.valine)}')
+        await btf.getScript('!{url_for(theme.asset.valine)}')
        initValine()
      }
    }
--- a/layout/includes/third-party/comments/waline.pug
+++ b/layout/includes/third-party/comments/waline.pug
@@ -19,17 +19,19 @@ script.
        waline.destroy()
      }

-      btf.addGlobalFn('pjax', destroyWaline, 'destroyWaline')
+      btf.addGlobalFn('pjaxSendOnce', destroyWaline, 'destroyWaline')
    }

-    const loadWaline = async () => {
+    const loadWaline = () => {
      if (initFn) initWaline(initFn)
      else {
-        await getCSS('!{url_for(theme.asset.waline_css)}')
-        const { init } = await import('!{url_for(theme.asset.waline_js)}')
-        initFn = init || Waline.init
-        initWaline(initFn)
-        window.walineFn = initFn
+        btf.getCSS('!{url_for(theme.asset.waline_css)}')
+          .then(() => import('!{url_for(theme.asset.waline_js)}'))
+          .then(({ init }) => {
+            initFn = init || Waline.init
+            initWaline(initFn)
+            window.walineFn = initFn
+          })
      }
    }

--- a/layout/includes/third-party/math/index.pug
+++ b/layout/includes/third-party/math/index.pug
@@ -1,17 +1,10 @@
-if theme.mathjax && theme.mathjax.enable
-  if theme.mathjax.per_page
-    if is_post() || is_page()
-      include ./mathjax.pug
-  else
-    if page.mathjax
+case theme.math.use
+  when 'mathjax'
+    if (theme.math.per_page && (is_post() || is_page())) || page.mathjax
      include ./mathjax.pug

-if theme.katex && theme.katex.enable
-  if theme.katex.per_page
-    if is_post() || is_page()
-      include ./katex.pug
-  else
-    if page.katex
+  when 'katex'
+    if (theme.math.per_page && (is_post() || is_page())) || page.katex
      include ./katex.pug

 if theme.mermaid.enable
--- a/layout/includes/third-party/math/katex.pug
+++ b/layout/includes/third-party/math/katex.pug
@@ -1,9 +1,16 @@
-link(rel="stylesheet" type="text/css" href=url_for(theme.asset.katex))
-script(src=url_for(theme.asset.katex_copytex))
 script.
-  (() => {
-    document.querySelectorAll('#article-container span.katex-display').forEach(item => {
-      btf.wrap(item, 'div', { class: 'katex-wrap'})
-    })
-  })()
-  
+  (async () => {
+    const showKatex = () => {
+      document.querySelectorAll('#article-container .katex').forEach(el => el.classList.add('katex-show'))
+    }
+
+    if (!window.katex_js_css) {
+      window.katex_js_css = true
+      await btf.getCSS('!{url_for(theme.asset.katex)}')
+      if (!{theme.math.katex.copy_tex}) {
+        await btf.getScript('!{url_for(theme.asset.katex_copytex)}')
+      }
+    }
+
+    showKatex()
+  })()
--- a/layout/includes/third-party/math/mathjax.pug
+++ b/layout/includes/third-party/math/mathjax.pug
@@ -1,38 +1,47 @@
 //- Mathjax 3
+- const { tags, enableMenu } = theme.math.mathjax
 script.
-  if (!window.MathJax) {
-    window.MathJax = {
-      tex: {
-        inlineMath: [['$', '$'], ['\\(', '\\)']],
-        tags: 'ams'
-      },
-      chtml: {
-        scale: 1.1
-      },
-      options: {
-        renderActions: {
-          findScript: [10, doc => {
-            for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
-              const display = !!node.type.match(/; *mode=display/)
-              const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display)
-              const text = document.createTextNode('')
-              node.parentNode.replaceChild(text, node)
-              math.start = {node: text, delim: '', n: 0}
-              math.end = {node: text, delim: '', n: 0}
-              doc.math.push(math)
+  (() => {
+    const loadMathjax = () => {
+      if (!window.MathJax) {
+        window.MathJax = {
+          tex: {
+            inlineMath: [['$', '$'], ['\\(', '\\)']],
+            tags: '!{tags}',
+          },
+          chtml: {
+            scale: 1.1
+          },
+          options: {
+            enableMenu: !{enableMenu},
+            renderActions: {
+              findScript: [10, doc => {
+                for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
+                  const display = !!node.type.match(/; *mode=display/)
+                  const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display)
+                  const text = document.createTextNode('')
+                  node.parentNode.replaceChild(text, node)
+                  math.start = {node: text, delim: '', n: 0}
+                  math.end = {node: text, delim: '', n: 0}
+                  doc.math.push(math)
+                }
+              }, '']
            }
-          }, '']
+          }
        }
+        
+        const script = document.createElement('script')
+        script.src = '!{url_for(theme.asset.mathjax)}'
+        script.id = 'MathJax-script'
+        script.async = true
+        document.head.appendChild(script)
+      } else {
+        MathJax.startup.document.state(0)
+        MathJax.texReset()
+        MathJax.typesetPromise()
      }
    }
-    
-    const script = document.createElement('script')
-    script.src = '!{url_for(theme.asset.mathjax)}'
-    script.id = 'MathJax-script'
-    script.async = true
-    document.head.appendChild(script)
-  } else {
-    MathJax.startup.document.state(0)
-    MathJax.texReset()
-    MathJax.typesetPromise()
-  }
+
+    btf.addGlobalFn('encrypt', loadMathjax, 'mathjax')
+    window.pjax ? loadMathjax() : window.addEventListener('load', loadMathjax)
+  })()
--- a/layout/includes/third-party/math/mermaid.pug
+++ b/layout/includes/third-party/math/mermaid.pug
@@ -1,38 +1,51 @@
 script.
  (() => {
-    const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
-    if ($mermaid.length === 0) return
-    const runMermaid = () => {
+    const runMermaid = ele => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'

-      Array.from($mermaid).forEach((item, index) => {
+      ele.forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
-        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
-        const mermaidID = 'mermaid-' + index
+        const mermaidThemeConfig = `%%{init:{ 'theme':'${theme}'}}%%\n`
+        const mermaidID = `mermaid-${index}`
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent

        const renderFn = mermaid.render(mermaidID, mermaidDefinition)
-
-        const renderV10 = () => {
-          renderFn.then(({svg}) => {
-            mermaidSrc.insertAdjacentHTML('afterend', svg)
-          })
-        }
-
-        const renderV9 = svg => {
+        const renderMermaid = svg => {
          mermaidSrc.insertAdjacentHTML('afterend', svg)
        }

-        typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
+        // mermaid v9 and v10 compatibility
+        typeof renderFn === 'string' ? renderMermaid(renderFn) : renderFn.then(({ svg }) => renderMermaid(svg))
+      })
+    }
+
+    const codeToMermaid = () => {
+      const codeMermaidEle = document.querySelectorAll('pre > code.mermaid')
+      if (codeMermaidEle.length === 0) return
+
+      codeMermaidEle.forEach(ele => {
+        const preEle = document.createElement('pre')
+        preEle.className = 'mermaid-src'
+        preEle.hidden = true
+        preEle.textContent = ele.textContent
+        const newEle = document.createElement('div')
+        newEle.className = 'mermaid-wrap'
+        newEle.appendChild(preEle)
+        ele.parentNode.replaceWith(newEle)
      })
    }

    const loadMermaid = () => {
-      window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
+      if (!{theme.mermaid.code_write}) codeToMermaid()
+      const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
+      if ($mermaid.length === 0) return
+
+      const runMermaidFn = () => runMermaid($mermaid)
+      btf.addGlobalFn('themeChange', runMermaidFn, 'mermaid')
+      window.loadMermaid ? runMermaidFn() : btf.getScript('!{url_for(theme.asset.mermaid)}').then(runMermaidFn)
    }

-    btf.addGlobalFn('themeChange', runMermaid, 'mermaid')
-
+    btf.addGlobalFn('encrypt', loadMermaid, 'mermaid')
    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
  })()
--- a/layout/includes/third-party/newest-comments/artalk.pug
+++ b/layout/includes/third-party/newest-comments/artalk.pug
@@ -2,105 +2,71 @@
 - const avatarCdn = (option !== null && option.gravatar && option.gravatar.mirror) || ''
 - const avatarDefault = (option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)) || ''

+!= partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
 script.
  window.addEventListener('load', () => {
-    const changeContent = (content) => {
-      if (content === '') return content
+    const keyName = 'artalk-newest-comments'
+    const { changeContent, generateHtml, run } = window.newestComments

-      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
-      content = content.replace(/<[^>]+>/g,"") // remove html tag
+    const getAvatarValue = async () => {
+      const predefinedAvatarCdn = '!{avatarCdn}'
+      const predefinedAvatarDefault = '!{avatarDefault}'

-      if (content.length > 150) {
-        content = content.substring(0,150) + '...'
+      const avatarDefaultFormat = e => e.startsWith('d=') ? e : `d=${e}`
+
+      if (predefinedAvatarCdn && predefinedAvatarDefault) {
+        return { avatarCdn: predefinedAvatarCdn, avatarDefault: avatarDefaultFormat(predefinedAvatarDefault) }
      }
-      return content
-    }
-
-    const generateHtml = array => {
-      let result = ''
-
-      if (array.length) {
-        for (let i = 0; i < array.length; i++) {
-          result += '<div class=\'aside-list-item\'>'
-
-          if (!{theme.newest_comments.avatar}) {
-            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
-            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
-          }
-
-          result += `<div class='content'>
-          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-          </div></div>`
-        }
-      } else {
-        result += '!{_p("aside.card_newest_comments.zero")}'
-      }
-
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
-      $dom && ($dom && ($dom.innerHTML= result))
-      window.lazyLoadInstance && window.lazyLoadInstance.update()
-      window.pjax && window.pjax.refresh($dom)
-    }
-
-    const getSetting = async () => {
+    
      try {
-        const res = await fetch('!{server}/api/v2/conf', { method: 'GET' })
-        return await res.json()
+        const res = await fetch('!{server}/api/v2/conf')
+        const result = await res.json()
+        const { mirror, params, default: defaults } = result.frontend_conf.gravatar
+        const avatarCdn = predefinedAvatarCdn || mirror
+        let avatarDefault = avatarDefaultFormat(predefinedAvatarDefault || params || defaults)
+        return { avatarCdn, avatarDefault}
      } catch (e) {
-        console.log(e)
+        console.error(e)
+        return { avatarCdn: predefinedAvatarCdn, avatarDefault: avatarDefaultFormat(predefinedAvatarDefault) }
      }
    }

-    const headerList = {
-      method: 'GET',
-    }
-
    const searchParams = new URLSearchParams({
      'site_name': '!{site}',
-      'limit': '!{theme.newest_comments.limit}',
+      'limit': '!{theme.aside.card_newest_comments.limit}',
    })

-    const getComment = async () => {
+    const getComment = async (ele) => {
      try {
-        const res = await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`, headerList)
+        const res = await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`)
        const result = await res.json()
+<<<<<<< HEAD
        const avatarStr = await getSetting()
        const { mirror, params, default:defaults } = avatarStr.frontend_conf.gravatar
        const avatarCdn = '!{avatarCdn}' || mirror
        let avatarDefault = '!{avatarDefault}' || params || defaults
        avatarDefault = avatarDefault.startsWith('d=') ? avatarDefault : `d=${avatarDefault}`
        const artalk = result.data.map(function (e) {
+=======
+        const { avatarCdn, avatarDefault } = await getAvatarValue()
+        const artalk = result.data.map(e => {
+          const avatar = avatarCdn && e.email_encrypted ? `${avatarCdn}${e.email_encrypted}?${avatarDefault}` : ''
+>>>>>>> dev
          return {
-            'avatar': `${avatarCdn}${e.email_encrypted}?${avatarDefault}`,
+            'avatar': avatar,
            'content': changeContent(e.content_marked),
            'nick': e.nick,
            'url': e.page_url,
            'date': e.date,
          }
        })
-        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
-        generateHtml(artalk)
+        btf.saveToLocal.set(keyName, JSON.stringify(artalk), !{theme.aside.card_newest_comments.storage}/(60*24))
+        generateHtml(artalk, ele)
      } catch (e) {
        console.log(e)
-        const $dom = document.querySelector('#card-newest-comments .aside-list')
-        $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
+        ele.textContent= "!{_p('aside.card_newest_comments.error')}"
      }
    }

-    const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
-        const data = saveToLocal.get('artalk-newest-comments')
-        if (data) {
-          generateHtml(JSON.parse(data))
-        } else {
-          getComment()
-        }
-      }
-    }
-
-    newestCommentInit()
-    document.addEventListener('pjax:complete', newestCommentInit)
-  })
+    run(keyName, getComment)
+  })
--- a/layout/includes/third-party/newest-comments/common.pug
+++ b/layout/includes/third-party/newest-comments/common.pug
@@ -0,0 +1,60 @@
+script.
+  window.newestComments = {
+    changeContent: content => {
+      if (content === '') return content
+
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+      content = content.replace(/<code>.*?<\/code>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code      
+      content = content.replace(/<[^>]+>/g, "") // remove html tag
+
+      if (content.length > 150) {
+        content = content.substring(0, 150) + '...'
+      }
+      return content
+    },
+
+    generateHtml: (array, ele) => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class="aside-list-item">'
+
+          if (!{theme.aside.card_newest_comments.avatar} && array[i].avatar) {
+            const imgAttr = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            result += `<a href="${array[i].url}" class="thumbnail"><img ${imgAttr}="${array[i].avatar}" alt="${array[i].nick}"></a>`
+          }
+
+          result += `<div class="content">
+          <a class="comment" href="${array[i].url}" title="${array[i].content}">${array[i].content}</a>
+          <div class="name"><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
+          </div></div>`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      ele.innerHTML = result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh(ele)
+    },
+
+    newestCommentInit: (name, getComment) => {
+      const $dom = document.querySelector('#card-newest-comments .aside-list')
+      if ($dom) {
+        const data = btf.saveToLocal.get(name)
+        if (data) {
+          newestComments.generateHtml(JSON.parse(data), $dom)
+        } else {
+          getComment($dom)
+        }
+      }
+    },
+
+    run: (name, getComment) => {
+      newestComments.newestCommentInit(name, getComment)
+      btf.addGlobalFn('pjaxComplete', () => newestComments.newestCommentInit(name, getComment), name)
+    }
+  }
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -1,21 +1,12 @@
+!= partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
+
 script.
  window.addEventListener('load', () => {
-    const changeContent = (content) => {
-      if (content === '') return content
+    const keyName = 'disqus-newest-comments'
+    const { changeContent, generateHtml, run } = window.newestComments

-      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-      content = content.replace(/<code>.*?<\/code>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
-      content = content.replace(/<[^>]+>/g,"") // remove html tag
-
-      if (content.length > 150) {
-        content = content.substring(0,150) + '...'
-      }
-      return content
-    }
-
-    const getComment = () => {
-      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{apiKey}')
+    const getComment = ele => {
+      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{forum}&related=thread&limit=!{theme.aside.card_newest_comments.limit}&api_key=!{apiKey}')
        .then(response => response.json())
        .then(data => {
          const disqusArray = data.response.map(item => {
@@ -28,54 +19,15 @@ script.
            }
          })

-          saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(disqusArray)
+          btf.saveToLocal.set(keyName, JSON.stringify(disqusArray), !{theme.aside.card_newest_comments.storage}/(60*24))
+          generateHtml(disqusArray, ele)
        }).catch(e => {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
+          console.error(e)
+          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }

-    const generateHtml = array => {
-      let result = ''
-
-      if (array.length) {
-        for (let i = 0; i < array.length; i++) {
-          result += '<div class=\'aside-list-item\'>'
-
-          if (!{theme.newest_comments.avatar}) {
-            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
-            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
-          }
-          
-          result += `<div class='content'>
-          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-          <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
-          </div></div>`
-        }
-      } else {
-        result += '!{_p("aside.card_newest_comments.zero")}'
-      }
-
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
-      $dom && ($dom.innerHTML= result)
-      window.lazyLoadInstance && window.lazyLoadInstance.update()
-      window.pjax && window.pjax.refresh($dom)
-    }
-
-    const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
-        const data = saveToLocal.get('disqus-newest-comments')
-        if (data) {
-          generateHtml(JSON.parse(data))
-        } else {
-          getComment()
-        }
-      }
-    }
-
-    newestCommentInit()
-    document.addEventListener('pjax:complete', newestCommentInit)
+    run(keyName, getComment)
  })


--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -1,20 +1,11 @@
+!= partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
+
 script.
  window.addEventListener('load', () => {
-    const changeContent = (content) => {
-      if (content === '') return content
+    const keyName = 'github-newest-comments'
+    const { changeContent, generateHtml, run } = window.newestComments

-      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
-      content = content.replace(/<[^>]+>/g,"") // remove html tag
-
-      if (content.length > 150) {
-        content = content.substring(0,150) + '...'
-      }
-      return content
-    }
-
-    const findTrueUrl = (array) => {
+    const findTrueUrl = (array, ele) => {
      Promise.all(array.map(item =>
        fetch(item.url).then(resp => resp.json()).then(data => {
          let urlArray = data.body ? data.body.match(/(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?/ig) : []
@@ -35,13 +26,13 @@ script.
            }
          })

-          saveToLocal.set('github-newest-comments', JSON.stringify(array), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(array)
+          btf.saveToLocal.set(keyName, JSON.stringify(array), !{theme.aside.card_newest_comments.storage}/(60*24))
+          generateHtml(array, ele)
      });
    }

-    const getComment = () => {
-      fetch('https://api.github.com/repos/!{userRepo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1',{
+    const getComment = ele => {
+      fetch('https://api.github.com/repos/!{userRepo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.aside.card_newest_comments.limit}&page=1',{
        "headers": {
          Accept: 'application/vnd.github.v3.html+json'
        }
@@ -54,57 +45,16 @@ script.
              'content': changeContent(item.body_html || item.body),
              'nick': item.user.login,
              'url': item.issue_url,
-              'date': item.updated_at,
-              'githubUrl': item.html_url
+              'date': item.updated_at
            }
          })
-          findTrueUrl(githubArray)
+          findTrueUrl(githubArray, ele)
        }).catch(e => {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
+          console.error(e)
+          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }
-
-    const generateHtml = array => {
-      let result = ''
-
-      if (array.length) {
-        for (let i = 0; i < array.length; i++) {
-          result += '<div class=\'aside-list-item\'>'
-
-          if (!{theme.newest_comments.avatar}) {
-            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
-            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
-          }
-
-          result += `<div class='content'>
-          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-          </div></div>`
-        }
-      } else {
-        result += '!{_p("aside.card_newest_comments.zero")}'
-      }
-
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
-      $dom && ($dom.innerHTML= result)
-      window.lazyLoadInstance && window.lazyLoadInstance.update()
-      window.pjax && window.pjax.refresh($dom)
-    }
-
-    const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
-        const data = saveToLocal.get('github-newest-comments')
-        if (data) {
-          generateHtml(JSON.parse(data))
-        } else {
-          getComment()
-        }
-      }
-    }
-
-    newestCommentInit()
-    document.addEventListener('pjax:complete', newestCommentInit)
+    run(keyName, getComment)
  })


--- a/layout/includes/third-party/newest-comments/remark42.pug
+++ b/layout/includes/third-party/newest-comments/remark42.pug
@@ -2,52 +2,14 @@

 script.
  window.addEventListener('load', () => {
-    const changeContent = (content) => {
-      if (content === '') return content
+    const keyName = 'remark42-newest-comments'
+    const { changeContent, generateHtml, run } = window.newestComments

-      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
-      content = content.replace(/<[^>]+>/g,"") // remove html tag
-
-      if (content.length > 150) {
-        content = content.substring(0,150) + '...'
-      }
-      return content
-    }
-
-    const generateHtml = array => {
-      let result = ''
-
-      if (array.length) {
-        for (let i = 0; i < array.length; i++) {
-          result += '<div class=\'aside-list-item\'>'
-
-          if (!{theme.newest_comments.avatar}) {
-            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
-            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
-          }
-
-          result += `<div class='content'>
-          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-          </div></div>`
-        }
-      } else {
-        result += '!{_p("aside.card_newest_comments.zero")}'
-      }
-
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
-      $dom && ($dom.innerHTML= result)
-      window.lazyLoadInstance && window.lazyLoadInstance.update()
-      window.pjax && window.pjax.refresh($dom)
-    }
-
-    const getComment = () => {
-      fetch('!{host}/api/v1/last/!{theme.newest_comments.limit}?site=!{siteId}')
+    const getComment = ele => {
+      fetch('!{host}/api/v1/last/!{theme.aside.card_newest_comments.limit}?site=!{siteId}')
        .then(response => response.json())
        .then(data => {
-          const remark42 = data.map(function (e) {
+          const remark42 = data.map(e => {
            return {
              'avatar': e.user.picture,
              'content': changeContent(e.text),
@@ -56,25 +18,13 @@ script.
              'date': e.time,
            }
          })
-          saveToLocal.set('remark42-newest-comments', JSON.stringify(remark42), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(remark42)
+          btf.saveToLocal.set(keyName, JSON.stringify(remark42), !{theme.aside.card_newest_comments.storage}/(60*24))
+          generateHtml(remark42, ele)
        }).catch(e => {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
+          console.error(e)
+          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }

-    const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
-        const data = saveToLocal.get('remark42-newest-comments')
-        if (data) {
-          generateHtml(JSON.parse(data))
-        } else {
-          getComment()
-        }
-      }
-    }
-
-    newestCommentInit()
-    document.addEventListener('pjax:complete', newestCommentInit)
+    run(keyName, getComment)
  })
--- a/layout/includes/third-party/newest-comments/twikoo-comment.pug
+++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug
@@ -1,27 +1,18 @@
+!= partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
+
 script.
  window.addEventListener('load', () => {
-    const changeContent = (content) => {
-      if (content === '') return content
+    const keyName = 'twikoo-newest-comments'
+    const { changeContent, generateHtml, run } = window.newestComments

-      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
-      content = content.replace(/<[^>]+>/g,"") // remove html tag
-
-      if (content.length > 150) {
-        content = content.substring(0,150) + '...'
-      }
-      return content
-    }
-
-    const getComment = () => {
+    const getComment = ele => {
      const runTwikoo = () => {
        twikoo.getRecentComments({
          envId: '!{theme.twikoo.envId}',
          region: '!{theme.twikoo.region}',
-          pageSize: !{theme.newest_comments.limit},
+          pageSize: !{theme.aside.card_newest_comments.limit},
          includeReply: true
-        }).then(function (res) {
+        }).then(res => {
          const twikooArray = res.map(e => {
            return {
              'content': changeContent(e.comment),
@@ -32,61 +23,22 @@ script.
            }
          })

-          saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(twikooArray)
-        }).catch(function (err) {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
+          btf.saveToLocal.set(keyName, JSON.stringify(twikooArray), !{theme.aside.card_newest_comments.storage}/(60*24))
+          generateHtml(twikooArray, ele)
+        }).catch(err => {
+          console.error(err)
+          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
      }

      if (typeof twikoo === 'object') {
        runTwikoo()
      } else {
-        getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
+        btf.getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
      }
    }

-    const generateHtml = array => {
-      let result = ''
-
-      if (array.length) {
-        for (let i = 0; i < array.length; i++) {
-          result += '<div class=\'aside-list-item\'>'
-
-          if (!{theme.newest_comments.avatar}) {
-            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
-            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
-          }
-          
-          result += `<div class='content'>
-          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-          </div></div>`
-        }
-      } else {
-        result += '!{_p("aside.card_newest_comments.zero")}'
-      }
-
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
-      $dom && ($dom.innerHTML= result)
-      window.lazyLoadInstance && window.lazyLoadInstance.update()
-      window.pjax && window.pjax.refresh($dom)
-    }
-
-    const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
-        const data = saveToLocal.get('twikoo-newest-comments')
-        if (data) {
-          generateHtml(JSON.parse(data))
-        } else {
-          getComment()
-        }
-      }
-    }
-
-    newestCommentInit()
-    document.addEventListener('pjax:complete', newestCommentInit)
+    run(keyName, getComment)
  })


--- a/layout/includes/third-party/newest-comments/valine.pug
+++ b/layout/includes/third-party/newest-comments/valine.pug
@@ -1,21 +1,12 @@
 - let default_avatar = theme.valine.avatar

 script(src=url_for(theme.asset.blueimp_md5))
+!= partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
+
 script.
  window.addEventListener('load', () => {
-    const changeContent = (content) => {
-      if (content === '') return content
-
-      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
-      content = content.replace(/<[^>]+>/g,"") // remove html tag
-
-      if (content.length > 150) {
-        content = content.substring(0,150) + '...'
-      }
-      return content
-    }
+    const keyName = 'valine-newest-comments'
+    const { changeContent, generateHtml, run } = window.newestComments

    const getIcon = (icon, mail) => {
      if (icon) return icon
@@ -24,34 +15,7 @@ script.
      return iconUrl
    }

-    const generateHtml = array => {
-      let result = ''
-
-      if (array.length) {
-        for (let i = 0; i < array.length; i++) {
-          result += '<div class=\'aside-list-item\'>'
-
-          if (!{theme.newest_comments.avatar}) {
-            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
-            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
-          }
-
-          result += `<div class='content'>
-          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-          </div></div>`
-        }
-      } else {
-        result += '!{_p("aside.card_newest_comments.zero")}'
-      }
-
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
-      $dom && ($dom.innerHTML= result)
-      window.lazyLoadInstance && window.lazyLoadInstance.update()
-      window.pjax && window.pjax.refresh($dom)
-    }
-
-    const getComment = () => {
+    const getComment = ele => {
      const serverURL = '!{theme.valine.serverURLs || `https://${theme.valine.appId.substring(0,8)}.api.lncldglobal.com` }'

      var settings = {
@@ -63,10 +27,10 @@ script.
        },
      }

-      fetch(`${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`,settings)
+      fetch(`${serverURL}/1.1/classes/Comment?limit=!{theme.aside.card_newest_comments.limit}&order=-createdAt`,settings)
        .then(response => response.json())
        .then(data => {
-          const valineArray = data.results.map(function (e) {
+          const valineArray = data.results.map(e => {
            return {
              'avatar': getIcon(e.QQAvatar, e.mail),
              'content': changeContent(e.comment),
@@ -75,25 +39,13 @@ script.
              'date': e.updatedAt,
            }
          })
-          saveToLocal.set('valine-newest-comments', JSON.stringify(valineArray), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(valineArray)
+          btf.saveToLocal.set(keyName, JSON.stringify(valineArray), !{theme.aside.card_newest_comments.storage}/(60*24))
+          generateHtml(valineArray, ele)
        }).catch(e => {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
-        }) 
+          console.error(e)
+          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
+        })
    }

-    const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
-        const data = saveToLocal.get('valine-newest-comments')
-        if (data) {
-          generateHtml(JSON.parse(data))
-        } else {
-          getComment()
-        }
-      }
-    }
-
-    newestCommentInit()
-    document.addEventListener('pjax:complete', newestCommentInit)
+    run(keyName, getComment)
  })
--- a/layout/includes/third-party/newest-comments/waline.pug
+++ b/layout/includes/third-party/newest-comments/waline.pug
@@ -1,51 +1,15 @@
 - const serverURL = theme.waline.serverURL.replace(/\/$/, '')

+!= partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
+
 script.
  window.addEventListener('load', () => {
-    const changeContent = content => {
-      if (content === '') return content
+    const keyName = 'waline-newest-comments'
+    const { changeContent, generateHtml, run } = window.newestComments

-      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
-      content = content.replace(/<[^>]+>/g,"") // remove html tag
-
-      if (content.length > 150) {
-        content = content.substring(0,150) + '...'
-      }
-      return content
-    }
-
-    const generateHtml = array => {
-      let result = ''
-
-      if (array.length) {
-        for (let i = 0; i < array.length; i++) {
-          result += '<div class=\'aside-list-item\'>'
-
-          if (!{theme.newest_comments.avatar}) {
-            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
-            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
-          }
-
-          result += `<div class='content'>
-          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-          </div></div>`
-        }
-      } else {
-        result += '!{_p("aside.card_newest_comments.zero")}'
-      }
-
-      let $dom = document.querySelector('#card-newest-comments .aside-list')
-      $dom && ($dom.innerHTML= result)
-      window.lazyLoadInstance && window.lazyLoadInstance.update()
-      window.pjax && window.pjax.refresh($dom)
-    }
-
-    const getComment = async () => {
+    const getComment = async (ele) => {
      try {
-        const res = await fetch('!{serverURL}/api/comment?type=recent&count=!{theme.newest_comments.limit}', { method: 'GET' })
+        const res = await fetch('!{serverURL}/api/comment?type=recent&count=!{theme.aside.card_newest_comments.limit}', { method: 'GET' })
        const result = await res.json()
        const walineArray = result.data.map(e => {
          return {
@@ -56,26 +20,13 @@ script.
            'date': e.time || e.insertedAt
          }
        })
-        saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
-        generateHtml(walineArray)
+        btf.saveToLocal.set(keyName, JSON.stringify(walineArray), !{theme.aside.card_newest_comments.storage}/(60*24))
+        generateHtml(walineArray, ele)
      } catch (err) {
        console.error(err)
-        const $dom = document.querySelector('#card-newest-comments .aside-list')
-        $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
+        ele.textContent= "!{_p('aside.card_newest_comments.error')}"
      }
    }

-    const newestCommentInit = () => {
-      if (document.querySelector('#card-newest-comments .aside-list')) {
-        const data = saveToLocal.get('waline-newest-comments')
-        if (data) {
-          generateHtml(JSON.parse(data))
-        } else {
-          getComment()
-        }
-      }
-    }
-
-    newestCommentInit()
-    document.addEventListener('pjax:complete', newestCommentInit)
+    run(keyName, getComment)
  })
--- a/layout/includes/third-party/pangu.pug
+++ b/layout/includes/third-party/pangu.pug
@@ -1,20 +1,23 @@
 script.
-  function panguFn () {
-    if (typeof pangu === 'object') pangu.autoSpacingPage()
-    else {
-      getScript('!{url_for(theme.asset.pangu)}')
-        .then(() => {
-          pangu.autoSpacingPage()
-        })
+  (() => {
+    const panguFn = () => {
+      if (typeof pangu === 'object') pangu.autoSpacingPage()
+      else {
+        btf.getScript('!{url_for(theme.asset.pangu)}')
+          .then(() => {
+            pangu.autoSpacingPage()
+          })
+      }
    }
-  }

-  function panguInit () {
-    if (!{theme.pangu.field === 'post'}){
-      GLOBAL_CONFIG_SITE.isPost && panguFn()
-    } else {
-      panguFn()
+    const panguInit = () => {
+      if (!{theme.pangu.field === 'post'}){
+        GLOBAL_CONFIG_SITE.isPost && panguFn()
+      } else {
+        panguFn()
+      }
    }
-  }

-  document.addEventListener('DOMContentLoaded', panguInit)
+    btf.addGlobalFn('pjaxComplete', panguInit, 'pangu')
+    document.addEventListener('DOMContentLoaded', panguInit)
+  })()
--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -1,9 +1,9 @@
 - var pjaxExclude = 'a:not([target="_blank"])'
 if theme.pjax.exclude
  each val in theme.pjax.exclude
-    - pjaxExclude = pjaxExclude + `:not([href="${val}"])`
+    - pjaxExclude += `:not([href="${val}"])`

- let pjaxSelectors = ['head > title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax']
+- let pjaxSelectors = ['head > title', '#config-diff', '#body-wrap', '#rightside-config-hide', '#rightside-config-show', '.js-pjax']

 - let choose = theme.comments.use
 if choose
@@ -14,70 +14,50 @@ if choose

 script(src=url_for(theme.asset.pjax))
 script.
-  let pjaxSelectors = !{JSON.stringify(pjaxSelectors)}
+  (() => {
+    const pjaxSelectors = !{JSON.stringify(pjaxSelectors)}

-  var pjax = new Pjax({
-    elements: '!{pjaxExclude}',
-    selectors: pjaxSelectors,
-    cacheBust: false,
-    analytics: !{theme.google_analytics ? true : false},
-    scrollRestoration: false
-  })
-
-  document.addEventListener('pjax:send', function () {
-
-    // removeEventListener
-    btf.removeGlobalFnEvent('pjax')
-    btf.removeGlobalFnEvent('themeChange')
-
-    document.getElementById('rightside').classList.remove('rightside-show')
-    
-    if (window.aplayers) {
-      for (let i = 0; i < window.aplayers.length; i++) {
-        if (!window.aplayers[i].options.fixed) {
-          window.aplayers[i].destroy()
-        }
-      }
-    }
-
-    typeof typed === 'object' && typed.destroy()
-
-    //reset readmode
-    const $bodyClassList = document.body.classList
-    $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
-
-    typeof disqusjs === 'object' && disqusjs.destroy()
-  })
-
-  document.addEventListener('pjax:complete', function () {
-    window.refreshFn()
-
-    document.querySelectorAll('script[data-pjax]').forEach(item => {
-      const newScript = document.createElement('script')
-      const content = item.text || item.textContent || item.innerHTML || ""
-      Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
-      newScript.appendChild(document.createTextNode(content))
-      item.parentNode.replaceChild(newScript, item)
+    window.pjax = new Pjax({
+      elements: '!{pjaxExclude}',
+      selectors: pjaxSelectors,
+      cacheBust: false,
+      analytics: !{theme.google_analytics ? true : false},
+      scrollRestoration: false
    })

-    GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
-
-    typeof panguInit === 'function' && panguInit()
-
-    // google analytics
-    typeof gtag === 'function' && gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname});
-
-    // baidu analytics
-    typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
-
-    typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
-
-    // prismjs
-    typeof Prism === 'object' && Prism.highlightAll()
-  })
-
-  document.addEventListener('pjax:error', e => {
-    if (e.request.status === 404) {
-      pjax.loadUrl('!{url_for("/404.html")}')
+    const triggerPjaxFn = (val) => {
+      if (!val) return
+      Object.values(val).forEach(fn => fn())
    }
-  })
+
+    document.addEventListener('pjax:send', () => {
+      // removeEventListener
+      btf.removeGlobalFnEvent('pjaxSendOnce')
+      btf.removeGlobalFnEvent('themeChange')
+
+      // reset readmode
+      const $bodyClassList = document.body.classList
+      if ($bodyClassList.contains('read-mode')) $bodyClassList.remove('read-mode')
+
+      triggerPjaxFn(window.globalFn.pjaxSend)
+    })
+
+    document.addEventListener('pjax:complete', () => {
+      btf.removeGlobalFnEvent('pjaxCompleteOnce')
+      document.querySelectorAll('script[data-pjax]').forEach(item => {
+        const newScript = document.createElement('script')
+        const content = item.text || item.textContent || item.innerHTML || ""
+        Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
+        newScript.appendChild(document.createTextNode(content))
+        item.parentNode.replaceChild(newScript, item)
+      })
+
+      triggerPjaxFn(window.globalFn.pjaxComplete)
+    })
+
+    document.addEventListener('pjax:error', e => {
+      if (e.request.status === 404) {
+        pjax.loadUrl('!{url_for("/404.html")}')
+      }
+    })
+  })()
--- a/layout/includes/third-party/prismjs.pug
+++ b/layout/includes/third-party/prismjs.pug
@@ -1,5 +1,23 @@
-if config.prismjs && config.prismjs.enable && !config.prismjs.preprocess
-  script(src=url_for(theme.asset.prismjs_js))
-  script(src=url_for(theme.asset.prismjs_autoloader))
-  if config.prismjs.line_number
-    script(src=url_for(theme.asset.prismjs_lineNumber_js))
+- const { prismjs_js, prismjs_autoloader, prismjs_lineNumber_js } = theme.asset
+- const { prismjs, syntax_highlighter } = config
+- const { enable, preprocess, line_number } = prismjs
+
+if (syntax_highlighter === 'prismjs' || enable) && !preprocess
+  script.
+    (() => {
+      window.Prism = window.Prism || {}
+      window.Prism.manual = true
+
+      const highlightAll = () => {
+        window.Prism.highlightAll()
+      }
+
+      window.addEventListener('load', highlightAll)
+      btf.addGlobalFn('pjaxComplete', highlightAll, 'prismjs')
+      btf.addGlobalFn('encrypt', highlightAll, 'prismjs')
+    })()
+
+  script(src=url_for(prismjs_js))
+  script(src=url_for(prismjs_autoloader))
+  if (line_number)
+    script(src=url_for(prismjs_lineNumber_js))
--- a/layout/includes/third-party/search/docsearch.pug
+++ b/layout/includes/third-party/search/docsearch.pug
@@ -1,4 +1,4 @@
- const { appId, apiKey, indexName, option } = theme.docsearch
+- const { placeholder, docsearch: { appId, apiKey, indexName, option } } = theme.search

 .docsearch-wrap
  #docsearch(style="display:none")
@@ -11,6 +11,7 @@
        apiKey: '!{apiKey}',
        indexName: '!{indexName}',
        container: '#docsearch',
+        placeholder: '!{ placeholder || _p("search.input_placeholder")}',
      }, !{JSON.stringify(option)}))

      const handleClick = () => {
--- a/layout/includes/third-party/search/index.pug
+++ b/layout/includes/third-party/search/index.pug
@@ -1,6 +1,7 @@
-if theme.algolia_search.enable
-  include ./algolia.pug
-else if theme.local_search.enable
-  include ./local-search.pug
-else if theme.docsearch.enable
-  include ./docsearch.pug
+case theme.search.use
+  when 'algolia_search'
+    include ./algolia.pug
+  when 'local_search'
+    include ./local-search.pug
+  when 'docsearch'
+    include ./docsearch.pug
--- a/layout/includes/third-party/search/local-search.pug
+++ b/layout/includes/third-party/search/local-search.pug
@@ -13,7 +13,7 @@
    .search-wrap
      #local-search-input
        .local-search-box
-          input(placeholder=_p("search.local_search.input_placeholder") type="text").local-search-box--input
+          input(placeholder=theme.search.placeholder || _p("search.input_placeholder") type="text").local-search-box--input
      hr
      #local-search-results
      #local-search-stats-wrap
--- a/layout/includes/third-party/share/index.pug
+++ b/layout/includes/third-party/share/index.pug
@@ -1,5 +1,9 @@
-.post_share
-  if theme.sharejs.enable
-    include ./share-js.pug
-  else if theme.addtoany.enable
-    !=partial('includes/third-party/share/addtoany', {}, {cache: true})
+- const { use } = theme.share
+
+if use
+  .post-share
+    case use
+      when 'addtoany'
+        !=partial('includes/third-party/share/addtoany', {}, {cache: true})
+      when 'sharejs'
+        include ./share-js.pug
--- a/layout/includes/third-party/share/share-js.pug
+++ b/layout/includes/third-party/share/share-js.pug
@@ -1,4 +1,4 @@
 - const coverVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
-.social-share(data-image=url_for(coverVal) data-sites= theme.sharejs.sites)
+.social-share(data-image=url_for(coverVal) data-sites= theme.share.sharejs.sites)
 link(rel='stylesheet' href=url_for(theme.asset.sharejs_css) media="print" onload="this.media='all'")
 script(src=url_for(theme.asset.sharejs) defer)
--- a/layout/includes/third-party/subtitle.pug
+++ b/layout/includes/third-party/subtitle.pug
@@ -3,7 +3,7 @@

 script.
  window.typedJSFn = {
-    init: (str) => {
+    init: str => {
      window.typed = new Typed('#subtitle', Object.assign({
        strings: str,
        startDelay: 300,
@@ -12,18 +12,19 @@ script.
        backSpeed: 50,
      }, !{JSON.stringify(typed_option)}))
    },
-    run: (subtitleType) => {
+    run: subtitleType => {
      if (!{effect}) {
        if (typeof Typed === 'function') {
          subtitleType()
        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+          btf.getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
        }
      } else {
        subtitleType()
      }
    }
  }
+  btf.addGlobalFn('pjaxSendOnce', () => { typed.destroy() }, 'typedDestroy')

 case source
  when 1
@@ -47,7 +48,7 @@ case source
  when 2
    script.
      function subtitleType () {
-        getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
+        btf.getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
          const con = str[0]
          if (!{effect}) {
            const from = '出自 ' + str[1]
@@ -64,7 +65,7 @@ case source
  when 3
    script.
      function subtitleType () {
-        getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
+        btf.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
          jinrishici.load(result =>{
            if (!{effect}) {
              const sub = !{JSON.stringify(subContent)}
--- a/layout/includes/third-party/umami_analytics.pug
+++ b/layout/includes/third-party/umami_analytics.pug
@@ -0,0 +1,65 @@
+- let { serverURL, website_id, option, UV_PV } = theme.umami_analytics
+- const isServerURL = !!serverURL
+- const baseURL = serverURL ? serverURL.replace(/\/$/, '') : 'https://cloud.umami.is'
+- const apiUrl = serverURL ? serverURL.replace(/\/$/, '') + '/api' : 'https://api.umami.is/v1'
+
+script.
+  (() => {
+    const option = !{JSON.stringify(option)}
+    const config = !{JSON.stringify(UV_PV)}
+
+    const runTrack = () => {
+      umami.track(props => ({ ...props, url: window.location.pathname, title: GLOBAL_CONFIG_SITE.title }))
+    }
+
+    const loadUmamiJS = () => {
+      btf.getScript('!{baseURL}/script.js', {
+        'data-website-id': '!{website_id}',
+        'data-auto-track': 'false',
+        ...option
+      }).then(runTrack)
+    }
+
+    const getData = async (isPost) => {
+      const now = Date.now()
+      const keyUrl = isPost ? `&url=${window.location.pathname}` : ''
+      const headerList = { 'Accept': 'application/json' }
+      if (!{isServerURL}) headerList['Authorization'] = `Bearer ${config.token}`
+      else headerList['x-umami-api-key'] = config.token
+      const res = await fetch(`!{apiUrl}/websites/!{website_id}/stats?startAt=0000000000&endAt=${now}${keyUrl}`, {
+        method: "GET",
+        headers: headerList
+      })
+      return await res.json()
+    }
+
+    const insertData = async () => {
+      try {
+        if (GLOBAL_CONFIG_SITE.isPost && config.page_pv) {
+          const pagePV = document.getElementById('umamiPV')
+          if (pagePV) {
+            const data = await getData(true)
+            pagePV.textContent = data.pageviews.value
+          }
+        } else {
+          const data = (config.site_uv || config.site_pv) && await getData()
+          if (config.site_uv) {
+            const siteUV = document.getElementById('umami-site-uv')
+            if (siteUV) siteUV.textContent = data.visitors.value
+          }
+          if (config.site_pv) {
+            const sitePV = document.getElementById('umami-site-pv')
+            if (sitePV) sitePV.textContent = data.pageviews.value
+          }
+        }
+      } catch (e) {
+        console.error('Failed to load Umami Analytics:', e)
+      }
+    }
+
+    btf.addGlobalFn('pjaxComplete', runTrack, 'umami_analytics_run_track')
+    btf.addGlobalFn('pjaxComplete', insertData, 'umami_analytics_insert')
+
+    loadUmamiJS()
+    insertData()
+  })()
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -1,12 +1,11 @@
 if theme.aside.card_author.enable
-  .card-widget.card-info
-    .is-center
-      .avatar-img
-        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
-      .author-info__name= config.author
-      .author-info__description!= theme.aside.card_author.description || config.description
+  .card-widget.card-info.is-center
+    .avatar-img
+      img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
+    .author-info-name= config.author
+    .author-info-description!= theme.aside.card_author.description || config.description

-    .card-info-data.site-data.is-center
+    .site-data
      a(href=url_for(config.archive_dir) + '/')
        .headline= _p('aside.articles')
        .length-num= site.posts.length
@@ -23,5 +22,5 @@ if theme.aside.card_author.enable
        span=theme.aside.card_author.button.text
  
    if(theme.social)
-        .card-info-social-icons.is-center
-          !=partial('includes/header/social', {}, {cache: true})
+      .card-info-social-icons
+        !=partial('includes/header/social', {}, {cache: true})
--- a/layout/includes/widget/card_newest_comment.pug
+++ b/layout/includes/widget/card_newest_comment.pug
@@ -1,4 +1,4 @@
-if theme.newest_comments.enable && theme.comments.use && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
+if theme.aside.card_newest_comments.enable && theme.comments.use && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
  .card-widget#card-newest-comments
    .item-headline
      i.fas.fa-comment-dots
--- a/layout/includes/widget/card_webinfo.pug
+++ b/layout/includes/widget/card_webinfo.pug
@@ -8,21 +8,31 @@ if theme.aside.card_webinfo.enable
        .webinfo-item
          .item-name= _p('aside.card_webinfo.article_name') + " :"
          .item-count= site.posts.length
-      if theme.runtimeshow.enable
+      if theme.aside.card_webinfo.runtime_date
        .webinfo-item
          .item-name= _p('aside.card_webinfo.runtime.name') + " :"
-          .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
+          .item-count#runtimeshow(data-publishDate=date_xml(theme.aside.card_webinfo.runtime_date))
            i.fa-solid.fa-spinner.fa-spin
      if theme.wordcount.enable && theme.wordcount.total_wordcount
        .webinfo-item
          .item-name=_p('aside.card_webinfo.site_wordcount') + " :"
          .item-count=totalcount(site)
-      if theme.busuanzi.site_uv
+      if theme.umami_analytics.enable && theme.umami_analytics.UV_PV.site_uv
+        .webinfo-item
+          .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
+          .item-count#umami-site-uv
+            i.fa-solid.fa-spinner.fa-spin
+      else if theme.busuanzi.site_uv
        .webinfo-item
          .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
          .item-count#busuanzi_value_site_uv
            i.fa-solid.fa-spinner.fa-spin
-      if theme.busuanzi.site_pv
+      if theme.umami_analytics.enable && theme.umami_analytics.UV_PV.site_pv
+        .webinfo-item
+          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
+          .item-count#umami-site-pv
+            i.fa-solid.fa-spinner.fa-spin
+      else if theme.busuanzi.site_pv
        .webinfo-item
          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
          .item-count#busuanzi_value_site_pv
--- a/layout/index.pug
+++ b/layout/index.pug
@@ -1,7 +1,5 @@
 extends includes/layout.pug

 block content
-  include ./includes/mixins/post-ui.pug
-  #recent-posts.recent-posts
-    +postUI
-    include includes/pagination.pug
+  include ./includes/mixins/indexPostUI.pug
+  +indexPostUI
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -1,20 +1,32 @@
 extends includes/layout.pug

 block content
-  #page
-    if top_img === false
-      h1.page-title= page.title
+  - const noCardLayout = ['shuoshuo', '404'].includes(page.type) ? 'nc' : ''
+  - var commentsJsLoad = false 
+
+  mixin commentLoad
+    if page.comments !== false && theme.comments.use
+      - commentsJsLoad = true
+      !=partial('includes/third-party/comments/index', {}, {cache: true})
+
+  #page(class=noCardLayout)
+    if top_img === false && page.title
+      .page-title= page.title

    case page.type
      when 'tags'
        include includes/page/tags.pug
+        +commentLoad
      when 'link'
        include includes/page/flink.pug
+        +commentLoad
      when 'categories'
        include includes/page/categories.pug
+        +commentLoad
+      when '404'
+        include includes/page/404.pug
+      when 'shuoshuo'
+        include includes/page/shuoshuo.pug
      default
        include includes/page/default-page.pug
-
-    if page.comments !== false && theme.comments && theme.comments.use
-      - var commentsJsLoad = true
-      !=partial('includes/third-party/comments/index', {}, {cache: true})
+        +commentLoad
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -8,7 +8,7 @@ block content
    article#article-container.post-content!=page.content
    include includes/post/post-copyright.pug
    .tag_share
-      if (theme.post_meta.post.tags)
+      if (page.tags.length > 0 && theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]
@@ -26,7 +26,7 @@ block content
    if theme.related_post && theme.related_post.enable
      != related_posts(page,site.posts)

-    if page.comments !== false && theme.comments && theme.comments.use
+    if page.comments !== false && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})
      
--- a/layout/tag.pug
+++ b/layout/tag.pug
@@ -2,10 +2,8 @@ extends includes/layout.pug

 block content
  if theme.tag_ui == 'index'
-    include ./includes/mixins/post-ui.pug
-    #recent-posts.recent-posts
-      +postUI
-      include includes/pagination.pug
+    include ./includes/mixins/indexPostUI.pug
+    +indexPostUI
  else
    include ./includes/mixins/article-sort.pug
    #tag