Aller au contenu
duxt

Donner son identité à votre site

Définir le nom, le logo et les icônes, pour que le site se lise comme le vôtre et non comme celui de la couche.

La couche est livrée sans identité, volontairement : pas de nom, pas de marque, pas d'icônes. Un site qui l'étendrait en affichant l'identité de duxt ferait la publicité du projet de quelqu'un d'autre — chacun de ces éléments vous revient donc. En attendant, l'en-tête retombe sur une icône de livre générique.

Étapes

  1. Le nom. title est le mot dans la barre de navigation, dans le gabarit du titre SEO, sur la 404, dans le flux RSS et comme titre de llms.txt. Une valeur, sept lecteurs.
    export default defineAppConfig({
  duxt: {
    title: 'Acme SDK'
  }
});

    Identique dans toutes les langues : une chaîne simple convient. Là où ce n'est pas le cas, la forme d'enregistrement fonctionne ici comme ailleurs — voir Plusieurs langues.
  2. Le logo, si vous en avez un. logo.src remplace le couple icône et nom par une image. srcDark est permuté par CSS sous la classe dark, pas par script — un choix scripté rend la marque claire dans le HTML du serveur puis la bascule après l'hydratation, ce qui se voit comme un clignotement.
    logo: {
  src: '/wordmark.svg',
  srcDark: '/wordmark-dark.svg',
  alt: 'Acme SDK'
}

    alt retombe sur title : ne le définissez que là où la marque dit quelque chose que le nom ne dit pas.
  1. Les icônes du navigateur. Ce n'est pas de la configuration duxt, mais de simples entrées head de Nuxt — car un favicon appartient à un site, jamais à un thème.
app: {
  head: {
    link: [
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
    ]
  }
}

Une icône SVG peut porter sa propre règle prefers-color-scheme : un fichier couvre donc une barre d'onglets claire et une sombre. Le PNG (180×180) n'existe que parce qu'iOS ignore les icônes SVG.

  1. La ligne d'attribution, si vous n'en voulez pas. Le pied de page porte une ligne « Powered by duxt » avec la version de la couche. poweredBy: false la retire — une couche à qui l'on ne peut pas demander de cesser de se nommer est un logiciel publicitaire.

Ce qui reste à la couche

Couleurs, espacements et composants sont une autre question, et une autre page : Surcharger le thème. Cette page couvre l'identité — le nom et la marque. Les tenir séparées en vaut la peine, car une couleur de marque se révèle le plus souvent être un jeton, et non un fork du thème.

Liste de contrôle

  • title est défini et plus rien dans l'en-tête ne se lit « Documentation »
  • logo.srcDark est défini, ou la marque est lisible sur les deux fonds
  • Le favicon et l'apple-touch-icon se résolvent — servis tous deux depuis public/
  • llms.txt et rss.xml nomment votre site, pas un espace réservé
  • poweredBy est un choix délibéré, pas un défaut que personne n'a regardé
Cette page vous a-t-elle été utile ?