調整 Nuxt Content 渲染的標籤樣式

2024-12-20

可以在專案目錄中建立一個同名元件,路徑預設為components/content/,如:components/content/ProseA.vue,用來修改以下語法:

markdowncontent/article.md
[Link](/components/prose)

然後參考 Source進行修改:

vue-htmlcomponents/content/ProseA.vue
<template>
  <NuxtLink :href="props.href" :target="props.target">
    <slot />
  </NuxtLink>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
  href: {
    type: String,
    default: ''
  },
  target: {
    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
    default: undefined,
    required: false
  }
})
</script>

資料來源:Prose Components

瓜熊

努力學習 Nuxt 中……