Haz que sea tu marca
Dónde cambiar el nombre del sitio, el logotipo, el tema de color, las fuentes, el favicon y la imagen que se muestra al compartir una página.
Ejecuta el sitio con yarn dev mientras editas: la página se recarga cada vez que guardas.
| Para cambiar | Edita |
|---|---|
| El nombre, el título y la descripción del sitio | El bloque Metadata en messages/layout/en.json y messages/layout/ar.json |
| El logotipo | src/components/Logo.tsx |
| El tema de color | defaultTheme en src/app/[locale]/layout.tsx |
| Los colores de un tema | src/Demo/ThemeColorSwitcher/themes.ts |
| Las fuentes | src/app/[locale]/layout.tsx y src/styles/fonts.css |
| El favicon | src/app/favicon.ico |
| La imagen que se muestra al compartir una página | public/meta_image.png |
| La línea de copyright y el enlace de crédito | Footer.copyright en los archivos de mensajes del layout, y src/components/shared/layout/footer/components/BottomSection.tsx |
El nombre del sitio
El nombre es Logo de fábrica. Aparece en varios textos, cada uno en los dos archivos de mensajes:
Metadata.siteName,Metadata.titleyMetadata.descriptionenmessages/layout/<locale>.json: el nombre que muestran los buscadores y las tarjetas sociales, y el título y la descripción de la página de inicio.Footer.copyrightyFooter.descriptionen los mismos archivos: la línea de copyright del pie de página y la frase bajo el logotipo. El sitio rellena{year}en el copyright; consérvalo.DashboardMockup.brandenmessages/home/<locale>.json: el nombre en la barra lateral de la vista previa del panel.
Cada una de las demás páginas tiene su propio título y descripción en su bloque meta, como PricingPage.meta en messages/pricing/<locale>.json.
El logotipo
El logotipo es texto: la palabra LOGO seguida de un ® en el color del tema, dibujado por src/components/Logo.tsx. El encabezado, el pie de página y las páginas de inicio de sesión usan ese único componente, así que lo cambias en un solo lugar.
Cambia la palabra en LogoContent, o reemplaza sus dos elementos <span> por tu propia imagen, por ejemplo un archivo que pongas en public/:
import Image from "next/image";
<Image src="/your-logo.svg" alt="Your brand" width={120} height={28} priority />Colores y temas
El sitio es oscuro e incluye cuatro temas de color. El tema en uso es el defaultTheme que se pasa a <Providers> en src/app/[locale]/layout.tsx, blue de fábrica:
<Providers defaultTheme="blue">| Tema | Color principal |
|---|---|
monochrome | #e4e4e7, gris claro sobre casi negro |
blue | #3b82f6 |
purple | #a855f7 |
cyan | #06b6d4 |
Para usar el color de tu propia marca, edita un tema en src/Demo/ThemeColorSwitcher/themes.ts, como brandPrimary para el color principal y bgDark para el fondo de la página, y conserva su nombre en defaultTheme.
Con yarn dev, un panel flotante te permite probar los temas. Solo existe en desarrollo: yarn build, yarn start y la imagen de Docker nunca lo incluyen. El navegador recuerda lo que eliges en él, y esa elección prevalece sobre defaultTheme mientras desarrollas.
Fuentes
| Fuente | Se usa para | Se carga en |
|---|---|---|
| DM Sans | Texto en inglés | src/app/[locale]/layout.tsx, desde Google Fonts mediante next/font |
| Clash Display | Títulos en inglés | src/styles/fonts.css, desde los archivos de public/font/clash-display/ |
| Noto Sans Arabic | Texto en árabe | src/app/[locale]/layout.tsx, mediante next/font |
| Almarai | Títulos en árabe | src/app/[locale]/layout.tsx, mediante next/font |
Las fuentes de Google se descargan cuando se construye el sitio y luego las sirve el propio sitio. src/styles/base.css elige la fuente de los títulos y del texto para cada dirección.
Para usar otra fuente de Google, impórtala desde next/font/google en layout.tsx en lugar de una de estas y dale el mismo nombre de variable, como --font-dm-sans-next.
El favicon
Reemplaza src/app/favicon.ico por tu propio icono con el mismo nombre. Next.js lo sirve en /favicon.ico y lo enlaza desde todas las páginas.
La imagen que se muestra al compartir una página
Las redes sociales y las aplicaciones de chat muestran public/meta_image.png, de 1200 por 630 píxeles, cuando alguien comparte una página. Reemplázala por tu propia imagen del mismo tamaño. Si cambias el tamaño, cambia también width y height en ogImage en src/config/site.ts.
Su descripción para lectores de pantalla es Metadata.imageAlt en los archivos de mensajes del layout. Un artículo del blog comparte su propia imagen de portada.
La línea de crédito del pie de página
La parte inferior del pie de página muestra la línea de copyright y un enlace "Made with ❤️ by aniq-ui". Las palabras son Footer.copyright y Footer.madeWith en los archivos de mensajes del layout; el enlace está en src/components/shared/layout/footer/components/BottomSection.tsx. Cámbialo o quítalo como quieras.
Cómo funcionan los temas de color
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Cómo se aplica un tema antes de que se pinte la página, los tokens de color que define y cómo siguen las imágenes al tema.