인라인 배지를 표시하는 Badges 플러그인

개요

Badges는 옵시디언에서 인라인 배지를 표시하는 플러그인입니다. 

Plugin Info

플러그인 명	Badges
플러그인 설명	인라인 배지를 표시
플러그인 분류	입력 지원
Github 링크	Github 링크
옵시디언 링크	플러그인 링크
별점	⭐

사용 방법

기본 문법

`[!!KEY:VAL]`

문법	설명
KEY	ICON의 종류와 이름
VAL	표시되는 값과 텍스트

VAL에는 | 파이프나 : 콜론 기호를 포함할 수 없습니다. 이 기호들은 사용자 정의 문법의 구분자로 사용되기 때문입니다.

 

예제

`[!!note:note]`
`[!!info:info]`
`[!!todo:todo]`
...
`[!!cite:cite]`

 

`[!!emergency: emergency]`
`[!!prohibit: prohibit]`
`[!!stop:stop]`
…
`[!!reward: reward]`
`[!!vault: vault]`

Github

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

문법	설명
|	시작 파이프 기호
GHX	Github 스타일, ghb는 파란색, ghs는 초록색 성공 스타일
>	크다 기호 (구분자)
KEY:VAL	KEY는 종류나 레이블, VAL은 표시되는 텍스트 값입니다. 예: release:1.0.0

예제

`[!!|ghb>release:1.2.1]`
`[!!|ghb>issues:2]`
`[!!|ghb>open issues:0]`
`[!!|ghb>closed issues:2]`
`[!!|ghb>contributors:3]`
`[!!|ghb>license:MIT]`
`[!!|ghs>checks:success]`
`[!!|ghs>build:success]`

Plain-text

`[!!|KEY:VAL]`

문법	설명
|	시작 파이프 기호
KEY:VAL	KEY는 종류, VAL는 값

예제

`[!!|foo:bar]`

사용자 정의

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

문법	설명
|	시작 파이프 기호
ICON	아이콘 이름. 예: lucide-dice
|	파이프 기호
KEY:VAL	KEY는 종류나 레이블, VAL는 표시되는 텍스트 값입니다. 예: release:1.0.0
|	파이프 기호
COLOR-RGB (선택 사항, 기본값은 currentColor)	3개의 R.G.B. 수치 (0-255), 쉼표로 구분. 예: 144,144,144 또는 CSS 변수 예: var(--color-red-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)]`

CSS

CSS 스니펫을 통해 사용자 정의 CSS 스타일을 적용할 수 있습니다.

body {
    /* 테두리 */
    --inline-badge-border-color: transparent;
    --inline-badge-border-radius: var(--radius-s);
    --inline-badge-border: 1px solid var(--inline-badge-border-color);
    /* 사용자 정의 색상 예 */
    --my-custom-rgb: var(--color-green-rgb);
}
/* CSS 사용자 정의 예제 */
.inline-badge[data-inline-badge^="vault"] {
    --badge-color: var(--my-custom-rgb);
    color: rgba(var(--badge-color), .88);
    background-color: rgba(var(--badge-color),.22);
}

Dataview

Example regex

let regex = /`\[!!info\:(.+?)\]`/gm
let regex = /`\[!!\|ghb>(.+?)\]`/gm
let regex = /`\[!!\|ghs>(.+?)\]`/gm
let regex = /`\[!!\|plus\-square(.+?)\]`/gm

info

```dataviewjs
const pages = dv.pages();
let regex = /`\[!!info\:(.+?)\]`/gm
const rows = []
for (const page of pages) {
    const file = app.vault.getAbstractFileByPath(page.file.path)
    if (file.extension == "md") {
        const contents = await app.vault.read(file)
        for (const badge of contents.match(new RegExp(regex, 'g')) || []) {
            const match = badge.match(new RegExp(regex, 's')) 
            rows.push([match[1], page.file.link])
        }
    }
}
dv.table(['Badge', 'Link'], rows)
```

github

```dataviewjs
const pages = dv.pages();
let regex = /`\[!!\|ghb>(.+?)\]`/gm
const rows = []
for (const page of pages) {
    const file = app.vault.getAbstractFileByPath(page.file.path)
    if (file.extension == "md") {
        const contents = await app.vault.read(file)
        for (const badge of contents.match(new RegExp(regex, 'g')) || []) {
            const match = badge.match(new RegExp(regex, 's')) 
            rows.push([match[1], page.file.link])
        }
    }
}
dv.table(['Badge', 'Link'], rows)
```

github success

```dataviewjs
const pages = dv.pages();
let regex = /`\[!!\|ghs>(.+?)\]`/gm
const rows = []
for (const page of pages) {
    const file = app.vault.getAbstractFileByPath(page.file.path)
    if (file.extension == "md") {
        const contents = await app.vault.read(file)
        for (const badge of contents.match(new RegExp(regex, 'g')) || []) {
            const match = badge.match(new RegExp(regex, 's')) 
            rows.push([match[1], page.file.link])
        }
    }
}
dv.table(['Badge', 'Link'], rows)
```

custom

```dataviewjs
const pages = dv.pages();
let regex = /`\[!!\|plus\-square(.+?)\]`/gm
const rows = []
for (const page of pages) {
    const file = app.vault.getAbstractFileByPath(page.file.path)
    if (file.extension == "md") {
        const contents = await app.vault.read(file)
        for (const badge of contents.match(new RegExp(regex, 'g')) || []) {
            const match = badge.match(new RegExp(regex, 's')) 
            rows.push([
                match[1].split("|")[1].split(":")[0],
                match[1].split("|")[1].split(":")[1],
                page.file.link
            ])
        }
    }
}
dv.table(['Key', 'Value', 'Link'], rows)
```

관련 플러그인

진행바 스타일을 배지형태로 만드는 Badge 플러그인

---