Pular para o conteúdo
duxt

Dá identidade ao teu site

Define o nome, o logótipo e os ícones, para que o site se leia como teu e não como o da camada.

A camada é entregue sem identidade de propósito: sem nome, sem marca, sem ícones. Um site que a estendesse e mostrasse a identidade do duxt estaria a anunciar o projeto de outra pessoa — cada uma destas coisas é tua para definir. Até lá, o cabeçalho recai num ícone genérico de livro.

Passos

  1. O nome. title é a palavra na barra de navegação, no modelo do título de SEO, na 404, no canal RSS e como cabeçalho do llms.txt. Um valor, sete leitores.
    export default defineAppConfig({
  duxt: {
    title: 'Acme SDK'
  }
});

    Igual em todas as línguas, portanto uma cadeia simples é o correto. Onde não for, a forma de registo funciona aqui como em qualquer outro sítio — vê Várias línguas.
  2. O logótipo, se tiveres um. logo.src substitui o par de ícone e nome por uma imagem. srcDark é trocado por CSS sob a classe dark, não por script — uma escolha por script apresenta a marca clara no HTML do servidor e troca-a depois da hidratação, o que se vê como um piscar.
    logo: {
  src: '/wordmark.svg',
  srcDark: '/wordmark-dark.svg',
  alt: 'Acme SDK'
}

    alt recai em title, portanto define-o só onde a marca diga algo que o nome não diz.
  1. Os ícones do navegador. Isto não é configuração do duxt, mas entradas normais de head do Nuxt — porque um favicon é de um site, nunca de um tema.
app: {
  head: {
    link: [
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
    ]
  }
}

Um ícone SVG pode levar a sua própria regra prefers-color-scheme, portanto um ficheiro cobre uma barra de separadores clara e uma escura. O PNG (180×180) existe só porque o iOS ignora ícones SVG.

  1. A linha de atribuição, se a quiseres fora. O rodapé leva uma linha "Powered by duxt" com a versão da camada. poweredBy: false retira-a — uma camada a que não se pode dizer que pare de se nomear é adware.

O que continua a ser da camada

Cores, espaçamento e componentes são outra questão, e outra página: Substituir o tema. Esta página cobre a identidade — o nome e a marca. Vale a pena mantê-las separadas, porque uma cor de marca costuma revelar-se um token e não uma bifurcação do tema.

Lista de verificação

  • title está definido e nada no cabeçalho se lê ainda como "Documentation"
  • logo.srcDark está definido, ou a marca é legível em ambos os fundos
  • O favicon e o apple-touch-icon resolvem — ambos servidos a partir de public/
  • llms.txt e rss.xml nomeiam o teu site, não um marcador de posição
  • poweredBy é uma escolha deliberada e não um padrão que ninguém olhou
Esta página foi útil?