hexo-tips:快捷小贴士插件

发布时间： 2025-01-03 22:59:59 更新时间： 2025-07-04 10:44:32

🕒 阅读时间：4 min read 📝 字数：3443 👀 阅读量： Loading...

我开发了一个快捷小贴士插件

样式当然都是Copilot帮我写的，我自己才懒得设计颜色：）

github仓库:xingwangzhe/hexo-tips: Use tooltips more conveniently in hexo npm仓库:hexo-tips

npm安装

npm i hexo-tips

配置config

1
hexo_tips:
2
  warning:
3
    icon: "⚠"
4
    style:
5
      border: "#ffb100"
6
      light:
7
        background: "#fff8e6"
8
      dark:
9
        background: "#3d371f"
10
  danger:
11
    icon: "⛔"
12
    style:
13
      border: "#ff4545"
14
      light:
15
        background: "#ffeded"
16
      dark:
17
        background: "#3d2222"
18
  tip:
19
    icon: "💡"
20
    style:
21
      border: "#409eff"
22
      light:
23
        background: "#e6f4ff"
24
      dark:
25
        background: "#1f2f3d"
26
  mention:
27
    icon: "💬"
28
    style:
29
      border: "#b45fff"
30
      light:
31
        background: "#f3e6ff"
32
      dark:
33
        background: "#2f1f3d"
34
  recommend:
35
    icon: "👍"
36
    style:
37
      border: "#67c23a"
38
      light:
39
        background: "#e6ffe6"
40
      dark:
41
        background: "#1f3d1f"
42
  note:
43
    icon: "📝"
44
    style:
45
      border: "#9e9e9e"
46
      light:
47
        background: "#f5f5f5"
48
      dark:
49
        background: "#363636"
50
  info:
51
    icon: "ℹ️"
52
    style:
53
      border: "#03a9f4"
54
      light:
55
        background: "#e3f2fd"
56
      dark:
57
        background: "#1f313d"
58
  success:
59
    icon: "✅"
60
    style:
61
      border: "#4caf50"
62
      light:
63
        background: "#e8f5e9"
64
      dark:
65
        background: "#1f3d24"
66
  error:
67
    icon: "❌"
68
    style:
69
      border: "#f44336"
70
      light:
71
        background: "#ffebee"
72
      dark:
73
        background: "#3d1f22"
74
  bug:
75
    icon: "🐛"
76
    style:
77
      border: "#e91e63"
78
      light:
79
        background: "#fce4ec"
80
      dark:
81
        background: "#3d1f2a"
82
  todo:
83
    icon: "📋"
84
    style:
85
      border: "#9c27b0"
86
      light:
87
        background: "#f3e5f5"
88
      dark:
89
        background: "#2f1f3d"
90
  example:
91
    icon: "🔍"
92
    style:
93
      border: "#ff9800"
94
      light:
95
        background: "#fff3e0"
96
      dark:
97
        background: "#3d311f"
98
  quote:
99
    icon: "💭"
100
    style:
101
      border: "#607d8b"
102
      light:
103
        background: "#eceff1"
104
      dark:
105
        background: "#1f292d"
106
  link:
107
    icon: "🔗"
108
    style:
109
      border: "#3f51b5"
110
      light:
111
        background: "#e8eaf6"
112
      dark:
113
        background: "#1f2137"
114
  code:
115
    icon: "💻"
116
    style:
117
      border: "#616161"
118
      light:
119
        background: "#fafafa"
120
      dark:
121
        background: "#363636"
122
  update:
123
    icon: "🔄"
124
    style:
125
      border: "#009688"
126
      light:
127
        background: "#e0f2f1"
128
      dark:
129
        background: "#1f3734"
130
  star:
131
    icon: "⭐"
132
    style:
133
      border: "#ffd700"
134
      light:
135
        background: "#fffde7"
136
      dark:
137
        background: "#3d3a1f"
138
  time:
139
    icon: "⌛"
140
    style:
141
      border: "#795548"
142
      light:
143
        background: "#efebe9"
144
      dark:
145
        background: "#332824"

使用方法

通用格式

1
:::name
2

3
content
4

5
:::

比如说

1
:::warning
2

3
这是一个警告提示
4

5
:::

当然，内部格式支持markdown格式

样式展示

:::warning 这是一个警告提示

用于提醒用户需要注意的内容
适合展示警告信息 :::

:::danger 这是一个危险提示

用于展示危险操作或重要警告 :::

:::tip 这是一个小贴士

用于展示提示信息
可以包含有用的建议 :::

:::mention 这是一个提及框引用或参考其他内容时使用 :::

:::recommend 这是一个推荐框推荐有价值的内容或最佳实践 :::

:::note 这是一个笔记框记录重要笔记或要点 :::

:::info 这是一个信息框展示一般性的信息 :::

:::success 这是一个成功提示表示操作成功或完成 :::

:::error 这是一个错误提示展示错误信息或失败原因 :::

:::bug 这是一个Bug提示用于标记已知问题或Bug :::

:::todo 这是一个待办事项

第一个任务
第二个任务 :::

:::example 这是一个示例框

1
console.log("示例代码");

:::

:::quote 这是一个引用框

引用他人的观点或内容 :::

:::link 这是一个链接框 Hexo官网 :::

:::code 这是一个代码框使用等宽字体展示代码 :::

:::update 这是一个更新提示最后更新：2024-01-03 :::

:::star 这是一个重点提示特别重要的内容 :::

:::time 这是一个时间提示预计耗时：30分钟 :::