Skip to content

SVG traducido y coubicado (sistema de documentación) ​

Utilice para sitios de sistemas de documentación donde las ilustraciones SVG traducidas deben aparecer junto con la documentación traducida en el directorio de contenido de cada región — la misma ubicación que las capturas de pantalla colocadas. El preset de Docusaurus es el ejemplo principal.

Configuración ​

json
"features": {
  "translateSVG": true
},
"svg": {
  "sourcePath": [
    "documentation/static/assets/diagram.svg"
  ],
  "outputDir": "documentation/i18n",
  "style": "nested",
  "pathTemplate": "{outputDir}/{locale}/docusaurus-plugin-content-docs/current/assets/{basename}",
  "forceLowercase": true
}

translate-svg escribe un SVG por región en el mismo directorio current/assets/ que las capturas de pantalla colocadas utilizan para PNG:

documentation/i18n/de/docusaurus-plugin-content-docs/current/assets/diagram.svg
documentation/i18n/fr/docusaurus-plugin-content-docs/current/assets/diagram.svg

Markdown de origen ​

Todos los documentos en todos los idiomas utilizan la misma ruta relativa:

markdown
![Diagram](../assets/diagram.svg)

Para el idioma inglés, el enlace simbólico docs/assets → ../static/assets resuelve esto. Para los idiomas traducidos, se resuelve directamente a current/assets/.

No se necesita ninguna regla regexAdjustments porque los documentos fuente en inglés y los documentos traducidos de salida usan rutas idénticas.

Ubicación del origen SVG ​

Recomendado: almacenar los SVG fuente en documentation/static/assets/ junto con los PNG en inglés (en-GB). Esto mantiene todos los recursos de documentación en un solo lugar, y el mismo enlace simbólico docs/assets cubre ambos. Las entradas svg.sourcePath apuntan entonces a documentation/static/assets/name.svg.

Marcadores de posición pathTemplate ​

Marcador de posiciónValor
{outputDir}Ruta absoluta resuelta de svg.outputDir
{locale}Código de configuración regional de destino
{LOCALE}Código de configuración regional en mayúsculas
{relPath}Ruta relativa desde la raíz de sourcePath hasta el SVG fuente
{stem}Nombre de archivo sin extensión
{basename}Nombre de archivo con extensión
{extension}Extensión incluyendo el punto
{relativeToSourceRoot}Ruta relativa desde la raíz sourcePath más cercana

Referencia completa en la tabla de configuración de svg.

Ejemplo de implementación ​

duplistatus — bloque svg anidado con pathTemplate en ai-i18n-tools.config.json; SVG de origen en documentation/static/assets/ (por ejemplo, duplistatus_toolbar.svg); translate-svg escribe archivos por idioma en documentation/i18n/<locale>/…/current/assets/ junto a los PNG colocados; la documentación los incrusta a través de rutas ../assets/ (por ejemplo, overview.md) sin necesidad de un puente regexAdjustments.


Publicado bajo la licencia MIT.