✨ 增加折叠块功能

Author: AimTao

scripts/helpers/utils.js

@@ -2,12 +2,12 @@
 
 'use strict';
 
-const crypto = require('crypto');
+const md5 = require('../utils/crypto');
 const { decodeURL } = require('hexo-util');
 const compareVersions = require('../../scripts/utils/compare-versions');
 
 hexo.extend.helper.register('md5', function(string) {
-  return crypto.createHash('md5').update(string).digest('hex');
+  return md5(string);
 });
 
 hexo.extend.helper.register('require_version', function(current, require) {

scripts/tags/fold.js

@@ -0,0 +1,20 @@
+const md5 = require('../utils/crypto');
+
+hexo.extend.tag.register('fold', (args, content) => {
+  args = args.join(' ').split('@');
+  const classes = args[0] || 'default';
+  const text = args[1] || '';
+  const id = 'collapse-' + md5(content).slice(0, 8);
+
+  return `
+    <div class="fold">
+      <div class="fold-title fold-${classes.trim()} collapsed" data-toggle="collapse" href="#${id}" role="button" aria-expanded="false" aria-controls="${id}">
+        <div class="fold-arrow">▶</div>${text}
+      </div>
+      <div class='fold-content collapse' id="${id}">
+        ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+      </div>
+    </div>`;
+}, {
+  ends: true
+});

scripts/utils/crypto.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const crypto = require('crypto');
+
+const md5 = (content) => {
+  return crypto.createHash('md5').update(content).digest('hex');
+}
+
+module.exports = md5;

source/css/_pages/_base/color-schema.styl

@@ -19,6 +19,8 @@
   --button-hover-bg-color $button-hover-bg-color
   --highlight-bg-color $highlight-bg-color
   --inlinecode-bg-color $inlinecode-bg-color
+  --fold-title-color $text-color
+  --fold-border-color $line-color
 
 dark-colors()
   --body-bg-color $body-bg-color-dark
@@ -40,6 +42,8 @@ dark-colors()
   --button-hover-bg-color $button-hover-bg-color-dark
   --highlight-bg-color $highlight-bg-color-dark
   --inlinecode-bg-color $inlinecode-bg-color-dark
+  --fold-title-color $text-color
+  --fold-border-color $line-color
 
   img
     -webkit-filter brightness(.9)

source/css/_pages/_post/post-tag.styl

@@ -1,3 +1,53 @@
+// fold
+.fold
+  margin 1rem 0
+  border 0.5px solid var(--fold-border-color)
+  position relative
+  clear both
+  border-radius 0.125rem
+
+  .fold-title
+    color var(--fold-title-color)
+    padding 0.5rem 0.75rem
+    font-size 0.9rem
+    font-weight bold
+    border-radius 0.125rem
+
+    &:not(.collapsed) > .fold-arrow
+      transform rotate(90deg)
+      transform-origin center center
+
+    .fold-arrow
+      display inline-block
+      margin-right 0.35rem
+      transition transform .3s ease-out
+
+  .fold-content
+    & > *
+      margin 0
+
+    & > p
+      padding 1rem 1rem
+
+.fold-default
+  background rgba(#bbbbbb, 0.25)
+
+.fold-primary
+  background rgba(#b7a0e0, 0.25)
+
+.fold-info
+  background rgba(#a0c5e4, 0.25)
+
+.fold-success
+  background rgba(#aedcae, 0.25)
+
+.fold-warning
+  background rgba(#f8d6a6, 0.25)
+
+.fold-danger
+  background rgba(#eca9a7, 0.25)
+
+
 // note
 .note
   padding 0.75rem