From b6c1aba4d59ba2c7f2ef3fdba8106dbf2a2fb329 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Sat, 25 Jul 2020 00:47:35 +0800
Subject: [PATCH] Refactor tags

---
 scripts/tags/button.js                        | 19 ++++++-------
 scripts/tags/label.js                         |  2 +-
 scripts/tags/note.js                          | 18 +++++++++++-
 scripts/tags/tabs.js                          | 28 +++++++++----------
 source/css/_common/scaffolding/tags/note.styl |  9 ++++++
 5 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/scripts/tags/button.js b/scripts/tags/button.js
index 021c433..21c5b4d 100644
--- a/scripts/tags/button.js
+++ b/scripts/tags/button.js
@@ -8,21 +8,20 @@
 
 function postButton(args) {
   args = args.join(' ').split(',');
-  const url = args[0];
-  let text  = args[1] || '';
-  let icon  = args[2] || '';
-  let title = args[3] || '';
+  const url   = args[0];
+  const text  = (args[1] || '').trim();
+  let icon    = (args[2] || '').trim();
+  const title = (args[3] || '').trim();
 
   if (!url) {
     hexo.log.warn('URL can NOT be empty.');
   }
+  if (icon.length > 0) {
+    if (!icon.startsWith('fa')) icon = 'fa fa-' + icon;
+    icon = `<i class="${icon}"></i>`;
+  }
 
-  text = text.trim();
-  icon = icon.trim();
-  icon = icon.startsWith('fa') ? icon : 'fa fa-' + icon;
-  title = title.trim();
-
-  return `<a class="btn" href="${url}"${title.length > 0 ? ` title="${title}"` : ''}>${icon.length > 0 ? `<i class="${icon}"></i>` : ''}${text}</a>`;
+  return `<a class="btn" href="${url}"${title.length > 0 ? ` title="${title}"` : ''}>${icon}${text}</a>`;
 }
 
 hexo.extend.tag.register('button', postButton, {ends: false});
diff --git a/scripts/tags/label.js b/scripts/tags/label.js
index bc3855a..efab944 100644
--- a/scripts/tags/label.js
+++ b/scripts/tags/label.js
@@ -11,7 +11,7 @@ function postLabel(args) {
   const classes = args[0] || 'default';
   const text    = args[1] || '';
 
-  !text && hexo.log.warn('Label text must be defined!');
+  if (!text) hexo.log.warn('Label text must be defined!');
 
   return `<mark class="label ${classes.trim()}">${text}</mark>`;
 }
diff --git a/scripts/tags/note.js b/scripts/tags/note.js
index 14a9a93..cfc0857 100644
--- a/scripts/tags/note.js
+++ b/scripts/tags/note.js
@@ -7,7 +7,23 @@
 'use strict';
 
 function postNote(args, content) {
-  return `<div class="note ${args.join(' ')}">${hexo.render.renderSync({text: content, engine: 'markdown'})}</div>`;
+  const keywords = ['default', 'primary', 'info', 'success', 'warning', 'danger', 'no-icon'];
+  const className = [];
+  const summary = [];
+  args.forEach((arg, index) => {
+    if (index > 2 || !keywords.includes(arg)) {
+      summary.push(arg);
+    } else {
+      className.push(arg);
+    }
+  });
+  content = hexo.render.renderSync({ text: content, engine: 'markdown' });
+  if (summary.length === 0) {
+    return `<div class="note ${args.join(' ')}">${content}</div>`;
+  }
+  return `<details class="note ${className.join(' ')}"><summary>${hexo.render.renderSync({ text: summary.join(' '), engine: 'markdown' })}</summary>
+${content}
+</details>`;
 }
 
 hexo.extend.tag.register('note', postNote, {ends: true});
diff --git a/scripts/tags/tabs.js b/scripts/tags/tabs.js
index 878c8c0..e2e3432 100644
--- a/scripts/tags/tabs.js
+++ b/scripts/tags/tabs.js
@@ -19,7 +19,7 @@ function postTabs(args, content) {
   let tabNav = '';
   let tabContent = '';
 
-  !tabName && hexo.log.warn('Tabs block must have unique name!');
+  if (!tabName) hexo.log.warn('Tabs block must have unique name!');
 
   while ((match = tabBlock.exec(content)) !== null) {
     matches.push(match[1]);
@@ -27,27 +27,25 @@ function postTabs(args, content) {
   }
 
   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       = '';
+    let [caption = '', icon = ''] = matches[i].split('@');
+    let postContent = matches[i + 1];
 
     postContent = hexo.render.renderSync({text: postContent, engine: 'markdown'}).trim();
 
-    tabId++;
-    tabHref = (tabName + ' ' + tabId).toLowerCase().split(' ').join('-');
+    const abbr = tabName + ' ' + ++tabId;
+    const href = abbr.toLowerCase().split(' ').join('-');
 
-    ((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = tabName + ' ' + tabId);
+    icon = icon.trim();
+    if (icon.length > 0) {
+      if (!icon.startsWith('fa')) icon = 'fa fa-' + icon;
+      icon = `<i class="${icon}"></i>`;
+    }
 
-    const isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : '';
-    let icon = tabIcon.trim();
-    if (!icon.startsWith('fa')) icon = 'fa fa-' + icon;
-    tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`);
+    caption = icon + caption.trim();
 
     const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '';
-    tabNav += `<li class="tab${isActive}"><a href="#${tabHref}">${tabIcon + tabCaption.trim()}</a></li>`;
-    tabContent += `<div class="tab-pane${isActive}" id="${tabHref}">${postContent}</div>`;
+    tabNav += `<li class="tab${isActive}"><a href="#${href}">${caption || abbr}</a></li>`;
+    tabContent += `<div class="tab-pane${isActive}" id="${href}">${postContent}</div>`;
   }
 
   tabNav = `<ul class="nav-tabs">${tabNav}</ul>`;
diff --git a/source/css/_common/scaffolding/tags/note.styl b/source/css/_common/scaffolding/tags/note.styl
index 07cde41..e3c2ead 100644
--- a/source/css/_common/scaffolding/tags/note.styl
+++ b/source/css/_common/scaffolding/tags/note.styl
@@ -23,6 +23,15 @@
     border-left: 3px solid $gainsboro;
   }
 
+  summary {
+    cursor: pointer;
+    outline: 0;
+
+    p {
+      display: inline;
+    }
+  }
+
   h2, h3, h4, h5, h6 {
     border-bottom: initial;
     margin: 0;