diff --git a/create/reusable-snippets.mdx b/create/reusable-snippets.mdx index 42422d90b..fe7d35847 100644 --- a/create/reusable-snippets.mdx +++ b/create/reusable-snippets.mdx @@ -100,7 +100,7 @@ Reference variables from a snippet in a page. ### Import snippets with variables -Use variables to pass data to a snippet when you import it. +Use variables to pass data to a snippet when you import it. Variables work in both prose and code blocks inside the snippet. 1. Add variables to your snippet and pass in properties when you import it. In this example, the variable is `{word}`. @@ -121,6 +121,32 @@ Use variables to pass data to a snippet when you import it. ``` +#### Use variables in code blocks + +Snippet variables are also substituted inside fenced code blocks, which is useful for documenting commands or configuration that change based on the importing page. + +1. Add a code block to your snippet that references a variable with `{variableName}`. You can use multiple variables in the same code block. + + ````mdx shared/install-command.mdx + Install the package with the following command: + + ```bash + {packageManager} install {packageName} + ``` + ```` + +2. Import the snippet and pass the values as props. The passed values replace the placeholders inside the code block. + + ```mdx destination-file.mdx + import InstallCommand from "/shared/install-command.mdx"; + + + ``` + + + Only string props are substituted inside code blocks. Placeholders that don't match a prop name are left unchanged, so existing code samples that use `{}` for other purposes continue to render as written. + + ### Import React components 1. Create a snippet with a JSX component. See [React components](/customize/react-components) for more information. diff --git a/es/create/reusable-snippets.mdx b/es/create/reusable-snippets.mdx index d65c2c1dc..8a466a3a4 100644 --- a/es/create/reusable-snippets.mdx +++ b/es/create/reusable-snippets.mdx @@ -131,6 +131,32 @@ Usa variables para pasar datos a un fragmento cuando lo importes. ``` +#### Usar variables en bloques de código + +Las variables de los fragmentos también se sustituyen dentro de los bloques de código delimitados, lo que resulta útil para documentar comandos o configuraciones que cambian según la página que los importa. + +1. Añade un bloque de código a tu fragmento que haga referencia a una variable con `{nombreDeVariable}`. Puedes usar varias variables en el mismo bloque de código. + + ````mdx shared/install-command.mdx + Instala el paquete con el siguiente comando: + + ```bash + {packageManager} install {packageName} + ``` + ```` + +2. Importa el fragmento y pasa los valores como props. Los valores pasados reemplazan los marcadores de posición dentro del bloque de código. + + ```mdx destination-file.mdx + import InstallCommand from "/shared/install-command.mdx"; + + + ``` + + + Solo se sustituyen las props de tipo string dentro de los bloques de código. Los marcadores de posición que no coinciden con el nombre de una prop permanecen sin cambios, por lo que los ejemplos de código que usan `{}` para otros fines siguen mostrándose tal cual. + +
### Importar componentes de React
diff --git a/fr/create/reusable-snippets.mdx b/fr/create/reusable-snippets.mdx index 815127b76..61d46f29a 100644 --- a/fr/create/reusable-snippets.mdx +++ b/fr/create/reusable-snippets.mdx @@ -133,6 +133,32 @@ Utilisez des variables pour transmettre des données à un extrait lorsque vous ``` +#### Utiliser des variables dans les blocs de code + +Les variables d'un extrait sont également substituées à l'intérieur des blocs de code, ce qui est utile pour documenter des commandes ou une configuration qui changent selon la page qui importe l'extrait. + +1. Ajoutez à votre extrait un bloc de code qui référence une variable avec `{nomDeVariable}`. Vous pouvez utiliser plusieurs variables dans le même bloc de code. + + ````mdx shared/install-command.mdx + Installez le paquet avec la commande suivante : + + ```bash + {packageManager} install {packageName} + ``` + ```` + +2. Importez l'extrait et transmettez les valeurs en tant que props. Les valeurs transmises remplacent les espaces réservés à l'intérieur du bloc de code. + + ```mdx destination-file.mdx + import InstallCommand from "/shared/install-command.mdx"; + + + ``` + + + Seules les props de type chaîne sont substituées à l'intérieur des blocs de code. Les espaces réservés qui ne correspondent pas au nom d'une prop restent inchangés, donc les exemples de code existants qui utilisent `{}` à d'autres fins continuent de s'afficher tels quels. + +
### Importer des composants React
diff --git a/zh/create/reusable-snippets.mdx b/zh/create/reusable-snippets.mdx index d512fca3b..baba1aecd 100644 --- a/zh/create/reusable-snippets.mdx +++ b/zh/create/reusable-snippets.mdx @@ -133,6 +133,32 @@ keywords: ["content snippets", "reusable content", "variables"] ``` +#### 在代码块中使用变量 + +代码片段的变量也会在围栏式代码块内部被替换,这对于记录会随导入页面变化的命令或配置非常有用。 + +1. 在你的代码片段中添加一个代码块,并使用 `{variableName}` 引用变量。你可以在同一个代码块中使用多个变量。 + + ````mdx shared/install-command.mdx + 使用以下命令安装该包: + + ```bash + {packageManager} install {packageName} + ``` + ```` + +2. 导入代码片段并将值作为 props 传入。传入的值会替换代码块中的占位符。 + + ```mdx destination-file.mdx + import InstallCommand from "/shared/install-command.mdx"; + + + ``` + + + 只有字符串类型的 props 会在代码块中被替换。与 prop 名称不匹配的占位符将保持不变,因此现有使用 `{}` 用于其他用途的代码示例仍会按原样呈现。 + +
### 导入 React 组件