shadcn-docs-nuxt 使用 nuxt-og-image 模块来生成动态 OG 图片。
动态 OG 图片用于所有页面，除了首页。首页使用在 ogImage 字段中定义的静态 OG 图片。
要使用模板，请在 ogImageComponent 中设置 OG 图片组件的名称。
app.config.ts
export default defineAppConfig({
shadcnDocs: {
site: {
ogImageComponent: 'ShadcnDocs',
ogImageColor: 'light', // or 'dark'
},
},
});
开箱即用，提供了一个 shadcn-docs-nuxt 模板和多个社区模板。
ShadcnDocs
ShadcnDocs (Dark)
Nuxt
Nuxt SEO
要使用自定义模板，请按照 Nuxt SEO 文档 中的指南创建模板。然后在 ogImageComponent 中设置您的模板组件名称。
components/OgImage/BlogPost.vue
<template>
<div class="flex size-full items-start justify-start border-[12px] border-solid border-blue-500 bg-gray-50">
<div class="flex h-full items-start justify-start">
<div class="flex size-full flex-col justify-between">
<h1 class="p-20 text-left text-[80px] font-black">
{{ title }}
</h1>
<p class="mb-0 px-20 pb-10 text-2xl font-bold">
mycoolsite.com
</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
withDefaults(defineProps<{
title?: string;
}>(), {
title: 'title',
});
</script>
app.config.ts
export default defineAppConfig({
shadcnDocs: {
site: {
ogImageComponent: 'BlogPost',
},
},
});
