1
import { visit } from 'unist-util-visit';
2
import { h } from 'hastscript';
3

4
/**
5
 * 将带有 alt 文本的图片转换为包含 figcaption 的 figure 元素的 rehype 插件
6
 *
7
 * @returns {Function} A transformer function for the rehype plugin
8
 */
9
export default function rehypeFigure() {
34 collapsed lines
10
  return (tree) => {
11
    visit(tree, 'element', (node, index, parent) => {
12
      // 只处理 img 元素
13
      if (node.tagName !== 'img') {
14
        return;
15
      }
16

17
      // 获取 alt 属性
18
      const alt = node.properties?.alt;
19

20
      // 如果没有 alt 属性或 alt 为空字符串，则保持原样
21
      if (!alt || alt.trim() === '') {
22
        return;
23
      }
24

25
      // 创建 figure 元素，包含原始的 img 和居中的 figcaption
26
      const figure = h('figure', [
27
        // 复制原始的 img 节点，但移除 alt 属性避免重复显示
28
        h('img', {
29
          ...node.properties,
30
          alt: '' // 清空 alt 属性，因为现在有 figcaption 了
31
        }),
32
        h('figcaption', alt)
33
      ]);
34

35
      // 居中显示
36
      const centerFigure = h("center", figure);
37

38
      // 替换当前的 img 节点为 figure 节点
39
      if (parent && typeof index === 'number') {
40
        parent.children[index] = centerFigure;
41
      }
42
    });
43
  };
44
}

1
...
2
import rehypeFigure from "./src/plugins/rehype-figure.js";
3
...
4
markdown: {
5
    ...
6
    rehypePlugins: [
7
      rehypeFigure,
8
        ...

24 collapsed lines
1
---
2
import { Icon } from "astro-icon/components";
3
import { profileConfig } from "../../config";
4
import { url } from "../../utils/url-utils";
5
import ImageWrapper from "../misc/ImageWrapper.astro";
6

7
const config = profileConfig;
8
---
9
<div class="card-base p-3">
10
    <a aria-label="Go to About Page" href={url('/about/')}
11
       class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3
12
       max-w-[12rem] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
13
        <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
14
        w-full h-full z-50 flex items-center justify-center">
15
            <Icon name="fa6-regular:address-card"
16
                  class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl">
17
            </Icon>
18
        </div>
19
        <ImageWrapper src={config.avatar || ""} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
20
    </a>
21
    <div class="px-2">
22
        <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
23
        <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
24
        <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
25
        <div class="flex gap-2 justify-center mb-1">
26
            {config.links.length > 1 && config.links.map(item =>
27
                    {
28
                    if (item.url.startsWith("mailto:")) {
29
                        const encodedEmail = btoa(item.url.replace("mailto:", ""));
30
                        return <a rel="me" aria-label={item.name} href="#" data-encoded-email={encodedEmail} onclick={`
31
                                            (function() {
32
                                                const encodedEmail = this.getAttribute('data-encoded-email');
33
                                                const decodedEmail = atob(encodedEmail);
34
                                                this.href = 'mailto:' + decodedEmail;
35
                                                this.removeAttribute('data-encoded-email');
36
                                                this.removeAttribute('onclick');
37
                                                this.click();
38
                                                return false;
39
                                            }).call(this);
40
                                        `.replace(/\s+/g, " ").trim()
41
                                    },
42
                                    class="btn-regular rounded-lg h-10 w-10 active:scale-90">
43
                            <Icon name={item.icon} class="text-[1.5rem]"></Icon>
44
                        </a>
45
                    } else {
46
                        return <a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
47
                            <Icon name={item.icon} class="text-[1.5rem]"></Icon>
48
                        </a>
49
                    }
50
                    }
51
            )}
52
            {config.links.length == 1 && (function(item){
53
                if (item.url.startsWith("mailto:")) {
54
                        const encodedEmail = btoa(item.url.replace("mailto:", ""));
55
                        return <a rel="me" aria-label={item.name} href="#" data-encoded-email={encodedEmail} onclick={`
56
                                            (function() {
57
                                                const encodedEmail = this.getAttribute('data-encoded-email');
58
                                                const decodedEmail = atob(encodedEmail);
59
                                                this.href = 'mailto:' + decodedEmail;
60
                                                this.removeAttribute('data-encoded-email');
61
                                                this.removeAttribute('onclick');
62
                                                this.click();
63
                                                return false;
64
                                            }).call(this);
65
                                        `.replace(/\s+/g, " ").trim()
66
                                    },
67
                                    class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
68
                            <Icon name={item.icon} class="text-[1.5rem]"></Icon>
69
                            {item.name}
70
                        </a>
71
                    } else {
72
                        return <a rel="me" aria-label={item.name} href={item.url} target="_blank"
73
                                            class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
74
                                <Icon name={item.icon} class="text-[1.5rem]"></Icon>
75
                                {item.name}
76
                            </a>
77
                    }
78
            })(config.links[0])}
79
        </div>
80
    </div>
81
</div>

1
import { h } from "hastscript";
2
import { visit } from "unist-util-visit";
3

4
/**
5
 * 加密 mailto 链接以保护邮箱地址免受爬虫抓取的 rehype 插件
6
 *
7
 * @param {Object} options - 插件选项
8
 * @param {string} [options.method='base64'] - 编码方式: 'base64' or 'rot13'
9
 * @returns {Function} A transformer function for the rehype plugin
10
 */
11
export default function rehypeEmailProtection(options = {}) {
114 collapsed lines
12
  const { method = "base64" } = options;
13

14
  // Base64 编码函数
15
  const base64Encode = (str) => {
16
    return btoa(str);
17
  };
18

19
  // ROT13 编码函数
20
  const rot13Encode = (str) => {
21
    return str.replace(/[a-zA-Z]/g, (char) => {
22
      const start = char <= "Z" ? 65 : 97;
23
      return String.fromCharCode(
24
        ((char.charCodeAt(0) - start + 13) % 26) + start,
25
      );
26
    });
27
  };
28

29
  // 根据选择的方法进行编码
30
  const encode = (str) => {
31
    return method === "rot13" ? rot13Encode(str) : base64Encode(str);
32
  };
33

34
  // 生成解码 JavaScript 代码
35
  const generateDecodeScript = () => {
36
    if (method === "rot13") {
37
      return `
38
        function decodeRot13(str) {
39
          return str.replace(/[a-zA-Z]/g, function(char) {
40
            const start = char <= 'Z' ? 65 : 97;
41
            return String.fromCharCode(((char.charCodeAt(0) - start + 13) % 26) + start);
42
          });
43
        }
44
        const decodedEmail = decodeRot13(encodedEmail);
45
      `;
46
    }
47
    return `
48
      const decodedEmail = atob(encodedEmail);
49
    `;
50
  };
51

52
  return (tree) => {
53
    let hasEmailLinks = false;
54

55
    visit(tree, "element", (node, index, parent) => {
56
      // 只处理 a 元素
57
      if (node.tagName !== "a") {
58
        return;
59
      }
60

61
      // 检查是否是 mailto 链接
62
      const href = node.properties?.href;
63
      if (!href || !href.startsWith("mailto:")) {
64
        return;
65
      }
66

67
      hasEmailLinks = true;
68

69
      // 提取邮箱地址
70
      const email = href.replace("mailto:", "");
71
      const encodedEmail = encode(email);
72

73
      // 创建加密的链接元素（移除原始的 href 属性，避免重复定义）
74
      const { href: originalHref, ...otherProperties } = node.properties;
75
      const protectedLink = h(
76
        "a",
77
        {
78
          ...otherProperties,
79
          href: "#",
80
          "data-encoded-email": encodedEmail,
81
          onclick: `
82
          (function() {
83
            const encodedEmail = this.getAttribute('data-encoded-email');
84
            ${generateDecodeScript()}
85
            this.href = 'mailto:' + decodedEmail;
86
            this.removeAttribute('data-encoded-email');
87
            this.removeAttribute('onclick');
88
            this.click();
89
            return false;
90
          }).call(this);
91
        `
92
            .replace(/\s+/g, " ")
93
            .trim(),
94
        },
95
        node.children,
96
      );
97

98
      // 替换当前的 a 节点
99
      if (parent && typeof index === "number") {
100
        parent.children[index] = protectedLink;
101
      }
102
    });
103

104
    // 如果页面中有邮箱链接，添加样式
105
    if (hasEmailLinks) {
106
      visit(tree, "element", (node) => {
107
        if (node.tagName === "head") {
108
          const style = h(
109
            "style",
110
            `
111
            a[data-encoded-email] {
112
              cursor: pointer;
113
              text-decoration: underline;
114
              color: inherit;
115
            }
116
            a[data-encoded-email]:hover {
117
              text-decoration: underline;
118
            }
119
          `.trim(),
120
          );
121
          node.children.push(style);
122
        }
123
      });
124
    }
125
  };
126
}

1
...
2
import rehypeEmailProtection from "./src/plugins/rehype-email-protection.mjs";
3
...
4
markdown: {
5
    ...
6
    rehypePlugins: [
7
      [rehypeEmailProtection, { method: "base64" }], // 邮箱保护插件，支持 'base64' 或 'rot13'
8
        ...