- 由于在引入默认的VuePress Custom Containers太过笨重了,故闲来无事对其做一层封装简化使用
- 推荐在线观看使用说明 --> 传送门,这样展示效果更加友好
- 显示效果参考我的VuePress博客里的任一篇文章开头 --> znote
- 在文件
package.json
中的devDependencies
下加入"vuepress-plugin-boxx": "1.0.0"
:
"devDependencies": {
"vuepress-plugin-boxx": "1.0.0"
}
- 在 vuepress 的
config.js
中配置plugins
:
"plugins": [
["vuepress-plugin-boxx"]
],
- 在
package.json
目录下执行命令:npm install
- 正常启动项目,接着如下使用即可
- 引入:只需在你想要插入的地方加入
<Boxx/>
即可(如上) - 内容:默认随机展示名人名句,支持自定义
- 样式:有三种样式,默认为 tip 样式,支持自定义
- 注意:除
<Boxx/>
这个标签是必须外,标签属性均为可选,所有标签属性会在下文中详细介绍
- tip
只需一行:<Boxx type='tip' title='自定义' content='自定义' />
- warning
只需一行:<Boxx type='warning' title='自定义' content='自定义' />
- danger
只需一行: <Boxx type='danger' title='自定义' content='自定义' />
- 如果默认的名人名句不满足需求的话,自定义只需指定两个属性
title
和content
的值
Name | Type | Description |
---|---|---|
title | String | 要展示的title 的内容,支持html标签 |
content | String | 要展示的content 的内容,支持html标签 |
- 当然你也可以只输入
title
或content
,如下:
短短的 title:<Boxx type='warning' title='自定义' />
更短短的 content: <Boxx type='danger' content='自定义' />
- 指定三个属性值实现
Name | Type | Description |
---|---|---|
blockStyle | Object | 整体块元素的样式 |
titleStyle | Object | 只针对title 的样式 |
contentStyle | Object | 只针对content 的样式 |
changeTime | Number | 以毫秒值为单位的动态变化时间,顶部为例 |
需要注意的是:属性值传输的对象只能通过v-bind:
绑定来实现
在Markdown中这样书写即可:
<marquee>
<Boxx :blockStyle="blockStyle" />
<Boxx type="warning" :blockStyle="titleStyle" :titleStyle="titleStyle" changeTime="1000" title="我是一个大大的且变化的 title"/>
<Boxx type="danger" :blockStyle="contentStyle" :contentStyle="contentStyle" content="我是一个小小的<br><marquee>content</marquee>"/>
</marquee>
<script>
export default {
data() {
return {
blockStyle: {'background':'#eee','color':'red'},
titleStyle: {'margin-right': '10%','font-size':'16px'},
contentStyle: {'margin-right': '20%','font-size':'10px',
"margin-top": "1rem","margin-bottom": "0.4rem"},
}
}
}
</script>