Skip to content

Commit

Permalink
docs(i18n): add ja translation
Browse files Browse the repository at this point in the history 
- translated via llm
  • Loading branch information
@imfing
imfing committed Dec 31, 2024
1 parent 9632c4d commit b8f617f
Show file tree
Hide file tree
Showing 27 changed files with 2,441 additions and 6 deletions.
76 changes: 76 additions & 0 deletions exampleSite/content/_index.ja.md
View file
Original file line number Diff line number Diff line change
@@ -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 >}}
40 changes: 40 additions & 0 deletions exampleSite/content/docs/_index.ja.md
View file
Original file line number Diff line number Diff line change
@@ -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/
16 changes: 16 additions & 0 deletions exampleSite/content/docs/advanced/_index.ja.md
View file
Original file line number Diff line number Diff line change
@@ -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 >}}
39 changes: 39 additions & 0 deletions exampleSite/content/docs/advanced/comments.ja.md
View file
Original file line number Diff line number Diff line change
@@ -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
---
```
211 changes: 211 additions & 0 deletions exampleSite/content/docs/advanced/customization.ja.md
View file
Original file line number Diff line number Diff line change
@@ -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/
Loading

0 comments on commit b8f617f

Please sign in to comment.