Image OG

Personnalisation de l'Image OG dynamique.

shadcn-docs-nuxt utilise le module nuxt-og-image pour générer des Images OG dynamiques.

L'Image OG dynamique est utilisée sur toutes les pages sauf la page d'index. La page d'index utilise une Image OG statique définie dans le champ ogImage.

Utilisation des Modèles Intégrés

Pour utiliser un modèle, définissez le nom du composant Image OG dans ogImageComponent.

app.config.ts
export default defineAppConfig({
  shadcnDocs: {
    site: {
      ogImageComponent: 'ShadcnDocs',
      ogImageColor: 'light', // ou 'dark'
    },
  },
});

Par défaut, un modèle shadcn-docs-nuxt et plusieurs modèles communautaires sont disponibles.

ShadcnDocs
ShadcnDocs (Sombre)
Nuxt
Nuxt SEO

Aperçu de l'Image OG Shadcn Docs

Utilisation de Modèles Personnalisés

Pour utiliser un modèle personnalisé, créez un modèle en suivant le guide dans la Documentation Nuxt SEO. Ensuite, définissez le nom du composant de votre modèle dans 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',
    },
  },
});
Modifier cette page
Nuxt Content
Configuration du module Nuxt Content.
Lien d'Édition
Un lien vers le fichier source.