vitepress 动态修改markdown内容
vitepress 统一修改markdown内容
编译时修改markdown或html内容
参考:https://vitepress.dev/zh/reference/site-config#postrender
打开 .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { Nav } from './nav'
import { Sidebar } from './sidebar'
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "爱反垃圾堆",
description: "😮💨⛵️🌶︎🐔✅",
titleTemplate: ':title 🌱 fir8.com',
lang: 'zh-CN',
lastUpdated: true,
themeConfig: {
siteTitle: '爱反垃圾堆',
outlineTitle: '内容导航',
returnToTopLabel: '回到顶部',
sidebarMenuLabel: '章节目录',
darkModeSwitchLabel: '主题模式',
lastUpdatedText: '更新时间',
docFooter: {
prev: '上一篇',
next: '下一篇'
},
nav: Nav,
sidebar: Sidebar,
},
// 参考:https://vitepress.dev/zh/reference/site-config#postrender
async postRender(context) {
// 修改markdown内容的, hello world 替换为红色的 你好,世界
context.content = context.content.replace(/hello world/g, '<span style="color: red;">你好,世界</span>')
// 查看.vitepress/dist/ 下的html文件,发现已经替换了
}
})
vitepress 动态修改markdown内容
test.md
<div ref="novel">999999123988888889898</div>
<script setup>
import { ref, watch } from 'vue'
const novel = ref(null)
console.log(novel.value)
watch(novel, () => {toColor(novel)})
const toColor = (novel) => {
// 匹配98,修改颜色为红色
const innerHTML = novel.value.innerHTML.replace(/98/g, (match) => {
return `<span style="color: red">${match}</span>`
})
novel.value.innerHTML = innerHTML
}
</script>