shadcn-docs-nuxt 使用 nuxt-og-image 模块来生成动态 OG 图片.
动态 OG 图片会在所有页面中使用, 除了首页. 首页则使用在 ogImage 字段中定义的静态 OG 图片.
要使用模板, 请在 ogImageComponent 中设置 OG Image 组件的名称.
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',
},
},
});
