INFO信息
以下介绍可以使用的 markdown 或者 html 标签。
功能大部分基于 markdown-it 插件与 theme/components 中的组件。
links 链接
基于 theme components，用来建立友链或其他网址链接功能。
使用 HairyLinks 标签、字段包含
| 字段 | 名称 | 必填 |
|---|---|---|
| name | 名称 | 是 |
| url | 地址 | 是 |
| image | 图片 | 是 |
| color | 颜色 | 是 |
| desc | 描述 | 否 |
html
<hairy-links :links="[
{
name: 'Hairy’s Blog',
url: 'https://hairy.blog',
image: 'https://tuimao233.gitee.io/mao-blog/avatar.png',
color: '#1bc9a6',
desc: '记录生活，持续学习。',
},
]" />代码块行高亮
输入
md
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```显示
js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}furigana 文字注音
增加了对注音假名的支持，基于 furigana-markdown-it
输入
md
[猫]{ねこ}显示
猫
图片展示与分组
使用 HairyImage 标签，基于 Vue Component 与 element-plus#image 实现，完全支持 el-image 的所有属性。
html
<hairy-image style="width: 400px" fit="cover" src="https://...jpg" />使用 HairyImageGroup 对图片分组，分组后支持点击打开图片浏览器。
html
<hairy-image-group row="120px">
<hairy-image fit="cover" src="https://...jpg" />
<hairy-image fit="cover" src="https://...jpg" />
<hairy-image fit="cover" src="https://...jpg" />
<hairy-image fit="cover" src="https://...jpg" />
<hairy-image fit="cover" src="https://...jpg" />
</hairy-image-group>HairyImageGroup 支持以下属性
row所有图片的宽度col所有图片的高度gap图片之间的间距justify图片的左右对齐方式align图片的上下对齐方式
代码片段
代码片段使用 codepen 支持，必须传入 slugHash 和 user。
html
<hairy-codepen slug-hash="wvwEOZL" user="GreenSock" />