Obsidian 插件：Badges

概述

在笔记中添加内联徽章/标注。

Readme(翻译）

下面是 badges 插件的自述翻译

徽章

简介

这是一个轻量级的插件，用于在 Obsidian.md 中显示内联的“徽章”，类似于一个键值存储（数据库），可以通过默认搜索或 Dataview 插件进行查询。

• 用法
  • Github 风格的徽章
  • 纯文本
  • 自定义
• 安装
• CSS 样式
• Dataview 插件
• 开发
• 注意事项

用法

默认语法

`[!!KEY:VAL]`

`[!!注意:note]`
`[!!信息:info]`
`[!!待办:todo]`
...
`[!!引用:cite]`

结果

`[!!紧急: 紧急]`
`[!!禁止: 禁止]`
`[!!停止: 停止]`
…
`[!!奖励: 奖励]`
`[!!保险库: 保险库]`

结果

Github

语法

`[!!|GHX>KEY:VAL]`

`[!!|ghb>发布:1.2.1]`
`[!!|ghb>问题:2]`
`[!!|ghb>未解决问题:0]`
`[!!|ghb>已解决问题:2]`
`[!!|ghb>贡献者:3]`
`[!!|ghb>许可证:MIT]`
`[!!|ghs>检查:成功]`
`[!!|ghs>构建:成功]`

结果

纯文本

`[!!|KEY:VAL]`

`[!!|foo:bar]`

结果

自定义

`[!!|ICON|KEY:VAL|COLOR-RGB]`

`[!!|message-square|comment:edited by j.d.|var(--color-cyan-rgb)]`
`[!!|dice|roll:eleven|120,82,238]`
`[!!|gem|mineral:emerald|var(--my-custom-rgb)]`
`[!!|apple|fruit:snack|var(--color-red-rgb)]`
`[!!|brain|brain:pkm|var(--color-purple-rgb)]`
`[!!|sun|weather:sunny|var(--color-yellow-rgb)]`
`[!!|cloudy|weather:cloudy|var(--mono-rgb-100)]`
`[!!|sunset|weather:8.44pm|var(--color-orange-rgb)]`
`[!!|dumbbell|reps:3 sets of 50|var(--mono-rgb-00)]`
`[!!|gift|event:wedding|var(--color-blue-rgb)]`
`[!!|plus-square|credit:$100|var(--color-green-rgb)]`
`[!!|minus-square|debit:$10|var(--color-pink-rgb)]`

结果

安装

从 Obsidian 的设置或首选项中：

1. 社区插件 > 浏览 等待官方审核
2. 搜索“Badges”

或者：

1. 下载最新的 发布存档
2. 解压下载的存档
3. 将 badges 文件夹移动到 /path/to/vault/.obsidian/plugins/ 目录下
4. 设置 > 社区插件 > 重新加载已安装的插件
5. 启用插件

或者：

1. 下载 main.js、manifest.json 和 styles.css
2. 创建一个新的文件夹 /path/to/vault/.obsidian/plugins/badges
3. 将所有 3 个文件移动到 /path/to/vault/.obsidian/plugins/badges 目录下
4. 设置 > 社区插件 > 重新加载已安装的插件
5. 启用插件

CSS

可以通过 CSS 片段应用自定义的 CSS 样式。所有的颜色和样式都可以被覆盖。

请参阅 CSS片段 - Obsidian帮助。

变量

body {
	/* 边框 */
	--inline-badge-border-color: 透明;
	--inline-badge-border-radius: var(--radius-s);
	--inline-badge-border: 1像素实线 var(--inline-badge-border-color);
	/* 示例自定义颜色 */
	--my-custom-rgb: var(--color-green-rgb);
}
/* 示例CSS自定义 */
.inline-badge[data-inline-badge^="vault"] {
	--badge-color: var(--color-green-rgb);
	color: rgba(var(--badge-color), .88);
	background-color: rgba(var(--badge-color),.22);
}

数据视图

查看并复制示例数据视图查询：badges-dataview

开发

克隆这个仓库

cd /path/to/vault/.obsidian/plugins
git clone https://github.com/gapmiss/badges.git
cd badges

安装包并运行

npm i
npm run dev

启用插件

1. 打开 设置 → 社区插件
2. 启用 徽章 插件。

注意事项

Lucide 图标：https://lucide.dev

Lucide 图标许可证：https://lucide.dev/license