update

_config.yml

@@ -788,7 +788,7 @@ fancybox: true
 # ---------------
 abcjs:
   enable: false
-  per_page: false
+  per_page: true
 
 # mermaid
 # see https://github.com/mermaid-js/mermaid
@@ -970,3 +970,4 @@ CDN:
     # artalk_js:
     # artalk_css:
     # busuanzi:
+    # abcjs_basic_js:

layout/includes/additional-js.pug

@@ -31,6 +31,8 @@ div
 
     include ./third-party/math/index.pug
 
+    include ./third-party/abcjs/index.pug
+
     if commentsJsLoad
       include ./third-party/comments/js.pug
 
@@ -61,10 +63,3 @@ div
     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})
-
-  if theme.abcjs && theme.abcjs.enable
-    if theme.abcjs.per_page
-      if is_post() || is_page()
-        include ./third-party/abcjs.pug
-    else if page.abcjs
-        include ./third-party/abcjs.pug

layout/includes/third-party/abcjs.pug

@@ -1,18 +0,0 @@
-script.
-    function abcjsInit() {
-        function abcjsFn() {
-            for (let abcContainer of document.getElementsByClassName("abc-music-sheet")) {
-                ABCJS.renderAbc(abcContainer, abcContainer.innerHTML, {responsive: 'resize'});
-            }
-        }
-        if (typeof ABCJS === 'object') {
-            abcjsFn();
-        } else {
-            getScript('!{url_for(theme.asset.abcjs_basic_js)}')
-                .then(() => {
-                    abcjsFn();
-                });
-        }
-    }
-
-    document.addEventListener('DOMContentLoaded', abcjsInit);

layout/includes/third-party/abcjs/abcjs.pug

@@ -0,0 +1,15 @@
+script.
+  (() => {
+    function abcjsInit() {
+      function abcjsFn() {
+        for (let abcContainer of document.getElementsByClassName("abc-music-sheet")) {
+          ABCJS.renderAbc(abcContainer, abcContainer.innerHTML, {responsive: 'resize'})
+        }
+      }
+      
+      typeof ABCJS === 'object' ? abcjsFn()
+        : getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
+    }
+
+    window.pjax ? abcjsInit() : document.addEventListener('DOMContentLoaded', abcjsInit)
+  })()

layout/includes/third-party/abcjs/index.pug

@@ -0,0 +1,6 @@
+if theme.abcjs.enable
+  if theme.abcjs.per_page
+    if is_post() || is_page()
+      include ./abcjs.pug
+  else if page.abcjs
+    include ./abcjs.pug

source/css/_layout/third-party.styl

@@ -114,3 +114,11 @@ span.mathjax-overflow
 
 .snackbar-css
   border-radius: 5px !important
+
+.abc-music-sheet
+  margin: 0 0 20px
+  opacity: 0
+  transition: opacity .3s
+
+  &.abcjs-container
+    opacity: 1