drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-23 09:26:36 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update ja translation

Browse Source
This commit is contained in:
Xin
2025-08-14 19:28:16 +08:00
parent f79b1d262c
commit 24debf9b0c
26 changed files with 1155 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
exampleSite/content/blog/_index.ja.md Normal file
View File

@@ -0,0 +1,10 @@
---
title: "ブログ"
---
<div style="text-align: center; margin-top: 1em;">
{{< hextra/hero-badge link="index.xml" >}}
<span>RSS フィード</span>
{{< icon name="rss" attributes="height=14" >}}
{{< /hextra/hero-badge >}}
</div>

157
exampleSite/content/blog/markdown.ja.md Normal file
View File

@@ -0,0 +1,157 @@
---
title: Markdown 構文ガイド
date: 2020-01-01
authors:
- name: imfing
link: https://github.com/imfing
image: https://github.com/imfing.png
- name: Octocat
link: https://github.com/octocat
image: https://github.com/octocat.png
tags:
- Markdown
- サンプル
- ガイド
excludeSearch: true
---
この記事では、Hugo のコンテンツファイルで使用できる基本的な Markdown 構文のサンプルを紹介します。
<!--more-->
## 基本構文
### 見出し
```
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
```
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
### 強調
```text
*このテキストは斜体になります*
_これも斜体になります_
**このテキストは太字になります**
__これも太字になります__
_これらを**組み合わせる**こともできます_
```
*このテキストは斜体になります*
_これも斜体になります_
**このテキストは太字になります**
__これも太字になります__
_これらを**組み合わせる**こともできます_
### リスト
#### 順序なしリスト
```
* 項目1
* 項目2
* 項目2a
* 項目2b
```
* 項目1
* 項目2
* 項目2a
* 項目2b
#### 順序付きリスト
```
1. 項目1
2. 項目2
3. 項目3
1. 項目3a
2. 項目3b
```
### 画像
```markdown
![GitHub ロゴ](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
```
![GitHub ロゴ](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
### リンク
```markdown
[Hugo](https://gohugo.io)
```
[Hugo](https://gohugo.io)
### ブロッククォート
```markdown
ニュートンはこう言いました:
> 私が遠くを見渡せたとしたら、それは巨人の肩の上に立っていたからです。
```
> 私が遠くを見渡せたとしたら、それは巨人の肩の上に立っていたからです。
### インラインコード
```markdown
インライン `コード` は `バッククォートで囲みます`。
```
インライン `コード` は `バッククォートで囲みます`。
### コードブロック
#### シンタックスハイライト
````markdown
```go
func main() {
fmt.Println("Hello World")
}
```
````
```go
func main() {
fmt.Println("Hello World")
}
```
### テーブル
```markdown
| 構文 | 説明 |
| --------- | ----------- |
| 見出し | タイトル |
| 段落 | テキスト |
```
| 構文 | 説明 |
| --------- | ----------- |
| 見出し | タイトル |
| 段落 | テキスト |
## 参考資料
- [Markdown 構文](https://www.markdownguide.org/basic-syntax/)
- [Hugo Markdown](https://gohugo.io/content-management/formats/#markdown)

248
exampleSite/content/blog/v010.ja.md Normal file
View File

@@ -0,0 +1,248 @@
---
title: "Hextra v0.10"
date: 2025-08-14
authors:
- name: imfing
link: https://github.com/imfing
image: https://github.com/imfing.png
tags:
- Release
draft: true
---
Hextra v0.10.0 は、新機能、アーキテクチャの刷新、利便性向上を詰め込んだ大きなリリースです。
<!--more-->
また、10名の[新規コントリビューター](#contributors)からの貢献と、長らく要望のあった機能の実装も含まれています。
## アップグレードガイド
> [!IMPORTANT]
> **破壊的変更**: このリリースにはいくつかの破壊的変更が含まれています。アップグレード前にチェックリストと[移行ガイド](#migration-guide)を確認してください。
v0.10.0 にアップグレードする前に、以下を確認してください:
- Hugo v0.146.0+ (extended 版) がインストールされていること
- カスタムCSSのクラス名変更を確認 ( [CSSクラスプレフィックス変更](#css-class-prefix-changes) と [Tailwind CSS v4](#tailwind-css-v4) を参照)
- LaTeX や Mermaid を使用する場合、ビルド環境がアセットダウンロードのためインターネットに接続できること
準備が整ったら、Hugoモジュールを更新します:
```bash
hugo mod get -u github.com/imfing/hextra@v0.10.0
```
## 新機能
このリリースの主な新機能は以下の通りです:
- [**ナビゲーションバーのドロップダウンメニューサポート**](#dropdown-menu-support-in-navbar): 階層型ナビゲーションメニューの作成
- [**検索機能の強化**](#enhanced-search-experience): すべての見出しを対象にした精度向上した検索
- [**llms.txt サポート**](#llmstxt-support): AI向けサイトアウトラインの生成
- [**目次のスクロールハイライト**](#table-of-contents-scroll-highlighting): ページスクロール中の見出し自動ハイライト
- [**タブの同期切り替え**](#synchronized-tab-switching): 複数のタブグループ間でのタブ選択の同期
- [**ブログ一覧のページネーション**](#blog-list-pagination): ブログ一覧ページへのページネーションコントロール追加
- [**MathJax サポート**](#mathjax-support): KaTeXに加えてMathJaxを数式レンダリングエンジンとして選択可能
### ナビゲーションバーのドロップダウンメニューサポート
ナビゲーションバーにドロップダウンメニューを作成し、ナビゲーション項目を整理できます。
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: products
name: "製品"
- name: "製品A"
parent: products
url: "/product-a"
- name: "製品B"
parent: products
url: "/product-b"
```
![ドロップダウンメニューナビゲーション](https://github.com/user-attachments/assets/1816f9b9-7fe3-46e8-9546-f15e43e9914a)
### 検索機能の強化
- **すべての見出しを検索**: ページタイトルだけでなく、すべてのレベルの見出しからコンテンツを検索
- **検索結果の精度向上**: タイトル処理とリンク精度の改善
- **結果ナビゲーションの修正**: 検索結果が正しいページセクションにリンクするようになりました
検索機能の強化に貢献してくださった [@ldez](https://github.com/ldez) に感謝します!
![強化された検索結果](https://github.com/user-attachments/assets/f819652a-95d4-4843-b7e2-c7953a8cabe8)
### llms.txt サポート
Hextra はサイトの [llms.txt](https://llmstxt.org/) 出力形式をサポートし、AIツールや言語モデルがコンテキストや参照のためにサイトをよりアクセスしやすくします。
```yaml {filename="hugo.yaml"}
outputs:
home: [html, llms]
```
これにより、サイトのルートに `llms.txt` ファイルが生成されます。
![llms txtの例](https://github.com/user-attachments/assets/c6e929bb-0fce-4ab2-af15-a71c5a38b22c)
### 目次のスクロールハイライト
ページをスクロールする際に、目次が現在のセクションを自動的にハイライトするようになり、ナビゲーションがより直感的になりました。
![目次のスクロールハイライト](https://github.com/user-attachments/assets/d623fb99-7000-428b-af95-384eb722f0eb)
### タブの同期切り替え
同じ項目を持つタブはページ全体で同期されるようになりました。同期が有効な場合、タブを選択すると同じ項目リストを共有するすべてのタブグループが更新されます（選択内容は記憶されます）。
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
### ブログ一覧のページネーション
ブログ一覧ページに基本的なページネーションコントロールが追加されました。
```yaml {filename="hugo.yaml"}
params:
blog:
list:
pagerSize: 20 # 1ページあたりの投稿数
```
![ブログページネーション](https://github.com/user-attachments/assets/60405fb4-ec36-4733-ba13-b4066396b5c5)
### MathJax サポート
デフォルトのKaTeXサポートに加えて、[MathJax](https://www.mathjax.org/) で数式をレンダリングできるようになりました。ニーズに合ったエンジンを選択できます。
```yaml {filename="hugo.yaml"}
params:
math:
engine: "mathjax" # デフォルトは "katex"
```
## 技術的改善
### フレームワークとビルドシステム
- **Tailwind CSS v4 移行**: [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4) への完全移行とカスタマイズサポートの改善
- **Hugoテンプレートシステム**: Hugoの[新しいテンプレートシステム](https://gohugo.io/templates/new-templatesystem-overview/) (v0.146.0+) への対応
- **数式のサーバーサイドレンダリング**: Hugoネイティブレンダリングを使用した数式レンダリングの改善
- **FlexSearch 0.8 アップグレード**: 検索エンジン [FlexSearch](https://github.com/nextapps-de/flexsearch) のアップグレードにより、CJK (中国語、日本語、韓国語) コンテンツのエンコーディング改善と高速化・精度向上
- **アセット管理の強化**: KaTeXとMermaidアセットのCDNまたはローカルからの読み込みサポート
## 利便性の向上
- **動的ファビコン切り替え**: カラースキーム設定に基づくファビコンの自動更新
- **逆順ページネーション**: ページフロントマターで `reversePagination` を設定可能に
- **Googleインデックス制御**: Googleのインデックスをブロックする新しいページパラメータ
- **幅の処理改善**: CSS変数によるレスポンシブデザイン制御の強化
- **スタイリング改善**: Markdownテーブルと水平線のモダンなスタイル
## バグ修正と安定性
- **Giscusテーマ同期**: コメントがダーク/ライトモードの切り替えに正しく追従
- **検索結果の精度**: 検索結果のリンク問題とタイトルエスケープの修正
- **タブ切り替え**: 非同期タブモードでのナビゲーション問題の解決
- **ファントムスクロール**: フッター無効時の不要なスクロール動作の修正
- **画像アクセシビリティ**: 重複したaltテキストレンダリングの防止
- **リンクレンダリング**: 複雑なサイト構造におけるベースURL処理の改善
---
## 移行ガイド
- [**Hugoバージョン要件**](#hugo-version-requirements): Hugo v0.146.0+ (extended版) が必要
- [**CSSクラスプレフィックス変更**](#css-class-prefix-changes): コンポーネントCSSクラスに一貫した `hextra-` プレフィックスを採用
- [**アセット管理**](#asset-management-for-katex-and-mermaid): KaTeXとMermaidアセットはビルド時にダウンロード
- [**Tailwind CSS v4**](#tailwind-css-v4): 内部CSSコンパイルにTailwind CSS v4.xを採用し `hx:` プレフィックスを使用
#### Hugoバージョン要件
**影響**: 古いHugoバージョンで動作しているサイト
Hextra v0.10.0 は新しいテンプレートシステムを採用しているため、Hugo v0.146.0以降 (extended版) が必要です。
**必要な対応**: Hextraをアップグレードする前にHugoをv0.146.0+に更新
#### CSSクラスプレフィックス変更
**影響**: HextraコンポーネントクラスをターゲットにしたカスタムCSSがあるサイト
Hextra v0.10.0 では、メンテナンス性向上とユーザースタイルとの衝突防止のため、ほとんどのコンポーネントCSSクラスに一貫した `hextra-` プレフィックスを導入しました。
**必要な対応**: HextraコンポーネントをターゲットにしたカスタムCSSがある場合、以下のクラス名を更新してください:
| 領域 | 変更前 | 変更後 |
| -------------------- | ---------------------------- | ------------------------------------------------- |
| 検索 (コンテナ) | `.search-wrapper` | `.hextra-search-wrapper` |
| 検索 (入力) | `.search-input` | `.hextra-search-input` |
| 検索 (結果) | `.search-results` | `.hextra-search-results` |
| 検索 (タイトル) | `.search-wrapper .title` | `.hextra-search-wrapper .hextra-search-title` |
| 検索 (アクティブ項目)| `.search-wrapper .active` | `.hextra-search-wrapper .hextra-search-active` |
| 検索 (結果なし) | `.search-wrapper .no-result` | `.hextra-search-wrapper .hextra-search-no-result` |
| 検索 (プレフィックス)| `.search-wrapper .prefix` | `.hextra-search-wrapper .hextra-search-prefix` |
| 検索 (抜粋) | `.search-wrapper .excerpt` | `.hextra-search-wrapper .hextra-search-excerpt` |
| 検索 (マッチ) | `.search-wrapper .match` | `.hextra-search-wrapper .hextra-search-match` |
| ナビバーブラー | `.nav-container-blur` | `.hextra-nav-container-blur` |
| ハンバーガーメニュー | `.hamburger-menu` | `.hextra-hamburger-menu` |
| テーマトグル | `.theme-toggle` | `.hextra-theme-toggle` |
| 言語スイッチャー | `.language-switcher` | `.hextra-language-switcher` |
| サイドバーコンテナ | `.sidebar-container` | `.hextra-sidebar-container` |
| サイドバーアクティブ項目 | `.sidebar-active-item` | `.hextra-sidebar-active-item` |
| コードファイル名 | `.filename` | `.hextra-code-filename` |
| コピーアイコン | `.copy-icon` | `.hextra-copy-icon` |
| 成功アイコン | `.success-icon` | `.hextra-success-icon` |
| ステップ | `.steps` | `.hextra-steps` |
#### KaTeXとMermaidのアセット管理
**影響**: KaTeXまたはMermaidを使用しているサイト
Hextra v0.10.0 では、KaTeXとMermaidアセットをビルド時にCDNからダウンロードするようになりました。
**変更点:**
- これらのアセットをダウンロードするため、ビルドプロセスでインターネットアクセスが必要
- ビルド後はこれらのアセットに対する外部CDN呼び出しが不要
**必要な対応**:
- アセットをダウンロードするため、ビルド環境がインターネットに接続できることを確認
- エアギャップ環境のサイトでは、これらのアセットを事前にダウンロードし、Hextraがそれらを読み込むように設定する必要がある場合があります
#### Tailwind CSS v4
**影響**: HextraのTailwindクラス `hx-*` を広範囲にカスタマイズしているサイト
HextraはTailwind CSS v4移行を内部で処理しますが、高度にカスタマイズされたサイトでは追加の調整が必要な場合があります。
**変更点:**
- 内部CSSコンパイルにTailwind CSS v4.xを使用
- ユーティリティクラスのプレフィックスが `hx-` から `hx:` に変更
## コントリビューター
このリリースは、10名の新規コントリビューターの貢献によって実現されました:
- [@oosquare](https://github.com/oosquare) - KaTeXフォント、画像レンダーフック、リンク処理の改善
- [@Zabriskije](https://github.com/Zabriskije) - ファントムスクロールの修正
- [@miniwater](https://github.com/miniwater) - カスタムフッターの中央揃え、画像altテキストの改善
- [@MattDodsonEnglish](https://github.com/MattDodsonEnglish) - Googleインデックス制御、OpenGraphドキュメント
- [@KStocky](https://github.com/KStocky) - 逆順ページネーション機能
- [@PrintN](https://github.com/PrintN) - ドキュメントショーケースの追加
- [@hobobandy](https://github.com/hobobandy) - タイトル間隔の改善
- [@dlwocks31](https://github.com/dlwocks31) - 韓国語翻訳の更新
- [@TwoAnts](https://github.com/TwoAnts) - Giscusテーマ切り替えの修正
- [@ldez](https://github.com/ldez) - 検索機能の改善とバグ修正
継続的なサポート、ドキュメント、翻訳、技術的改善を提供してくださった [@deining](https://github.com/deining) と [@yuri1969](https://github.com/yuri1969) にも感謝します。
**完全な変更履歴**: https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0

26
exampleSite/content/docs/_index.ja.md
View File

@@ -1,9 +1,9 @@
--- ---
linkTitle: "ドキュメンテーション" linkTitle: "ドキュメント"
title: イントロダクション title: はじめに
--- ---
👋 こんにちは！Hextraのドキュメンテーションへようこそ！ 👋 こんにちは！Hextra ドキュメントへようこそ！
<!--more--> <!--more-->
@@ -13,26 +13,26 @@ Hextraは、[Tailwind CSS][tailwind-css]を使用して構築された、モダ
## 特徴 ## 特徴
- **美しいデザイン** - Nextraにインスパイアされ、Tailwind CSSを活用してモダンなデザインを提供し、サイトを際立たせます。 - **美しいデザイン** - Nextra にインスパイアされ、Tailwind CSS を活用したモダンなデザインで、サイトを際立たせます。
- **レスポンシブレイアウトとダークモード** - モバイル、タブレット、デスクトップなど、すべてのデバイスで美しく表示されます。また、ダークモードもサポートされており、さまざまな照明条件に対応します。 - **レスポンシブレイアウトとダークモード** - モバイル、タブレット、デスクトップなど、すべてのデバイスで美しく表示されます。また、さまざまな照明条件に対応するため、ダークモードもサポートされています。
- **高速で軽量** - 単一のバイナリファイルに収められた超高速の静的サイトジェネレータであるHugoを採用し、Hextraはそのフットプリントを最小限に抑えています。JavaScriptやNode.jsは必要ありません。 - **高速で軽量** - 単一のバイナリファイルで提供される超高速な静的サイトジェネレータ Hugo を採用しており、Hextra はフットプリントを最小限に抑えています。JavaScript や Node.js は必要ありません。
- **全文検索** - FlexSearch を利用したオフライン全文検索が組み込まれており、追加の設定は不要です。 - **全文検索** - FlexSearch を利用したオフライン全文検索が組み込まれており、追加の設定は不要です。
- **機能豊富** - Markdown、シンタックスハイライト、LaTeX数式、ダイアグラム、ショートコード要素など、コンテンツを強化するための機能を提供します。目次、パンくずリスト、ページネーション、サイドバーナビゲーションなどが自動生成されます。 - **バッテリーインクルード** - コンテンツを強化するための Markdown、シンタックスハイライト、LaTeX 数式、ダイアグラム、ショートコード要素が利用可能です。目次、パンくずリスト、ページネーション、サイドバーナビゲーションなどはすべて自動生成されます。
- **多言語対応とSEO対応** - Hugoの多言語モードを使用して、多言語サイトを簡単に作成できます。SEOタグ、Open Graph、Twitter Cardsのサポートも標準で提供されます。 - **多言語対応とSEO準備完了** - Hugo の多言語モードを利用して、多言語サイトを簡単に構築できます。SEO タグ、Open Graph、Twitter Cards のサポートも標準で提供されています。
## 質問やフィードバックは？ ## 質問やフィードバック
{{< callout emoji="❓" >}} {{< callout emoji="❓" >}}
Hextraはまだ活発に開発中です。 Hextra は現在も活発に開発中です。
質問やフィードバックがありますか？[issueを開いて](https://github.com/imfing/hextra/issues)お気軽にお知らせください！ 質問やフィードバックがありましたら、[issue を開いて](https://github.com/imfing/hextra/issues)ください！
{{< /callout >}} {{< /callout >}}
## 次に ## 次に
以下のセクションに進んで、すぐに始めましょう： 以下のセクションから始めましょう：
{{< cards >}} {{< cards >}}
{{< card link="getting-started" title="はじめに" icon="document-text" subtitle="Hextraを使用してウェブサイトを作成する方法を学ぶ" >}} {{< card link="getting-started" title="はじめに" icon="document-text" subtitle="Hextra を使ってウェブサイトを作成する方法を学ぶ" >}}
{{< /cards >}} {{< /cards >}}
[hugo]: https://gohugo.io/ [hugo]: https://gohugo.io/

6
exampleSite/content/docs/advanced/_index.ja.md
View File

@@ -1,11 +1,11 @@
--- ---
linkTitle: 上級者向け linkTitle: 高度な設定
title: 上級者向けトピック title: 高度なトピック
prev: /docs/guide/shortcodes/tabs prev: /docs/guide/shortcodes/tabs
next: /docs/advanced/multi-language next: /docs/advanced/multi-language
--- ---
このセクションでは、テーマの上級者向けトピックをカバーします。 このセクションでは、テーマの高度なトピックについて説明します。
<!--more--> <!--more-->

14
exampleSite/content/docs/advanced/comments.ja.md
View File

@@ -3,16 +3,16 @@ title: コメントシステム
linkTitle: コメント linkTitle: コメント
--- ---
Hextraは、サイトにコメントシステムを追加することをサポートしています。 Hextra はサイトにコメントシステムを追加する機能をサポートしています。
現在、[giscus](https://giscus.app/)がサポートされています。 現在 [giscus](https://giscus.app/) が利用可能です。
<!--more--> <!--more-->
## giscus ## giscus
[giscus](https://giscus.app/)は、[GitHub Discussions](https://docs.github.com/ja/discussions)を利用したコメントシステムです。無料でオープンソースです。 [giscus](https://giscus.app/) は [GitHub Discussions](https://docs.github.com/ja/discussions) を利用したコメントシステムです。無料でオープンソースです。
giscusを有効にするには、サイトの設定ファイルに以下を追加する必要があります： giscus を有効にするには、サイト設定ファイルに以下を追加してください:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -27,13 +27,13 @@ params:
categoryId: <カテゴリID> categoryId: <カテゴリID>
``` ```
giscusの設定は、[giscus.app](https://giscus.app/)のウェブサイトから構築できます。詳細もそこで確認できます。 giscus の設定は [giscus.app](https://giscus.app/) ウェブサイトから構築できます。詳細もそちらで確認できます。
特定のページでコメントを有効または無効にするには、ページのフロントマターに以下を追加します： 特定のページでコメントを有効/無効にするには、ページのフロントマターで設定します:
```yaml {filename="content/docs/about.md"} ```yaml {filename="content/docs/about.md"}
--- ---
title: について title: このサイトについて
comments: true comments: true
--- ---
``` ```

108
exampleSite/content/docs/advanced/customization.ja.md
View File

@@ -3,18 +3,18 @@ title: Hextraのカスタマイズ
linkTitle: カスタマイズ linkTitle: カスタマイズ
--- ---
Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトのカスタマイズオプションを提供し、テーマを設定できます。 Hextraは、`hugo.yaml`設定ファイル内でテーマを設定するためのデフォルトのカスタマイズオプションを提供しています。
このページでは、利用可能なオプションと、テーマをさらにカスタマイズする方法について説明します。 このページでは、利用可能なオプションとテーマをさらにカスタマイズする方法について説明します。
<!--more--> <!--more-->
## カスタムCSS ## カスタムCSS
カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成する必要があります。Hextraはこのファイルを自動的に読み込みます。 カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成します。Hextraはこのファイルを自動的に読み込みます。
### フォントファミリー ### フォントファミリー
コンテンツのフォントファミリーは、以下のようにカスタマイズできます： コンテンツのフォントファミリーは以下のようにカスタマイズできます:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content { .content {
@@ -24,7 +24,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
### インラインコード要素 ### インラインコード要素
`other text`と混在するテキストの色は、以下のようにカスタマイズできます： `他のテキスト`と混在するテキストの色は以下のようにカスタマイズできます:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content code:not(.code-block code) { .content code:not(.code-block code) {
@@ -34,7 +34,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
### プライマリカラー ### プライマリカラー
テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます： テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
:root { :root {
@@ -44,9 +44,42 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
} }
``` ```
### テーマのさらなるカスタマイズ ### コンポーネントレイアウト変数
テーマは、公開されているCSSクラスを介してデフォルトのスタイルをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例： Hextraは、ページ、ナビゲーションバー、フッターの幅をカスタマイズするためのCSS変数を提供しています:
```css {filename="assets/css/custom.css"}
:root {
/* ページ幅 - hugo.yamlのparams.page.widthでも設定可能 */
--hextra-max-page-width: 80rem; /* デフォルト: 80rem (標準), 90rem (ワイド), 100% (フル) */
/* ナビゲーションバー幅 - hugo.yamlのparams.navbar.widthでも設定可能 */
--hextra-max-navbar-width: 90rem; /* 独立したナビゲーションバー幅 */
/* フッター幅 - hugo.yamlのparams.footer.widthでも設定可能 */
--hextra-max-footer-width: 80rem; /* 独立したフッター幅 */
}
```
### Tailwindテーマ変数
Tailwind CSS v4をベースにしたHextra v0.10.0以降では、`@layer theme`ブロック内でCSS変数をオーバーライドすることでテーマをカスタマイズできます。
これにより、個々のクラスを変更することなく、グローバルな外観をカスタマイズできます。
```css {filename="assets/css/custom.css"}
@layer theme {
:root {
--hx-default-mono-font-family: "JetBrains Mono", monospace;
}
}
```
詳細については、[Tailwindテーマ変数のドキュメント](https://tailwindcss.com/docs/theme#default-theme-variable-reference)を参照してください。
### さらなるテーマカスタマイズ
テーマは、公開されているCSSクラスをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.hextra-footer { .hextra-footer {
@@ -94,7 +127,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
##### ステップ ##### ステップ
- `steps` - ステップコンテナ - `hextra-steps` - ステップコンテナ
##### タブ ##### タブ
@@ -111,9 +144,9 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
#### ナビゲーションバー #### ナビゲーションバー
- `nav-container` - ナビゲーションバーコンテナ - `hextra-nav-container` - ナビゲーションバーコンテナ
- `nav-container-blur` - ナビゲーションバーコンテナのぼかし要素 - `hextra-nav-container-blur` - ブラー効果付きナビゲーションバーコンテナ
- `hamburger-menu` - ハンバーガーメニューボタン - `hextra-hamburger-menu` - ハンバーガーメニューボタン
#### フッター #### フッター
@@ -122,9 +155,18 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
#### 検索 #### 検索
- `search-wrapper` - 検索ラッパーコンテナ - `hextra-search-wrapper` - 検索ラッパーコンテナ
- `search-input` - 検索入力要素 - `hextra-search-input` - 検索入力要素
- `search-results` - 検索結果リストコンテナ - `hextra-search-results` - 検索結果リストコンテナ
検索UI内で使用されるオプションのネストされたクラス:
- `hextra-search-title` - 結果タイトル要素
- `hextra-search-active` - アクティブな結果アンカー
- `hextra-search-no-result` - 空の状態要素
- `hextra-search-prefix` - グループ化された結果のパンくずリスト/プレフィックスラベル
- `hextra-search-excerpt` - 結果スニペットテキスト
- `hextra-search-match` - ハイライトされたクエリスパン
#### 目次 #### 目次
@@ -132,27 +174,29 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
#### サイドバー #### サイドバー
- `mobile-menu-overlay` - モバイルメニューのオーバーレイ要素 - `hextra-sidebar-container` - サイドバーコンテナ
- `sidebar-container` - サイドバーコンテナ - `hextra-sidebar-active-item` - サイドバーのアクティブアイテム
- `sidebar-active-item` - サイドバーのアクティブアイテム
#### 言語スイッチャー #### 言語スイッチャー
- `language-switcher` - 言語スイッチャーボタン - `hextra-language-switcher` - 言語スイッチャーボタン
- `language-options` - 言語オプションコンテナ - `hextra-language-options` - 言語オプションコンテナ
#### テーマトグル #### テーマトグル
- `theme-toggle` - テーマトグルボタン - `hextra-theme-toggle` - テーマトグルボタン
#### コードコピーボタン #### コードコピーボタン
- `hextra-code-copy-btn-container` - コードコピーボタンコンテナ - `hextra-code-copy-btn-container` - コードコピーボタンコンテナ
- `hextra-code-copy-btn` - コードコピーボタン - `hextra-code-copy-btn` - コードコピーボタン
- `hextra-copy-icon` - コピーアイコン要素
- `hextra-success-icon` - 成功アイコン要素
#### コードブロック #### コードブロック
- `hextra-code-block` - コードブロックコンテナ - `hextra-code-block` - コードブロックコンテナ
- `hextra-code-filename` - コードブロックのファイル名要素
#### フィーチャーカード #### フィーチャーカード
@@ -162,13 +206,9 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
- `hextra-feature-grid` - フィーチャーグリッドコンテナ - `hextra-feature-grid` - フィーチャーグリッドコンテナ
#### パンくずリスト
パンくずリスト用の特定のクラスはありません。
### シンタックスハイライト ### シンタックスハイライト
利用可能なシンタックスハイライトテーマのリストは、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます： 利用可能なシンタックスハイライトテーマの一覧は、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます:
```shell ```shell
hugo gen chromastyles --style=github hugo gen chromastyles --style=github
@@ -178,34 +218,34 @@ hugo gen chromastyles --style=github
## カスタムスクリプト ## カスタムスクリプト
すべてのページのheadの最後にカスタムスクリプトを追加するには、以下のファイルを追加します： すべてのページのheadの終わりにカスタムスクリプトを追加するには、以下のファイルを作成します:
``` ```
layouts/partials/custom/head-end.html layouts/partials/custom/head-end.html
``` ```
## フッターのカスタムセクション ## フッターへのカスタムセクション追加
フッターに追加のセクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。 フッターに追加セクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。
```html {filename="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/)を使用して、独自のコンテンツを追加できます。 [HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して独自のコンテンツを追加できます。
フッターセクションで利用可能なHugo変数は、`.switchesVisible`と`.copyrightVisible`です。 フッターセクションで利用可能なHugo変数: `.switchesVisible`と`.displayCopyright`。
## カスタムレイアウト ## カスタムレイアウト
テーマのレイアウトは、サイトの`layouts`ディレクトリ内に同じ名前のファイルを作成することでオーバーライドできます。 テーマのレイアウトは、サイトの`layouts`ディレクトリに同じ名前のファイルを作成することでオーバーライドできます。
例えば、ドキュメント用の`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。 例えば、ドキュメントの`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。 詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。
## さらなるカスタマイズ ## さらなるカスタマイズ
探しているものが見つかりませんでしたか？[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマに貢献してください！ 探しているものが見つかりませんでしたか？[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマへの貢献をお願いします！
[hugo-template-docs]: https://gohugo.io/templates/ [hugo-template-docs]: https://gohugo.io/templates/

18
exampleSite/content/docs/advanced/multi-language.ja.md
View File

@@ -4,13 +4,13 @@ weight: 1
prev: /docs/advanced prev: /docs/advanced
--- ---
Hextraは、Hugoの[多言語モード](https://gohugo.io/content-management/multilingual/)を使用して、複数の言語でサイトを作成することをサポートしています。 Hextra は Hugo の [多言語モード](https://gohugo.io/content-management/multilingual/) を使用して、複数言語のサイトを作成することをサポートしています。
<!--more--> <!--more-->
## 多言語対応を有効にする ## 多言語対応を有効にする
サイトを多言語対応にするためには、Hugoにサポートする言語を伝える必要があります。サイトの設定ファイルに以下を追加します： サイトを多言語対応にするには、Hugo にサポートする言語を伝える必要があります。サイト設定ファイルに以下を追加します:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
defaultContentLanguage: en defaultContentLanguage: en
@@ -28,7 +28,7 @@ languages:
## ファイル名による翻訳管理 ## ファイル名による翻訳管理
Hugoは、ファイル名による翻訳管理をサポートしています。例えば、英語のファイル `content/docs/_index.md` がある場合、フランス語の翻訳用に `content/docs/_index.fr.md` というファイルを作成できます。 Hugo はファイル名による翻訳管理をサポートしています。例えば、英語のファイル `content/docs/_index.md` がある場合、フランス語の翻訳用に `content/docs/_index.fr.md` というファイルを作成できます。
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@@ -44,7 +44,7 @@ Hugoは、ファイル名による翻訳管理をサポートしています。
## メニュー項目の翻訳 ## メニュー項目の翻訳
ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります： ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -59,7 +59,7 @@ menu:
weight: 2 weight: 2
``` ```
そして、対応するi18nファイルで翻訳します： そして、対応する i18n ファイルで翻訳します:
```yaml {filename="i18n/fr.yaml"} ```yaml {filename="i18n/fr.yaml"}
documentation: Documentation documentation: Documentation
@@ -68,16 +68,16 @@ blog: Blog
## 文字列の翻訳 ## 文字列の翻訳
他の場所の文字列を翻訳するには、対応するi18nファイルに翻訳を追加する必要があります： 他の場所の文字列を翻訳するには、対応する i18n ファイルに翻訳を追加する必要があります:
```yaml {filename="i18n/fr.yaml"} ```yaml {filename="i18n/fr.yaml"}
readMore: Lire la suite readMore: Lire la suite
``` ```
テーマで使用されている文字列のリストは、`i18n/en.yaml` ファイルにあります。 テーマで使用される文字列の一覧は `i18n/en.yaml` ファイルで確認できます。
## さらに詳しく ## さらに詳しく
- [Hugo 多言語モード](https://gohugo.io/content-management/multilingual/) - [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 多言語対応 パート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/) - [Hugo 多言語対応 パート2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

54
exampleSite/content/docs/getting-started.ja.md
View File

@@ -2,13 +2,13 @@
title: はじめに title: はじめに
weight: 1 weight: 1
tags: tags:
- ドキュメント - Docs
- ガイド - Guide
next: /docs/guide next: /docs/guide
prev: /docs prev: /docs
--- ---
## テンプレートからクイックスタート ## テンプレートから始める
{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template) {{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
@@ -21,11 +21,11 @@ prev: /docs
[🌐 デモ ↗](https://imfing.github.io/hextra-starter-template/) [🌐 デモ ↗](https://imfing.github.io/hextra-starter-template/)
## 新しいプロジェクトとして始める ## 新規プロジェクトとして始める
HugoプロジェクトにHextraテーマを追加する主な方法は2つあります： Hugo プロジェクトに Hextra テーマを追加する主な方法は2つあります:
1. **Hugoモジュール（推奨）**: 最も簡単で推奨される方法です。[Hugoモジュール](https://gohugo.io/hugo-modules/)を使用すると、テーマを直接オンラインソースから取り込むことができます。テーマは自動的にダウンロードされ、Hugoによって管理されます。 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` フォルダに保存されます。 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` フォルダに保存されます。
@@ -33,9 +33,9 @@ HugoプロジェクトにHextraテーマを追加する主な方法は2つあり
#### 前提条件 #### 前提条件
開始する前に、以下のソフトウェアがインストールされている必要があります： 開始する前に、以下のソフトウェアがインストールされている必要があります:
- [Hugo（拡張版）](https://gohugo.io/installation/) - [Hugo (拡張版)](https://gohugo.io/installation/)
- [Git](https://git-scm.com/) - [Git](https://git-scm.com/)
- [Go](https://go.dev/) - [Go](https://go.dev/)
@@ -60,7 +60,7 @@ hugo mod init github.com/username/my-site
hugo mod get github.com/imfing/hextra hugo mod get github.com/imfing/hextra
``` ```
`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します： `hugo.yaml` を設定して Hextra テーマを使用するようにします:
```yaml ```yaml
module: module:
@@ -70,7 +70,7 @@ module:
### 最初のコンテンツページを作成 ### 最初のコンテンツページを作成
ホームページとドキュメントページの新しいコンテンツページを作成します： ホームページとドキュメントページの新しいコンテンツページを作成します:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
@@ -83,20 +83,20 @@ hugo new content/docs/_index.md
hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
これで、新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。 これで、新しいサイトのプレビューが `http://localhost:1313/` で利用可能になります。
{{% /steps %}} {{% /steps %}}
{{% details title="テーマを更新するには？" %}} {{% details title="テーマを更新するには？" %}}
プロジェクト内のすべてのHugoモジュールを最新バージョンに更新するには、次のコマンドを実行します： プロジェクト内のすべての Hugo モジュールを最新バージョンに更新するには、次のコマンドを実行します:
```shell ```shell
hugo mod get -u hugo mod get -u
``` ```
Hextraを[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します： Hextra を[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します:
```shell ```shell
hugo mod get -u github.com/imfing/hextra hugo mod get -u github.com/imfing/hextra
@@ -110,9 +110,9 @@ hugo mod get -u github.com/imfing/hextra
#### 前提条件 #### 前提条件
開始する前に、以下のソフトウェアがインストールされている必要があります： 開始する前に、以下のソフトウェアがインストールされている必要があります:
- [Hugo（拡張版）](https://gohugo.io/installation/) - [Hugo (拡張版)](https://gohugo.io/installation/)
- [Git](https://git-scm.com/) - [Git](https://git-scm.com/)
#### 手順 #### 手順
@@ -125,22 +125,22 @@ hugo mod get -u github.com/imfing/hextra
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### HextraテーマをGitサブモジュールとして追加 ### Git サブモジュールとして Hextra テーマを追加
サイトディレクトリに移動し、新しいGitリポジトリを初期化します： サイトディレクトリに移動して新しい Git リポジトリを初期化します:
```shell ```shell
cd my-site cd my-site
git init git init
``` ```
次に、HextraテーマをGitサブモジュールとして追加します： 次に、Hextra テーマを Git サブモジュールとして追加します:
```shell ```shell
git submodule add https://github.com/imfing/hextra.git themes/hextra git submodule add https://github.com/imfing/hextra.git themes/hextra
``` ```
`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します： `hugo.yaml` を設定して Hextra テーマを使用するようにします:
```yaml ```yaml
theme: hextra theme: hextra
@@ -148,7 +148,7 @@ theme: hextra
### 最初のコンテンツページを作成 ### 最初のコンテンツページを作成
ホームページとドキュメントページの新しいコンテンツページを作成します： ホームページとドキュメントページの新しいコンテンツページを作成します:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
@@ -161,29 +161,29 @@ hugo new content/docs/_index.md
hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。 新しいサイトのプレビューが `http://localhost:1313/` で利用可能になります。
{{% /steps %}} {{% /steps %}}
[CI/CD](https://ja.wikipedia.org/wiki/CI/CD)を使用してHugoウェブサイトをデプロイする場合、`hugo`コマンドを実行する前に以下のコマンドを実行することが重要です。 Hugo ウェブサイトのデプロイに [CI/CD](https://ja.wikipedia.org/wiki/CI/CD) を使用する場合、`hugo` コマンドを実行する前に以下のコマンドを実行することが重要です。
```shell ```shell
git submodule update --init git submodule update --init
``` ```
このコマンドを実行しないと、テーマフォルダにHextraテーマファイルが取り込まれず、ビルドが失敗します。 このコマンドを実行しないと、テーマフォルダに Hextra テーマファイルが配置されず、ビルドが失敗します。
{{% details title="テーマを更新するには？" %}} {{% details title="テーマを更新するには？" %}}
リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します： リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します:
```shell ```shell
git submodule update --remote git submodule update --remote
``` ```
Hextraを最新のコミットに更新するには、次のコマンドを実行します： Hextra を最新のコミットに更新するには、次のコマンドを実行します:
```shell ```shell
git submodule update --remote themes/hextra git submodule update --remote themes/hextra
@@ -193,9 +193,9 @@ git submodule update --remote themes/hextra
{{% /details %}} {{% /details %}}
## 次へ ## 次に
以下のセクションを探索して、さらにコンテンツを追加し始めましょう： 以下のセクションを探索して、さらにコンテンツを追加しましょう:
{{< cards >}} {{< cards >}}
{{< card link="../guide/organize-files" title="ファイルの整理" icon="document-duplicate" >}} {{< card link="../guide/organize-files" title="ファイルの整理" icon="document-duplicate" >}}

2
exampleSite/content/docs/guide/_index.ja.md
View File

@@ -7,7 +7,7 @@ sidebar:
open: true open: true
--- ---
Hextraの使い方を学ぶために、以下のセクションを探索してください: Hextra の使い方を学ぶには、以下のセクションを参照してください:
<!--more--> <!--more-->

191
exampleSite/content/docs/guide/configuration.ja.md
View File

@@ -1,11 +1,13 @@
--- ---
title: 設定 title: 設定
weight: 2 weight: 2
tags:
- 設定
--- ---
Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取ります。 Hugo はサイトのルートにある `hugo.yaml` から設定を読み込みます。
この設定ファイルでは、サイトのすべての側面を設定できます。 この設定ファイルであなたのサイトのあらゆる側面を設定できます。
利用可能な設定とベストプラクティスの包括的な理解を得るために、GitHub上のこのサイトの設定ファイル[`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml)をチェックしてください。 利用可能な設定項目とベストプラクティスを網羅的に理解するには、GitHub 上のこのサイトの設定ファイル [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) を参照してください。
<!--more--> <!--more-->
@@ -13,7 +15,7 @@ Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取
### メニュー ### メニュー
右上のメニューは、設定ファイルの`menu.main`セクションで定義されます： 右上のメニューは設定ファイルの `menu.main` セクションで定義されます：
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -24,7 +26,7 @@ menu:
- name: ブログ - name: ブログ
pageRef: /blog pageRef: /blog
weight: 2 weight: 2
- name: について - name: このサイトについて
pageRef: /about pageRef: /about
weight: 3 weight: 3
- name: 検索 - name: 検索
@@ -38,19 +40,19 @@ menu:
icon: github icon: github
``` ```
メニュー項目にはさまざまなタイプがあります： メニュー項目にはいくつかの種類があります：
1. `pageRef`を使用してサイト内のページにリンク 1. `pageRef` でサイト内のページにリンク
```yaml ```yaml
- name: ドキュメント - name: ドキュメント
pageRef: /docs pageRef: /docs
``` ```
2. `url`を使用して外部URLにリンク 2. `url` で外部URLにリンク
```yaml ```yaml
- name: GitHub - name: GitHub
url: "https://github.com" url: "https://github.com"
``` ```
3. `type: search`を使用して検索バーを表示 3. `type: search` で検索バー
```yaml ```yaml
- name: 検索 - name: 検索
params: params:
@@ -63,12 +65,33 @@ menu:
icon: github icon: github
``` ```
これらのメニュー項目は、`weight`パラメータを設定して並べ替えることができます。 これらのメニュー項目は `weight` パラメータを設定することで並べ替えられます。
### ネストされたメニュー
子メニュー項目を定義することでドロップダウンメニューを作成できます。親メニュー項目をクリックすると子メニューが表示されます。
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: sdk
name: SDK
- identifier: python
name: Python ↗
url: https://python.org
parent: sdk
- identifier: go
name: Go
url: https://go.dev
parent: sdk
```
子メニュー項目は親の `identifier` 値を `parent` パラメータで指定する必要があります。
### ロゴとタイトル ### ロゴとタイトル
デフォルトのロゴを変更するには、`hugo.yaml` を編集し、`static` ディレクトリ下のロゴファイルへのパスを追加します。 デフォルトのロゴを変更するには、`hugo.yaml` を編集し、`static` ディレクトリ下のロゴファイルへのパスを追加します。
オプションで、ロゴをクリックしたときにユーザーがリダイレクトされるリンクや、ロゴの幅と高さをピクセル単位で設定できます。 オプションで、ロゴをクリックした際のリンク先や、ロゴの幅と高さ（ピクセル単位）を設定できます。
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -87,10 +110,10 @@ params:
### メインサイドバー ### メインサイドバー
メインサイドバーは、コンテンツディレクトリの構造から自動的に生成されます。 メインサイドバーはコンテンツディレクトリの構造から自動生成されます。
詳細については、[ファイルの整理](/docs/guide/organize-files)ページを参照してください。 詳細は [ファイルの整理](/docs/guide/organize-files) ページを参照してください。
左サイドバーから単一のページを除外するには、ページのフロントマターで`sidebar.exclude`パラメータを設定します： 単一ページを左サイドバーから除外するには、ページのフロントマターで `sidebar.exclude` パラメータを設定します：
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -102,7 +125,7 @@ sidebar:
### 追加リンク ### 追加リンク
サイドバーの追加リンクは、設定ファイルの`menu.sidebar`セクションで定義されます： サイドバーの追加リンクは設定ファイルの `menu.sidebar` セクションで定義されます：
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -111,10 +134,10 @@ menu:
params: params:
type: separator type: separator
weight: 1 weight: 1
- name: "について" - name: "このサイトについて"
pageRef: "/about" pageRef: "/about"
weight: 2 weight: 2
- name: "Hugo Docs ↗" - name: "Hugo ドキュメント ↗"
url: "https://gohugo.io/documentation/" url: "https://gohugo.io/documentation/"
weight: 3 weight: 3
``` ```
@@ -123,7 +146,7 @@ menu:
### 目次 ### 目次
目次は、コンテンツファイルの見出しから自動的に生成されます。ページのフロントマターで`toc: false`を設定することで無効にできます。 目次はコンテンツファイルの見出しから自動生成されます。ページのフロントマターで `toc: false` を設定することで無効化できます。
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -143,8 +166,8 @@ params:
base: "https://github.com/your-username/your-repo/edit/main" base: "https://github.com/your-username/your-repo/edit/main"
``` ```
提供されたURLをルートディレクトリとして、各ページの編集リンクが自動的に生成されます。 編集リンクは提供されたURLをルートディレクトリとして各ページに対して自動生成されます。
特定のページの編集リンクを設定したい場合は、ページのフロントマターで`editURL`パラメータを設定します： 特定のページに対して編集リンクを設定したい場合は、ページのフロントマターで `editURL` パラメータを設定できます：
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -155,22 +178,22 @@ editURL: "https://example.com/edit/this/page"
## フッター ## フッター
### 著作権 ### 著作権表示
ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml`という名前のファイルを作成します。 ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml` という名前のファイルを作成する必要があります。
このファイルに、以下のように新しい著作権テキストを指定します： このファイルで、以下のように新しい著作権テキストを指定します：
```yaml {filename="i18n/en.yaml"} ```yaml {filename="i18n/en.yaml"}
copyright: "© 2024 YOUR TEXT HERE" copyright: "© 2024 ここにあなたのテキスト"
``` ```
参考として、GitHubリポジトリに[`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml)ファイルの例があります。また、著作権テキストにMarkdown形式を使用することもできます。 参考までに、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)を上書きします： サイトの [ファビコン](https://ja.wikipedia.org/wiki/Favicon) をカスタマイズするには、[テーマのデフォルトファビコン](https://github.com/imfing/hextra/tree/main/static) を上書きするために `static` フォルダの下にアイコンファイルを配置します：
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="static" >}} {{< filetree/folder name="static" >}}
@@ -186,14 +209,30 @@ copyright: "© 2024 YOUR TEXT HERE"
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
プロジェクトに`favicon.ico`、`favicon.svg`、`favicon-dark.svg`ファイルを含めて、サイトのファビコンが正しく表示されるようにします。 #### 基本設定
`favicon.ico`は一般的に古いブラウザ用ですが、`favicon.svg`と`favicon-dark.svg`は現代のブラウザでサポートされています。 最低限、`static` フォルダに `favicon.svg` を含めてください。これがサイトのデフォルトファビコンとして使用されます。
[favicon.io](https://favicon.io/)や[favycon](https://github.com/ruisaraiva19/favycon)などのツールを使用して、このようなアイコンを生成できます。
SVG 内で CSS メディアクエリを使用することで、システムのテーマ設定に応答する適応型 SVG ファビコンを作成できます。このアプローチは [適応型ファビコンの構築](https://web.dev/articles/building/an-adaptive-favicon) で説明されています。
#### ダークモード対応
強化されたダークモードサポートのために、`favicon.svg` と一緒に `favicon-dark.svg` を `static` フォルダに追加してください。両方のファイルが存在する場合、Hextra は自動的に：
- ライトモードまたはテーマ設定が検出されない場合に `favicon.svg` を使用
- ユーザーのシステムがダークモードに設定されている場合に `favicon-dark.svg` に切り替え
- 自動切り替えのためにシステムの `prefers-color-scheme` 設定を尊重
ダークモードファビコンの切り替えは Firefox を含むすべての最新ブラウザで動作し、サイトのテーマにマッチしたシームレスな体験を提供します。
#### 追加フォーマット
`favicon.ico` は一般的に古いブラウザ向けですが、最新のブラウザはスケーラビリティとファイルサイズの小ささが好まれる SVG ファビコンをサポートしています。
必要に応じて [favicon.io](https://favicon.io/) や [favycon](https://github.com/ruisaraiva19/favycon) などのツールを使用して追加のファビコンフォーマットを生成できます。
### テーマ設定 ### テーマ設定
`theme`設定を使用して、デフォルトのテーマモードとトグルボタンを設定し、訪問者がライトモードとダークモードを切り替えられるようにします。 `theme` 設定を使用してデフォルトのテーマモードとトグルボタンを設定し、訪問者がライトモードとダークモードを切り替えられるようにします。
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -209,12 +248,28 @@ params:
- `dark` - 常にダークモードを使用 - `dark` - 常にダークモードを使用
- `system` - オペレーティングシステムの設定と同期（デフォルト） - `system` - オペレーティングシステムの設定と同期（デフォルト）
`theme.displayToggle`パラメータを使用して、テーマを変更するためのトグルボタンを表示できます。 `theme.displayToggle` パラメータはテーマを変更するためのトグルボタンを表示します。
`true`に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えることができます。 `true` に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えられます。
### ページ最終更新日
ページの最終更新日を表示するには、`params.displayUpdatedDate` フラグを有効にします。Git コミット日付をソースとして使用するには、`enableGitInfo` フラグも有効にします。
日付形式をカスタマイズするには、`params.dateFormat` パラメータを設定します。そのレイアウトは Hugo の [`time.Format`](https://gohugo.io/functions/time/format/) に準拠します。
```yaml {filename="hugo.yaml"}
# Git コミットを解析
enableGitInfo: true
params:
# 最終更新日を表示
displayUpdatedDate: true
dateFormat: "2006年1月2日"
```
### タグ ### タグ
ページのタグを表示するには、設定ファイルで次のフラグを設定してください: ページタグを表示するには、設定ファイルで以下のフラグを設定します：
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -227,7 +282,7 @@ params:
### ページ幅 ### ページ幅
ページの幅は、設定ファイルの`params.page.width`パラメータでカスタマイズできます： ページの幅は設定ファイルの `params.page.width` パラメータでカスタマイズできます：
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -236,13 +291,13 @@ params:
width: wide width: wide
``` ```
利用可能なオプションは`full`、`wide`、`normal`です。デフォルトでは、ページ幅は`normal`に設定されています。 利用可能なオプションは `full`、`wide`、`normal` の3つです。デフォルトではページ幅は `normal` に設定されています。
同様に、ナビゲーションバーとフッターの幅は、`params.navbar.width`と`params.footer.width`パラメータでカスタマイズできます。 同様に、ナビゲーションバーとフッターの幅は `params.navbar.width` と `params.footer.width` パラメータでカスタマイズできます。
### 検索インデックス ### FlexSearch インデックス
[FlexSearch](https://github.com/nextapps-de/flexsearch)による全文検索はデフォルトで有効です。 [FlexSearch](https://github.com/nextapps-de/flexsearch) を利用した全文検索はデフォルトで有効です。
検索インデックスをカスタマイズするには、設定ファイルで `params.search.flexsearch.index` パラメータを設定します： 検索インデックスをカスタマイズするには、設定ファイルで `params.search.flexsearch.index` パラメータを設定します：
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
@@ -253,13 +308,13 @@ params:
type: flexsearch type: flexsearch
flexsearch: flexsearch:
# ページをインデックスする方法: content | summary | heading | title # インデックス対象: content | summary | heading | title
index: content index: content
``` ```
`flexsearch.index` のオプション： `flexsearch.index` のオプション：
- `content` - ページの全内容（デフォルト） - `content` - ページの全文（デフォルト）
- `summary` - ページの要約、詳細は [Hugo コンテンツ要約](https://gohugo.io/content-management/summaries/) を参照 - `summary` - ページの要約、詳細は [Hugo コンテンツ要約](https://gohugo.io/content-management/summaries/) を参照
- `heading` - レベル1とレベル2の見出し - `heading` - レベル1とレベル2の見出し
- `title` - ページタイトルのみを含める - `title` - ページタイトルのみを含める
@@ -268,6 +323,7 @@ params:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
search:
# ... # ...
flexsearch: flexsearch:
# full | forward | reverse | strict # full | forward | reverse | strict
@@ -281,7 +337,7 @@ params:
- `reverse` - 両方向に単語を増分的にインデックス - `reverse` - 両方向に単語を増分的にインデックス
- `full` - すべての可能な組み合わせをインデックス - `full` - すべての可能な組み合わせをインデックス
検索インデックスからページを除外するには、ページのフロントマターで`excludeSearch: true`を設定します： FlexSearch 検索インデックスからページを除外するには、ページのフロントマターで `excludeSearch: true` を設定します：
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -299,3 +355,56 @@ services:
googleAnalytics: googleAnalytics:
ID: G-MEASUREMENT_ID ID: G-MEASUREMENT_ID
``` ```
### Google 検索インデックス
ページを [Google 検索のインデックスからブロック](https://developers.google.com/search/docs/crawling-indexing/block-indexing) するには、ページのフロントマターで `noindex` を true に設定します：
```yaml
title: 設定（アーカイブ版）
params:
noindex: true
```
ディレクトリ全体を除外するには、親の `_index.md` ファイルで [`cascade`](https://gohugo.io/configuration/cascade/) キーを使用します。
> [!NOTE]
> 検索クローラーをブロックするには、[`robots.txt` テンプレート](https://gohugo.io/templates/robots/) を作成できます。
> ただし、`robots.txt` の指示は必ずしも Google 検索結果からページを除外するわけではありません。
### LLMS.txt サポート
サイトの [大規模言語モデル](https://ja.wikipedia.org/wiki/大規模言語モデル) や AI エージェント向けの構造化テキストアウトラインを提供する [llms.txt](https://llmstxt.org/) 出力形式を有効にするには、サイトの `hugo.yaml` に `llms` 出力形式を追加します：
```diff {filename="hugo.yaml"}
outputs:
- home: [html]
+ home: [html, llms]
page: [html]
section: [html, rss]
```
これにより、サイトのルートに `llms.txt` ファイルが生成され、以下が含まれます：
- サイトタイトルと説明
- すべてのセクションとページの階層リスト
- ページの要約と公開日
- すべてのコンテンツへの直接リンク
llms.txt ファイルはコンテンツ構造から自動生成され、AI ツールや言語モデルがコンテキストや参照のためにあなたのサイトにアクセスしやすくします。
### Open Graph
ページに [Open Graph](https://ogp.me/) メタデータを追加するには、フロントマターの params に値を追加します。
ページは複数の `image` と `video` タグを持つことができるため、それらの値は配列に配置します。
他の Open Graph プロパティは単一の値のみを持つことができます。
例えば、このページには `og:image` タグ（ソーシャルシェアでプレビューする画像を設定）と `og:audio` タグがあります。
```yaml {filename="content/docs/guide/configuration.md"}
title: "設定"
params:
images:
- "/img/config-image.jpg"
audio: "config-talk.mp3"
```

87
exampleSite/content/docs/guide/deploy-site.ja.md
View File

@@ -4,24 +4,24 @@ prev: /docs/guide/shortcodes
next: /docs/advanced next: /docs/advanced
--- ---
Hugoは静的サイトを生成するため、柔軟なホスティングオプションが可能です。 Hugo は静的サイトを生成するため、柔軟なホスティングオプションが利用可能です。
このページでは、Hextraサイトをさまざまなプラットフォームにデプロイするためのガイドを提供します。 このページでは、Hextra サイトを様々なプラットフォームにデプロイする方法を解説します。
<!--more--> <!--more-->
## GitHub Pages ## GitHub Pages
[GitHub Pages](https://docs.github.com/pages)は、無料でウェブサイトをデプロイおよびホストするための推奨方法です。 [GitHub Pages](https://docs.github.com/pages) は無料でサイトをデプロイ・ホストするための推奨方法です。
[hextra-starter-template](https://github.com/imfing/hextra-starter-template)を使用してサイトをブートストラップした場合、GitHub Pagesへの自動デプロイを支援するGitHub Actionsワークフローがすぐに利用可能です。 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) を使用してサイトを構築した場合、GitHub Pages への自動デプロイを支援する GitHub Actions ワークフローが最初から用意されています。
{{% details title="GitHub Actionsの設定" closed="true" %}} {{% details title="GitHub Actions 設定" closed="true" %}}
以下は、[hextra-starter-template](https://github.com/imfing/hextra-starter-template)からの設定例です： 以下は [hextra-starter-template](https://github.com/imfing/hextra-starter-template) の設定例です:
```yaml {filename=".github/workflows/pages.yaml"} ```yaml {filename=".github/workflows/pages.yaml"}
# HugoサイトをGitHub Pagesにデプロイするためのサンプルワークフロー # Hugo サイトをビルドし GitHub Pages にデプロイするサンプルワークフロー
name: Deploy Hugo site to Pages name: Deploy Hugo site to Pages
on: on:
@@ -29,22 +29,21 @@ on:
push: push:
branches: ["main"] branches: ["main"]
# Actionsタブから手動でこのワークフローを実行可能 # Actions タブから手動で実行可能
workflow_dispatch: workflow_dispatch:
# GITHUB_TOKENの権限を設定してGitHub Pagesへのデプロイを許可 # GITHUB_TOKEN の権限を設定（GitHub Pages へのデプロイを許可）
permissions: permissions:
contents: read contents: read
pages: write pages: write
id-token: write id-token: write
# 同時実行を1つに制限し、進行中の実行と最新のキューイングされた実行の間の実行をスキップ。 # 同時実行を1つに制限（進行中の実行はキャンセルしない）
# ただし、進行中の実行はキャンセルしないでください。これらの本番デプロイを完了させたいためです。
concurrency: concurrency:
group: "pages" group: "pages"
cancel-in-progress: false cancel-in-progress: false
# デフォルトはbash # デフォルトシェルを bash に設定
defaults: defaults:
run: run:
shell: bash shell: bash
@@ -59,7 +58,7 @@ jobs:
- name: Checkout - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4
with: with:
fetch-depth: 0 # .GitInfoと.Lastmodのためにすべての履歴を取得 fetch-depth: 0 # .GitInfo と .Lastmod 用に全履歴を取得
submodules: recursive submodules: recursive
- name: Setup Go - name: Setup Go
uses: actions/setup-go@v5 uses: actions/setup-go@v5
@@ -74,7 +73,7 @@ jobs:
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb && sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: Build with Hugo - name: Build with Hugo
env: env:
# Hugoモジュールとの最大限の互換性のために # Hugo モジュールとの最大互換性のため
HUGO_ENVIRONMENT: production HUGO_ENVIRONMENT: production
HUGO_ENV: production HUGO_ENV: production
run: | run: |
@@ -103,13 +102,13 @@ jobs:
{{< callout >}} {{< callout >}}
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定します： リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定してください:
![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png) ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
{{< /callout >}} {{< /callout >}}
デフォルトでは、上記のGitHub Actionsワークフロー `.github/workflows/pages.yaml` は、サイトが `https://<USERNAME>.github.io/<REPO>/` にデプロイされることを前提としています。 デフォルトでは、上記の GitHub Actions ワークフロー `.github/workflows/pages.yaml` は `https://<USERNAME>.github.io/<REPO>/` へのデプロイを想定しています。
`https://<USERNAME>.github.io/` にデプロイする場合は、`--baseURL` を変更します： `https://<USERNAME>.github.io/` にデプロイする場合は `--baseURL` を修正してください:
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]} ```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
run: | run: |
@@ -118,47 +117,47 @@ run: |
--baseURL "https://${{ github.repository_owner }}.github.io/" --baseURL "https://${{ github.repository_owner }}.github.io/"
``` ```
独自のドメインにデプロイする場合は、`--baseURL` の値を適宜変更してください。 独自ドメインを使用する場合は、`--baseURL` の値を適宜変更してください。
## Cloudflare Pages ## Cloudflare Pages
1. サイトのソースコードをGitリポジトリ（例：GitHub）に配置します。 1. サイトのソースコードを Git リポジトリ（GitHub など）に配置
2. [Cloudflareダッシュボード](https://dash.cloudflare.com/)にログインし、アカウントを選択します。 2. [Cloudflare ダッシュボード](https://dash.cloudflare.com/) にログインしアカウントを選択
3. アカウントホームで、**Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択します。 3. Account Home で **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択
4. リポジトリを選択し、**Set up builds and deployments** セクションで以下の情報を提供します： 4. リポジトリを選択し、**Set up builds and deployments** セクションで以下を設定:
| 設定 | 値 | | 設定項目 | 値 |
| ---------------- | ------------------- | | ----------------- | -------------------- |
| 本番ブランチ | `main` | | Production branch | `main` |
| ビルドコマンド | `hugo --gc --minify` | | Build command | `hugo --gc --minify` |
| ビルドディレクトリ | `public` | | Build directory | `public` |
詳細については、以下を確認してください： 詳細は以下を参照:
- [Hugoサイトのデプロイ](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)。 - [Deploy a Hugo site](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/)。 - [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)
## Netlify ## Netlify
1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。 1. コードを Git リポジトリ（GitHub, GitLab など）にプッシュ
2. [プロジェクトをインポート](https://app.netlify.com/start)してNetlifyに追加します。 2. Netlify に [プロジェクトをインポート](https://app.netlify.com/start)
3. [hextra-starter-template][hextra-starter-template]を使用していない場合、以下の設定を手動で行います： 3. [hextra-starter-template][hextra-starter-template] を使用していない場合、以下を手動設定:
- ビルドコマンドを `hugo --gc --minify` に設定します。 - Build command を `hugo --gc --minify` に設定
- 公開ディレクトリを `public` に指定します。 - Publish directory を `public` に指定
- 環境変数 `HUGO_VERSION` を追加し、`0.147.7` に設定するか、`netlify.toml` ファイルに設定します。 - 環境変数 `HUGO_VERSION` を追加し `0.147.7` を設定、または `netlify.toml` ファイルで設定
4. デプロイします！ 4. デプロイ！
詳細については、[NetlifyでのHugo](https://docs.netlify.com/integrations/frameworks/hugo/)を確認してください。 詳細は [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) を参照
## Vercel ## Vercel
1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。 1. コードを Git リポジトリ（GitHub, GitLab など）にプッシュ
2. [Vercelダッシュボード](https://vercel.com/dashboard)に移動し、Hugoプロジェクトをインポートします。 2. [Vercel ダッシュボード](https://vercel.com/dashboard) に移動し Hugo プロジェクトをインポート
3. プロジェクトを設定し、フレームワークプリセットとしてHugoを選択します。 3. プロジェクトを設定、Framework Preset で Hugo を選択
4. ビルドコマンドとインストールコマンドを上書きします： 4. Build Command と Install command を上書き:
1. ビルドコマンドを `hugo --gc --minify` に設定します。 1. Build Command を `hugo --gc --minify` に設定
2. インストールコマンドを `yum install golang` に設定します。 2. Install Command を `yum install golang` に設定
![Vercel デプロイ設定](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3) ![Vercel デプロイ設定](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

24
exampleSite/content/docs/guide/diagrams.ja.md
View File

@@ -4,15 +4,15 @@ weight: 6
next: /docs/guide/shortcodes next: /docs/guide/shortcodes
--- ---
現在、Hextraはダイアグラムのために[Mermaid](#mermaid)をサポートしています。 現在、Hextra は [Mermaid](#mermaid) によるダイアグラム作成をサポートしています。
<!--more--> <!--more-->
## Mermaid ## Mermaid
[Mermaid](https://github.com/mermaid-js/mermaid#readme)は、JavaScriptベースのダイアグラムおよびチャート作成ツールで、Markdownにインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。 [Mermaid](https://github.com/mermaid-js/mermaid#readme) は、JavaScript ベースのダイアグラムおよびチャート作成ツールで、Markdown 風のテキスト定義をブラウザ上で動的にダイアグラムに変換します。例えば、Mermaid はフローチャート、シーケンス図、円グラフなどをレンダリングできます。
HextraでMermaidを使用するのは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です: Hextra で Mermaid を使用するには、言語を `mermaid` に設定したコードブロックを記述するだけです:
````markdown ````markdown
```mermaid ```mermaid
@@ -24,7 +24,7 @@ graph TD;
``` ```
```` ````
これは次のようにレンダリングされます: これは以下のようにレンダリングされます:
```mermaid ```mermaid
graph TD; graph TD;
@@ -34,20 +34,20 @@ graph TD;
C-->D; C-->D;
``` ```
シーケンス図: シーケンス図の例:
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob
Alice->>John: こんにちはJohn、元気ですか？ Alice->>John: Hello John, how are you?
loop 健康チェック loop Healthcheck
John->>John: 心気症と戦う John->>John: Fight against hypochondria
end end
Note right of John: 理性的な思考 <br/>が勝つ！ Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: 元気です！ John-->>Alice: Great!
John->>Bob: あなたはどうですか？ John->>Bob: How about you?
Bob-->>John: とても元気です！ Bob-->>John: Jolly good!
``` ```
詳細については、[Mermaid ドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。 詳細については、[Mermaid ドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。

93
exampleSite/content/docs/guide/latex.ja.md
View File

@@ -3,32 +3,35 @@ title: "LaTeX"
weight: 4 weight: 4
--- ---
デフォルトでは、\(\KaTeX\) が LaTeX 数式のレンダリングに使用されます。 LaTeX の数式表現はデフォルトで \(\KaTeX\) を使用してレンダリングされます。特別な設定なしで、Markdown コンテンツ内に直接記述できます。
手動での有効化は不要で、Markdown コンテンツで LaTeX 数式をすぐに使い始めることができます。
## 例 ## 使用方法
Markdown コンテンツ内で、インラインおよび別段落の LaTeX 数式がサポートされています。 LaTeX はインライン式とブロック式の両方で使用できます。
### インライン ### インライン数式
文中に数式を含めるには、`\(` と `\)` で囲みます。
```markdown {filename="page.md"} ```markdown {filename="page.md"}
これは \(\sigma(z) = \frac{1}{1 + e^{-z}}\) インラインです。 この \(\sigma(z) = \frac{1}{1 + e^{-z}}\) はインライン式です。
``` ```
これは \(\sigma(z) = \frac{1}{1 + e^{-z}}\) インラインです。 この \( \sigma(z) = \frac{1}{1 + e^{-z}} \) はインライン式です。
### 別段落 ### ディスプレイ数式
独立した段落として表示する数式には、`$$` で囲みます。
```markdown {filename="page.md"} ```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$$
``` ```
次のようにレンダリングされます: 次のようにレンダリングされます:
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$ $$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
例えば、aligned 環境を使用する場合: 複数行の数式には `aligned` などの LaTeX 環境も使用できます。
```latex {filename="page.md"} ```latex {filename="page.md"}
$$ $$
@@ -52,11 +55,28 @@ $$
\end{aligned} \end{aligned}
$$ $$
サポートされている関数の一覧は [KaTeX サポート関数](https://katex.org/docs/supported.html) を参照してください。
### 化学式
[mhchem][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-}$$
## 設定 ## 設定
> [!IMPORTANT] > [!IMPORTANT]
> Hugo が Markdown コンテンツ内の LaTeX 数式を検出できるように、Hugo 設定ファイルで [パススルー拡張機能](https://gohugo.io/content-management/mathematics/) を有効にして設定してください。 > Hugo が Markdown コンテンツ内の LaTeX 数式を認識できるよう、[パススルー拡張](https://gohugo.io/content-management/mathematics/) を Hugo 設定ファイルで有効にしてください。
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
markup: markup:
@@ -69,35 +89,47 @@ markup:
enable: true enable: true
``` ```
## サポートされている関数 ### 数式エンジン
サポートされている関数の一覧については、[KaTeX サポートされている関数](https://katex.org/docs/supported.html) を参照してください。 [KaTeX][katex] はビルド時に LaTeX 数式をレンダリングするデフォルトエンジンで、[Hugo][hugo-transform-tomath] でサポートされています。
## 化学 デフォルトは KaTeX ですが、MathJax のみの機能が必要な場合は [MathJax][mathjax] に切り替えられます。
化学式は [mhchem](https://mhchem.github.io/MathJax-mhchem/) 拡張機能を介してサポートされています。 #### KaTeX
インライン: \(\ce{H2O}\) は水です。 デフォルト設定では追加の設定は不要です。Hugo は KaTeX の CSS を CDN から取得します。
特定のバージョンを固定したりローカルアセットを使用する場合は、`hugo.yaml` ファイルで設定できます。
別段落: ##### CDN ベース URL の上書き
```markdown {filename="page.md"} ```yaml {filename="hugo.yaml"}
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$ params:
math:
engine: katex
katex:
base: "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist"
``` ```
次のようにレンダリングされます: ##### ローカルアセットの使用
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$ CSS ファイルを `assets` ディレクトリに配置し、KaTeX に必要なフォントファイルを追加できます。
```yaml {filename="hugo.yaml"}
params:
math:
engine: katex
katex:
css: "css/katex.min.css"
assets:
- "fonts/KaTeX_Main-Regular.woff2"
# 他のフォントファイルをここに追加
```
## 数式エンジン これにより、CDN ではなく `assets/css/katex.min.css` から KaTeX CSS ファイルが読み込まれます。
### MathJax #### MathJax
デフォルトでは、ビルドプロセス中に LaTeX 数式をレンダリングするために [KaTeX][katex] が使用されます（推奨）。 代わりに [MathJax][mathjax] を使用して数式をレンダリングすることもできます:
代替として、[MathJax][mathjax] を使用して数式をレンダリングすることもできます。
MathJax を使用するには、`hugo.yaml` 設定ファイルに以下を追加してください:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -105,5 +137,10 @@ params:
engine: mathjax engine: mathjax
``` ```
> [!NOTE]
> MathJax をさらにカスタマイズするには（ローダーオプションの調整や CDN/ソースの変更など）、プロジェクトの `layouts/_partials/scripts/mathjax.html` でテンプレートを上書きしてください。Hugo はテーマのデフォルトではなく、あなたのバージョンを使用します。
[katex]: https://katex.org/ [katex]: https://katex.org/
[mathjax]: https://www.mathjax.org/ [mathjax]: https://www.mathjax.org/
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/

112
exampleSite/content/docs/guide/markdown.ja.md
View File

@@ -3,19 +3,19 @@ title: Markdown
weight: 2 weight: 2
--- ---
Hugoは、テキストのフォーマットやリストの作成などに[Markdown](https://ja.wikipedia.org/wiki/Markdown)構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。 Hugo はテキストの書式設定やリスト作成などに [Markdown](https://en.wikipedia.org/wiki/Markdown) 構文をサポートしています。このページでは、最も一般的な Markdown 構文の例を紹介します。
<!--more--> <!--more-->
## Markdown の例 ## Markdown の例
### テキストのスタイル ### テキストのスタイリング
| スタイル | 構文 | 例 | 出力 | | スタイル | 構文 | 例 | 出力 |
| -------- | -------- | ------ | ------ | | :------------ | :----------------------- | :------------------------------------ | :------------------------------------ |
| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** | | 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | *斜体テキスト* | | 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | _斜体テキスト_ |
| 取り消し線 | `~~取り消し線テキスト~~` | `~~取り消し線テキスト~~` | ~~取り消し線テキスト~~ | | 打ち消し線 | `~~打ち消し線テキスト~~` | `~~打ち消し線テキスト~~` | ~~打ち消し線テキスト~~ |
| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です | | 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です | | 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
@@ -23,84 +23,84 @@ Hugoは、テキストのフォーマットやリストの作成などに[Markdo
引用元付きのブロッククォート 引用元付きのブロッククォート
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br> > メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
> — <cite>ロブ・パイク[^1]</cite> > — <cite>Rob Pike[^1]</cite>
[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。 [^1]: 上記の引用は、2015年11月18日のGopherfestでのRob Pikeの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
```markdown {filename=Markdown} ```markdown {filename=Markdown}
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br> > メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
> — <cite>ロブ・パイク[^1]</cite> > — <cite>Rob Pike[^1]</cite>
[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。 [^1]: 上記の引用は、2015年11月18日のGopherfestでのRob Pikeの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
``` ```
### アラート ### アラート
{{< new-feature version="v0.9.0" >}} {{< new-feature version="v0.9.0" >}}
アラートは、ブロッククォート構文に基づくMarkdown拡張で、重要な情報を強調するために使用できます。 アラートは、重要な情報を強調するために使用できるブロッククォート構文を基にした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)がサポートされています。 [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.146.0](https://github.com/gohugoio/hugo/releases/tag/v0.146.0)以降を使用していることを確認してください。 最新バージョンのHextraと[Hugo v0.146.0](https://github.com/gohugoio/hugo/releases/tag/v0.146.0)以降を使用していることを確認してください。
> [!NOTE] > [!NOTE]
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。 > コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。
> [!TIP] > [!TIP]
> 物事をより良く、または簡単に行うための役立つアドバイス。 > 物事をより良く、または簡単に行うための役立つアドバイス。
> [!IMPORTANT] > [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。 > ユーザーが目標を達成するために知っておく必要がある重要な情報。
> [!WARNING] > [!WARNING]
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。 > 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。
> [!CAUTION] > [!CAUTION]
> 特定のアクションのリスクやネガティブな結果についてのアドバイス。 > 特定のアクションによるリスクやネガティブな結果についての警告。
```markdown {filename=Markdown} ```markdown {filename=Markdown}
> [!NOTE] > [!NOTE]
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。 > コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。
> [!TIP] > [!TIP]
> 物事をより良く、または簡単に行うための役立つアドバイス。 > 物事をより良く、または簡単に行うための役立つアドバイス。
> [!IMPORTANT] > [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。 > ユーザーが目標を達成するために知っておく必要がある重要な情報。
> [!WARNING] > [!WARNING]
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。 > 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。
> [!CAUTION] > [!CAUTION]
> 特定のアクションのリスクやネガティブな結果についてのアドバイス。 > 特定のアクションによるリスクやネガティブな結果についての警告。
``` ```
### テーブル ### テーブル
テーブルはMarkdownのコア仕様には含まれていませんが、Hugoはデフォルトでサポートしています。 テーブルはコアMarkdown仕様の一部ではありませんが、Hugoはデフォルトでサポートしています。
| 名前 | 年齢 | | 名前 | 年齢 |
|--------|------| | :---- | :-- |
| ボブ | 27 | | Bob | 27 |
| アリス | 23 | | Alice | 23 |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| 名前 | 年齢 | | 名前 | 年齢 |
|--------|------| | :---- | :-- |
| ボブ | 27 | | Bob | 27 |
| アリス | 23 | | Alice | 23 |
``` ```
#### テーブル内のインラインMarkdown #### テーブル内のインラインMarkdown
| 斜体 | 太字 | コード | | 斜体 | 太字 | コード |
| -------- | -------- | ------ | | :-------- | :-------- | :-------- |
| *斜体* | **太字** | `コード` | | _斜体_ | **太字** | `コード` |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| 斜体 | 太字 | コード | | 斜体 | 太字 | コード |
| -------- | -------- | ------ | | :-------- | :-------- | :-------- |
| *斜体* | **太字** | `コード` | | _斜体_ | **太字** | `コード` |
``` ```
### コードブロック ### コードブロック
@@ -137,22 +137,22 @@ Hextraの最新バージョンと[Hugo v0.146.0](https://github.com/gohugoio/hug
#### ネストされたリスト #### ネストされたリスト
* 果物 - 果物
* りんご - りんご
* オレンジ - オレンジ
* バナナ - バナナ
* 乳製品 - 乳製品
* 牛乳 - 牛乳
* チーズ - チーズ
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* 果物 - 果物
* りんご - りんご
* オレンジ - オレンジ
* バナナ - バナナ
* 乳製品 - 乳製品
* 牛乳 - 牛乳
* チーズ - チーズ
``` ```
### 画像 ### 画像
@@ -165,16 +165,18 @@ Hextraの最新バージョンと[Hugo v0.146.0](https://github.com/gohugoio/hug
キャプション付き: キャプション付き:
![風景](https://picsum.photos/800/600 "Unsplashの風景") ![風景](https://picsum.photos/800/600 "Lorem Picsum")
```markdown {filename=Markdown} ```markdown {filename=Markdown}
![風景](https://picsum.photos/800/600 "Unsplashの風景") ![風景](https://picsum.photos/800/600 "Lorem Picsum")
``` ```
より高度な機能が必要な場合は、Hugoの組み込み[Figureショートコード](https://gohugo.io/shortcodes/figure/)を使用してください。
## 設定 ## 設定
HugoはMarkdownの解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。 HugoはMarkdown解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
Markdownのレンダリングは、`hugo.yaml`の`markup.goldmark`で設定できます。 Markdownのレンダリング設定は`hugo.yaml`の`markup.goldmark`で行えます。
以下はHextraのデフォルト設定です: 以下はHextraのデフォルト設定です:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
@@ -186,11 +188,11 @@ markup:
noClasses: false noClasses: false
``` ```
その他の設定オプションについては、Hugoのドキュメント[Configure Markup](https://gohugo.io/getting-started/configuration-markup/)を参照してください。 その他の設定オプションについては、Hugoドキュメントの[マークアップ設定](https://gohugo.io/getting-started/configuration-markup/)を参照してください。
## 学習リソース ## 学習リソース
* [Markdownガイド](https://www.markdownguide.org/) - [Markdownガイド](https://www.markdownguide.org/)
* [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) - [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
* [Markdownチュートリアル](https://www.markdowntutorial.com/) - [Markdownチュートリアル](https://www.markdowntutorial.com/)
* [Markdownリファレンス](https://commonmark.org/help/) - [Markdownリファレンス](https://commonmark.org/help/)

115
exampleSite/content/docs/guide/organize-files.ja.md
View File

@@ -7,7 +7,7 @@ prev: /docs/guide
## ディレクトリ構造 ## ディレクトリ構造
デフォルトでは、Hugo は `content` ディレクトリ内の Markdown ファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。 デフォルトでは、Hugo は `content` ディレクトリ内の Markdown ファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
このサイトを例に取ります： このサイトを例に挙げます：
<!--more--> <!--more-->
@@ -50,12 +50,12 @@ content
Hextra は、異なるコンテンツタイプに対して3つのレイアウトを提供します： Hextra は、異なるコンテンツタイプに対して3つのレイアウトを提供します：
| レイアウト | ディレクトリ | 特徴 | | レイアウト | ディレクトリ | 特徴 |
| :-------- | :-------------------- | :--------------------------------------------------------------- | | :-------- | :------------------- | :------------------------------------------------------------------- |
| `docs` | `content/docs/` | 構造化されたドキュメントに最適で、このセクションと同じです。 | | `docs` | `content/docs/` | 構造化されたドキュメントに最適。このセクションと同じです。 |
| `blog` | `content/blog/` | ブログ投稿用で、リスト表示と詳細記事表示の両方があります。 | | `blog` | `content/blog/` | ブログ投稿用。リスト表示と詳細記事ビューの両方があります。 |
| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事表示です。 | | `default` | その他のディレクトリ | サイドバーなしの単一ページ記事ビュー。 |
セクションの動作をビルトインレイアウトと同じにするには、セクションの`_index.md`のフロントマターで希望するタイプを指定します。 セクションの動作を組み込みレイアウトと同じにするには、セクションの `_index.md` のフロントマターで希望するタイプを指定します。
```yaml {filename="content/my-docs/_index.md"} ```yaml {filename="content/my-docs/_index.md"}
--- ---
@@ -69,7 +69,7 @@ cascade:
## サイドバーナビゲーション ## サイドバーナビゲーション
サイドバーナビゲーションは、コンテンツの整理に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdownファイルのフロントマターで`weight`パラメータを使用します。 サイドバーナビゲーションは、コンテンツのアルファベット順に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdown ファイルのフロントマターで `weight` パラメータを使用します。
```yaml {filename="content/docs/guide/_index.md"} ```yaml {filename="content/docs/guide/_index.md"}
--- ---
@@ -79,24 +79,93 @@ weight: 2
``` ```
{{< callout emoji="ℹ️">}} {{< callout emoji="ℹ️">}}
サイドバーがあまり深くならないようにすることをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。 サイドバーを深くしすぎないことをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
{{< /callout >}} {{< /callout >}}
## パンくずナビゲーション ## セクションナビゲーション
パンくずは、`/content`のディレクトリ構造に基づいて自動生成されます。 ### セクションページネーションの順序
例えば、[上記のファイル構造](#directory-structure)を考えます。その構造に基づいて、`/docs/guide/organize-files/`ページの上部にパンくずが自動的に表示されます： [`PAGE.PrevInSection`](https://gohugo.io/methods/page/previnsection/) や [`PAGE.NextInSection`](https://gohugo.io/methods/page/nextinsection/) でアクセスされるページの順序は、デフォルトで逆順になっています。
この逆順を無効にするには、ページのフロントマターで `reversePagination` カスタムパラメータを `false` に設定します。デフォルトでは `reversePagination` は `true` に設定されています。
#### 例
次のディレクトリ構造を考えます：
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/folder name="blog" state="open" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/folder name="my-blog-series" state="open" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/folder name="post-a" state="open" >}}
{{< filetree/file name="index.md" >}}
{{< /filetree/folder >}}
{{< filetree/folder name="post-b" state="open" >}}
{{< filetree/file name="index.md" >}}
{{< /filetree/folder >}}
{{< filetree/folder name="post-c" state="open" >}}
{{< filetree/file name="index.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
そして、投稿のフロントマターは次のようになっています：
```yaml {filename="content/blog/my-blog-series/post-a/index.md"}
---
title: Post A
weight: 1
---
```
```yaml {filename="content/blog/my-blog-series/post-b/index.md"}
---
title: Post B
weight: 2
---
```
```yaml {filename="content/blog/my-blog-series/post-c/index.md"}
---
title: Post C
weight: 3
---
```
読者が `post-b/index.md` の下部にいる場合、次のページは `post-a`、前のページは `post-c` と表示されます。これは `reversePagination` がデフォルトで `true` に設定されているためです。これは、投稿を最新から古い順に表示したい場合に適しています。しかし、複数のパートからなるブログシリーズの場合、通常は最初の投稿を読み、次に2番目、という順序で読んでほしいものです。そのため、逆順を無効にします。
このシリーズのすべてのブログ投稿で `reversePagination` をオフにするには、`my-blog-series/_index.md` に次のフロントマターを追加します：
```yaml {filename="content/blog/my-blog-series/_index.md"}
---
title: My Blog Series
cascade:
params:
reversePagination: false
---
```
ここでは [`cascade`](https://gohugo.io/content-management/front-matter/#cascade-1) を使用して、`my-blog-series` 内のすべての投稿に設定を伝播させ、すべての子孫で `reversePagination` が `false` に設定されるようにしています。これにより、読者が `post-b/index.md` にいる場合、次のページは `post-c`、前のページは `post-a` と表示されるようになります。
## パンくずリストナビゲーション
パンくずリストは、`/content` のディレクトリ構造に基づいて自動生成されます。
たとえば、[上記のディレクトリ構造](#directory-structure)を考えます。その構造に基づいて、`/docs/guide/organize-files/` のページ上部のパンくずリストは自動的に次のように表示されます：
``` ```
Documentation > Guide > Organize Files Documentation > Guide > Organize Files
``` ```
### パンくずリンクのタイトルをカスタマイズ ### パンくずリストのリンクタイトルのカスタマイズ
デフォルトでは、各パンくずリンクはそのページの`title`パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle`を指定します。 デフォルトでは、各パンくずリストのリンクはそのページの `title` パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle` を指定します。
例えば、`Organize Files`の代わりに`Foo Bar`と表示したい場合： たとえば、`Organize Files` の代わりにパンくずリストを `Foo Bar` にしたい場合：
```yaml {filename="content/docs/guide/organize-files.md"} ```yaml {filename="content/docs/guide/organize-files.md"}
--- ---
@@ -105,14 +174,14 @@ title: Organize Files
--- ---
``` ```
これにより、以下のパンくずが生成されます： これにより、次のパンくずリストが生成されます：
``` ```
Documentation > Guide > Foo Bar Documentation > Guide > Foo Bar
``` ```
### パンくずを非表示にする ### パンくずリストの非表示
ページのフロントマターで`breadcrumbs: false`を指定することで、パンくずを完全に非表示にできます： ページからパンくずリストを完全に非表示にするには、フロントマターで `breadcrumbs: false` を指定します：
```yaml {filename="content/docs/guide/organize-files.md"} ```yaml {filename="content/docs/guide/organize-files.md"}
--- ---
@@ -124,12 +193,12 @@ title: Organize Files
## コンテンツディレクトリの設定 ## コンテンツディレクトリの設定
デフォルトでは、Hugo はサイトを構築するためにルートの `content/` ディレクトリを使用します。 デフォルトでは、Hugo はサイトを構築するためにルートの `content/` ディレクトリを使用します。
例えば`docs/`など、異なるディレクトリをコンテンツに使用する必要がある場合は、サイト設定`hugo.yaml`で[`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir)パラメータを設定することで行えます。 別のディレクトリ（例えば `docs/`）をコンテンツ用に使用する必要がある場合は、サイト設定 `hugo.yaml` で [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) パラメータを設定することで可能です。
## 画像の追加 ## 画像の追加
画像を追加する最も簡単な方法は、画像ファイルを Markdown ファイルと同じディレクトリに置くことです。 画像を追加する最も簡単な方法は、画像ファイルを Markdown ファイルと同じディレクトリに置くことです。
例えば、`my-page.md`ファイルと同じディレクトリに`image.png`ファイルを追加します： たとえば、`my-page.md` ファイルと同じディレクトリに `image.png` ファイルを追加します：
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@@ -140,13 +209,13 @@ title: Organize Files
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
その後、以下のMarkdown構文を使用してコンテンツに画像を追加できます： そして、次の Markdown 構文を使用してコンテンツに画像を追加できます：
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
![](image.png) ![](image.png)
``` ```
また、Hugoの[ページバンドル][page-bundles]機能を利用して、画像ファイルをMarkdownファイルと一緒に整理することもできます。そのためには、`my-page.md`ファイルを`my-page`ディレクトリに変換し、コンテンツを`index.md`というファイルに置き、画像ファイルを`my-page`ディレクトリ内に置きます： また、Hugo の [ページバンドル][page-bundles] 機能を利用して、画像ファイルを Markdown ファイルと一緒に整理することもできます。そのためには、`my-page.md` ファイルを `my-page` ディレクトリに変換し、コンテンツを `index.md` というファイルに置き、画像ファイルを `my-page` ディレクトリ内に配置します：
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@@ -163,7 +232,7 @@ title: Organize Files
![](image.png) ![](image.png)
``` ```
または、画像ファイルを`static`ディレクトリに置くこともできます。これにより、すべてのページで画像が利用可能になります： あるいは、画像ファイルを `static` ディレクトリに置くこともできます。これにより、画像はすべてのページで利用可能になります：
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="static" >}} {{< filetree/folder name="static" >}}
@@ -178,7 +247,7 @@ title: Organize Files
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
画像パスはスラッシュ`/`で始まり、`static`ディレクトリからの相対パスであることに注意してください： 画像パスはスラッシュ `/` で始まり、static ディレクトリからの相対パスであることに注意してください：
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
![](/images/image.png) ![](/images/image.png)

16
exampleSite/content/docs/guide/shortcodes/_index.ja.md
View File

@@ -5,18 +5,18 @@ prev: /docs/guide/diagrams
next: /docs/guide/shortcodes/callout next: /docs/guide/shortcodes/callout
--- ---
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。 [Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に記述する簡潔なスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。 Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
{{< cards >}} {{< cards >}}
{{< card link="callout" title="コールアウト" icon="warning" >}} {{< card link="callout" title="Callout" icon="warning" >}}
{{< card link="cards" title="カード" icon="card" >}} {{< card link="cards" title="Cards" icon="card" >}}
{{< card link="details" title="詳細" icon="chevron-right" >}} {{< card link="details" title="Details" icon="chevron-right" >}}
{{< card link="filetree" title="FileTree" icon="folder-tree" >}} {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
{{< card link="icon" title="アイコン" icon="badge-check" >}} {{< card link="icon" title="Icon" icon="badge-check" >}}
{{< card link="steps" title="ステップ" icon="one" >}} {{< card link="steps" title="Steps" icon="one" >}}
{{< card link="tabs" title="タブ" icon="collection" >}} {{< card link="tabs" title="Tabs" icon="collection" >}}
{{< /cards >}} {{< /cards >}}
<div style="padding-top:4rem"></div> <div style="padding-top:4rem"></div>
@@ -25,5 +25,5 @@ Hugo と Hextra が提供する追加のショートコード:
{{< cards >}} {{< cards >}}
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}} {{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
{{< card link="others" title="その他" icon="view-grid" >}} {{< card link="others" title="Others" icon="view-grid" >}}
{{< /cards >}} {{< /cards >}}

26
exampleSite/content/docs/guide/shortcodes/callout.ja.md
View File

@@ -6,30 +6,30 @@ aliases:
prev: /docs/guide/shortcodes prev: /docs/guide/shortcodes
--- ---
読者に重要な情報を示すための組み込みコンポーネントです。 読者に重要な情報を表示するための組み込みコンポーネントです。
<!--more--> <!--more-->
> [!NOTE] > [!NOTE]
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。 > [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。 > これはMarkdown構文を活用してコールアウトをレンダリングするため、コンテンツの移植性と可読性が向上します。
## 例 ## 例
{{< callout emoji="👾">}} {{< callout emoji="👾">}}
**コールアウト**は、注意を引くための短いテキストです。 **コールアウト**とは、注意を引くための短いテキストです。
{{< /callout >}} {{< /callout >}}
{{< callout type="info" >}} {{< callout type="info" >}}
**コールアウト**は、注意を引くための短いテキストです。 **コールアウト**とは、注意を引くための短いテキストです。
{{< /callout >}} {{< /callout >}}
{{< callout type="warning" >}} {{< callout type="warning" >}}
**コールアウト**は、注意を引くための短いテキストです。 **コールアウト**とは、注意を引くための短いテキストです。
{{< /callout >}} {{< /callout >}}
{{< callout type="error" >}} {{< callout type="error" >}}
**コールアウト**は、注意を引くための短いテキストです。 **コールアウト**とは、注意を引くための短いテキストです。
{{< /callout >}} {{< /callout >}}
## 使用方法 ## 使用方法
@@ -37,24 +37,24 @@ prev: /docs/guide/shortcodes
### デフォルト ### デフォルト
{{< callout emoji="🌐">}} {{< callout emoji="🌐">}}
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。 Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout emoji="🌐" */>}} {{</* callout emoji="🌐" */>}}
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。 Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### 情報 ### 情報
{{< callout type="info" >}} {{< callout type="info" >}}
最新のリリースを確認するには、GitHubをご覧ください。 最新リリースについてはGitHubをご覧ください。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="info" */>}} {{</* callout type="info" */>}}
最新のリリースを確認するには、GitHubをご覧ください。 最新リリースについてはGitHubをご覧ください。
{{</* /callout */>}} {{</* /callout */>}}
``` ```
@@ -66,18 +66,18 @@ prev: /docs/guide/shortcodes
```markdown ```markdown
{{</* callout type="warning" */>}} {{</* callout type="warning" */>}}
**コールアウト**は、注意を引くための短いテキストです。 このAPIは次のバージョンで非推奨になります。
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### エラー ### エラー
{{< callout type="error" >}} {{< callout type="error" >}}
何か問題が発生し、爆発しそうです。 問題が発生しました。まもなく爆発します。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="error" */>}} {{</* callout type="error" */>}}
何か問題が発生し、爆発しそうです。 問題が発生しました。まもなく爆発します。
{{</* /callout */>}} {{</* /callout */>}}
``` ```

30
exampleSite/content/docs/guide/shortcodes/cards.ja.md
View File

@@ -13,8 +13,8 @@ linkTitle: カード
{{< cards >}} {{< cards >}}
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}} {{< 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/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" >}}
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" >}} {{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" >}}
{{< /cards >}} {{< /cards >}}
## 使用方法 ## 使用方法
@@ -30,8 +30,8 @@ linkTitle: カード
``` ```
{{</* cards */>}} {{</* cards */>}}
{{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}} {{</* 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/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" */>}}
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" */>}} {{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```
@@ -42,18 +42,18 @@ linkTitle: カード
| `link` | URL（内部または外部）。 | | `link` | URL（内部または外部）。 |
| `title` | カードのタイトル見出し。 | | `title` | カードのタイトル見出し。 |
| `subtitle` | サブタイトル見出し（Markdown対応）。 | | `subtitle` | サブタイトル見出し（Markdown対応）。 |
| `icon` | アイコンの名前。 | | `icon` | アイコン名。 |
| `tag` | タグ内のテキスト。 | | `tag` | タグのテキスト。 |
| `tagColor` | タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。 | | `tagColor` | タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。 |
## 画像カード ## 画像カード
さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします: さらに、カードには画像の追加と以下のパラメータを通じた処理がサポートされています:
| パラメータ | 説明 | | パラメータ | 説明 |
|----------- |---------------------------------------------| |----------- |---------------------------------------------|
| `image` | カードの画像URLを指定します。 | | `image` | カードの画像URLを指定します。 |
| `method` | Hugoの画像処理メソッドを設定します。 | | `method` | Hugoの画像処理方法を設定します。 |
| `options` | Hugoの画像処理オプションを設定します。 | | `options` | Hugoの画像処理オプションを設定します。 |
カードは3種類の画像をサポートします: カードは3種類の画像をサポートします:
@@ -62,14 +62,14 @@ linkTitle: カード
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。 2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。 3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebPフォーマット）を適用します。 Hextraはビルド時に画像処理が必要か自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebP形式）を適用します。
現在サポートされている`method`は`Resize`、`Fit`、`Fill`、`Crop`です。 現在サポートされている`method`: `Resize`、`Fit`、`Fill`、`Crop`。
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。 Hugoの組み込み画像処理コマンド、方法、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
## タグ ## タグ
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。 カードはタグの追加をサポートしており、追加のステータス情報を表示するのに便利です。
{{< cards >}} {{< cards >}}
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}} {{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
@@ -81,10 +81,10 @@ Hugoの組み込み画像処理コマンド、メソッド、オプションの
``` ```
{{</* cards */>}} {{</* cards */>}}
{{</* card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" */>}} {{</* card link="../callout" title="デフォルト色タグ付きカード" tag="タグテキスト" */>}}
{{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}} {{</* card link="../callout" title="赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
{{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}} {{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
{{</* card link="../callout" title="黄色タグ付きカード" tag="タグテキスト" tagType="warning" */>}} {{</* card link="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```

4
exampleSite/content/docs/guide/shortcodes/details.ja.md
View File

@@ -2,7 +2,7 @@
title: 詳細 title: 詳細
--- ---
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。 折りたたみ可能なコンテンツを表示するための組み込みコンポーネントです。
<!--more--> <!--more-->
@@ -22,7 +22,7 @@ Markdownは**サポートされています**。
{{% /details %}} {{% /details %}}
## 使い方 ## 使用方法
````markdown ````markdown
{{%/* details title="詳細" */%}} {{%/* details title="詳細" */%}}

7
exampleSite/content/docs/guide/shortcodes/icon.ja.md
View File

@@ -1,5 +1,6 @@
--- ---
title: アイコン title: アイコン
next: /docs/guide/shortcodes/steps
--- ---
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります: このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
@@ -8,7 +9,7 @@ title: アイコン
enableInlineShortcodes: true enableInlineShortcodes: true
``` ```
利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。 利用可能なアイコンの一覧は [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
<!--more--> <!--more-->
@@ -35,7 +36,7 @@ enableInlineShortcodes: true
your-icon: <svg>your icon svg content</svg> your-icon: <svg>your icon svg content</svg>
``` ```
その後、ショートコードで以下のように使用できます: 追加したアイコンは以下のようにショートコードで使用できます:
``` ```
{{</* icon "your-icon" */>}} {{</* icon "your-icon" */>}}
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}} {{</* card icon="your-icon" */>}}
``` ```
ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。 ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。

18
exampleSite/content/docs/guide/shortcodes/jupyter.ja.md
View File

@@ -6,15 +6,15 @@ sidebar:
exclude: true exclude: true
--- ---
{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的な機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}} {{< callout >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
[Jupyter Notebook](https://jupyter.org/) は、[Project Jupyter](https://jupyter.org/) の言語に依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。 [Jupyter Notebook](https://jupyter.org/) は [Project Jupyter](https://jupyter.org/) の言語非依存な HTML ノートブックアプリケーションです。ライブコード、数式、可視化、説明文を含むドキュメントを作成・共有できます。
<!--more--> <!--more-->
## 使用方法 ## 使用方法
### ローカルノートブックを使用する ### ローカルノートブックの使用
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。 Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
@@ -29,11 +29,11 @@ Jupyter Notebook ショートコードを使用するには、プロジェクト
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます： `jupyter` ショートコードを使用してページに Jupyter Notebook を組み込みます:
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
--- ---
title: My Page title: マイページ
math: true math: true
--- ---
@@ -55,16 +55,16 @@ math: true
```markdown {filename="content/docs/my-page/index.md"} ```markdown {filename="content/docs/my-page/index.md"}
--- ---
title: My Page title: マイページ
math: true math: true
--- ---
{{%/* jupyter "notebook.ipynb" */%}} {{%/* 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) ノートブックをページに含めるには、次のショートコードを使用します： ノートブックファイルの 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" */%}} {{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
@@ -72,7 +72,7 @@ math: true
## ノートブックの例 ## ノートブックの例
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}} {{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれるノートブックファイルの例です。{{< /callout >}}
{{% jupyter "example.ipynb" %}} {{% jupyter "example.ipynb" %}}

13
exampleSite/content/docs/guide/shortcodes/others.ja.md
View File

@@ -3,22 +3,23 @@ title: その他のショートコード
linkTitle: その他 linkTitle: その他
sidebar: sidebar:
exclude: true exclude: true
next: /docs/guide/deploy-site
--- ---
{{< callout emoji="ℹ️" >}} {{< callout emoji="ℹ️" >}}
これらの一部はHugoの組み込みショートコードです。 これらの一部は Hugo 組み込みのショートコードです。
これらのショートコードは安定性が低く、いつでも変更される可能性があります。 これらのショートコードは安定性が低く、いつでも変更される可能性があります。
{{< /callout >}} {{< /callout >}}
## バッジ ## バッジ
``` ```
{{</* badge "バッジ" */>}} {{</* badge "Badge" */>}}
``` ```
結果: 結果:
{{< badge "バッジ" >}} {{< badge "Badge" >}}
バリエーション: バリエーション:
@@ -37,12 +38,12 @@ sidebar:
リンクとアイコン付き: リンクとアイコン付き:
``` ```
{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}} {{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
``` ```
結果: 結果:
{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}} {{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
## YouTube ## YouTube
@@ -66,7 +67,7 @@ PDFショートコードを使用すると、コンテンツ内にPDFファイ
{{</* pdf "https://example.com/sample.pdf" */>}} {{</* pdf "https://example.com/sample.pdf" */>}}
``` ```
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。 プロジェクトディレクトリ内に PDF ファイルを配置し、相対パスを使用することもできます。
``` ```
{{</* pdf "path/to/file.pdf" */>}} {{</* pdf "path/to/file.pdf" */>}}

5
exampleSite/content/docs/guide/shortcodes/steps.ja.md
View File

@@ -2,7 +2,7 @@
title: ステップ title: ステップ
--- ---
ステップのシリーズを表示するための組み込みコンポーネント。 一連のステップを表示するための組み込みコンポーネントです。
## 例 ## 例
@@ -22,11 +22,12 @@ title: ステップ
{{% /steps %}} {{% /steps %}}
## 使い方 ## 使い方
{{< callout emoji="ℹ️" >}} {{< callout emoji="ℹ️" >}}
このショートコードは **Markdown コンテンツ専用** であることに注意してください。 このショートコードは **Markdown コンテンツ専用** であることに注意してください。
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。 HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
{{< /callout >}} {{< /callout >}}
`steps` ショートコード内に Markdown の h3 ヘッダーを配置します。 `steps` ショートコード内に Markdown の h3 ヘッダーを配置します。

58
exampleSite/content/docs/guide/shortcodes/tabs.ja.md
View File

@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
## 例 ## 例
{{< tabs items="JSON,YAML,TOML" >}} {{< tabs items="macOS,Linux,Windows" >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}} {{< tab >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}} {{< tab >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}} {{< tab >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
@@ -20,23 +20,23 @@ next: /docs/guide/deploy-site
``` ```
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}} {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}} {{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
### 選択されたインデックスを指定 ### 選択インデックスの指定
`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。 `defaultIndex` プロパティを使用して選択するタブを指定します。インデックスは 0 から始まります。
``` ```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}} {{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}} {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}} {{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
@@ -45,14 +45,14 @@ next: /docs/guide/deploy-site
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}} {{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}} {{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}} {{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}} {{< tab >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
### Markdown を使用 ### Markdown の使用
コードブロックを含む Markdown 構文もサポートされています: コードブロックを含む Markdown 構文もサポートされています:
@@ -91,3 +91,35 @@ next: /docs/guide/deploy-site
{{< /tab >}} {{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
### タブの同期
同じ `items` リストを持つタブは同期できます。有効にすると、タブを選択すると同じ `items` を持つ他のタブも更新され、ページ間で選択が記憶されます。
`hugo.yaml` の `page` セクションでグローバルに有効にします:
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
これを有効にすると、以下の 2 つのタブブロックは常に同じ選択項目を表示します:
```markdown
{{</* tabs items="A,B" */>}}
{{</* tab */>}}A の内容{{</* /tab */>}}
{{</* tab */>}}B の内容{{</* /tab */>}}
{{</* /tabs */>}}
{{</* tabs items="A,B" */>}}
{{</* tab */>}}2 番目の A の内容{{</* /tab */>}}
{{</* tab */>}}2 番目の B の内容{{</* /tab */>}}
{{</* /tabs */>}}
```

20
exampleSite/content/docs/guide/syntax-highlighting.ja.md
View File

@@ -3,8 +3,8 @@ title: "シンタックスハイライト"
weight: 3 weight: 3
--- ---
Hugoは、純粋なGoで書かれた汎用シンタックスハイライターである[Chroma](https://github.com/alecthomas/chroma)を使用してシンタックスハイライトを行います。 Hugo は構文強調表示に、純粋な Go で書かれた汎用シンタックスハイライタ [Chroma](https://github.com/alecthomas/chroma) を使用しています。
Markdownコンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば： Markdown コンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば:
<!--more--> <!--more-->
@@ -15,7 +15,7 @@ def say_hello():
``` ```
```` ````
は次のようにレンダリングされます： は次のようにレンダリングされます:
```python ```python
def say_hello(): def say_hello():
@@ -26,7 +26,7 @@ def say_hello():
### ファイル名 ### ファイル名
コードブロックにファイル名やタイトルを追加するには、`filename`属性を設定します： コードブロックにファイル名やタイトルを追加するには、`filename` 属性を設定します:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {filename="hello.py"} ```python {filename="hello.py"}
@@ -44,7 +44,7 @@ def say_hello():
{{< new-feature version="v0.9.2" >}} {{< new-feature version="v0.9.2" >}}
`base_url`属性を使用して、ファイル名と組み合わせてリンクを生成するベースURLを提供できます。 `base_url` 属性を使用してベース URL を指定し、ファイル名と組み合わせてリンクを生成できます。
ファイル名には、ベースパス内のファイルの場所を指定する相対パスを含めることができます。 ファイル名には、ベースパス内のファイルの場所を指定する相対パスを含めることができます。
@@ -60,7 +60,7 @@ go 1.20
### 行番号 ### 行番号
行番号を設定するには、`linenos`属性を`table`に設定し、オプションで`linenostart`を開始行番号に設定します： 行番号を表示するには、`linenos` 属性を `table` に設定し、必要に応じて `linenostart` で開始行番号を指定します:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {linenos=table,linenostart=42} ```python {linenos=table,linenostart=42}
@@ -76,7 +76,7 @@ def say_hello():
### 行のハイライト ### 行のハイライト
行をハイライトするには、`hl_lines`属性に行番号のリストを設定します： 特定の行をハイライト表示するには、`hl_lines` 属性に行番号のリストを設定します:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"} ```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
@@ -98,7 +98,7 @@ def main():
### コピーボタン ### コピーボタン
デフォルトでは、コードブロックにコピーボタンが有効になっています。その動作はサイト設定ファイルを変更することで変更できます： デフォルトでコードブロックにはコピーボタンが有効になっています。この動作はサイト設定ファイルで変更できます:
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"} ```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
params: params:
@@ -109,6 +109,6 @@ params:
display: hover display: hover
``` ```
## サポートされている言語 ## 対応言語
サポートされている言語のリストについては、[Chromaのドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。 対応言語の一覧については、[Chroma のドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。