Zum Inhalt springen
duxt

Deiner Website eine Marke geben

Name, Wortmarke und Icons setzen, damit die Website als deine gelesen wird und nicht als die der Ebene.

Die Ebene wird absichtlich ohne Marke ausgeliefert: kein Name, keine Marke, keine Icons. Eine Website, die sie erweitert und duxts Identität zeigte, würde für ein fremdes Projekt werben — jedes dieser Dinge setzt also du. Bis dahin fällt der Kopfbereich auf ein generisches Buch-Icon zurück.

Schritte

  1. Der Name. title ist das Wort in der Navigationsleiste, in der SEO-Titelvorlage, auf der 404-Seite, im RSS-Kanal und als Überschrift in llms.txt. Ein Wert, sieben Leser.
    export default defineAppConfig({
  duxt: {
    title: 'Acme SDK'
  }
});

    In jeder Sprache gleich, also ist eine einfache Zeichenkette richtig. Wo das nicht zutrifft, funktioniert die Record-Form hier wie überall sonst — siehe Mehrere Sprachen.
  2. Die Wortmarke, falls du eine hast. logo.src ersetzt das Paar aus Icon und Name durch ein Bild. srcDark wird per CSS unter der dark-Klasse eingetauscht, nicht per Skript — eine skriptgesteuerte Wahl rendert die helle Marke ins Server-HTML und kippt sie nach der Hydration, was sichtbar blinkt.
    logo: {
  src: '/wordmark.svg',
  srcDark: '/wordmark-dark.svg',
  alt: 'Acme SDK'
}

    alt fällt auf title zurück, setze es also nur, wo die Marke etwas sagt, das der Name nicht sagt.
  1. Die Browser-Icons. Das ist keine duxt-Konfiguration, sondern gewöhnliche Nuxt-Head-Einträge — denn ein Favicon gehört einer Website, nie einem Theme.
app: {
  head: {
    link: [
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
    ]
  }
}

Ein SVG-Icon kann seine eigene prefers-color-scheme-Regel tragen, eine Datei deckt also einen hellen und einen dunklen Tab-Streifen ab. Das PNG (180×180) existiert nur, weil iOS SVG-Icons ignoriert.

  1. Die Attributionszeile, falls sie weg soll. Der Fußbereich trägt eine Zeile „Powered by duxt" mit der Version der Ebene. poweredBy: false entfernt sie — eine Ebene, der man nicht sagen kann, dass sie aufhören soll, sich selbst zu nennen, ist Adware.

Was der Ebene bleibt

Farben, Abstände und Komponenten sind eine eigene Frage und eine eigene Seite: Das Theme überschreiben. Diese Seite behandelt Identität — Name und Marke. Die beiden auseinanderzuhalten lohnt sich, weil sich eine Markenfarbe meist als ein Token erweist und nicht als Fork des Themes.

Checkliste

  • title ist gesetzt, und nichts im Kopfbereich liest sich noch als „Documentation"
  • logo.srcDark ist gesetzt, oder die Marke ist auf beiden Hintergründen lesbar
  • Favicon und Apple-Touch-Icon lösen auf — beide werden aus public/ ausgeliefert
  • llms.txt und rss.xml nennen deine Website, keinen Platzhalter
  • poweredBy ist eine bewusste Wahl und kein Standard, den niemand angesehen hat
War diese Seite hilfreich?