feat(theme-default): add built-in global component `Badge`.

[richardo2016]

@brc-dd Hi, this my first PR to vitepress. Could you please review the changes, any suggestion is nice for me to improve this PR, or drop it if you think the component is unnecessary for theme-default.

What does this PR take

One new component <Badge /> to help writors add one marked badge in title, or somewhere they like.

Why

I'm using custom <Badge /> in my own vitepress theme/config for some time, I guess, maybe other developers would use this component if the official default theme provides it. So I try to add it into theme-default as <VPBadge />

---

fixes #1156

[brc-dd]

Looks fine to me. But might wanna move those color definitions to vars.css so they can be customized (and possibly use existing colors).

Also, probably register this globally, so users don't need to import it on each page.

[richardo2016]

Looks fine to me. But might wanna move those color definitions to vars.css so they can be customized (and possibly use existing colors).

Also, probably register this globally, so users don't need to import it on each page.

@brc-dd That's great, as your suggestion,

• I registered the <Badge /> as global component.
• I moved all color to vars.css, allowing theme developer could override it.

I also modify the related content in docs about changes above.

[meteorlxy]

BTW, we could migrate to @mdit-vue/plugin-toc to allow badges in toc after this PR is merged.

[Charles7c]

Looking forward this feature.