From 3304b915ac9b0b4d9e71710081e62ce97b5e8b2b Mon Sep 17 00:00:00 2001 From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com> Date: Fri, 23 Oct 2026 17:57:19 +0000 Subject: [PATCH] docs: translate data-layout-item styling hooks (fr, es, zh) --- es/customize/custom-scripts.mdx | 23 +++++++++++++++++++++++ fr/customize/custom-scripts.mdx | 23 +++++++++++++++++++++++ zh/customize/custom-scripts.mdx | 23 +++++++++++++++++++++++ 3 files changed, 69 insertions(+) diff --git a/es/customize/custom-scripts.mdx b/es/customize/custom-scripts.mdx index d073c99a8..e6bd3dd71 100644 --- a/es/customize/custom-scripts.mdx +++ b/es/customize/custom-scripts.mdx @@ -397,6 +397,29 @@ Pueden aparecer múltiples instancias de estos hooks en una página. La lista in - `toc-item[data-active]`—Elemento activo de la tabla de contenidos. - `toc-item[data-active-deepest]`—Elemento más profundo activo de la tabla de contenidos. Solo presente en el encabezado exacto actualmente visible, a diferencia de `data-active` que también se establece en sus encabezados padres. + Regiones de diseño (`data-layout-item`): + + Usa `data-layout-item` para apuntar a las regiones principales de tu sitio con un único selector que funciona igual en todos los temas. Los ID de algunas regiones difieren entre temas. Por ejemplo, `#sidebar-content` es la barra lateral externa en algunos temas y el área de desplazamiento interna en otros, mientras que `[data-layout-item="sidebar"]` siempre es la barra lateral externa. + + - `[data-layout-item="banner"]`—Banner de anuncios. + - `[data-layout-item="topbar"]`—Barra de navegación superior. + - `[data-layout-item="mobile-nav"]`—Panel de navegación en móvil. + - `[data-layout-item="sidebar"]`—Panel de navegación de la barra lateral externa. + - `[data-layout-item="content"]`—Área de contenido principal. + - `[data-layout-item="page-header"]`—Encabezado de página con el título y la descripción. + - `[data-layout-item="side-panel"]`—Panel lateral derecho que contiene la tabla de contenidos. + - `[data-layout-item="toc"]`—Tabla de contenidos. + - `[data-layout-item="pagination"]`—Enlaces a la página anterior y siguiente en la parte inferior de una página. + - `[data-layout-item="footer"]`—Pie de página. + - `[data-layout-item="search-entry"]`—Barra de búsqueda o botón que abre la búsqueda, en escritorio y móvil. + - `[data-layout-item="assistant-entry"]`—Botón que abre el asistente de IA, en escritorio y móvil. + + ```css style.css + [data-layout-item="sidebar"] { + border-right: 1px solid #e5e7eb; + } + ``` + Nombre de componente (`data-component-name`): Usa `data-component-name` para apuntar a componentes de interfaz específicos con un selector estable que persiste si los nombres de clases internos cambian. diff --git a/fr/customize/custom-scripts.mdx b/fr/customize/custom-scripts.mdx index d7ab8e9cb..3a868398d 100644 --- a/fr/customize/custom-scripts.mdx +++ b/fr/customize/custom-scripts.mdx @@ -397,6 +397,29 @@ Plusieurs instances de ces hooks peuvent apparaître sur une page. La liste donn - `toc-item[data-active]`—Élément actif de la table des matières. - `toc-item[data-active-deepest]`—Élément le plus profond actif de la table des matières. Uniquement présent sur le titre exactement visible, contrairement à `data-active` qui est également défini sur ses titres parents. + Régions de mise en page (`data-layout-item`) : + + Utilisez `data-layout-item` pour cibler les principales régions de votre site avec un seul sélecteur qui fonctionne de la même manière dans tous les thèmes. Les ID de certaines régions diffèrent d'un thème à l'autre. Par exemple, `#sidebar-content` correspond à la barre latérale externe dans certains thèmes et à la zone de défilement interne dans d'autres, tandis que `[data-layout-item="sidebar"]` correspond toujours à la barre latérale externe. + + - `[data-layout-item="banner"]`—Bannière d'annonce. + - `[data-layout-item="topbar"]`—Barre de navigation supérieure. + - `[data-layout-item="mobile-nav"]`—Tiroir de navigation sur mobile. + - `[data-layout-item="sidebar"]`—Panneau de navigation de la barre latérale externe. + - `[data-layout-item="content"]`—Zone de contenu principale. + - `[data-layout-item="page-header"]`—En-tête de page avec le titre et la description. + - `[data-layout-item="side-panel"]`—Panneau latéral droit qui contient la table des matières. + - `[data-layout-item="toc"]`—Table des matières. + - `[data-layout-item="pagination"]`—Liens vers la page précédente et la page suivante en bas d'une page. + - `[data-layout-item="footer"]`—Pied de page. + - `[data-layout-item="search-entry"]`—Barre de recherche ou bouton qui ouvre la recherche, sur ordinateur et sur mobile. + - `[data-layout-item="assistant-entry"]`—Bouton qui ouvre l'assistant IA, sur ordinateur et sur mobile. + + ```css style.css + [data-layout-item="sidebar"] { + border-right: 1px solid #e5e7eb; + } + ``` + Nom de composant (`data-component-name`) : Utilisez `data-component-name` pour cibler des composants d'interface spécifiques avec un sélecteur stable qui persiste même si les noms de classes internes changent. diff --git a/zh/customize/custom-scripts.mdx b/zh/customize/custom-scripts.mdx index 1799d3a4a..ca4f8f0a1 100644 --- a/zh/customize/custom-scripts.mdx +++ b/zh/customize/custom-scripts.mdx @@ -397,6 +397,29 @@ CSS 定位钩子使用不同的语法： - `toc-item[data-active]`—激活的目录项。 - `toc-item[data-active-deepest]`—最深层激活的目录项。仅出现在当前可见的确切标题上，与 `data-active` 不同，后者也会设置在其父级标题上。 + 布局区域 (`data-layout-item`)： + + 使用 `data-layout-item` 通过一个在所有主题中行为一致的选择器来定位站点的主要区域。某些区域的 ID 因主题而异。例如，`#sidebar-content` 在某些主题中是外层侧边栏，在另一些主题中则是内部滚动区域，而 `[data-layout-item="sidebar"]` 始终表示外层侧边栏。 + + - `[data-layout-item="banner"]`—公告横幅。 + - `[data-layout-item="topbar"]`—顶部导航栏。 + - `[data-layout-item="mobile-nav"]`—移动端导航抽屉。 + - `[data-layout-item="sidebar"]`—外层侧边栏导航面板。 + - `[data-layout-item="content"]`—主要内容区域。 + - `[data-layout-item="page-header"]`—包含标题和描述的页面头部。 + - `[data-layout-item="side-panel"]`—包含目录的右侧面板。 + - `[data-layout-item="toc"]`—目录。 + - `[data-layout-item="pagination"]`—页面底部的上一页和下一页链接。 + - `[data-layout-item="footer"]`—页面页脚。 + - `[data-layout-item="search-entry"]`—在桌面端和移动端打开搜索的搜索栏或按钮。 + - `[data-layout-item="assistant-entry"]`—在桌面端和移动端打开 AI 助手的按钮。 + + ```css style.css + [data-layout-item="sidebar"] { + border-right: 1px solid #e5e7eb; + } + ``` + 组件名称 (`data-component-name`)： 使用 `data-component-name` 来定位特定的 UI 组件，该选择器在内部类名更改后仍然有效。