Saltar al contenido
duxt

Dale identidad a tu sitio

Define el nombre, el logotipo y los iconos, para que el sitio se lea como tuyo y no como el de la capa.

La capa se entrega sin identidad a propósito: sin nombre, sin marca, sin iconos. Un sitio que la extendiera y mostrara la identidad de duxt estaría anunciando el proyecto de otro, así que cada una de estas cosas la defines tú — y hasta entonces, la cabecera recae en un icono genérico de libro.

Pasos

  1. El nombre. title es la palabra en la barra de navegación, en la plantilla del título SEO, en el 404, en el canal RSS y como encabezado de llms.txt. Un valor, siete lectores.
    export default defineAppConfig({
      duxt: {
        title: 'Acme SDK'
      }
    });
    

    Igual en todos los idiomas, así que una cadena simple es lo correcto. Donde no lo sea, la forma de registro funciona aquí como en cualquier otro sitio — mira Varios idiomas.
  2. El logotipo, si tienes uno. logo.src sustituye el par de icono y nombre por una imagen. srcDark se intercambia por CSS bajo la clase dark, no por script — una elección por script representa la marca clara en el HTML del servidor y la cambia tras la hidratación, lo que se ve como un parpadeo.
    logo: {
      src: '/wordmark.svg',
      srcDark: '/wordmark-dark.svg',
      alt: 'Acme SDK'
    }
    

    alt recae en title, así que defínelo solo donde la marca diga algo que el nombre no dice.
  1. Los iconos del navegador. Esto no es configuración de duxt, sino entradas normales de head de Nuxt — porque un favicon es de un sitio, nunca de un tema.
app: {
  head: {
    link: [
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
    ]
  }
}

Un icono SVG puede llevar su propia regla prefers-color-scheme, así que un archivo cubre una franja de pestañas clara y una oscura. El PNG (180×180) existe solo porque iOS ignora los iconos SVG.

  1. La línea de atribución, si la quieres fuera. El pie lleva una línea "Powered by duxt" con la versión de la capa. poweredBy: false la quita — una capa a la que no se le puede decir que deje de nombrarse a sí misma es adware.

Lo que sigue siendo de la capa

Colores, espaciado y componentes son otra cuestión, y otra página: Sobrescribir el tema. Esta página cubre la identidad: el nombre y la marca. Merece la pena mantenerlas separadas, porque un color de marca suele resultar ser un token y no una bifurcación del tema.

Lista de comprobación

  • title está definido y nada en la cabecera sigue leyéndose como "Documentation"
  • logo.srcDark está definido, o la marca es legible sobre ambos fondos
  • El favicon y el apple-touch-icon resuelven — ambos se sirven desde public/
  • llms.txt y rss.xml nombran tu sitio, no un marcador de posición
  • poweredBy es una elección deliberada y no un valor por defecto que nadie miró
¿Le ha resultado útil esta página?