Skip to content

ロケールごとのフォルダー (URL書き換え)

docsOutput.style = "flat" を使用する README/USER-GUIDE、および共有の静的 URL ツリーからスクリーンショットを提供するドキュメントシステムサイト(docsOutput.style = "doc-system" またはエイリアス "docusaurus" / "astro-starlight")、ならびに "vitepress" / その他のドキュメントシステムプリセット向けに使用します。VitePress のリンク書き換えの詳細については、Link rewriting — VitePress を参照してください。

ディレクトリ構成

ロケールごとのスクリーンショットディレクトリツリーの例
images/screenshots/
├── en-GB/
│   ├── translate.png
│   └── settings.png
├── de/
│   ├── translate.png
│   └── settings.png
└── fr/
    ├── translate.png
    └── settings.png

ソースのMarkdownはソースロケールのディレクトリを参照します。

markdown
![Translate tab](images/screenshots/en-GB/translate.png)

スクリーンショットスクリプトの契約

take-screenshotsスクリプトは、ソースロケールだけでなく、すべてのロケールに対してファイルを書き込む必要があります。translate-docsコマンドはパスを書き換えますが、ファイルは作成しません。一般的なヘルパーは次のとおりです。

js
function getScreenshotDir(locale) {
  return `images/screenshots/${locale}`;
}

examples/nextjs-app のスクリーンショットスクリプト にあるシンプルな bash の例、または duplistatus プロジェクトの take-screenshots.ts にあるより複雑な例(Transrewrt でも本番環境で使用されています)を参照してください。

注意: 以下の4つのサブセクションは、同じ regexAdjustments ロケールセグメントの置換(screenshots/[^/]+/screenshots/${translatedLocale}/)を共有します。出力レイアウトと、フラットリンクリライターが最初に実行されるかどうかのみが異なります — 該当する docsOutput.style に一致するサブセクションにジャンプしてください。

注意: regexAdjustments は、フェンスされたコードブロックを含む翻訳済みの完全なマークダウン本文に対して実行されます。ドキュメントページに一致するパスを含む設定例(例: screenshots/en-GB/)が埋め込まれている場合、そのスニペットも翻訳出力で書き換えられます。再利用可能な例では、汎用の screenshots/[^/]+/ 形式を優先してください。

設定 - docsOutput.style = "flat"

docsOutput.style = "flat"の場合、フラットリンクリライターが最初に実行され、Markdown以外のURLにディプスプレフィックスが付加されます。リポジトリルートにあるREADME.mdoutputDir: "translated-docs/"の場合、../が追加されます。

images/screenshots/en-GB/translate.png  →  ../images/screenshots/en-GB/translate.png

その後、regexAdjustmentsルールがすでにプレフィックスが付加されたURL内のロケールセグメントを置き換えます。

フラットレイアウト用のregexAdjustmentsの例
json
"docsOutput": {
  "style": "flat",
  "postProcessing": {
    "regexAdjustments": [
      {
        "description": "Per-locale screenshot folders",
        "search": "images/screenshots/[^/]+/",
        "replace": "images/screenshots/${translatedLocale}/"
      }
    ]
  }
}

結果: ../images/screenshots/de/translate.pngtranslated-docs/README.de.mdからリポジトリルートへの正しい相対パス。

postProcessingステップは、フラットリンク書き換えの後に実行されます。すでにプレフィックスが付いているURL内のどこかにロケールセグメントと一致するsearch正規表現を記述します。正規表現に../プレフィックスを含める必要はありません。

実装例(本番環境): TransrewrtREADME.md のスクリーンショット URL (images/screenshots/en-GB/…)、ai-i18n-tools.config.json のロケール書き換え、duplistatus の take-screenshots.ts に基づくキャプチャスクリプト(上記の スクリーンショットスクリプトコントラクト を参照)。

実装例(デモ設定):examples/nextjs-appai-i18n-tools.config.json の2番目の docs[] ブロック(images/screenshots/[^/]+/${translatedLocale})。ヘルパースクリプト screenshot-locales.sh

設定 - docsOutput.style = "doc-system"

共有の静的URLプレフィックスを介してスクリーンショットを参照するすべてのドキュメントシステムサイトで、ロケールごとの同じフォルダアプローチを使用します。フラットリンク書き換えは実行されません。postProcessingは元のマークダウンURLのロケールセグメントを書き換えます。

ドキュメントシステムレイアウト用のregexAdjustmentsの例
json
"docsOutput": {
  "style": "doc-system",
  "docsRoot": "docs",
  "localeSubpath": "your-generator/locale/content/path",
  "postProcessing": {
    "regexAdjustments": [
      {
        "description": "Per-locale screenshot folders in static assets",
        "search": "screenshots/[^/]+/",
        "replace": "screenshots/${translatedLocale}/"
      }
    ]
  }
}

localeSubpath を、ジェネレーターの {locale}/ と翻訳済みファイルの間のレイアウトに合わせて設定するか、デフォルトが適している場合は "doc-system" の代わりにプリセットエイリアス("docusaurus""astro-starlight")を使用する。ソースMarkdownでは通常、URL内にソースロケールが埋め込まれている:

markdown
![Screenshot](/img/screenshots/en-GB/screenshot.png)

すべてのターゲットロケールに対して同じパスに一致するPNGファイルを配置する(例: static/img/screenshots/de/screenshot.png)。デフォルトのsourceLocaleが変更された場合でもルールが有効であるように、screenshots/en-GB/ をハードコードするより screenshots/[^/]+/ を使用することを推奨する。

プリセット - docsOutput.style = "docusaurus"

"doc-system" と同じで、デフォルトの localeSubpath = "docusaurus-plugin-content-docs/current" を使用。フラットリンクリライターは実行されず、postProcessing は元のMarkdown URLを認識する。英語ページでは通常、ソースロケール付きの絶対パスを使用する:

markdown
![Screenshot](/img/screenshots/en-GB/screenshot.png)
Docusaurusプリセット用のregexAdjustmentsの例
json
"docsOutput": {
  "style": "docusaurus",
  "postProcessing": {
    "regexAdjustments": [
      {
        "description": "Per-locale screenshot folders in docs-site static assets",
        "search": "screenshots/[^/]+/",
        "replace": "screenshots/${translatedLocale}/"
      }
    ]
  }
}

docs-site/static/img/screenshots/<locale>/screenshot.png に一致するPNGファイルを配置する。ソースロケールに依存しない設定の場合は、screenshots/en-GB/ よりも screenshots/[^/]+/ を使用することを推奨する。

実装例: examples/docusaurus-docs/docs/feature-showcase.md (/img/screenshots/en-GB/screenshot.png) および ai-i18n-tools.config.json

プリセット - docsOutput.style = "astro-starlight"

"doc-system"localeSubpath: ""と同じです。翻訳されたページは{outputDir}/{locale}/の直下にあります。上記の一般的なドキュメントシステム設定と同じロケールごとのフォルダアプローチです。ソースマークダウンは/img/screenshots/en-GB/screenshot.pngを使用します。

Astro Starlightプリセット用のregexAdjustmentsの例
json
"docsOutput": {
  "style": "astro-starlight",
  "postProcessing": {
    "regexAdjustments": [
      {
        "description": "Per-locale screenshot folders in public assets",
        "search": "screenshots/[^/]+/",
        "replace": "screenshots/${translatedLocale}/"
      }
    ]
  }
}

public/img/screenshots/<locale>/screenshot.png で PNG を公開します。${translatedLocale} プレースホルダーは、設定のロケール文字列(例: pt-BR)を使用します。astro-starlight プリセットはデフォルトでロケールの 出力パス を小文字にします(pt-br/)が、public/img/screenshots/ 配下の静的アセットフォルダーはマークダウン URL に書き込まれたロケールセグメントと一致する必要があります — スクリーンショットディレクトリは、必ずしも Astro ルートの大文字小文字ではなく、${translatedLocale} に合わせて保持してください。

実装例:examples/astro-docsfeature-showcase.mdx および ai-i18n-tools.config.json (screenshots/[^/]+/)。

MITライセンスの下で公開されています。