✨ aplayer的間距調整

🐛 修復tabs外挂標簽與aplayer插件衝突而異常的bugs

scripts/tags/tabs.js

@@ -7,17 +7,17 @@
 'use strict'
 
 function postTabs (args, content) {
-  var tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g
+  const tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g
 
   args = args.join(' ').split(',')
-  var tabName = args[0]
-  var tabActive = Number(args[1]) || 0
+  const tabName = args[0]
+  const tabActive = Number(args[1]) || 0
 
-  var matches = []
-  var match
-  var tabId = 0
-  var tabNav = ''
-  var tabContent = ''
+  const matches = []
+  let match
+  let tabId = 0
+  let tabNav = ''
+  let tabContent = ''
 
   !tabName && hexo.log.warn('Tabs block must have unique name!')
 
@@ -26,12 +26,12 @@ function postTabs (args, content) {
     matches.push(match[2])
   }
 
-  for (var i = 0; i < matches.length; i += 2) {
-    var tabParameters = matches[i].split('@')
-    var postContent = matches[i + 1]
-    var tabCaption = tabParameters[0] || ''
-    var tabIcon = tabParameters[1] || ''
-    var tabHref = ''
+  for (let i = 0; i < matches.length; i += 2) {
+    const tabParameters = matches[i].split('@')
+    let postContent = matches[i + 1]
+    let tabCaption = tabParameters[0] || ''
+    let tabIcon = tabParameters[1] || ''
+    let tabHref = ''
 
     postContent = hexo.render.renderSync({ text: postContent, engine: 'markdown' }).trim()
 
@@ -40,14 +40,14 @@ function postTabs (args, content) {
 
     ((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = tabName + ' ' + tabId)
 
-    var isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : ''
-    var icon = tabIcon.trim()
+    const isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : ''
+    const icon = tabIcon.trim()
     tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`)
 
-    var toTop = '<button class="tab-to-top" onclick="scrollToDest($(this).parents(\'.tabs\'),65)"><i class="fas fa-arrow-up"></i></button>'
+    const toTop = '<button class="tab-to-top" onclick="scrollToDest($(this).parents(\'.tabs\'),65)"><i class="fas fa-arrow-up"></i></button>'
 
-    var isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
-    tabNav += `<li class="tab${isActive}"><a href="#${tabHref}">${tabIcon + tabCaption.trim()}</a></li>`
+    const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
+    tabNav += `<li class="tab${isActive}"><button data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>`
     tabContent += `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent + toTop}</div>`
   }
 

source/css/_layout/third-party.styl

@@ -85,3 +85,8 @@ if hexo-config('beautify.enable')
 
 .has-jax
   overflow: auto
+
+//aplayer
+#article-container
+  .aplayer
+    margin: 0 0 1rem

source/css/_mode/darkmode.styl

@@ -288,19 +288,19 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         > .nav-tabs
           background: #2c2c2c
 
-          a
+          button
             border-top: 2px solid #2c2c2c
             background: #2c2c2c
             color: alpha(#FFFFFF, .6)
 
           .tab:not(.active)
-            a
+            button
               &:hover
                 border-top: 2px solid lighten(#121212, 20)
                 background: lighten(#121212, 20)
 
           .active
-            a
+            button
               background: #121212
 
     // 第三方

source/css/_mode/readmode.styl

@@ -143,12 +143,6 @@ if hexo-config('readmode')
         .tabs
           border: 2px solid rgba(255, 255, 255, .6)
 
-          > .nav-tabs
-            filter: none
-
-            a
-              color: rgba(255, 255, 255, .6)
-
   .read-mode
     #body-wrap
       padding-left: 0 !important
@@ -236,7 +230,7 @@ if hexo-config('readmode')
           > .tab
             border-bottom: 0
 
-            a
+            button
               border-top: none !important
               background: transparent
 
@@ -244,7 +238,7 @@ if hexo-config('readmode')
                 background: none !important
 
             &.active
-              a
+              button
                 text-decoration: underline
 
         > .tab-contents .tab-item-content.active

source/css/_tags/tabs.styl

@@ -20,26 +20,25 @@
         @media screen and (max-width: 768px)
           flex-grow: 1
 
-        a
+        button
           display: block
-          padding: .5rem .8rem
-          outline: 0
+          padding: .5rem 1rem
           border-top: 2px solid $tab-border-color
           background: $tab-botton-bg
           color: $font-color
-          text-align: center
+          width 100%
+          line-height: 2
           transition: all .4s
 
           &:hover
             border-top: 2px solid $tab-button-hover-bg
             background: $tab-button-hover-bg
-            text-decoration: none
 
           i
             width: 1.5em
 
         &.active
-          a
+          button
             border-top: 2px solid $tab-active-border-color
             background: $card-bg
             cursor: default

source/js/main.js

@@ -760,20 +760,19 @@ $(function () {
     })
   }
 
-  var $tab = $('#article-container .tabs')
-  $tab.find('.tab a').on('click', function (e) {
-    e.preventDefault()
-    var $this = $(this)
-    var $tabItem = $this.parent()
+  const $tab = $('#article-container .tabs')
+  $tab.find('.tab button').on('click', function (e) {
+    const $this = $(this)
+    const $tabItem = $this.parent()
 
     if (!$tabItem.hasClass('active')) {
-      var $tacbContent = $this.parents('.nav-tabs').next()
+      const $tacbContent = $this.parents('.nav-tabs').next()
       $tabItem.siblings('.active').removeClass('active')
       $tabItem.addClass('active')
-      var tabId = $this.attr('href')
+      const tabId = $this.attr('data-href')
       $tacbContent.find('> .tab-item-content').removeClass('active')
       $tacbContent.find(`> ${tabId}`).addClass('active')
-      var $isTabJustifiedGallery = $tacbContent.find(tabId).find('.justified-gallery')
+      const $isTabJustifiedGallery = $tacbContent.find(tabId).find('.justified-gallery')
       if (isJustifiedGallery && $isTabJustifiedGallery.length > 0) {
         initJustifiedGallery($isTabJustifiedGallery)
       }