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 fuente

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.