Merge pull request #464 from qiusyan-projects/main

新增功能：为 Markdown 内容中的 <del> 标签添加遮罩效果

_config.yml

@@ -275,6 +275,7 @@ articles:
     image_alignment: center # image alignment. left, center
     image_caption: false # Whether to display image caption
     link_icon: true # Whether to display link icon
+    delete_mask: false # Add mask effect to <del> tags, hiding content by default and revealing on hover
     title_alignment: left # Title alignment. left, center
     headings_top_spacing: # Top spacing for headings from h1-h6
       h1: 3.2rem

scripts/filters/delete-mask-handle.js

@@ -0,0 +1,27 @@
+/* delete mask */
+
+"use strict";
+
+hexo.extend.filter.register(
+  "after_post_render",
+  function (data) {
+    const theme = this.theme;
+
+    // 处理del标签的代码
+    const regPureDelTag = /<del(?:\s+[^>]*)?>((?:(?!<\/?del[\s>])[^])*)<\/del>/g;
+
+    data.content = data.content.replace(
+      regPureDelTag,
+      function (match, html) {
+        // 只有在配置为true时才添加mask类
+        if (theme.config.articles.style.delete_mask === true) {
+          return `<del class="mask">${html}</del>`;
+        }
+        return match;
+      }
+    );
+
+    return data;
+  },
+  0
+);

scripts/modules/note-large.js

@@ -32,4 +32,4 @@ hexo.extend.tag.register("notel", postNoteLarge, { ends: true });
 hexo.extend.tag.register("notelarge", postNoteLarge, { ends: true });
 hexo.extend.tag.register("notel-large", postNoteLarge, { ends: true });
 hexo.extend.tag.register("notes-large", postNoteLarge, { ends: true });
-hexo.extend.tag.register("subwarning", postNoteLarge, { ends: true });
+hexo.extend.tag.register("subwarning", postNoteLarge, { ends: true });

scripts/modules/note.js

@@ -27,4 +27,4 @@ function postNote(args, content) {
 
 hexo.extend.tag.register("note", postNote, { ends: true });
 hexo.extend.tag.register("notes", postNote, { ends: true });
-hexo.extend.tag.register("subnote", postNote, { ends: true });
+hexo.extend.tag.register("subnote", postNote, { ends: true });

source/css/common/markdown.styl

@@ -210,6 +210,24 @@
       margin 1rem 0 1rem
 
 
+  del.mask
+    text-decoration none !important
+    transition .2s cubic-bezier(.25, .46, .45, .94) color, .2s cubic-bezier(.25, .46, .45, .94) background
+
+    * 
+      transition .35s cubic-bezier(.25, .46, .45, .94) opacity
+
+    &:not(:hover)
+      color transparent !important
+      background #000 !important
+
+      * 
+        opacity 0 !important
+
+      &, *
+        border none !important
+
+
 
   & > table,
   .tab-pane > table
@@ -315,4 +333,4 @@
 
 
     svg
-      display inline-block
+      display inline-block