VuePress 中如何正确引入自定义 HTML 组件?
我在 VuePress 项目里想嵌入一段静态的 HTML 内容,比如一个带样式的提示框,但直接写在 Markdown 里样式不生效。我试过用 ::: v-pre 包裹,也试过在 .vuepress/components 下建组件,但还是没搞定。
下面这段 HTML 在普通页面能正常显示,但在 VuePress 的 markdown 文件里就丢失样式了,是不是得用特殊方式引入?
<div class="notice-box">
<span class="icon">⚠️</span>
<p>这是一个重要提示</p>
</div>
最靠谱的解决办法是把那段 HTML 封装成 Vue 组件。
首先在项目根目录创建
.vuepress/components/NoticeBox.vue文件:然后在 Markdown 文件里直接用组件标签:
VuePress 会自动注册
.vuepress/components目录下的组件,不用额外配置。你之前试的 v-pre 那个方法,理论上能阻止 Markdown 解析,但样式问题还是得靠 CSS 文件或者组件内的 style 来解决。如果你不想用组件,那就得在
.vuepress/config.js的 head 配置里引入一个全局 CSS 文件,把样式写在那里,然后在 Markdown 里写原生 HTML 才能生效。用组件的方式是最省心的,样式隔离不说,用起来也直接。