Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions es/customize/custom-scripts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -525,6 +525,47 @@ Si no defines la variable, cada tema usa su ancho de contenido predeterminado:

`--content-width` no afecta a las páginas en modo `wide`, `center`, `custom` o `frame`.

<div id="add-styles-to-a-single-page">
### Añadir estilos a una sola página
</div>

Para aplicar estilos a una sola página sin añadir un archivo `.css` global, añade un bloque `<style>` a la página. Escribe el CSS dentro de una plantilla literal.

```mdx Example page style
<style>{`
.pricing-callout {
border-left: 4px solid #0D9373;
padding-left: 1rem;
}

@keyframes page-pulse {
from { opacity: 1; }
to { opacity: 0.3; }
}
`}</style>

<div className="pricing-callout">Prices shown in USD.</div>

<span className="animate-[page-pulse_1s_ease-in-out_infinite_alternate]">Live</span>
```

Mintlify limita cada selector del bloque al área de contenido de la página, por lo que las reglas no afectan a la navegación, la barra lateral ni otras páginas. Los estilos de página se muestran en tu sitio publicado y en el editor web.

Puedes usar estas reglas @ en un estilo de página:

- `@media`, `@supports` y `@container`.
- `@keyframes`, cuando el nombre empieza por `page-`. Haz referencia a la animación desde una propiedad `animation` o una clase de Tailwind como `animate-[page-pulse_1s_infinite]`. El prefijo impide que una página reemplace las animaciones que usa Mintlify.

Mintlify elimina cualquier otra cosa del bloque:

- Otras reglas @, como `@import` y `@font-face`.
- Reglas cuyo selector empieza por un combinador (`>`, `+`, `~`) o usa el selector de anidamiento `&`.
- Declaraciones que cargan recursos, como `url()` e `image-set()`.
- `position: fixed`.
- `!important` dentro de keyframes.

Mintlify ignora los atributos de la etiqueta `<style>`. Elimina el bloque completo si el CSS no es una plantilla literal simple, por ejemplo, si contiene expresiones `${}` o una variable.

<div id="custom-javascript">
## JavaScript personalizado
</div>
Expand Down
41 changes: 41 additions & 0 deletions fr/customize/custom-scripts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -525,6 +525,47 @@ Si vous ne définissez pas la variable, chaque thème utilise sa largeur de cont

`--content-width` n'affecte pas les pages en mode `wide`, `center`, `custom` ou `frame`.

<div id="add-styles-to-a-single-page">
### Ajouter des styles à une seule page
</div>

Pour styliser une seule page sans ajouter de fichier `.css` global, ajoutez un bloc `<style>` à la page. Écrivez le CSS dans un littéral de gabarit.

```mdx Example page style
<style>{`
.pricing-callout {
border-left: 4px solid #0D9373;
padding-left: 1rem;
}

@keyframes page-pulse {
from { opacity: 1; }
to { opacity: 0.3; }
}
`}</style>

<div className="pricing-callout">Prices shown in USD.</div>

<span className="animate-[page-pulse_1s_ease-in-out_infinite_alternate]">Live</span>
```

Mintlify limite chaque sélecteur du bloc à la zone de contenu de la page, de sorte que les règles n'affectent pas la navigation, la barre latérale ni les autres pages. Les styles de page s'affichent sur votre site publié et dans l'éditeur web.

Vous pouvez utiliser ces règles @ dans un style de page :

- `@media`, `@supports` et `@container`.
- `@keyframes`, lorsque le nom commence par `page-`. Référencez l'animation depuis une propriété `animation` ou une classe Tailwind telle que `animate-[page-pulse_1s_infinite]`. Le préfixe empêche une page de remplacer les animations utilisées par Mintlify.

Mintlify supprime tout le reste du bloc :

- Les autres règles @, telles que `@import` et `@font-face`.
- Les règles dont le sélecteur commence par un combinateur (`>`, `+`, `~`) ou utilise le sélecteur d'imbrication `&`.
- Les déclarations qui chargent des ressources, telles que `url()` et `image-set()`.
- `position: fixed`.
- `!important` à l'intérieur des keyframes.

Mintlify ignore les attributs de la balise `<style>`. Il supprime l'intégralité du bloc si le CSS n'est pas un simple littéral de gabarit, par exemple s'il contient des expressions `${}` ou une variable.

<div id="custom-javascript">
## JavaScript personnalisé
</div>
Expand Down
41 changes: 41 additions & 0 deletions zh/customize/custom-scripts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -525,6 +525,47 @@ CSS 定位钩子使用不同的语法:

`--content-width` 不会影响 `wide`、`center`、`custom` 或 `frame` 模式的页面。

<div id="add-styles-to-a-single-page">
### 为单个页面添加样式
</div>

如需为某个页面设置样式而不添加全局 `.css` 文件,请在该页面中添加一个 `<style>` 代码块。将 CSS 写在模板字面量中。

```mdx Example page style
<style>{`
.pricing-callout {
border-left: 4px solid #0D9373;
padding-left: 1rem;
}

@keyframes page-pulse {
from { opacity: 1; }
to { opacity: 0.3; }
}
`}</style>

<div className="pricing-callout">Prices shown in USD.</div>

<span className="animate-[page-pulse_1s_ease-in-out_infinite_alternate]">Live</span>
```

Mintlify 会将代码块中的每个选择器限定在该页面的内容区域内,因此这些规则不会影响导航、侧边栏或其他页面。页面样式会在你已发布的站点和 Web 编辑器中渲染。

你可以在页面样式中使用以下 at 规则:

- `@media`、`@supports` 和 `@container`。
- `@keyframes`,前提是名称以 `page-` 开头。可通过 `animation` 属性或 Tailwind 类(例如 `animate-[page-pulse_1s_infinite]`)引用该动画。该前缀可防止页面替换 Mintlify 使用的动画。

Mintlify 会从代码块中移除其他所有内容:

- 其他 at 规则,例如 `@import` 和 `@font-face`。
- 选择器以组合符(`>`、`+`、`~`)开头或使用 `&` 嵌套选择器的规则。
- 加载资源的声明,例如 `url()` 和 `image-set()`。
- `position: fixed`。
- keyframes 中的 `!important`。

Mintlify 会忽略 `<style>` 标签上的属性。如果 CSS 不是纯模板字面量,例如包含 `${}` 表达式或变量,Mintlify 会移除整个代码块。

<div id="custom-javascript">
## 自定义 JavaScript
</div>
Expand Down
Loading