代码优化

_config.yml

@@ -38,10 +38,10 @@ copy:
 
 # social settings (社交圖標設置)
 # formal:
-#   icon: link || the description
+#   icon: link || the description || color
 social:
-  # fab fa-github: https://github.com/xxxxx || Github
-  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email
+  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
+  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'
 
 # search (搜索)
 # see https://butterfly.js.org/posts/ceeb73f/#搜索系統
@@ -787,6 +787,13 @@ fancybox: true
 # Tag Plugins settings (標籤外掛)
 # --------------------------------------
 
+# abcjs (樂譜渲染)
+# See https://github.com/paulrosen/abcjs
+# ---------------
+abcjs:
+  enable: false
+  per_page: true
+
 # mermaid
 # see https://github.com/mermaid-js/mermaid
 mermaid:
@@ -967,3 +974,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
 

layout/includes/head.pug

@@ -15,7 +15,7 @@
 
 meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
-meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,viewport-fit=cover")
+meta(name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover")
 title= tabTitle
 meta(name="author" content=pageAuthor)
 meta(name="copyright" content=pageCopyright)
@@ -66,4 +66,4 @@ include ./head/noscript.pug
 
 !=fragment_cache('injectHeadJs', function(){return inject_head_js()})
 
-!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
+!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})

layout/includes/header/social.pug

@@ -1,4 +1,4 @@
 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)
+    i(class=icon style=url.split('||')[2] === undefined ? '' : `color: ${trim(url.split('||')[2]).replace(/[\'\"]/g, '')};`)

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

plugins.yml

@@ -211,4 +211,4 @@ docsearch_css:
 abcjs_basic_js:
   name: abcjs
   file: dist/abcjs-basic-min.js
-  version: 6.2.0
+  version: 6.2.0

scripts/tag/score.js

@@ -0,0 +1,22 @@
+/**
+ * Music Score
+ * {% score %}
+ */
+
+'use strict';
+
+function score(args, content) {
+    function escapeHtmlTags(s) {
+        let lookup = {
+            '&': "&",
+            '"': """,
+            '\'': "'",
+            '<': "&lt;",
+            '>': "&gt;"
+        };
+        return s.replace(/[&"'<>]/g, c => lookup[c]);
+    }
+    return `<div class="abc-music-sheet">${escapeHtmlTags(content)}</div>`;
+}
+
+hexo.extend.tag.register('score', score, {ends: true});

source/css/_layout/third-party.styl

@@ -115,6 +115,14 @@ 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
+ 
 +maxWidth768()
   .fancybox__toolbar__column.is-middle
-    display: none
+    display: none

source/css/_page/common.styl

@@ -18,7 +18,7 @@
     padding: 20px 5px
 
   +minWidth2000()
-    max-width: 1500px
+    max-width: 1700px
 
   & > div:first-child:not(.recent-posts)
     @extend .cardHover