diff --git a/exampleSite/content/_index.ja.md b/exampleSite/content/_index.ja.md
new file mode 100644
index 00000000..13746aea
--- /dev/null
+++ b/exampleSite/content/_index.ja.md
@@ -0,0 +1,76 @@
+---
+title: Hextra テーマ
+layout: hextra-home
+---
+
+{{< hextra/hero-badge >}}
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
+  <span>無料、オープンソース</span>
+  {{< icon name="arrow-circle-right" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+
+<div class="hx-mt-6 hx-mb-6">
+{{< hextra/hero-headline >}}
+  MarkdownとHugoで&nbsp;<br class="sm:hx-block hx-hidden" />モダンなウェブサイトを構築
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="hx-mb-12">
+{{< hextra/hero-subtitle >}}
+  美しい静的ウェブサイトを作るための&nbsp;<br class="sm:hx-block hx-hidden" />高速でバッテリー同梱型のHugoテーマ
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="hx-mb-6">
+{{< hextra/hero-button text="始める" link="docs" >}}
+</div>
+
+<div class="hx-mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="高速かつ多機能"
+    subtitle="シンプルで使いやすく、それでいて強力で豊富な機能を備えています。"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+    image="/images/hextra-doc.webp"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="MarkdownだけでOK"
+    subtitle="Markdownだけで作成可能。ショートコードコンポーネントで充実させることもできます。"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
+    image="/images/hextra-markdown.webp"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="全文検索"
+    subtitle="FlexSearchによる全文検索が内蔵されており、追加の設定は不要です。"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+    image="/images/hextra-search.webp"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="羽のように軽量"
+    subtitle="Hextraを使用するために依存関係やNode.jsは必要ありません。Hugoによって動力を得ており、単一のバイナリで数秒でサイトを構築できます。"
+  >}}
+  {{< hextra/feature-card
+    title="レスポンシブ対応とダークモード"
+    subtitle="さまざまな画面サイズで美しく見えます。内蔵のダークモードサポートにより、ユーザーのシステム設定に基づいて自動切り替えが可能です。"
+  >}}
+  {{< hextra/feature-card
+    title="無料で構築とホスティング"
+    subtitle="GitHub Actionsを使って構築し、GitHub Pagesで無料でホスティングできます。また、他の静的ホスティングサービスでもホスティング可能です。"
+  >}}
+  {{< hextra/feature-card
+    title="簡単な多言語対応"
+    subtitle="Markdownファイルにロケールサフィックスを追加するだけで多言語ページを作成できます。i18nサポートの追加も直感的です。"
+  >}}
+  {{< hextra/feature-card
+    title="さらに多くの機能"
+    icon="sparkles"
+    subtitle="構文ハイライト / 目次 / SEO / RSS / LaTeX / Mermaid / カスタマイズ可能 / など多数..."
+  >}}
+{{< /hextra/feature-grid >}}
diff --git a/exampleSite/content/docs/_index.ja.md b/exampleSite/content/docs/_index.ja.md
new file mode 100644
index 00000000..ca9b90ea
--- /dev/null
+++ b/exampleSite/content/docs/_index.ja.md
@@ -0,0 +1,40 @@
+---
+linkTitle: "ドキュメンテーション"
+title: イントロダクション
+---
+
+👋 こんにちは！Hextraのドキュメンテーションへようこそ！
+
+<!--more-->
+
+## Hextraとは？
+
+Hextraは、[Tailwind CSS][tailwind-css]を使用して構築された、モダンで高速かつ機能豊富な[Hugo][hugo]テーマです。ドキュメンテーション、ブログ、ウェブサイトのための美しいウェブサイトを構築するために設計されており、さまざまな要件に対応するための機能と柔軟性を提供します。
+
+## 特徴
+
+- **美しいデザイン** - Nextraにインスパイアされ、Tailwind CSSを活用してモダンなデザインを提供し、サイトを際立たせます。
+- **レスポンシブレイアウトとダークモード** - モバイル、タブレット、デスクトップなど、すべてのデバイスで美しく表示されます。また、ダークモードもサポートされており、さまざまな照明条件に対応します。
+- **高速で軽量** - 単一のバイナリファイルに収められた超高速の静的サイトジェネレータであるHugoを採用し、Hextraはそのフットプリントを最小限に抑えています。JavaScriptやNode.jsは必要ありません。
+- **全文検索** - FlexSearchを利用したオフライン全文検索が組み込まれており、追加の設定は不要です。
+- **機能豊富** - Markdown、シンタックスハイライト、LaTeX数式、ダイアグラム、ショートコード要素など、コンテンツを強化するための機能を提供します。目次、パンくずリスト、ページネーション、サイドバーナビゲーションなどが自動生成されます。
+- **多言語対応とSEO対応** - Hugoの多言語モードを使用して、多言語サイトを簡単に作成できます。SEOタグ、Open Graph、Twitter Cardsのサポートも標準で提供されます。
+
+## 質問やフィードバックは？
+
+{{< callout emoji="❓" >}}
+  Hextraはまだ活発に開発中です。
+  質問やフィードバックがありますか？[issueを開いて](https://github.com/imfing/hextra/issues)お気軽にお知らせください！
+{{< /callout >}}
+
+## 次に
+
+以下のセクションに進んで、すぐに始めましょう：
+
+{{< cards >}}
+  {{< card link="getting-started" title="はじめに" icon="document-text" subtitle="Hextraを使用してウェブサイトを作成する方法を学ぶ" >}}
+{{< /cards >}}
+
+[hugo]: https://gohugo.io/
+[flex-search]: https://github.com/nextapps-de/flexsearch
+[tailwind-css]: https://tailwindcss.com/
\ No newline at end of file
diff --git a/exampleSite/content/docs/advanced/_index.ja.md b/exampleSite/content/docs/advanced/_index.ja.md
new file mode 100644
index 00000000..af6971df
--- /dev/null
+++ b/exampleSite/content/docs/advanced/_index.ja.md
@@ -0,0 +1,16 @@
+---
+linkTitle: 上級者向け
+title: 上級者向けトピック
+prev: /docs/guide/shortcodes/tabs
+next: /docs/advanced/multi-language
+---
+
+このセクションでは、テーマの上級者向けトピックをカバーします。
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="multi-language" title="多言語対応" icon="translate" >}}
+  {{< card link="customization" title="カスタマイズ" icon="pencil" >}}
+  {{< card link="comments" title="コメントシステム" icon="chat-alt" >}}
+{{< /cards >}}
\ No newline at end of file
diff --git a/exampleSite/content/docs/advanced/comments.ja.md b/exampleSite/content/docs/advanced/comments.ja.md
new file mode 100644
index 00000000..23f410b0
--- /dev/null
+++ b/exampleSite/content/docs/advanced/comments.ja.md
@@ -0,0 +1,39 @@
+---
+title: コメントシステム
+linkTitle: コメント
+---
+
+Hextraは、サイトにコメントシステムを追加することをサポートしています。
+現在、[giscus](https://giscus.app/)がサポートされています。
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/)は、[GitHub Discussions](https://docs.github.com/ja/discussions)を利用したコメントシステムです。無料でオープンソースです。
+
+giscusを有効にするには、サイトの設定ファイルに以下を追加する必要があります：
+
+```yaml {filename="hugo.yaml"}
+params:
+  comments:
+    enable: false
+    type: giscus
+
+    giscus:
+      repo: <リポジトリ>
+      repoId: <リポジトリID>
+      category: <カテゴリ>
+      categoryId: <カテゴリID>
+```
+
+giscusの設定は、[giscus.app](https://giscus.app/)のウェブサイトから構築できます。詳細もそこで確認できます。
+
+特定のページでコメントを有効または無効にするには、ページのフロントマターに以下を追加します：
+
+```yaml {filename="content/docs/about.md"}
+---
+title: について
+comments: true
+---
+```
\ No newline at end of file
diff --git a/exampleSite/content/docs/advanced/customization.ja.md b/exampleSite/content/docs/advanced/customization.ja.md
new file mode 100644
index 00000000..610a1552
--- /dev/null
+++ b/exampleSite/content/docs/advanced/customization.ja.md
@@ -0,0 +1,211 @@
+---
+title: Hextraのカスタマイズ
+linkTitle: カスタマイズ
+---
+
+Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトのカスタマイズオプションを提供し、テーマを設定できます。
+このページでは、利用可能なオプションと、テーマをさらにカスタマイズする方法について説明します。
+
+<!--more-->
+
+## カスタムCSS
+
+カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成する必要があります。Hextraはこのファイルを自動的に読み込みます。
+
+### フォントファミリー
+
+コンテンツのフォントファミリーは、以下のようにカスタマイズできます：
+
+```css {filename="assets/css/custom.css"}
+.content {
+  font-family: "Times New Roman", Times, serif;
+}
+```
+
+### インラインコード要素
+
+`other text`と混在するテキストの色は、以下のようにカスタマイズできます：
+
+```css {filename="assets/css/custom.css"}
+.content code:not(.code-block code) {
+  color: #c97c2e;
+}
+```
+
+### プライマリカラー
+
+テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます：
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --primary-hue: 100deg;
+  --primary-saturation: 90%;
+  --primary-lightness: 50%;
+}
+```
+
+### テーマのさらなるカスタマイズ
+
+テーマは、公開されているCSSクラスを介してデフォルトのスタイルをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例：
+
+```css {filename="assets/css/custom.css"}
+.hextra-footer {
+  /* フッター要素に適用されるスタイル */
+}
+
+.hextra-footer:is(html[class~="dark"] *) {
+  /* ダークモードでのフッター要素に適用されるスタイル */
+}
+```
+
+以下のクラスを使用して、テーマのさまざまな部分をカスタマイズできます。
+
+#### 一般
+
+- `hextra-scrollbar` - スクロールバー要素
+- `content` - ページコンテンツコンテナ
+
+#### ショートコード
+
+##### バッジ
+
+- `hextra-badge` - バッジ要素
+
+##### カード
+
+- `hextra-card` - カード要素
+- `hextra-card-image` - カード画像要素
+- `hextra-card-icon` - カードアイコン要素
+- `hextra-card-subtitle` - カードサブタイトル要素
+
+##### カードグリッド
+
+- `hextra-cards` - カードグリッドコンテナ
+
+##### Jupyter Notebook
+
+- `hextra-jupyter-code-cell` - Jupyterコードセルコンテナ
+- `hextra-jupyter-code-cell-outputs-container` - Jupyterコードセル出力コンテナ
+- `hextra-jupyter-code-cell-outputs` - Jupyterコードセル出力div要素
+
+##### PDF
+
+- `hextra-pdf` - PDFコンテナ要素
+
+##### ステップ
+
+- `steps` - ステップコンテナ
+
+##### タブ
+
+- `hextra-tabs-panel` - タブパネルコンテナ
+- `hextra-tabs-toggle` - タブトグルボタン
+
+##### ファイルツリー
+
+- `hextra-filetree` - ファイルツリーコンテナ
+
+##### フォルダ
+
+- `hextra-filetree-folder` - ファイルツリーフォルダコンテナ
+
+#### ナビゲーションバー
+
+- `nav-container` - ナビゲーションバーコンテナ
+- `nav-container-blur` - ナビゲーションバーコンテナのぼかし要素
+- `hamburger-menu` - ハンバーガーメニューボタン
+
+#### フッター
+
+- `hextra-footer` - フッター要素
+- `hextra-custom-footer` - カスタムフッターセクションコンテナ
+
+#### 検索
+
+- `search-wrapper` - 検索ラッパーコンテナ
+- `search-input` - 検索入力要素
+- `search-results` - 検索結果リストコンテナ
+
+#### 目次
+
+- `hextra-toc` - 目次コンテナ
+
+#### サイドバー
+
+- `mobile-menu-overlay` - モバイルメニューのオーバーレイ要素
+- `sidebar-container` - サイドバーコンテナ
+- `sidebar-active-item` - サイドバーのアクティブアイテム
+
+#### 言語スイッチャー
+
+- `language-switcher` - 言語スイッチャーボタン
+- `language-options` - 言語オプションコンテナ
+
+#### テーマトグル
+
+- `theme-toggle` - テーマトグルボタン
+
+#### コードコピーボタン
+
+- `hextra-code-copy-btn-container` - コードコピーボタンコンテナ
+- `hextra-code-copy-btn` - コードコピーボタン
+
+#### コードブロック
+
+- `hextra-code-block` - コードブロックコンテナ
+
+#### フィーチャーカード
+
+- `hextra-feature-card` - フィーチャーカードリンク要素
+
+#### フィーチャーグリッド
+
+- `hextra-feature-grid` - フィーチャーグリッドコンテナ
+
+#### パンくずリスト
+
+パンくずリスト用の特定のクラスはありません。
+
+### シンタックスハイライト
+
+利用可能なシンタックスハイライトテーマのリストは、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます：
+
+```shell
+hugo gen chromastyles --style=github
+```
+
+デフォルトのシンタックスハイライトテーマをオーバーライドするには、生成されたスタイルをカスタムCSSファイルに追加します。
+
+## カスタムスクリプト
+
+すべてのページのheadの最後にカスタムスクリプトを追加するには、以下のファイルを追加します：
+
+```
+layouts/partials/custom/head-end.html
+```
+
+## フッターのカスタムセクション
+
+フッターに追加のセクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。
+
+```html {filename="layouts/partials/custom/footer.html"}
+<!-- ここにフッター要素を追加 -->
+```
+
+追加されたセクションは、フッターの著作権セクションの前に追加されます。
+[HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して、独自のコンテンツを追加できます。
+
+フッターセクションで利用可能なHugo変数は、`.switchesVisible`と`.copyrightVisible`です。
+
+## カスタムレイアウト
+
+テーマのレイアウトは、サイトの`layouts`ディレクトリ内に同じ名前のファイルを作成することでオーバーライドできます。
+例えば、ドキュメント用の`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
+
+詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。
+
+## さらなるカスタマイズ
+
+探しているものが見つかりませんでしたか？[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマに貢献してください！
+
+[hugo-template-docs]: https://gohugo.io/templates/
\ No newline at end of file
diff --git a/exampleSite/content/docs/advanced/multi-language.ja.md b/exampleSite/content/docs/advanced/multi-language.ja.md
new file mode 100644
index 00000000..bb8a2d51
--- /dev/null
+++ b/exampleSite/content/docs/advanced/multi-language.ja.md
@@ -0,0 +1,83 @@
+---
+title: "多言語対応"
+weight: 1
+prev: /docs/advanced
+---
+
+Hextraは、Hugoの[多言語モード](https://gohugo.io/content-management/multilingual/)を使用して、複数の言語でサイトを作成することをサポートしています。
+
+<!--more-->
+
+## 多言語対応を有効にする
+
+サイトを多言語対応にするためには、Hugoにサポートする言語を伝える必要があります。サイトの設定ファイルに以下を追加します：
+
+```yaml {filename="hugo.yaml"}
+defaultContentLanguage: en
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fr:
+    languageName: Français
+    weight: 2
+  ja:
+    languageName: 日本語
+    weight: 3
+```
+
+## ファイル名による翻訳管理
+
+Hugoは、ファイル名による翻訳管理をサポートしています。例えば、英語のファイル `content/docs/_index.md` がある場合、フランス語の翻訳用に `content/docs/_index.fr.md` というファイルを作成できます。
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="_index.fr.md" >}}
+      {{< filetree/file name="_index.ja.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+注: Hugoは[コンテンツディレクトリによる翻訳](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)もサポートしています。
+
+## メニュー項目の翻訳
+
+ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります：
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - identifier: documentation
+      name: Documentation
+      pageRef: /docs
+      weight: 1
+    - identifier: blog
+      name: Blog
+      pageRef: /blog
+      weight: 2
+```
+
+そして、対応するi18nファイルで翻訳します：
+
+```yaml {filename="i18n/fr.yaml"}
+documentation: Documentation
+blog: Blog
+```
+
+## 文字列の翻訳
+
+他の場所の文字列を翻訳するには、対応するi18nファイルに翻訳を追加する必要があります：
+
+```yaml {filename="i18n/fr.yaml"}
+readMore: Lire la suite
+```
+
+テーマで使用されている文字列のリストは、`i18n/en.yaml` ファイルにあります。
+
+## さらに詳しく
+
+- [Hugo 多言語モード](https://gohugo.io/content-management/multilingual/)
+- [Hugo 多言語 Part 1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
+- [Hugo 多言語 Part 2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
\ No newline at end of file
diff --git a/exampleSite/content/docs/getting-started.ja.md b/exampleSite/content/docs/getting-started.ja.md
new file mode 100644
index 00000000..4b218c9a
--- /dev/null
+++ b/exampleSite/content/docs/getting-started.ja.md
@@ -0,0 +1,192 @@
+---
+title: はじめに
+weight: 1
+next: /docs/guide
+prev: /docs
+---
+
+## テンプレートからクイックスタート
+
+{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
+
+上記のテンプレートリポジトリを使用して、すぐに始めることができます。
+
+<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
+
+[GitHub Actionsワークフロー](https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)を提供しており、サイトを自動的にビルドしてGitHub Pagesにデプロイし、無料でホストすることができます。
+その他のオプションについては、[サイトのデプロイ](../guide/deploy-site)を確認してください。
+
+[🌐 デモ ↗](https://imfing.github.io/hextra-starter-template/)
+
+## 新しいプロジェクトとして始める
+
+HugoプロジェクトにHextraテーマを追加する主な方法は2つあります：
+
+1. **Hugoモジュール（推奨）**: 最も簡単で推奨される方法です。[Hugoモジュール](https://gohugo.io/hugo-modules/)を使用すると、テーマを直接オンラインソースから取り込むことができます。テーマは自動的にダウンロードされ、Hugoによって管理されます。
+
+2. **Gitサブモジュール**: または、Hextraを[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)として追加します。テーマはGitによってダウンロードされ、プロジェクトの`themes`フォルダに保存されます。
+
+### HugoモジュールとしてHextraをセットアップ
+
+#### 前提条件
+
+開始する前に、以下のソフトウェアがインストールされている必要があります：
+
+- [Hugo（拡張版）](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+- [Go](https://go.dev/)
+
+#### 手順
+
+{{% steps %}}
+
+### 新しいHugoサイトを初期化
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### モジュール経由でHextraテーマを設定
+
+```shell
+# Hugoモジュールを初期化
+cd my-site
+hugo mod init github.com/username/my-site
+
+# Hextraテーマを追加
+hugo mod get github.com/imfing/hextra
+```
+
+`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します：
+
+```yaml
+module:
+  imports:
+    - path: github.com/imfing/hextra
+```
+
+### 最初のコンテンツページを作成
+
+ホームページとドキュメントページの新しいコンテンツページを作成します：
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### ローカルでサイトをプレビュー
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+これで、新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。
+
+{{% /steps %}}
+
+
+{{% details title="テーマを更新するには？" %}}
+
+プロジェクト内のすべてのHugoモジュールを最新バージョンに更新するには、次のコマンドを実行します：
+
+```shell
+hugo mod get -u
+```
+
+Hextraを[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します：
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+詳細については、[Hugoモジュール](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)を参照してください。
+
+{{% /details %}}
+
+### GitサブモジュールとしてHextraをセットアップ
+
+#### 前提条件
+
+開始する前に、以下のソフトウェアがインストールされている必要があります：
+
+- [Hugo（拡張版）](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### 手順
+
+{{% steps %}}
+
+### 新しいHugoサイトを初期化
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### HextraテーマをGitサブモジュールとして追加
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します：
+
+```yaml
+theme: hextra
+```
+
+### 最初のコンテンツページを作成
+
+ホームページとドキュメントページの新しいコンテンツページを作成します：
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### ローカルでサイトをプレビュー
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。
+
+{{% /steps %}}
+
+
+[CI/CD](https://ja.wikipedia.org/wiki/CI/CD)を使用してHugoウェブサイトをデプロイする場合、`hugo`コマンドを実行する前に以下のコマンドを実行することが重要です。
+
+```shell
+git submodule update --init
+```
+
+このコマンドを実行しないと、テーマフォルダにHextraテーマファイルが取り込まれず、ビルドが失敗します。
+
+
+{{% details title="テーマを更新するには？" %}}
+
+リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します：
+
+```shell
+git submodule update --remote
+```
+
+Hextraを最新のコミットに更新するには、次のコマンドを実行します：
+
+```shell
+git submodule update --remote themes/hextra
+```
+
+詳細については、[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)を参照してください。
+
+{{% /details %}}
+
+## 次へ
+
+以下のセクションを探索して、さらにコンテンツを追加し始めましょう：
+
+{{< cards >}}
+  {{< card link="../guide/organize-files" title="ファイルの整理" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="設定" icon="adjustments" >}}
+  {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
+{{< /cards >}}
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/_index.ja.md b/exampleSite/content/docs/guide/_index.ja.md
new file mode 100644
index 00000000..6e9d448e
--- /dev/null
+++ b/exampleSite/content/docs/guide/_index.ja.md
@@ -0,0 +1,23 @@
+---
+title: ガイド
+weight: 2
+prev: /docs/getting-started
+next: /docs/guide/organize-files
+sidebar:
+  open: true
+---
+
+Hextraの使い方を学ぶために、以下のセクションを探索してください:
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="organize-files" title="ファイルの整理" icon="document-duplicate" >}}
+  {{< card link="configuration" title="設定" icon="adjustments" >}}
+  {{< card link="markdown" title="Markdown" icon="markdown" >}}
+  {{< card link="syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
+  {{< card link="latex" title="LaTeX" icon="variable" >}}
+  {{< card link="diagrams" title="ダイアグラム" icon="chart-square-bar" >}}
+  {{< card link="shortcodes" title="ショートコード" icon="template" >}}
+  {{< card link="deploy-site" title="サイトのデプロイ" icon="server" >}}
+{{< /cards >}}
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/configuration.ja.md b/exampleSite/content/docs/guide/configuration.ja.md
new file mode 100644
index 00000000..739b85a9
--- /dev/null
+++ b/exampleSite/content/docs/guide/configuration.ja.md
@@ -0,0 +1,288 @@
+---
+title: 設定
+weight: 2
+---
+
+Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取ります。
+この設定ファイルでは、サイトのすべての側面を設定できます。
+利用可能な設定とベストプラクティスの包括的な理解を得るために、GitHub上のこのサイトの設定ファイル[`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml)をチェックしてください。
+
+<!--more-->
+
+## ナビゲーション
+
+### メニュー
+
+右上のメニューは、設定ファイルの`menu.main`セクションで定義されます：
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - name: ドキュメント
+      pageRef: /docs
+      weight: 1
+    - name: ブログ
+      pageRef: /blog
+      weight: 2
+    - name: について
+      pageRef: /about
+      weight: 3
+    - name: 検索
+      weight: 4
+      params:
+        type: search
+    - name: GitHub
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+```
+
+メニュー項目にはさまざまなタイプがあります：
+
+1. `pageRef`を使用してサイト内のページにリンク
+    ```yaml
+    - name: ドキュメント
+      pageRef: /docs
+    ```
+2. `url`を使用して外部URLにリンク
+    ```yaml
+    - name: GitHub
+      url: "https://github.com"
+    ```
+3. `type: search`を使用して検索バーを表示
+    ```yaml
+    - name: 検索
+      params:
+        type: search
+    ```
+4. アイコン
+    ```yaml
+    - name: GitHub
+      params:
+        icon: github
+    ```
+
+これらのメニュー項目は、`weight`パラメータを設定して並べ替えることができます。
+
+### ロゴとタイトル
+
+デフォルトのロゴを変更するには、`hugo.yaml`を編集し、`static`ディレクトリ下のロゴファイルへのパスを追加します。
+オプションで、ロゴをクリックしたときにユーザーがリダイレクトされるリンクや、ロゴの幅と高さをピクセル単位で設定できます。
+
+```yaml {filename="hugo.yaml"}
+params:
+  navbar:
+    displayTitle: true
+    displayLogo: true
+    logo:
+      path: images/logo.svg
+      dark: images/logo-dark.svg
+      link: /
+      width: 40
+      height: 20
+```
+
+## サイドバー
+
+### メインサイドバー
+
+メインサイドバーは、コンテンツディレクトリの構造から自動的に生成されます。
+詳細については、[ファイルの整理](/docs/guide/organize-files)ページを参照してください。
+
+左サイドバーから単一のページを除外するには、ページのフロントマターで`sidebar.exclude`パラメータを設定します：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 設定
+sidebar:
+  exclude: true
+---
+```
+
+### 追加リンク
+
+サイドバーの追加リンクは、設定ファイルの`menu.sidebar`セクションで定義されます：
+
+```yaml {filename="hugo.yaml"}
+menu:
+  sidebar:
+    - name: その他
+      params:
+        type: separator
+      weight: 1
+    - name: "について"
+      pageRef: "/about"
+      weight: 2
+    - name: "Hugo Docs ↗"
+      url: "https://gohugo.io/documentation/"
+      weight: 3
+```
+
+## 右サイドバー
+
+### 目次
+
+目次は、コンテンツファイルの見出しから自動的に生成されます。ページのフロントマターで`toc: false`を設定することで無効にできます。
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 設定
+toc: false
+---
+```
+
+### ページ編集リンク
+
+ページ編集リンクを設定するには、設定ファイルで`params.editURL.base`パラメータを設定します：
+
+```yaml {filename="hugo.yaml"}
+params:
+  editURL:
+    enable: true
+    base: "https://github.com/your-username/your-repo/edit/main"
+```
+
+提供されたURLをルートディレクトリとして、各ページの編集リンクが自動的に生成されます。
+特定のページの編集リンクを設定したい場合は、ページのフロントマターで`editURL`パラメータを設定します：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 設定
+editURL: "https://example.com/edit/this/page"
+---
+```
+
+## フッター
+
+### 著作権
+
+ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml`という名前のファイルを作成します。
+このファイルに、以下のように新しい著作権テキストを指定します：
+
+```yaml {filename="i18n/en.yaml"}
+copyright: "© 2024 YOUR TEXT HERE"
+```
+
+参考として、GitHubリポジトリに[`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml)ファイルの例があります。また、著作権テキストにMarkdown形式を使用することもできます。
+
+## その他
+
+### ファビコン
+
+サイトの[ファビコン](https://ja.wikipedia.org/wiki/Favicon)をカスタマイズするには、`static`フォルダ下にアイコンファイルを配置して、[テーマのデフォルトのファビコン](https://github.com/imfing/hextra/tree/main/static)を上書きします：
+
+{{< filetree/container >}}
+  {{< filetree/folder name="static" >}}
+    {{< filetree/file name="android-chrome-192x192.png" >}}
+    {{< filetree/file name="android-chrome-512x512.png" >}}
+    {{< filetree/file name="apple-touch-icon.png" >}}
+    {{< filetree/file name="favicon-16x16.png" >}}
+    {{< filetree/file name="favicon-32x32.png" >}}
+    {{< filetree/file name="favicon-dark.svg" >}}
+    {{< filetree/file name="favicon.ico" >}}
+    {{< filetree/file name="favicon.svg" >}}
+    {{< filetree/file name="site.webmanifest" >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+プロジェクトに`favicon.ico`、`favicon.svg`、`favicon-dark.svg`ファイルを含めて、サイトのファビコンが正しく表示されるようにします。
+
+`favicon.ico`は一般的に古いブラウザ用ですが、`favicon.svg`と`favicon-dark.svg`は現代のブラウザでサポートされています。
+[favicon.io](https://favicon.io/)や[favycon](https://github.com/ruisaraiva19/favycon)などのツールを使用して、このようなアイコンを生成できます。
+
+### テーマ設定
+
+`theme`設定を使用して、デフォルトのテーマモードとトグルボタンを設定し、訪問者がライトモードとダークモードを切り替えられるようにします。
+
+```yaml {filename="hugo.yaml"}
+params:
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+```
+
+`theme.default`のオプション：
+
+- `light` - 常にライトモードを使用
+- `dark` - 常にダークモードを使用
+- `system` - オペレーティングシステムの設定と同期（デフォルト）
+
+`theme.displayToggle`パラメータを使用して、テーマを変更するためのトグルボタンを表示できます。
+`true`に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えることができます。
+
+### ページ幅
+
+ページの幅は、設定ファイルの`params.page.width`パラメータでカスタマイズできます：
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    # full (100%), wide (90rem), normal (1280px)
+    width: wide
+```
+
+利用可能なオプションは`full`、`wide`、`normal`です。デフォルトでは、ページ幅は`normal`に設定されています。
+
+同様に、ナビゲーションバーとフッターの幅は、`params.navbar.width`と`params.footer.width`パラメータでカスタマイズできます。
+
+### 検索インデックス
+
+[FlexSearch](https://github.com/nextapps-de/flexsearch)による全文検索はデフォルトで有効です。
+検索インデックスをカスタマイズするには、設定ファイルで`params.search.flexsearch.index`パラメータを設定します：
+
+```yaml {filename="hugo.yaml"}
+params:
+  # 検索
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # ページをインデックスする方法: content | summary | heading | title
+      index: content
+```
+
+`flexsearch.index`のオプション：
+
+- `content` - ページの全内容（デフォルト）
+- `summary` - ページの要約、詳細は[Hugoコンテンツ要約](https://gohugo.io/content-management/summaries/)を参照
+- `heading` - レベル1とレベル2の見出し
+- `title` - ページタイトルのみを含める
+
+検索トークン化をカスタマイズするには、設定ファイルで`params.search.flexsearch.tokenize`パラメータを設定します：
+
+```yaml {filename="hugo.yaml"}
+params:
+    # ...
+    flexsearch:
+      # full | forward | reverse | strict 
+      tokenize: forward
+```
+
+[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)のオプション：
+
+- `strict` - 単語全体をインデックス
+- `forward` - 前方方向に単語を増分的にインデックス
+- `reverse` - 両方向に単語を増分的にインデックス
+- `full` - すべての可能な組み合わせをインデックス
+
+検索インデックスからページを除外するには、ページのフロントマターで`excludeSearch: true`を設定します：
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: 設定
+excludeSearch: true
+---
+```
+
+### Googleアナリティクス
+
+[Googleアナリティクス](https://marketingplatform.google.com/about/analytics/)を有効にするには、`hugo.yaml`で`services.googleAnalytics.ID`フラグを設定します：
+
+```yaml {filename="hugo.yaml"}
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
+```
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/deploy-site.ja.md b/exampleSite/content/docs/guide/deploy-site.ja.md
new file mode 100644
index 00000000..8d5ae586
--- /dev/null
+++ b/exampleSite/content/docs/guide/deploy-site.ja.md
@@ -0,0 +1,164 @@
+---
+title: サイトのデプロイ
+prev: /docs/guide/shortcodes
+next: /docs/advanced
+---
+
+Hugoは静的サイトを生成するため、柔軟なホスティングオプションが可能です。
+このページでは、Hextraサイトをさまざまなプラットフォームにデプロイするためのガイドを提供します。
+
+<!--more-->
+
+
+## GitHub Pages
+
+[GitHub Pages](https://docs.github.com/pages)は、無料でウェブサイトをデプロイおよびホストするための推奨方法です。
+
+[hextra-starter-template](https://github.com/imfing/hextra-starter-template)を使用してサイトをブートストラップした場合、GitHub Pagesへの自動デプロイを支援するGitHub Actionsワークフローがすぐに利用可能です。
+
+{{% details title="GitHub Actionsの設定" closed="true" %}}
+
+以下は、[hextra-starter-template](https://github.com/imfing/hextra-starter-template)からの設定例です：
+
+```yaml {filename=".github/workflows/pages.yaml"}
+# HugoサイトをGitHub Pagesにデプロイするためのサンプルワークフロー
+name: Deploy Hugo site to Pages
+
+on:
+  # デフォルトブランチへのプッシュ時に実行
+  push:
+    branches: ["main"]
+
+  # Actionsタブから手動でこのワークフローを実行可能
+  workflow_dispatch:
+
+# GITHUB_TOKENの権限を設定してGitHub Pagesへのデプロイを許可
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 同時実行を1つに制限し、進行中の実行と最新のキューイングされた実行の間の実行をスキップ。
+# ただし、進行中の実行はキャンセルしないでください。これらの本番デプロイを完了させたいためです。
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# デフォルトはbash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # ビルドジョブ
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.138.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # .GitInfoと.Lastmodのためにすべての履歴を取得
+          submodules: recursive
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.22'
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
+      - name: Setup Hugo
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+      - name: Build with Hugo
+        env:
+          # Hugoモジュールとの最大限の互換性のために
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc --minify \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./public
+
+  # デプロイジョブ
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+```
+
+{{% /details %}}
+
+
+{{< callout >}}
+  リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定します：
+  ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
+{{< /callout >}}
+
+デフォルトでは、上記のGitHub Actionsワークフロー `.github/workflows/pages.yaml` は、サイトが `https://<USERNAME>.github.io/<REPO>/` にデプロイされることを前提としています。
+
+`https://<USERNAME>.github.io/` にデプロイする場合は、`--baseURL` を変更します：
+
+```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
+run: |
+  hugo \
+    --gc --minify \
+    --baseURL "https://${{ github.repository_owner }}.github.io/"
+```
+
+独自のドメインにデプロイする場合は、`--baseURL` の値を適宜変更してください。
+
+
+## Cloudflare Pages
+
+1. サイトのソースコードをGitリポジトリ（例：GitHub）に配置します。
+2. [Cloudflareダッシュボード](https://dash.cloudflare.com/)にログインし、アカウントを選択します。
+3. アカウントホームで、**Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択します。
+4. リポジトリを選択し、**Set up builds and deployments** セクションで以下の情報を提供します：
+
+| 設定             | 値                  |
+| ---------------- | ------------------- |
+| 本番ブランチ     | `main`              |
+| ビルドコマンド   | `hugo --gc --minify` |
+| ビルドディレクトリ | `public`            |
+
+詳細については、以下を確認してください：
+- [Hugoサイトのデプロイ](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)。
+- [言語サポートとツール](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)。
+
+
+## Netlify
+
+1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。
+2. [プロジェクトをインポート](https://app.netlify.com/start)してNetlifyに追加します。
+3. [hextra-starter-template][hextra-starter-template]を使用していない場合、以下の設定を手動で行います：
+   - ビルドコマンドを `hugo --gc --minify` に設定します。
+   - 公開ディレクトリを `public` に指定します。
+   - 環境変数 `HUGO_VERSION` を追加し、`0.138.0` に設定するか、`netlify.toml` ファイルに設定します。
+4. デプロイします！
+
+詳細については、[NetlifyでのHugo](https://docs.netlify.com/integrations/frameworks/hugo/)を確認してください。
+
+
+## Vercel
+
+1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。
+2. [Vercelダッシュボード](https://vercel.com/dashboard)に移動し、Hugoプロジェクトをインポートします。
+3. プロジェクトを設定し、フレームワークプリセットとしてHugoを選択します。
+4. ビルドコマンドとインストールコマンドを上書きします：
+   1. ビルドコマンドを `hugo --gc --minify` に設定します。
+   2. インストールコマンドを `yum install golang` に設定します。
+
+![Vercelデプロイ設定](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/diagrams.ja.md b/exampleSite/content/docs/guide/diagrams.ja.md
new file mode 100644
index 00000000..6c49a7ef
--- /dev/null
+++ b/exampleSite/content/docs/guide/diagrams.ja.md
@@ -0,0 +1,53 @@
+---
+title: ダイアグラム
+weight: 6
+next: /docs/guide/shortcodes
+---
+
+現在、Hextraはダイアグラムのために[Mermaid](#mermaid)をサポートしています。
+
+<!--more-->
+
+## Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid#readme)は、JavaScriptベースのダイアグラムおよびチャート作成ツールで、Markdownにインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。
+
+HextraでMermaidを使用するのは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です:
+
+````markdown
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+これは次のようにレンダリングされます:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+シーケンス図:
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: こんにちはJohn、元気ですか？
+    loop 健康チェック
+        John->>John: 心気症と戦う
+    end
+    Note right of John: 理性的な思考 <br/>が勝つ！
+    John-->>Alice: 元気です！
+    John->>Bob: あなたはどうですか？
+    Bob-->>John: とても元気です！
+```
+
+詳細については、[Mermaidドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/latex.ja.md b/exampleSite/content/docs/guide/latex.ja.md
new file mode 100644
index 00000000..8157cc20
--- /dev/null
+++ b/exampleSite/content/docs/guide/latex.ja.md
@@ -0,0 +1,97 @@
+---
+title: "LaTeX"
+weight: 4
+math: true
+---
+
+$\KaTeX$ は LaTeX の数式をレンダリングするために使用されます。ページのフロントマターで `math` を `true` に設定することで、ページごとに有効にすることができます。
+
+<!--more-->
+
+```yaml {filename="page.md"}
+---
+title: "LaTeX を使用した私のページ"
+math: true
+---
+
+```
+
+有効にすると、KaTeX のスクリプト、スタイルシート、フォントが自動的にサイトに含まれます。Markdown コンテンツ内で LaTeX 数式を使用できます。
+
+## 例
+
+Markdown コンテンツ内で、インラインおよび別段落の LaTeX 数式がサポートされています。
+
+### インライン
+
+```markdown {filename="page.md"}
+これは $\sigma(z) = \frac{1}{1 + e^{-z}}$ インラインです。
+```
+
+これは $\sigma(z) = \frac{1}{1 + e^{-z}}$ インラインです。
+
+### 別段落
+
+```markdown {filename="page.md"}
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+```
+
+次のようにレンダリングされます:
+
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+
+> [!IMPORTANT]
+> Hugo 設定ファイルで [パススルー拡張機能](https://gohugo.io/content-management/mathematics/) を有効にして設定してください。これにより、複雑な式のレンダリング問題を回避するために、デリミタ内の生のコンテンツが保持されます。
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    extensions:
+      passthrough:
+        delimiters:
+          block: [['\[', '\]'], ['$$', '$$']]
+          inline: [['\(', '\)']]
+        enable: true
+```
+
+例えば、aligned 環境を使用する場合:
+
+```latex {filename="page.md"}
+$$
+\begin{aligned}
+  \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+  \nabla \cdot \mathbf{B} &= 0 \\
+  \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+  \nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
+\end{aligned}
+$$
+```
+
+次のようにレンダリングされます:
+
+$$
+\begin{aligned}
+  \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
+  \nabla \cdot \mathbf{B} &= 0 \\
+  \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
+  \nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
+\end{aligned}
+$$
+
+## サポートされている関数
+
+サポートされている関数の一覧については、[KaTeX サポートされている関数](https://katex.org/docs/supported.html) を参照してください。
+
+## 化学
+
+化学式は [mhchem](https://mhchem.github.io/MathJax-mhchem/) 拡張機能を介してサポートされています。
+
+インライン: $\ce{H2O}$ は水です。
+
+別段落:
+
+```markdown {filename="page.md"}
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
+```
+
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/markdown.ja.md b/exampleSite/content/docs/guide/markdown.ja.md
new file mode 100644
index 00000000..b8d7afa5
--- /dev/null
+++ b/exampleSite/content/docs/guide/markdown.ja.md
@@ -0,0 +1,196 @@
+---
+title: Markdown
+weight: 2
+---
+
+Hugoは、テキストのフォーマットやリストの作成などに[Markdown](https://ja.wikipedia.org/wiki/Markdown)構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。
+
+<!--more-->
+
+## Markdownの例
+
+### テキストのスタイル
+
+| スタイル   | 構文     | 例   | 出力   |
+| --------  | -------- | ------ | ------ |
+| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
+| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | *斜体テキスト* |
+| 取り消し線 | `~~取り消し線テキスト~~` | `~~取り消し線テキスト~~` | ~~取り消し線テキスト~~ |
+| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
+| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
+
+### ブロッククォート
+
+引用元付きのブロッククォート
+
+> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
+> — <cite>ロブ・パイク[^1]</cite>
+
+[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
+
+```markdown {filename=Markdown}
+> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
+> — <cite>ロブ・パイク[^1]</cite>
+
+[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
+```
+
+### アラート
+
+{{< new-feature version="v0.9.0" >}}
+
+アラートは、ブロッククォート構文に基づくMarkdown拡張で、重要な情報を強調するために使用できます。
+[GitHubスタイルのアラート](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)がサポートされています。
+Hextraの最新バージョンと[Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)以降を使用していることを確認してください。
+
+> [!NOTE]
+> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
+
+> [!TIP]
+> 物事をより良く、または簡単に行うための役立つアドバイス。
+
+> [!IMPORTANT]
+> ユーザーが目標を達成するために知っておくべき重要な情報。
+
+> [!WARNING]
+> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
+
+> [!CAUTION]
+> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
+
+```markdown {filename=Markdown}
+> [!NOTE]
+> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
+
+> [!TIP]
+> 物事をより良く、または簡単に行うための役立つアドバイス。
+
+> [!IMPORTANT]
+> ユーザーが目標を達成するために知っておくべき重要な情報。
+
+> [!WARNING]
+> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
+
+> [!CAUTION]
+> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
+```
+
+### テーブル
+
+テーブルはMarkdownのコア仕様には含まれていませんが、Hugoはデフォルトでサポートしています。
+
+|   名前 | 年齢  |
+|--------|------|
+|   ボブ | 27   |
+|  アリス | 23   |
+
+```markdown {filename=Markdown}
+|   名前 | 年齢  |
+|--------|------|
+|   ボブ | 27   |
+|  アリス | 23   |
+```
+
+#### テーブル内のインラインMarkdown
+
+| 斜体   | 太字     | コード   |
+| --------  | -------- | ------ |
+| *斜体* | **太字** | `コード` |
+
+```markdown {filename=Markdown}
+| 斜体   | 太字     | コード   |
+| --------  | -------- | ------ |
+| *斜体* | **太字** | `コード` |
+```
+
+### コードブロック
+
+{{< cards >}}
+  {{< card link="../../guide/syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
+{{< /cards >}}
+
+### リスト
+
+#### 順序付きリスト
+
+1. 最初の項目
+2. 2番目の項目
+3. 3番目の項目
+
+```markdown {filename=Markdown}
+1. 最初の項目
+2. 2番目の項目
+3. 3番目の項目
+```
+
+#### 順序なしリスト
+
+* リスト項目
+* 別の項目
+* さらに別の項目
+
+```markdown {filename=Markdown}
+* リスト項目
+* 別の項目
+* さらに別の項目
+```
+
+#### ネストされたリスト
+
+* 果物
+  * りんご
+  * オレンジ
+  * バナナ
+* 乳製品
+  * 牛乳
+  * チーズ
+
+```markdown {filename=Markdown}
+* 果物
+  * りんご
+  * オレンジ
+  * バナナ
+* 乳製品
+  * 牛乳
+  * チーズ
+```
+
+### 画像
+
+![風景](https://picsum.photos/800/600)
+
+```markdown {filename=Markdown}
+![風景](https://picsum.photos/800/600)
+```
+
+キャプション付き:
+
+![風景](https://picsum.photos/800/600 "Unsplashの風景")
+
+```markdown {filename=Markdown}
+![風景](https://picsum.photos/800/600 "Unsplashの風景")
+```
+
+## 設定
+
+HugoはMarkdownの解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
+Markdownのレンダリングは、`hugo.yaml`の`markup.goldmark`で設定できます。
+以下はHextraのデフォルト設定です:
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+```
+
+その他の設定オプションについては、Hugoのドキュメント[Configure Markup](https://gohugo.io/getting-started/configuration-markup/)を参照してください。
+
+## 学習リソース
+
+* [Markdownガイド](https://www.markdownguide.org/)
+* [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [Markdownチュートリアル](https://www.markdowntutorial.com/)
+* [Markdownリファレンス](https://commonmark.org/help/)
diff --git a/exampleSite/content/docs/guide/organize-files.ja.md b/exampleSite/content/docs/guide/organize-files.ja.md
new file mode 100644
index 00000000..80809b79
--- /dev/null
+++ b/exampleSite/content/docs/guide/organize-files.ja.md
@@ -0,0 +1,187 @@
+---
+title: ファイルの整理
+weight: 1
+prev: /docs/guide
+---
+
+## ディレクトリ構造
+
+デフォルトでは、Hugoは`content`ディレクトリ内のMarkdownファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
+このサイトを例に取ります：
+
+<!--more-->
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="getting-started.md" >}}
+      {{< filetree/folder name="guide" state="open" >}}
+        {{< filetree/file name="_index.md" >}}
+        {{< filetree/file name="organize-files.md" >}}
+      {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+    {{< filetree/folder name="blog" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="post-1.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+各`_index.md`ファイルは、対応するセクションのインデックスページです。他のMarkdownファイルは通常のページです。
+
+```
+content
+├── _index.md // <- /
+├── docs
+│   ├── _index.md // <- /docs/
+│   ├── getting-started.md // <- /docs/getting-started/
+│   └── guide
+│       ├── _index.md // <- /docs/guide/
+│       └── organize-files.md // <- /docs/guide/organize-files/
+└── blog
+    ├── _index.md // <- /blog/
+    └── post-1.md // <- /blog/post-1/
+```
+
+## レイアウト
+
+Hextraは、異なるコンテンツタイプに対して3つのレイアウトを提供します：
+
+| レイアウト | ディレクトリ             | 特徴                                                         |
+| :-------- | :-------------------- | :--------------------------------------------------------------- |
+| `docs`    | `content/docs/`       | 構造化されたドキュメントに最適で、このセクションと同じです。        |
+| `blog`    | `content/blog/`       | ブログ投稿用で、リスト表示と詳細記事表示の両方があります。 |
+| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事表示です。                        |
+
+セクションの動作をビルトインレイアウトと同じにするには、セクションの`_index.md`のフロントマターで希望するタイプを指定します。
+
+```yaml {filename="content/my-docs/_index.md"}
+---
+title: My Docs
+cascade:
+  type: docs
+---
+```
+
+上記の設定例により、`content/my-docs/`内のコンテンツファイルはデフォルトでドキュメント（`docs`タイプ）として扱われます。
+
+## サイドバーナビゲーション
+
+サイドバーナビゲーションは、コンテンツの整理に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdownファイルのフロントマターで`weight`パラメータを使用します。
+
+```yaml {filename="content/docs/guide/_index.md"}
+---
+title: Guide
+weight: 2
+---
+```
+
+{{< callout emoji="ℹ️">}}
+  サイドバーがあまり深くならないようにすることをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
+{{< /callout >}}
+
+## パンくずナビゲーション
+
+パンくずは、`/content`のディレクトリ構造に基づいて自動生成されます。
+
+例えば、[上記のファイル構造](#directory-structure)を考えます。その構造に基づいて、`/docs/guide/organize-files/`ページの上部にパンくずが自動的に表示されます：
+
+```
+Documentation > Guide > Organize Files
+```
+
+### パンくずリンクのタイトルをカスタマイズ
+
+デフォルトでは、各パンくずリンクはそのページの`title`パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle`を指定します。
+
+例えば、`Organize Files`の代わりに`Foo Bar`と表示したい場合：
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+linkTitle: Foo Bar
+title: Organize Files
+---
+```
+
+これにより、以下のパンくずが生成されます：
+```
+Documentation > Guide > Foo Bar
+```
+
+### パンくずを非表示にする
+
+ページのフロントマターで`breadcrumbs: false`を指定することで、パンくずを完全に非表示にできます：
+
+```yaml {filename="content/docs/guide/organize-files.md"}
+---
+breadcrumbs: false
+title: Organize Files
+---
+```
+
+## コンテンツディレクトリの設定
+
+デフォルトでは、Hugoはサイトを構築するためにルートの`content/`ディレクトリを使用します。
+例えば`docs/`など、異なるディレクトリをコンテンツに使用する必要がある場合は、サイト設定`hugo.yaml`で[`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir)パラメータを設定することで行えます。
+
+## 画像の追加
+
+画像を追加する最も簡単な方法は、画像ファイルをMarkdownファイルと同じディレクトリに置くことです。
+例えば、`my-page.md`ファイルと同じディレクトリに`image.png`ファイルを追加します：
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+        {{< filetree/file name="image.png" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+その後、以下のMarkdown構文を使用してコンテンツに画像を追加できます：
+
+```markdown {filename="content/docs/my-page.md"}
+![](image.png)
+```
+
+また、Hugoの[ページバンドル][page-bundles]機能を利用して、画像ファイルをMarkdownファイルと一緒に整理することもできます。そのためには、`my-page.md`ファイルを`my-page`ディレクトリに変換し、コンテンツを`index.md`というファイルに置き、画像ファイルを`my-page`ディレクトリ内に置きます：
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/folder name="my-page" >}}
+            {{< filetree/file name="index.md" >}}
+            {{< filetree/file name="image.png" >}}
+        {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+```markdown {filename="content/docs/my-page/index.md"}
+![](image.png)
+```
+
+または、画像ファイルを`static`ディレクトリに置くこともできます。これにより、すべてのページで画像が利用可能になります：
+
+{{< filetree/container >}}
+  {{< filetree/folder name="static" >}}
+    {{< filetree/folder name="images" >}}
+        {{< filetree/file name="image.png" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+画像パスはスラッシュ`/`で始まり、`static`ディレクトリからの相対パスであることに注意してください：
+
+```markdown {filename="content/docs/my-page.md"}
+![](/images/image.png)
+```
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/_index.ja.md b/exampleSite/content/docs/guide/shortcodes/_index.ja.md
new file mode 100644
index 00000000..4b6e03ba
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/_index.ja.md
@@ -0,0 +1,29 @@
+---
+title: ショートコード
+weight: 9
+prev: /docs/guide/diagrams
+next: /docs/guide/shortcodes/callout
+---
+
+[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
+
+Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
+
+{{< cards >}}
+  {{< card link="callout" title="コールアウト" icon="warning" >}}
+  {{< card link="cards" title="カード" icon="card" >}}
+  {{< card link="details" title="詳細" icon="chevron-right" >}}
+  {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
+  {{< card link="icon" title="アイコン" icon="badge-check" >}}
+  {{< card link="steps" title="ステップ" icon="one" >}}
+  {{< card link="tabs" title="タブ" icon="collection" >}}
+{{< /cards >}}
+
+<div style="padding-top:4rem"></div>
+
+Hugo と Hextra が提供する追加のショートコード:
+
+{{< cards >}}
+  {{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
+  {{< card link="others" title="その他" icon="view-grid" >}}
+{{< /cards >}}
diff --git a/exampleSite/content/docs/guide/shortcodes/callout.ja.md b/exampleSite/content/docs/guide/shortcodes/callout.ja.md
new file mode 100644
index 00000000..33516134
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/callout.ja.md
@@ -0,0 +1,83 @@
+---
+title: コールアウトコンポーネント
+linkTitle: コールアウト
+aliases:
+- callouts
+prev: /docs/guide/shortcodes
+---
+
+読者に重要な情報を示すための組み込みコンポーネントです。
+
+<!--more-->
+
+> [!NOTE]
+> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
+> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。
+
+## 例
+
+{{< callout emoji="👾">}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{< /callout >}}
+
+## 使用方法
+
+### デフォルト
+
+{{< callout emoji="🌐">}}
+  Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
+{{</* /callout */>}}
+```
+
+### 情報
+
+{{< callout type="info" >}}
+  最新のリリースを確認するには、GitHubをご覧ください。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  最新のリリースを確認するには、GitHubをご覧ください。
+{{</* /callout */>}}
+```
+
+### 警告
+
+{{< callout type="warning" >}}
+  このAPIは次のバージョンで非推奨になります。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  **コールアウト**は、注意を引くための短いテキストです。
+{{</* /callout */>}}
+```
+
+### エラー
+
+{{< callout type="error" >}}
+  何か問題が発生し、爆発しそうです。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  何か問題が発生し、爆発しそうです。
+{{</* /callout */>}}
+```
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/cards.ja.md b/exampleSite/content/docs/guide/shortcodes/cards.ja.md
new file mode 100644
index 00000000..c8a4e05a
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/cards.ja.md
@@ -0,0 +1,115 @@
+---
+title: カードコンポーネント
+linkTitle: カード
+---
+
+## 例
+
+{{< cards >}}
+  {{< card link="../callout" title="コールアウト" icon="warning" >}}
+  {{< card link="../callout" title="タグ付きカード" icon="tag" tag="カスタムタグ">}}
+  {{< card link="/" title="アイコンなし" >}}
+{{< /cards >}}
+
+{{< cards >}}
+  {{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}}
+  {{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" >}}
+  {{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" >}}
+{{< /cards >}}
+
+## 使用方法
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="コールアウト" icon="warning" */>}}
+  {{</* card link="../callout" title="タグ付きカード" icon="tag" tag= "カスタムタグ" */>}}
+  {{</* card link="/" title="アイコンなし" */>}}
+{{</* /cards */>}}
+```
+
+```
+{{</* cards */>}}
+  {{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}}
+  {{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" */>}}
+  {{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" */>}}
+{{</* /cards */>}}
+```
+
+## カードパラメータ
+
+| パラメータ  | 説明                                                     |
+|----------- |-----------------------------------------------------------------|
+| `link`     | URL（内部または外部）。                                     |
+| `title`    | カードのタイトル見出し。                                     |
+| `subtitle` | サブタイトル見出し（Markdown対応）。                           |
+| `icon`     | アイコンの名前。                                               |
+| `tag`      | タグ内のテキスト。                                                    |
+| `tagColor` | タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。 |
+  
+## 画像カード
+
+さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:
+
+| パラメータ  | 説明                                 |
+|----------- |---------------------------------------------|
+| `image`    | カードの画像URLを指定します。       |
+| `method`   | Hugoの画像処理メソッドを設定します。        |
+| `options`  | Hugoの画像処理オプションを設定します。 |
+
+カードは3種類の画像をサポートします:
+
+1. リモート画像: `image`パラメータに完全なURLを指定。
+2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
+3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
+
+Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebPフォーマット）を適用します。
+現在サポートされている`method`は`Resize`、`Fit`、`Fill`、`Crop`です。
+
+Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
+
+## タグ
+
+カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
+
+{{< cards >}}
+  {{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
+  {{< card link="../callout" title="エラータグ付きカード" tag="タグテキスト" tagType="error" >}}
+  {{< card link="../callout" title="情報タグ付きカード" tag="タグテキスト" tagType="info" >}}
+  {{< card link="../callout" title="警告タグ付きカード" tag="タグテキスト" tagType="warning" >}}
+  {{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" tag="タグテキスト" tagType="error" >}}
+{{< /cards >}}
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" */>}}
+  {{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
+  {{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
+  {{</* card link="../callout" title="黄色タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
+{{</* /cards */>}}
+```
+
+## 列
+
+`cards`ショートコードに`cols`パラメータを渡すことで、カードが広がる最大列数を指定できます。ただし、小さい画面では列は折りたたまれます。
+
+{{< cards cols="1" >}}
+  {{< card link="/" title="上部カード" >}}
+  {{< card link="/" title="下部カード" >}}
+{{< /cards >}}
+
+{{< cards cols="2" >}}
+  {{< card link="/" title="左カード" >}}
+  {{< card link="/" title="右カード" >}}
+{{< /cards >}}
+
+```
+{{</* cards cols="1" */>}}
+  {{</* card link="/" title="上部カード" */>}}
+  {{</* card link="/" title="下部カード" */>}}
+{{</* /cards */>}}
+
+{{</* cards cols="2" */>}}
+  {{</* card link="/" title="左カード" */>}}
+  {{</* card link="/" title="右カード" */>}}
+{{</* /cards */>}}
+```
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/details.ja.md b/exampleSite/content/docs/guide/shortcodes/details.ja.md
new file mode 100644
index 00000000..e2b81197
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/details.ja.md
@@ -0,0 +1,43 @@
+---
+title: 詳細
+---
+
+折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
+
+<!--more-->
+
+## 例
+
+{{% details title="詳細" %}}
+
+これは詳細のコンテンツです。
+
+Markdownは**サポートされています**。
+
+{{% /details %}}
+
+{{% details title="クリックして表示" closed="true" %}}
+
+これはデフォルトで非表示になります。
+
+{{% /details %}}
+
+## 使い方
+
+````markdown
+{{%/* details title="詳細" */%}}
+
+これは詳細のコンテンツです。
+
+Markdownは**サポートされています**。
+
+{{%/* /details */%}}
+````
+
+````markdown
+{{%/* details title="クリックして表示" closed="true" */%}}
+
+これはデフォルトで非表示になります。
+
+{{%/* /details */%}}
+````
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/filetree.ja.md b/exampleSite/content/docs/guide/shortcodes/filetree.ja.md
new file mode 100644
index 00000000..f3827e3e
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/filetree.ja.md
@@ -0,0 +1,34 @@
+---
+title: FileTree コンポーネント
+linkTitle: FileTree
+---
+
+## 例
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="closed" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="introduction.md" >}}
+      {{< filetree/file name="introduction.fr.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/file name="hugo.toml" >}}
+{{< /filetree/container >}}
+
+## 使用方法
+
+```text {filename="Markdown"}
+{{</* filetree/container */>}}
+  {{</* filetree/folder name="content" */>}}
+    {{</* filetree/file name="_index.md" */>}}
+    {{</* filetree/folder name="docs" state="closed" */>}}
+      {{</* filetree/file name="_index.md" */>}}
+      {{</* filetree/file name="introduction.md" */>}}
+      {{</* filetree/file name="introduction.fr.md" */>}}
+    {{</* /filetree/folder */>}}
+  {{</* /filetree/folder */>}}
+  {{</* filetree/file name="hugo.toml" */>}}
+{{</* /filetree/container */>}}
+```
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/icon.ja.md b/exampleSite/content/docs/guide/shortcodes/icon.ja.md
new file mode 100644
index 00000000..05b316c6
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/icon.ja.md
@@ -0,0 +1,46 @@
+---
+title: アイコン
+---
+
+このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
+
+```yaml {filename="hugo.yaml"}
+enableInlineShortcodes: true
+```
+
+利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
+
+<!--more-->
+
+## 例
+
+{{< icon "academic-cap" >}}
+{{< icon "cake" >}}
+{{< icon "gift" >}}
+{{< icon "sparkles" >}}
+
+## 使用方法
+
+```
+{{</* icon "github" */>}}
+```
+
+[Heroicons](https://v1.heroicons.com/) v1 のアウトラインアイコンがデフォルトで利用可能です。
+
+### 独自のアイコンを追加する方法
+
+`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
+
+```yaml {filename="data/icons.yaml"}
+your-icon: <svg>your icon svg content</svg>
+```
+
+その後、ショートコードで以下のように使用できます:
+
+```
+{{</* icon "your-icon" */>}}
+
+{{</* card icon="your-icon" */>}}
+```
+
+ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/jupyter.ja.md b/exampleSite/content/docs/guide/shortcodes/jupyter.ja.md
new file mode 100644
index 00000000..e08608d5
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/jupyter.ja.md
@@ -0,0 +1,79 @@
+---
+title: "Jupyter Notebook コンポーネント"
+linktitle: "Jupyter Notebook"
+math: true
+sidebar:
+  exclude: true
+---
+
+{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的な機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
+
+[Jupyter Notebook](https://jupyter.org/) は、[Project Jupyter](https://jupyter.org/) の言語に依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。
+
+<!--more-->
+
+## 使用方法
+
+### ローカルノートブックを使用する
+
+Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
+
+{{< filetree/container >}}
+  {{< filetree/folder name="assets" >}}
+    {{< filetree/file name="notebook.ipynb" >}}
+  {{< /filetree/folder >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます：
+
+```markdown {filename="content/docs/my-page.md"}
+---
+title: My Page
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+あるいは、Hugo の [ページバンドル][page-bundles] 機能を利用して、Jupyter Notebook を Markdown ファイルと一緒に整理することもできます。
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/folder name="my-page" >}}
+            {{< filetree/file name="index.md" >}}
+            {{< filetree/file name="notebook.ipynb" >}}
+        {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+```markdown {filename="content/docs/my-page/index.md"}
+---
+title: My Page
+math: true
+---
+
+{{%/* jupyter "notebook.ipynb" */%}}
+```
+
+### リモートノートブックを使用する
+
+ノートブックファイルの URL を指定して、リモートノートブックを使用することもできます。たとえば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに含めるには、次のショートコードを使用します：
+
+```
+{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
+```
+
+## ノートブックの例
+
+{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
+
+{{% jupyter "example.ipynb" %}}
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/others.ja.md b/exampleSite/content/docs/guide/shortcodes/others.ja.md
new file mode 100644
index 00000000..8d4c0564
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/others.ja.md
@@ -0,0 +1,77 @@
+---
+title: その他のショートコード
+linkTitle: その他
+sidebar:
+  exclude: true
+---
+
+{{< callout emoji="ℹ️" >}}
+  これらの一部はHugoの組み込みショートコードです。
+  これらのショートコードは安定性が低く、いつでも変更される可能性があります。
+{{< /callout >}}
+
+## バッジ
+
+```
+{{</* badge "バッジ" */>}}
+```
+
+結果:
+
+{{< badge "バッジ" >}}
+
+バリエーション:
+
+```
+{{</* badge content="info" type="info" */>}}
+{{</* badge content="warning" type="warning" */>}}
+{{</* badge content="error" type="error" */>}}
+```
+
+結果:
+
+{{< badge content="info" type="info" >}} &nbsp;
+{{< badge content="warning" type="warning" >}} &nbsp;
+{{< badge content="error" type="error" >}}
+
+リンクとアイコン付き:
+
+```
+{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
+```
+
+結果:
+
+{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}}
+
+## YouTube
+
+YouTube動画を埋め込みます。
+
+```
+{{</* youtube VIDEO_ID */>}}
+```
+
+結果:
+
+{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
+
+詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
+
+## PDF
+
+PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
+
+```
+{{</* pdf "https://example.com/sample.pdf" */>}}
+```
+
+また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
+
+```
+{{</* pdf "path/to/file.pdf" */>}}
+```
+
+例:
+
+{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/steps.ja.md b/exampleSite/content/docs/guide/shortcodes/steps.ja.md
new file mode 100644
index 00000000..264f4d60
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/steps.ja.md
@@ -0,0 +1,46 @@
+---
+title: ステップ
+---
+
+ステップのシリーズを表示するための組み込みコンポーネント。
+
+## 例
+
+{{% steps %}}
+
+### ステップ 1
+
+これは最初のステップです。
+
+### ステップ 2
+
+これは2番目のステップです。
+
+### ステップ 3
+
+これは3番目のステップです。
+
+{{% /steps %}}
+
+## 使い方
+
+{{< callout emoji="ℹ️" >}}
+  このショートコードは**Markdownコンテンツ専用**であることに注意してください。
+  HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
+{{< /callout >}}
+
+`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
+
+```
+{{%/* steps */%}}
+
+### ステップ 1
+
+これは最初のステップです。
+
+### ステップ 2
+
+これは2番目のステップです。
+
+{{%/* /steps */%}}
+```
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/shortcodes/tabs.ja.md b/exampleSite/content/docs/guide/shortcodes/tabs.ja.md
new file mode 100644
index 00000000..8dc0c1da
--- /dev/null
+++ b/exampleSite/content/docs/guide/shortcodes/tabs.ja.md
@@ -0,0 +1,93 @@
+---
+title: タブ
+next: /docs/guide/deploy-site
+---
+
+## 例
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
+{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
+{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
+
+{{< /tabs >}}
+
+## 使用方法
+
+### デフォルト
+
+```
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+### 選択されたインデックスを指定
+
+`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。
+
+```
+{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
+
+  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+`YAML` タブがデフォルトで選択されます。
+
+{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
+
+{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
+{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
+{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
+
+{{< /tabs >}}
+
+
+### Markdown を使用
+
+コードブロックを含む Markdown 構文もサポートされています:
+
+````
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{</* /tab */>}}
+
+  ... 他のタブも同様に追加
+
+{{</* /tabs */>}}
+````
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+  {{< tab >}}
+  ```json
+  { "hello": "world" }
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```yaml
+  hello: world
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```toml
+  hello = "world"
+  ```
+  {{< /tab >}}
+
+{{< /tabs >}}
\ No newline at end of file
diff --git a/exampleSite/content/docs/guide/syntax-highlighting.ja.md b/exampleSite/content/docs/guide/syntax-highlighting.ja.md
new file mode 100644
index 00000000..452f7852
--- /dev/null
+++ b/exampleSite/content/docs/guide/syntax-highlighting.ja.md
@@ -0,0 +1,114 @@
+---
+title: "シンタックスハイライト"
+weight: 3
+---
+
+Hugoは、純粋なGoで書かれた汎用シンタックスハイライターである[Chroma](https://github.com/alecthomas/chroma)を使用してシンタックスハイライトを行います。
+Markdownコンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば：
+
+<!--more-->
+
+````markdown {filename="Markdown"}
+```python
+def say_hello():
+    print("Hello!")
+```
+````
+
+は次のようにレンダリングされます：
+
+```python
+def say_hello():
+    print("Hello!")
+```
+
+## 機能
+
+### ファイル名
+
+コードブロックにファイル名やタイトルを追加するには、`filename`属性を設定します：
+
+````markdown {filename="Markdown"}
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {filename="hello.py"}
+def say_hello():
+    print("Hello!")
+```
+
+### ファイルへのリンク
+
+{{< new-feature version="v0.9.2" >}}
+
+`base_url`属性を使用して、ファイル名と組み合わせてリンクを生成するベースURLを提供できます。
+
+ファイル名には、ベースパス内のファイルの場所を指定する相対パスを含めることができます。
+
+````markdown {filename="Markdown"}
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+````
+
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+
+### 行番号
+
+行番号を設定するには、`linenos`属性を`table`に設定し、オプションで`linenostart`を開始行番号に設定します：
+
+````markdown {filename="Markdown"}
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+````
+
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("Hello!")
+```
+
+### 行のハイライト
+
+行をハイライトするには、`hl_lines`属性に行番号のリストを設定します：
+
+````markdown {filename="Markdown"}
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+````
+
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("Hello!")
+
+def main():
+    say_hello()
+```
+
+### コピーボタン
+
+デフォルトでは、コードブロックにコピーボタンが有効になっています。その動作はサイト設定ファイルを変更することで変更できます：
+
+```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
+params:
+  highlight:
+    copy:
+      enable: true
+      # hover | always
+      display: hover
+```
+
+## サポートされている言語
+
+サポートされている言語のリストについては、[Chromaのドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。
\ No newline at end of file
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
index 88aba73b..d49b3179 100644
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@@ -22,17 +22,22 @@ languages:
     languageName: English
     weight: 1
     title: Hextra
-  zh-cn:
-    languageName: 简体中文
-    languageCode: zh-CN
-    weight: 2
-    title: Hextra
   fa:
     languageName: فارسی
     languageCode: fa
     languageDirection: rtl
-    weight: 3
+    weight: 2
     title: هگزترا
+  ja:
+    languageName: 日本語
+    languageCode: ja
+    weight: 3
+    title: Hextra
+  zh-cn:
+    languageName: 简体中文
+    languageCode: zh-CN
+    weight: 4
+    title: Hextra
 
 module:
   hugoVersion:
diff --git a/exampleSite/i18n/ja.yaml b/exampleSite/i18n/ja.yaml
new file mode 100644
index 00000000..f5e35d8b
--- /dev/null
+++ b/exampleSite/i18n/ja.yaml
@@ -0,0 +1,6 @@
+documentation: "ドキュメント"
+showcase: "展示"
+blog: "ブログ"
+about: "概要"
+more: "もっと見る"
+hugoDocs: "Hugo ドキュメント ↗"
\ No newline at end of file