--- title: Identidade visual description: "Configure logotipos, favicons, links da navegação e conteúdo do rodapé do seu site de documentação, com modos claro/escuro, cores e ícones para links externos." --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. {/* ANCHOR STABILITY: The "Favicon", "Site Name", "Description", and "Logo" heading anchors on this page are baked into suggestion links stored in Firestore build records (builder/build-service/lib/config-suggestions.ts and its CLI twin). Renaming these headings dead-links every previously stored suggestion — don't rename without updating both twins and accepting stale links in historical builds. */} A identidade visual controla os elementos que os leitores veem primeiro: logotipos, favicons e links de navegação. Tudo oferece suporte a variantes dos modos claro/escuro. ## Logotipo Adicione seu logotipo ao cabeçalho de navegação: ```json { "logo": { "light": "/images/logo-light.webp", "dark": "/images/logo-dark.webp", "href": "https://yourcompany.com" } } ``` | Campo | Descrição | |-------|-------------| | `light` | Logotipo para o modo claro (logotipo escuro em fundo claro) | | `dark` | Logotipo para o modo escuro (logotipo claro em fundo escuro) | | `href` | Destino da navegação ao clicar no logotipo | Use logotipos SVG para obter uma renderização nítida em qualquer tamanho. Se você tiver apenas um logotipo, use-o para `light` e `dark`. ### Dimensões do logotipo Os logotipos são exibidos com largura máxima de 120px. Para obter os melhores resultados: - Largura: 120-240px - Altura: 30-40px - Formato: SVG é preferível ## Favicon Uma imagem para os dois modos: ```json { "favicon": "/images/favicon.svg" } ``` Ou uma variante separada para cada modo: ```json { "favicon": { "light": "/images/favicon.svg", "dark": "/images/favicon-dark.svg" } } ``` O favicon `light` é exibido no modo claro; `dark` é exibido no modo escuro. `dark` é opcional. Quando omitido, `light` é usado nos dois modos. O Jamdesk gera um `` para o favicon principal e um segundo link com `media="(prefers-color-scheme: dark)"` para a variante escura. Formatos compatíveis: SVG, PNG, ICO. Se preferir um único recurso, um SVG que use `currentColor` para seus traços e preenchimentos também se adapta automaticamente: o navegador substitui a cor de primeiro plano ativa. ## Nome do site O campo `name` aparece nas abas do navegador e nos resultados de pesquisa: ```json { "name": "Acme Docs", "description": "Documentation for the Acme API" } ``` Associe-o a uma [`description`](#descrição) para que os resultados de pesquisa e as prévias de links exibam um texto real em vez de um fallback genérico. ## Descrição O campo `description` é o resumo SEO padrão do seu site. Os mecanismos de pesquisa o exibem abaixo do título do site, e as plataformas sociais o usam nas prévias de links: ```json { "description": "Build, ship, and scale documentation with the Acme platform." } ``` Procure usar de 50 a 160 caracteres, escritos para um leitor que decide se deve clicar. As páginas que definem sua própria propriedade `description` no frontmatter usam esse valor; a descrição do site abrange todo o restante. ## Links de navegação Adicione links à barra de navegação: ```json { "navbar": { "links": [ { "label": "Blog", "href": "https://yourcompany.com/blog" }, { "label": "Pricing", "href": "https://yourcompany.com/pricing" } ], "primary": { "type": "button", "label": "Get Started", "href": "https://app.yourcompany.com/signup" } } } ``` ### Opções de link | Campo | Tipo | Descrição | |-------|------|-------------| | `label` | string | Texto exibido | | `href` | string | URL (externa ou interna) | ### Botão principal O campo `primary` cria um botão de chamada para ação destacado: ```json { "primary": { "type": "button", "label": "Dashboard", "href": "https://app.yourcompany.com" } } ``` ## Rodapé Adicione links sociais e colunas de links personalizados ao rodapé da sua documentação. ### Links sociais Exiba ícones de redes sociais na parte inferior de todas as páginas: ```json { "footer": { "socials": { "github": "https://github.com/yourcompany", "x": "https://x.com/yourcompany", "discord": "https://discord.gg/yourserver", "linkedin": "https://linkedin.com/company/yourcompany" } } } ``` #### Plataformas compatíveis | Plataforma | Chave | Descrição | |----------|-----|-------------| | GitHub | `github` | Link para sua organização ou seu repositório no GitHub | | X (Twitter) | `x` ou `twitter` | Link para seu perfil no X/Twitter | | LinkedIn | `linkedin` | Link para a página da sua empresa no LinkedIn | | Discord | `discord` | Link para seu servidor do Discord | | Slack | `slack` | Link para sua comunidade no Slack | | YouTube | `youtube` | Link para seu canal no YouTube | | Instagram | `instagram` | Link para seu perfil no Instagram | | Facebook | `facebook` | Link para sua página no Facebook | | Reddit | `reddit` | Link para seu subreddit | | Telegram | `telegram` | Link para seu canal no Telegram | | Bluesky | `bluesky` | Link para seu perfil no Bluesky | | Threads | `threads` | Link para seu perfil no Threads | | Medium | `medium` | Link para sua publicação no Medium | | Hacker News | `hacker-news` | Link para seu perfil no Hacker News | | Site | `website` | Link para seu site principal | Os ícones são exibidos em uma ordem consistente, independentemente de como você os define na configuração. GitHub e X/Twitter aparecem primeiro, seguidos pelas outras plataformas. ### Colunas de links Adicione grupos organizados de links acima dos ícones sociais: ```json { "footer": { "links": [ { "header": "Resources", "items": [ { "label": "Blog", "href": "https://yourcompany.com/blog" }, { "label": "Changelog", "href": "/changelog" } ] }, { "header": "Company", "items": [ { "label": "About", "href": "https://yourcompany.com/about" }, { "label": "Careers", "href": "https://yourcompany.com/careers" } ] } ], "socials": { "github": "https://github.com/yourcompany", "x": "https://x.com/yourcompany" } } } ``` | Campo | Tipo | Descrição | |-------|------|-------------| | `links` | array | Array de objetos de coluna de links | | `links[].header` | string | Título da coluna (opcional) | | `links[].items` | array | Links na coluna | | `links[].items[].label` | string | Texto exibido para o link | | `links[].items[].href` | string | URL (caminhos internos ou URLs externas) | Links externos (que começam com `http`) são abertos automaticamente em uma nova aba. Links internos navegam dentro da sua documentação. ### Ocultar o rodapé em páginas específicas Use o frontmatter para ocultar o rodapé em páginas individuais: ```yaml --- title: Landing Page hideFooter: true --- ``` Isso é útil para landing pages personalizadas ou páginas em que o rodapé causaria distração. ## Identidade visual do Jamdesk Por padrão, um link "Powered by Jamdesk" aparece no rodapé das páginas da sua documentação. Esse link ajuda outras equipes a descobrir o Jamdesk. Você pode removê-lo se preferir. ### Ocultar a identidade visual Para remover a identidade visual do Jamdesk: 1. Acesse **Settings** no seu dashboard do Jamdesk 2. Encontre a seção **Build Settings** 3. Desative **Show Jamdesk Branding** 4. Acione um novo build A opção de identidade visual está disponível em todos os planos. As alterações exigem um novo build para entrarem em vigor. ## Exemplo completo de identidade visual Veja uma configuração completa de identidade visual: ```json { "name": "Acme Documentation", "description": "Build amazing products with Acme", "theme": "jam", "colors": { "primary": "#6366F1", "light": "#818CF8", "dark": "#4F46E5" }, "favicon": "/images/favicon.svg", "logo": { "light": "/images/logo-dark.webp", "dark": "/images/logo-light.webp", "href": "https://acme.com" }, "navbar": { "links": [ { "label": "API", "href": "/api/overview" }, { "label": "Blog", "href": "https://acme.com/blog" } ], "primary": { "type": "button", "label": "Sign Up", "href": "https://app.acme.com/signup" } }, "footer": { "socials": { "github": "https://github.com/acme", "x": "https://x.com/acme", "discord": "https://discord.gg/acme" }, "links": [ { "header": "Resources", "items": [ { "label": "Blog", "href": "https://acme.com/blog" }, { "label": "Status", "href": "https://status.acme.com" } ] } ] } } ``` ## Domínio personalizado Adicione seu domínio no dashboard do Jamdesk: 1. Acesse **Settings** → **Domains** 2. Adicione seu domínio (por exemplo, `docs.yourcompany.com`) 3. Configure o DNS conforme mostrado 4. Aguarde a verificação Sua documentação ficará acessível no domínio personalizado com SSL automático. ## O que vem a seguir? Personalize cores e tipografia Melhore os metadados e as prévias de pesquisa