diff --git a/editor/configurations.mdx b/editor/configurations.mdx index 3e9ec1145..cd1ebccb7 100644 --- a/editor/configurations.mdx +++ b/editor/configurations.mdx @@ -1,6 +1,6 @@ --- title: "Configurations" -description: "Edit site branding, colors, appearance, and feature settings from the Configurations panel in the Mintlify web editor, with real-time team sync." +description: "Edit site branding, appearance, navigation, and feature settings from the Configurations panel in the Mintlify web editor, with real-time team sync." keywords: ["editor", "configurations", "settings", "branding", "theme"] boost: 3 --- @@ -20,93 +20,126 @@ Configure your documentation site's branding, appearance, and features from the /> -## Brand your site +The panel is organized into sections that map to the top-level properties in your [`docs.json`](/organize/settings). Use the table of contents on the right to jump between sections. + +## General Set your site's identity and how it appears to visitors. -- **Docs title**: The name of your site. Appears in browser tabs and search results. -- **Description**: Brief summary of your documentation. Used for SEO and site metadata. -- **Favicon**: Small icon that appears in browser tabs. Upload ICO, PNG, GIF, or JPG files. +- **Name**: The name of your project. Appears in browser tabs and search results. +- **Description**: Brief overview of your project. Used for SEO and AEO. + +## Branding + +Upload the marks that identify your site. + +- **Logo**: Your brand logo. Upload PNG or JPG files. Set separate light and dark versions and an optional click-through URL. To use an SVG logo, add the file to your repository and reference its path in your [`docs.json`](/organize/settings-appearance#logos). +- **Favicon**: Small icon that appears in browser tabs. Upload ICO, PNG, GIF, or JPG files. Set separate light and dark versions if needed. -## Customize colors and appearance +## Styling Control your site's visual identity and color scheme. - **Theme**: Choose a [theme](/customize/themes) for your site's overall appearance. - **Primary color**: The main accent color used throughout your site for links, buttons, and highlights. -- **Light mode color**: Accent color variation for light mode. How themes apply this varies by theme. -- **Dark mode color**: Accent color variation for dark mode. How themes apply this varies by theme. -- **Logo**: Your brand logo. Upload PNG or JPG files. You can set different logos for light and dark modes. To use an SVG logo, add the file to your repository via Git and reference its path in your [docs.json](/organize/settings-appearance#logos) configuration. -- **Logo link**: Where users go when they click your logo. Typically your homepage or marketing site. -- **Background colors**: Set custom background colors for light and dark modes separately. -- **Background image**: Add a background image to your site. Upload PNG, GIF, or JPG files. -- **Background decoration**: Apply visual styles to your background image. -- **Theme toggle**: Show or hide the light/dark mode switcher for users. -- **Default theme**: Set whether your site loads in light or dark mode by default. - -## Set custom fonts +- **Light color**: Accent color used in dark mode. How themes apply this varies by theme. +- **Dark color**: Accent color used in light mode. How themes apply this varies by theme. +- **Background color**: Custom background colors for light and dark modes. +- **Icon library**: Icon library used for all icon properties. Defaults to `fontawesome`. +- **Strict appearance**: Lock the site to a single appearance mode and hide the theme toggle. +- **Default appearance**: Whether your site loads in `system`, `light`, or `dark` mode by default. +- **Background decoration**: Apply a visual style (`gradient`, `grid`, or `windows`) to your background. +- **Background image**: Optional background image. Set a single image or separate light and dark versions. -Replace default fonts with your brand's typography. +## Typography -- **Default font**: The base font family and weight for all text. Provide a source URL and format (WOFF or WOFF2). -- **Heading font**: Font family and weight specifically for headings (h1, h2, etc.). Set separately from body text. -- **Body font**: Font family and weight for body text and paragraphs. +Replace default fonts with your brand's typography. -For each font, specify the family name, weight, source URL (like Google Fonts), and format. +- **Font family**: Any [Google Fonts](https://fonts.google.com/) family works out of the box. For a self-hosted font, provide a source URL and format (`woff` or `woff2`). +- **Weight**: Typically `400` for regular and `700` for bold. Variable fonts support precise weights like `550`. +- **Heading font**: Optional override applied to all headings (`h1`–`h6`). +- **Body font**: Optional override applied to body text and the rest of the page. -## Configure header and banner +## Navbar Add navigation elements to the top of your site. -- **Navbar links**: Add navigation links in your header. Each link includes text and a URL. -- **Banner**: Add a banner displayed at the top of every page. +- **Primary button**: The main call-to-action in your header. Set the type, label, and destination URL. +- **Navbar links**: Additional navigation links in your header. Each link includes text and a URL. -## Configure footer +## Footer Add links and social media handles to your site footer. -- **Social links**: Add your profiles on platforms like GitHub, X (Twitter), LinkedIn, Discord, YouTube, Slack, and more. -- **Footer columns**: Organize footer links into columns with custom headings and link groups. +- **Social links**: Profiles on platforms like GitHub, X, LinkedIn, Discord, YouTube, and Slack. +- **Footer columns**: Enable to organize footer links into up to four columns with custom headings. + +## Banner -## Enhance content +Display an announcement bar across the top of every page. + +- **Content**: The banner text. Supports basic MDX formatting like links, bold, and italic. Custom components are not supported. +- **Dismissible**: Show a dismiss button on the right side of the banner. +- **Type**: Visual style. `info` uses the primary brand color, `warning` uses an amber background, and `critical` uses a red background. Defaults to `info`. +- **Color**: Override the banner background color with a custom hex color. Set separate light and dark values for theme-aware colors. + +## Thumbnail + +Customize page thumbnails and social previews. + +- **Background**: Custom background image for thumbnails. +- **Appearance**: Render thumbnails in `light` or `dark` mode. When unset, thumbnails are auto-generated from your theme colors. +- **Font**: Custom font for text in thumbnails. + +## Content Customize how content appears on your site. -- **Thumbnail background**: Set a custom background image for page thumbnails and social previews. -- **Thumbnail appearance**: Control how thumbnails display. -- **Thumbnail font**: Set a custom font for text in thumbnails. -- **Page eyebrow**: Add small labels preceding page titles. -- **Code block theme**: Choose the syntax highlighting theme for code blocks. -- **LaTeX support**: Enable mathematical notation rendering with LaTeX. -- **Icon library**: Choose the icon library to use for your site. +- **Code block theme**: Match the docs light/dark mode with `system`, always use a dark theme with `dark`, or pick a custom [Shiki](https://shiki.style/) theme. +- **Custom code languages**: Register additional syntax highlighting languages. +- **Page eyebrow**: Show small labels preceding page titles. Choose `section` or `breadcrumbs`. +- **Timestamps**: Show the date the content was last modified on all pages. +- **LaTeX**: Load LaTeX (KaTeX) stylesheets for mathematical notation rendering. -## Set up AI chat and search +## Context menu -Customize the search experience. +Configure the quick actions surfaced in the page context menu. -- **Search placeholder**: The text that appears in the search box before users type. Default is `Search or ask`. +- **Options**: Multi-select dropdown of actions like `copy`, `view`, and opening the page in `chatgpt`, `claude`, `cursor`, and other AI assistants. +- **Display**: Where to display the options. `header` (default) shows them in the top-of-page context menu; `toc` shows them in the table of contents sidebar. + +## Navigation -## Connect integrations +Tune navigation behavior across your site. -Connect third-party tools for analytics, support, and compliance. +- **Drilldown**: Auto-navigate to the first page when a user clicks a navigation group. -## API specifications +## Search + +Customize the search experience and feedback. + +- **Search placeholder**: The text that appears in the search box before users type. Default is `Search or ask`. +- **Feedback**: Show thumbs-up and thumbs-down buttons or a "Suggest edits" link on every page. + +## API reference Document your API endpoints. -- **OpenAPI specs**: Upload an OpenAPI specification file to generate API reference pages. -- **AsyncAPI specs**: Upload an AsyncAPI specification file to generate API reference pages. -- **Playground display**: Choose to display the interactive API playground, simple API playground, or no API playground. +- **OpenAPI specs**: Add OpenAPI specification files to generate API reference pages. +- **AsyncAPI specs**: Add AsyncAPI specification files to generate API reference pages. +- **MDX server**: Custom MDX server endpoints for the API playground. +- **Playground display**: Show the interactive API playground, the simple API playground, or no API playground. - **Proxy server**: Enable or disable the proxy server for API requests. +- **`mdx.schema`**: Whether to render the schema section on API reference pages. -## Manage redirects +## Redirects -Use the **Redirects** section to add, edit, search, and remove redirects without manually editing your `docs.json` file. Redirects send users from old URLs to new ones, which is useful when you rename pages or restructure your documentation. For more information about redirect behavior, see [Redirects](/create/redirects). +Use the **Redirects** section to add, edit, search, and remove redirects without manually editing your `docs.json` file. Redirects send users from old URLs to new ones, which is useful when you rename pages or restructure your documentation. For more information, see [Redirects](/create/redirects). Each redirect has the following fields: - **Source**: The path to redirect from, like `/old-path`. Supports wildcards. -- **Destination**: The path to redirect to, like `/new-path`. +- **Destination**: The path to redirect to, like `/new-path`. Supports wildcards. - **Status**: The HTTP status code for the redirect. - `308`: Permanent redirect. Use this for content that has moved permanently. This is the default status. - `307`: Temporary redirect. Use this when the move is temporary. @@ -125,17 +158,34 @@ Each redirect has the following fields: To add a redirect: -1. Click **Add redirect** + +1. Click **Add redirect**. 2. Enter the source and destination. 3. Click **Save**. -To edit or remove an existing redirect: -1. Hover over the redirect. -2. Click the pencil icon to edit or the trash icon to remove. +To edit or remove an existing redirect, hover over the row and use the inline edit icon or the **X** to remove it. + +## SEO + +Configure metatags and indexing for search engines. + +- **Metatags**: Custom `` tags applied across your site. Add key-value pairs for tags like `og:image` or `twitter:card`. +- **Indexing**: Choose whether to index hidden pages. + +## Analytics + +Connect analytics platforms to track visitor behavior. Supported providers include Amplitude, Mixpanel, Heap, Google Analytics, Google Tag Manager, PostHog, Plausible, Fathom, Segment, Hightouch, Hotjar, LogRocket, Microsoft Clarity, Intercom, Clearbit, and more. + +Each entry renders as an inline row. Use the **X** icon to remove an integration. + +## 404 page + +Customize the experience when a user lands on a missing page. + +- **Redirect to home**: When on, missing pages redirect to your home page. When off, a 404 page is shown and you can customize the title and description below. +- **Title**: Heading shown on the 404 page. +- **Description**: Subheading shown on the 404 page. -## Additional page behaviors +## Variables -- **404 pages**: Customize 404 pages and set up redirect behavior. -- **Menu drilldown**: Enable or disable auto-navigating to the first page when a user clicks a navigation group. -- **Timestamps**: Show "Last modified on [date]" on all pages. -- **SEO indexing**: Choose whether to index hidden pages for search engines. +Define custom variables that can be re-used throughout your content. Each variable is a key-value pair. Use the **X** icon to remove a variable. diff --git a/es/editor/configurations.mdx b/es/editor/configurations.mdx index 7280eb1c8..105646d45 100644 --- a/es/editor/configurations.mdx +++ b/es/editor/configurations.mdx @@ -1,168 +1,213 @@ --- title: "Configuraciones" -description: "Edita los metadatos de las páginas, los elementos de navegación y la configuración multimedia usando las hojas de configuración visuales en la barra lateral del editor web de Mintlify." -keywords: ["editor", "configurations", "settings"] +description: "Edita la marca, la apariencia, la navegación y las funcionalidades desde el panel Configurations del editor web, con sincronización en tiempo real." +keywords: ["editor", "configurations", "settings", "branding", "theme"] boost: 3 --- -Configura la marca, la apariencia y las funcionalidades de tu sitio de documentación desde el panel **Configurations** en el editor web. +Configura la marca, la apariencia y las funcionalidades de tu sitio de documentación desde el panel **Configurations** en el editor web. Los cambios se sincronizan en tiempo real con otros editores en la misma rama. - Opciones de Configurations en la barra lateral en modo claro. + Menú de Configurations en el editor. - Opciones de Configurations en la barra lateral en modo oscuro. + Menú de Configurations en el editor. -
- ## Define la marca de tu sitio +El panel está organizado en secciones que se corresponden con las propiedades de nivel superior de tu [`docs.json`](/es/organize/settings). Usa la tabla de contenido a la derecha para saltar entre secciones. + +
+ ## General
-Configura la identidad de tu sitio y cómo aparece para los visitantes. +Define la identidad de tu sitio y cómo aparece para los visitantes. -* **Título de la documentación**: El nombre de tu documentación. Aparece en las pestañas del navegador y en los resultados de búsqueda. -* **Descripción**: Breve resumen de tu documentación. Se utiliza para SEO y los metadatos del sitio. -* **Favicon**: Pequeño icono que aparece en las pestañas del navegador. Carga archivos ICO, PNG, GIF o JPG. -* **Tema**: Elige un [tema](/es/customize/themes) para la apariencia general de tu documentación. +- **Name**: El nombre de tu proyecto. Aparece en las pestañas del navegador y en los resultados de búsqueda. +- **Description**: Resumen breve del proyecto. Se usa para SEO y AEO. -
- ## Personaliza los colores y la apariencia +
+ ## Branding
-Controla la identidad visual y la paleta de colores de tu sitio. +Sube las marcas que identifican tu sitio. -* **Color primario**: El color de acento principal que se usa en todo tu sitio para enlaces, botones y elementos destacados. -* **Color del modo claro**: Variación del color de acento para el modo claro. La forma en que se aplica depende de cada tema. -* **Color del modo oscuro**: Variación del color de acento para el modo oscuro. La forma en que se aplica depende de cada tema. -* **Logo**: El logo de tu marca. Sube archivos PNG o JPG. Puedes establecer logos distintos para los modos claro y oscuro. Para usar un logo SVG, añade el archivo a tu repositorio a través de Git y haz referencia a su ruta en tu configuración de docs.json. -* **Enlace del logo**: Adónde van los usuarios cuando hacen clic en tu logo. Normalmente es tu página de inicio o tu sitio de marketing. -* **Colores de fondo**: Configura colores de fondo personalizados por separado para los modos claro y oscuro. -* **Imagen de fondo**: Añade una imagen de fondo a tu sitio. Sube archivos PNG, GIF o JPG. -* **Decoración de fondo**: Aplica estilos visuales a tu imagen de fondo. -* **Selector de tema**: Muestra u oculta el interruptor de modo claro/oscuro para los usuarios. -* **Tema predeterminado**: Define si tu sitio se carga en modo claro u oscuro de forma predeterminada. +- **Logo**: El logo de tu marca. Sube archivos PNG o JPG. Define versiones claras y oscuras separadas y una URL opcional de destino. Para usar un logo SVG, añade el archivo a tu repositorio y referencia su ruta en tu [`docs.json`](/es/organize/settings-appearance#logos). +- **Favicon**: Pequeño icono que aparece en las pestañas del navegador. Sube archivos ICO, PNG, GIF o JPG. Define versiones claras y oscuras separadas si es necesario. -
- ## Configurar fuentes personalizadas +
+ ## Styling +
+ +Controla la identidad visual y la paleta de colores de tu sitio. + +- **Theme**: Elige un [tema](/es/customize/themes) para la apariencia general del sitio. +- **Primary color**: El color de acento principal usado en enlaces, botones y elementos destacados. +- **Light color**: Color de acento usado en modo oscuro. La forma de aplicarlo depende del tema. +- **Dark color**: Color de acento usado en modo claro. La forma de aplicarlo depende del tema. +- **Background color**: Colores de fondo personalizados para los modos claro y oscuro. +- **Icon library**: Biblioteca de iconos usada en todas las propiedades de icono. Por defecto es `fontawesome`. +- **Strict appearance**: Bloquea el sitio en un único modo de apariencia y oculta el selector de tema. +- **Default appearance**: Si tu sitio carga en modo `system`, `light` o `dark` por defecto. +- **Background decoration**: Aplica un estilo visual (`gradient`, `grid` o `windows`) al fondo. +- **Background image**: Imagen de fondo opcional. Configura una sola imagen o versiones separadas para modo claro y oscuro. + +
+ ## Typography
Reemplaza las fuentes predeterminadas con la tipografía de tu marca. -* **Fuente predeterminada**: La familia tipográfica y el peso base para todo el texto. Proporciona una URL de origen y el formato (WOFF o WOFF2). -* **Fuente de encabezados**: Familia tipográfica y peso específicamente para encabezados (h1, h2, etc.). Se configura por separado del cuerpo de texto. -* **Fuente del cuerpo**: Familia tipográfica y peso para el cuerpo de texto y los párrafos. +- **Font family**: Cualquier familia de [Google Fonts](https://fonts.google.com/) funciona directamente. Para una fuente autoalojada, proporciona la URL de origen y el formato (`woff` o `woff2`). +- **Weight**: Normalmente `400` para regular y `700` para negrita. Las fuentes variables admiten pesos precisos como `550`. +- **Heading font**: Override opcional aplicado a todos los encabezados (`h1`–`h6`). +- **Body font**: Override opcional aplicado al cuerpo de texto y al resto de la página. + + + +Agrega elementos de navegación a la parte superior del sitio. -Para cada fuente, especifica el nombre de la familia, el peso, la URL de origen (como Google Fonts) y el formato. +- **Primary button**: La llamada a la acción principal del encabezado. Configura el tipo, el label y la URL de destino. +- **Navbar links**: Enlaces de navegación adicionales del encabezado. Cada enlace incluye texto y una URL. -
- ## Configurar el encabezado + -Agrega elementos de navegación a la parte superior de tu sitio. +Agrega enlaces y redes sociales al footer de tu sitio. -* **Botón de la barra de navegación**: Agrega un botón principal de llamada a la acción en tu encabezado. Configura el tipo de botón, el label y la URL de destino. -* **Enlaces de la barra de navegación**: Agrega enlaces de navegación adicionales en tu encabezado. Cada enlace incluye texto y una URL. +- **Social links**: Perfiles en plataformas como GitHub, X, LinkedIn, Discord, YouTube y Slack. +- **Footer columns**: Activa columnas (hasta cuatro) con títulos personalizados para organizar los enlaces del footer. -