How To Blog 03: Heimus

Published: at 19:34

搞定密码之后，下一个需要解决的就是黑幕了。我们期望的黑幕效果和原来博客的版本基本一致，所以 CSS 部分可以直接沿用过来：

1
body heimu,
2
body heimu a,
3
body a heimu {
4
  display: inline;
5
  background-color: #252525;
6
  color: #252525 !important;
7
  text-shadow: none;
8
}
9


10
body heimu:hover,
11
body heimu:active {
12
  transition: color 0.13s linear;
13
  color: #fff !important;
14
}
15


16
body heimu:hover a,
17
body a:hover heimu {
18
  transition: color 0.13s linear;
19
  color: #add8e6 !important;
20
}

但如何才能做到只对需要黑幕的博客文章启用这段 CSS 呢？这里我们写了一个简单的 rehype 插件：

1
      function rehypeHeimuPlugin() {
2
        return function transformer(tree, file) {
3
          const value = file.value;
4
          if (typeof value === "string") {
5
            if (value.includes("<heimu>")) {
6
              tree.children.push({
7
                type: "element",
8
                tagName: "style",
9
                properties: {},
10
                children: [
11
                  {
12
                    type: "text",
13
                    value: `
14
body heimu,
15
body heimu a,
16
body a heimu {
17
  display: inline;
18
  background-color: #252525;
19
  color: #252525 !important;
20
  text-shadow: none;
21
}
22


23
body heimu:hover,
24
body heimu:active {
25
  transition: color 0.13s linear;
26
  color: #fff !important;
27
}
28


29
body heimu:hover a,
30
body a:hover heimu {
31
  transition: color 0.13s linear;
32
  color: #add8e6 !important;
33
}
34
`.trim(),
35
                  },
36
                ],
37
              });
38
            }
39
          }
40
        };
41
      },

原理也很简单，不多说了（