mirror of
https://github.com/imfing/hextra.git
synced 2025-08-23 06:36:42 -04:00
chore: update ja translation
This commit is contained in:
Xin
10
exampleSite/content/blog/_index.ja.md
Normal file
10
exampleSite/content/blog/_index.ja.md
Normal 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
157
exampleSite/content/blog/markdown.ja.md
Normal 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
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### リンク
|
||||
|
||||
```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
248
exampleSite/content/blog/v010.ja.md
Normal 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"
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 検索機能の強化
|
||||
|
||||
- **すべての見出しを検索**: ページタイトルだけでなく、すべてのレベルの見出しからコンテンツを検索
|
||||
- **検索結果の精度向上**: タイトル処理とリンク精度の改善
|
||||
- **結果ナビゲーションの修正**: 検索結果が正しいページセクションにリンクするようになりました
|
||||
|
||||
検索機能の強化に貢献してくださった [@ldez](https://github.com/ldez) に感謝します!
|
||||
|
||||
|
||||
|
||||
### llms.txt サポート
|
||||
|
||||
Hextra はサイトの [llms.txt](https://llmstxt.org/) 出力形式をサポートし、AIツールや言語モデルがコンテキストや参照のためにサイトをよりアクセスしやすくします。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
outputs:
|
||||
home: [html, llms]
|
||||
```
|
||||
|
||||
これにより、サイトのルートに `llms.txt` ファイルが生成されます。
|
||||
|
||||
|
||||
|
||||
### 目次のスクロールハイライト
|
||||
|
||||
ページをスクロールする際に、目次が現在のセクションを自動的にハイライトするようになり、ナビゲーションがより直感的になりました。
|
||||
|
||||
|
||||
|
||||
### タブの同期切り替え
|
||||
|
||||
同じ項目を持つタブはページ全体で同期されるようになりました。同期が有効な場合、タブを選択すると同じ項目リストを共有するすべてのタブグループが更新されます（選択内容は記憶されます）。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
### ブログ一覧のページネーション
|
||||
|
||||
ブログ一覧ページに基本的なページネーションコントロールが追加されました。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
blog:
|
||||
list:
|
||||
pagerSize: 20 # 1ページあたりの投稿数
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
@@ -1,38 +1,38 @@
|
||||
---
|
||||
linkTitle: "ドキュメンテーション"
|
||||
title: イントロダクション
|
||||
linkTitle: "ドキュメント"
|
||||
title: はじめに
|
||||
---
|
||||
|
||||
👋 こんにちは！Hextraのドキュメンテーションへようこそ！
|
||||
👋 こんにちは！Hextra ドキュメントへようこそ！
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Hextraとは？
|
||||
## 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のサポートも標準で提供されます。
|
||||
- **美しいデザイン** - 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)お気軽にお知らせください！
|
||||
Hextra は現在も活発に開発中です。
|
||||
質問やフィードバックがありましたら、[issue を開いて](https://github.com/imfing/hextra/issues)ください！
|
||||
{{< /callout >}}
|
||||
|
||||
## 次に
|
||||
|
||||
以下のセクションに進んで、すぐに始めましょう：
|
||||
以下のセクションから始めましょう：
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="getting-started" title="はじめに" icon="document-text" subtitle="Hextraを使用してウェブサイトを作成する方法を学ぶ" >}}
|
||||
{{< card link="getting-started" title="はじめに" icon="document-text" subtitle="Hextra を使ってウェブサイトを作成する方法を学ぶ" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
[hugo]: https://gohugo.io/
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
linkTitle: 上級者向け
|
||||
title: 上級者向けトピック
|
||||
linkTitle: 高度な設定
|
||||
title: 高度なトピック
|
||||
prev: /docs/guide/shortcodes/tabs
|
||||
next: /docs/advanced/multi-language
|
||||
---
|
||||
|
||||
このセクションでは、テーマの上級者向けトピックをカバーします。
|
||||
このセクションでは、テーマの高度なトピックについて説明します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
@@ -3,16 +3,16 @@ title: コメントシステム
|
||||
linkTitle: コメント
|
||||
---
|
||||
|
||||
Hextraは、サイトにコメントシステムを追加することをサポートしています。
|
||||
現在、[giscus](https://giscus.app/)がサポートされています。
|
||||
Hextra はサイトにコメントシステムを追加する機能をサポートしています。
|
||||
現在 [giscus](https://giscus.app/) が利用可能です。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 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"}
|
||||
params:
|
||||
@@ -27,13 +27,13 @@ params:
|
||||
categoryId: <カテゴリID>
|
||||
```
|
||||
|
||||
giscusの設定は、[giscus.app](https://giscus.app/)のウェブサイトから構築できます。詳細もそこで確認できます。
|
||||
giscus の設定は [giscus.app](https://giscus.app/) ウェブサイトから構築できます。詳細もそちらで確認できます。
|
||||
|
||||
特定のページでコメントを有効または無効にするには、ページのフロントマターに以下を追加します：
|
||||
特定のページでコメントを有効/無効にするには、ページのフロントマターで設定します:
|
||||
|
||||
```yaml {filename="content/docs/about.md"}
|
||||
---
|
||||
title: について
|
||||
title: このサイトについて
|
||||
comments: true
|
||||
---
|
||||
```
|
||||
@@ -3,18 +3,18 @@ title: Hextraのカスタマイズ
|
||||
linkTitle: カスタマイズ
|
||||
---
|
||||
|
||||
Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトのカスタマイズオプションを提供し、テーマを設定できます。
|
||||
このページでは、利用可能なオプションと、テーマをさらにカスタマイズする方法について説明します。
|
||||
Hextraは、`hugo.yaml`設定ファイル内でテーマを設定するためのデフォルトのカスタマイズオプションを提供しています。
|
||||
このページでは、利用可能なオプションとテーマをさらにカスタマイズする方法について説明します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## カスタムCSS
|
||||
|
||||
カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成する必要があります。Hextraはこのファイルを自動的に読み込みます。
|
||||
カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成します。Hextraはこのファイルを自動的に読み込みます。
|
||||
|
||||
### フォントファミリー
|
||||
|
||||
コンテンツのフォントファミリーは、以下のようにカスタマイズできます：
|
||||
コンテンツのフォントファミリーは以下のようにカスタマイズできます:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.content {
|
||||
@@ -24,7 +24,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
### インラインコード要素
|
||||
|
||||
`other text`と混在するテキストの色は、以下のようにカスタマイズできます：
|
||||
`他のテキスト`と混在するテキストの色は以下のようにカスタマイズできます:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.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"}
|
||||
: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"}
|
||||
.hextra-footer {
|
||||
@@ -94,7 +127,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
##### ステップ
|
||||
|
||||
- `steps` - ステップコンテナ
|
||||
- `hextra-steps` - ステップコンテナ
|
||||
|
||||
##### タブ
|
||||
|
||||
@@ -111,9 +144,9 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
#### ナビゲーションバー
|
||||
|
||||
- `nav-container` - ナビゲーションバーコンテナ
|
||||
- `nav-container-blur` - ナビゲーションバーコンテナのぼかし要素
|
||||
- `hamburger-menu` - ハンバーガーメニューボタン
|
||||
- `hextra-nav-container` - ナビゲーションバーコンテナ
|
||||
- `hextra-nav-container-blur` - ブラー効果付きナビゲーションバーコンテナ
|
||||
- `hextra-hamburger-menu` - ハンバーガーメニューボタン
|
||||
|
||||
#### フッター
|
||||
|
||||
@@ -122,9 +155,18 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
#### 検索
|
||||
|
||||
- `search-wrapper` - 検索ラッパーコンテナ
|
||||
- `search-input` - 検索入力要素
|
||||
- `search-results` - 検索結果リストコンテナ
|
||||
- `hextra-search-wrapper` - 検索ラッパーコンテナ
|
||||
- `hextra-search-input` - 検索入力要素
|
||||
- `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` - モバイルメニューのオーバーレイ要素
|
||||
- `sidebar-container` - サイドバーコンテナ
|
||||
- `sidebar-active-item` - サイドバーのアクティブアイテム
|
||||
- `hextra-sidebar-container` - サイドバーコンテナ
|
||||
- `hextra-sidebar-active-item` - サイドバーのアクティブアイテム
|
||||
|
||||
#### 言語スイッチャー
|
||||
|
||||
- `language-switcher` - 言語スイッチャーボタン
|
||||
- `language-options` - 言語オプションコンテナ
|
||||
- `hextra-language-switcher` - 言語スイッチャーボタン
|
||||
- `hextra-language-options` - 言語オプションコンテナ
|
||||
|
||||
#### テーマトグル
|
||||
|
||||
- `theme-toggle` - テーマトグルボタン
|
||||
- `hextra-theme-toggle` - テーマトグルボタン
|
||||
|
||||
#### コードコピーボタン
|
||||
|
||||
- `hextra-code-copy-btn-container` - コードコピーボタンコンテナ
|
||||
- `hextra-code-copy-btn` - コードコピーボタン
|
||||
- `hextra-copy-icon` - コピーアイコン要素
|
||||
- `hextra-success-icon` - 成功アイコン要素
|
||||
|
||||
#### コードブロック
|
||||
|
||||
- `hextra-code-block` - コードブロックコンテナ
|
||||
- `hextra-code-filename` - コードブロックのファイル名要素
|
||||
|
||||
#### フィーチャーカード
|
||||
|
||||
@@ -162,13 +206,9 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
- `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
|
||||
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/footer.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/)を使用して、独自のコンテンツを追加できます。
|
||||
[HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して独自のコンテンツを追加できます。
|
||||
|
||||
フッターセクションで利用可能なHugo変数は、`.switchesVisible`と`.copyrightVisible`です。
|
||||
フッターセクションで利用可能なHugo変数: `.switchesVisible`と`.displayCopyright`。
|
||||
|
||||
## カスタムレイアウト
|
||||
|
||||
テーマのレイアウトは、サイトの`layouts`ディレクトリ内に同じ名前のファイルを作成することでオーバーライドできます。
|
||||
例えば、ドキュメント用の`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
|
||||
テーマのレイアウトは、サイトの`layouts`ディレクトリに同じ名前のファイルを作成することでオーバーライドできます。
|
||||
例えば、ドキュメントの`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
|
||||
|
||||
詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。
|
||||
|
||||
## さらなるカスタマイズ
|
||||
|
||||
探しているものが見つかりませんでしたか？[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマに貢献してください！
|
||||
探しているものが見つかりませんでしたか？[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマへの貢献をお願いします！
|
||||
|
||||
[hugo-template-docs]: https://gohugo.io/templates/
|
||||
@@ -4,13 +4,13 @@ weight: 1
|
||||
prev: /docs/advanced
|
||||
---
|
||||
|
||||
Hextraは、Hugoの[多言語モード](https://gohugo.io/content-management/multilingual/)を使用して、複数の言語でサイトを作成することをサポートしています。
|
||||
Hextra は Hugo の [多言語モード](https://gohugo.io/content-management/multilingual/) を使用して、複数言語のサイトを作成することをサポートしています。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 多言語対応を有効にする
|
||||
|
||||
サイトを多言語対応にするためには、Hugoにサポートする言語を伝える必要があります。サイトの設定ファイルに以下を追加します：
|
||||
サイトを多言語対応にするには、Hugo にサポートする言語を伝える必要があります。サイト設定ファイルに以下を追加します:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
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/folder name="content" >}}
|
||||
@@ -40,11 +40,11 @@ Hugoは、ファイル名による翻訳管理をサポートしています。
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
注: Hugoは[コンテンツディレクトリによる翻訳](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)もサポートしています。
|
||||
注: Hugo は [コンテンツディレクトリによる翻訳](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) もサポートしています。
|
||||
|
||||
## メニュー項目の翻訳
|
||||
|
||||
ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります：
|
||||
ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -59,7 +59,7 @@ menu:
|
||||
weight: 2
|
||||
```
|
||||
|
||||
そして、対応するi18nファイルで翻訳します：
|
||||
そして、対応する i18n ファイルで翻訳します:
|
||||
|
||||
```yaml {filename="i18n/fr.yaml"}
|
||||
documentation: Documentation
|
||||
@@ -68,16 +68,16 @@ blog: Blog
|
||||
|
||||
## 文字列の翻訳
|
||||
|
||||
他の場所の文字列を翻訳するには、対応するi18nファイルに翻訳を追加する必要があります：
|
||||
他の場所の文字列を翻訳するには、対応する i18n ファイルに翻訳を追加する必要があります:
|
||||
|
||||
```yaml {filename="i18n/fr.yaml"}
|
||||
readMore: Lire la suite
|
||||
```
|
||||
|
||||
テーマで使用されている文字列のリストは、`i18n/en.yaml` ファイルにあります。
|
||||
テーマで使用される文字列の一覧は `i18n/en.yaml` ファイルで確認できます。
|
||||
|
||||
## さらに詳しく
|
||||
|
||||
- [Hugo 多言語モード](https://gohugo.io/content-management/multilingual/)
|
||||
- [Hugo 多言語 Part 1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
|
||||
- [Hugo 多言語 Part 2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
|
||||
- [Hugo 多言語対応 パート1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
|
||||
- [Hugo 多言語対応 パート2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
|
||||
@@ -2,13 +2,13 @@
|
||||
title: はじめに
|
||||
weight: 1
|
||||
tags:
|
||||
- ドキュメント
|
||||
- ガイド
|
||||
- Docs
|
||||
- Guide
|
||||
next: /docs/guide
|
||||
prev: /docs
|
||||
---
|
||||
|
||||
## テンプレートからクイックスタート
|
||||
## テンプレートから始める
|
||||
|
||||
{{< icon "github" >}} [imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
|
||||
|
||||
@@ -16,26 +16,26 @@ prev: /docs
|
||||
|
||||
<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
|
||||
|
||||
[GitHub Actionsワークフロー](https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)を提供しており、サイトを自動的にビルドしてGitHub Pagesにデプロイし、無料でホストすることができます。
|
||||
[GitHub Actions ワークフロー](https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)を提供しており、サイトを自動的にビルドして GitHub Pages にデプロイし、無料でホストすることができます。
|
||||
その他のオプションについては、[サイトのデプロイ](../guide/deploy-site)を確認してください。
|
||||
|
||||
[🌐 デモ ↗](https://imfing.github.io/hextra-starter-template/)
|
||||
|
||||
## 新しいプロジェクトとして始める
|
||||
## 新規プロジェクトとして始める
|
||||
|
||||
HugoプロジェクトにHextraテーマを追加する主な方法は2つあります：
|
||||
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` フォルダに保存されます。
|
||||
|
||||
### HugoモジュールとしてHextraをセットアップ
|
||||
### Hugo モジュールとして Hextra をセットアップ
|
||||
|
||||
#### 前提条件
|
||||
|
||||
開始する前に、以下のソフトウェアがインストールされている必要があります：
|
||||
開始する前に、以下のソフトウェアがインストールされている必要があります:
|
||||
|
||||
- [Hugo（拡張版）](https://gohugo.io/installation/)
|
||||
- [Hugo (拡張版)](https://gohugo.io/installation/)
|
||||
- [Git](https://git-scm.com/)
|
||||
- [Go](https://go.dev/)
|
||||
|
||||
@@ -43,24 +43,24 @@ HugoプロジェクトにHextraテーマを追加する主な方法は2つあり
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### 新しいHugoサイトを初期化
|
||||
### 新しい Hugo サイトを初期化
|
||||
|
||||
```shell
|
||||
hugo new site my-site --format=yaml
|
||||
```
|
||||
|
||||
### モジュール経由でHextraテーマを設定
|
||||
### モジュール経由で Hextra テーマを設定
|
||||
|
||||
```shell
|
||||
# Hugoモジュールを初期化
|
||||
# Hugo モジュールを初期化
|
||||
cd my-site
|
||||
hugo mod init github.com/username/my-site
|
||||
|
||||
# Hextraテーマを追加
|
||||
# Hextra テーマを追加
|
||||
hugo mod get github.com/imfing/hextra
|
||||
```
|
||||
|
||||
`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します：
|
||||
`hugo.yaml` を設定して Hextra テーマを使用するようにします:
|
||||
|
||||
```yaml
|
||||
module:
|
||||
@@ -70,7 +70,7 @@ module:
|
||||
|
||||
### 最初のコンテンツページを作成
|
||||
|
||||
ホームページとドキュメントページの新しいコンテンツページを作成します：
|
||||
ホームページとドキュメントページの新しいコンテンツページを作成します:
|
||||
|
||||
```shell
|
||||
hugo new content/_index.md
|
||||
@@ -83,64 +83,64 @@ hugo new content/docs/_index.md
|
||||
hugo server --buildDrafts --disableFastRender
|
||||
```
|
||||
|
||||
これで、新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。
|
||||
これで、新しいサイトのプレビューが `http://localhost:1313/` で利用可能になります。
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
{{% details title="テーマを更新するには？" %}}
|
||||
|
||||
プロジェクト内のすべてのHugoモジュールを最新バージョンに更新するには、次のコマンドを実行します：
|
||||
プロジェクト内のすべての Hugo モジュールを最新バージョンに更新するには、次のコマンドを実行します:
|
||||
|
||||
```shell
|
||||
hugo mod get -u
|
||||
```
|
||||
|
||||
Hextraを[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します：
|
||||
Hextra を[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します:
|
||||
|
||||
```shell
|
||||
hugo mod get -u github.com/imfing/hextra
|
||||
```
|
||||
|
||||
詳細については、[Hugoモジュール](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)を参照してください。
|
||||
詳細については、[Hugo モジュール](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)を参照してください。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
### GitサブモジュールとしてHextraをセットアップ
|
||||
### Git サブモジュールとして Hextra をセットアップ
|
||||
|
||||
#### 前提条件
|
||||
|
||||
開始する前に、以下のソフトウェアがインストールされている必要があります：
|
||||
開始する前に、以下のソフトウェアがインストールされている必要があります:
|
||||
|
||||
- [Hugo（拡張版）](https://gohugo.io/installation/)
|
||||
- [Hugo (拡張版)](https://gohugo.io/installation/)
|
||||
- [Git](https://git-scm.com/)
|
||||
|
||||
#### 手順
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### 新しいHugoサイトを初期化
|
||||
### 新しい Hugo サイトを初期化
|
||||
|
||||
```shell
|
||||
hugo new site my-site --format=yaml
|
||||
```
|
||||
|
||||
### HextraテーマをGitサブモジュールとして追加
|
||||
### Git サブモジュールとして Hextra テーマを追加
|
||||
|
||||
サイトディレクトリに移動し、新しいGitリポジトリを初期化します：
|
||||
サイトディレクトリに移動して新しい Git リポジトリを初期化します:
|
||||
|
||||
```shell
|
||||
cd my-site
|
||||
git init
|
||||
```
|
||||
|
||||
次に、HextraテーマをGitサブモジュールとして追加します：
|
||||
次に、Hextra テーマを Git サブモジュールとして追加します:
|
||||
|
||||
```shell
|
||||
git submodule add https://github.com/imfing/hextra.git themes/hextra
|
||||
```
|
||||
|
||||
`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します：
|
||||
`hugo.yaml` を設定して Hextra テーマを使用するようにします:
|
||||
|
||||
```yaml
|
||||
theme: hextra
|
||||
@@ -148,7 +148,7 @@ theme: hextra
|
||||
|
||||
### 最初のコンテンツページを作成
|
||||
|
||||
ホームページとドキュメントページの新しいコンテンツページを作成します：
|
||||
ホームページとドキュメントページの新しいコンテンツページを作成します:
|
||||
|
||||
```shell
|
||||
hugo new content/_index.md
|
||||
@@ -161,41 +161,41 @@ hugo new content/docs/_index.md
|
||||
hugo server --buildDrafts --disableFastRender
|
||||
```
|
||||
|
||||
新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。
|
||||
新しいサイトのプレビューが `http://localhost:1313/` で利用可能になります。
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
[CI/CD](https://ja.wikipedia.org/wiki/CI/CD)を使用してHugoウェブサイトをデプロイする場合、`hugo`コマンドを実行する前に以下のコマンドを実行することが重要です。
|
||||
Hugo ウェブサイトのデプロイに [CI/CD](https://ja.wikipedia.org/wiki/CI/CD) を使用する場合、`hugo` コマンドを実行する前に以下のコマンドを実行することが重要です。
|
||||
|
||||
```shell
|
||||
git submodule update --init
|
||||
```
|
||||
|
||||
このコマンドを実行しないと、テーマフォルダにHextraテーマファイルが取り込まれず、ビルドが失敗します。
|
||||
このコマンドを実行しないと、テーマフォルダに Hextra テーマファイルが配置されず、ビルドが失敗します。
|
||||
|
||||
|
||||
{{% details title="テーマを更新するには？" %}}
|
||||
|
||||
リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します：
|
||||
リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します:
|
||||
|
||||
```shell
|
||||
git submodule update --remote
|
||||
```
|
||||
|
||||
Hextraを最新のコミットに更新するには、次のコマンドを実行します：
|
||||
Hextra を最新のコミットに更新するには、次のコマンドを実行します:
|
||||
|
||||
```shell
|
||||
git submodule update --remote themes/hextra
|
||||
```
|
||||
|
||||
詳細については、[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)を参照してください。
|
||||
詳細については、[Git サブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)を参照してください。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## 次へ
|
||||
## 次に
|
||||
|
||||
以下のセクションを探索して、さらにコンテンツを追加し始めましょう：
|
||||
以下のセクションを探索して、さらにコンテンツを追加しましょう:
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../guide/organize-files" title="ファイルの整理" icon="document-duplicate" >}}
|
||||
|
||||
@@ -7,7 +7,7 @@ sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
Hextraの使い方を学ぶために、以下のセクションを探索してください:
|
||||
Hextra の使い方を学ぶには、以下のセクションを参照してください:
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
---
|
||||
title: 設定
|
||||
weight: 2
|
||||
tags:
|
||||
- 設定
|
||||
---
|
||||
|
||||
Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取ります。
|
||||
この設定ファイルでは、サイトのすべての側面を設定できます。
|
||||
利用可能な設定とベストプラクティスの包括的な理解を得るために、GitHub上のこのサイトの設定ファイル[`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml)をチェックしてください。
|
||||
Hugo はサイトのルートにある `hugo.yaml` から設定を読み込みます。
|
||||
この設定ファイルであなたのサイトのあらゆる側面を設定できます。
|
||||
利用可能な設定項目とベストプラクティスを網羅的に理解するには、GitHub 上のこのサイトの設定ファイル [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) を参照してください。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -13,7 +15,7 @@ Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取
|
||||
|
||||
### メニュー
|
||||
|
||||
右上のメニューは、設定ファイルの`menu.main`セクションで定義されます：
|
||||
右上のメニューは設定ファイルの `menu.main` セクションで定義されます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -24,7 +26,7 @@ menu:
|
||||
- name: ブログ
|
||||
pageRef: /blog
|
||||
weight: 2
|
||||
- name: について
|
||||
- name: このサイトについて
|
||||
pageRef: /about
|
||||
weight: 3
|
||||
- name: 検索
|
||||
@@ -38,19 +40,19 @@ menu:
|
||||
icon: github
|
||||
```
|
||||
|
||||
メニュー項目にはさまざまなタイプがあります：
|
||||
メニュー項目にはいくつかの種類があります：
|
||||
|
||||
1. `pageRef`を使用してサイト内のページにリンク
|
||||
1. `pageRef` でサイト内のページにリンク
|
||||
```yaml
|
||||
- name: ドキュメント
|
||||
pageRef: /docs
|
||||
```
|
||||
2. `url`を使用して外部URLにリンク
|
||||
2. `url` で外部URLにリンク
|
||||
```yaml
|
||||
- name: GitHub
|
||||
url: "https://github.com"
|
||||
```
|
||||
3. `type: search`を使用して検索バーを表示
|
||||
3. `type: search` で検索バー
|
||||
```yaml
|
||||
- name: 検索
|
||||
params:
|
||||
@@ -63,12 +65,33 @@ menu:
|
||||
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"}
|
||||
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"}
|
||||
---
|
||||
@@ -102,7 +125,7 @@ sidebar:
|
||||
|
||||
### 追加リンク
|
||||
|
||||
サイドバーの追加リンクは、設定ファイルの`menu.sidebar`セクションで定義されます：
|
||||
サイドバーの追加リンクは設定ファイルの `menu.sidebar` セクションで定義されます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -111,10 +134,10 @@ menu:
|
||||
params:
|
||||
type: separator
|
||||
weight: 1
|
||||
- name: "について"
|
||||
- name: "このサイトについて"
|
||||
pageRef: "/about"
|
||||
weight: 2
|
||||
- name: "Hugo Docs ↗"
|
||||
- name: "Hugo ドキュメント ↗"
|
||||
url: "https://gohugo.io/documentation/"
|
||||
weight: 3
|
||||
```
|
||||
@@ -123,7 +146,7 @@ menu:
|
||||
|
||||
### 目次
|
||||
|
||||
目次は、コンテンツファイルの見出しから自動的に生成されます。ページのフロントマターで`toc: false`を設定することで無効にできます。
|
||||
目次はコンテンツファイルの見出しから自動生成されます。ページのフロントマターで `toc: false` を設定することで無効化できます。
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -134,7 +157,7 @@ toc: false
|
||||
|
||||
### ページ編集リンク
|
||||
|
||||
ページ編集リンクを設定するには、設定ファイルで`params.editURL.base`パラメータを設定します：
|
||||
ページ編集リンクを設定するには、設定ファイルで `params.editURL.base` パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -143,8 +166,8 @@ params:
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
提供されたURLをルートディレクトリとして、各ページの編集リンクが自動的に生成されます。
|
||||
特定のページの編集リンクを設定したい場合は、ページのフロントマターで`editURL`パラメータを設定します：
|
||||
編集リンクは提供されたURLをルートディレクトリとして各ページに対して自動生成されます。
|
||||
特定のページに対して編集リンクを設定したい場合は、ページのフロントマターで `editURL` パラメータを設定できます：
|
||||
|
||||
```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"}
|
||||
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/folder name="static" >}}
|
||||
@@ -186,14 +209,30 @@ copyright: "© 2024 YOUR TEXT HERE"
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
プロジェクトに`favicon.ico`、`favicon.svg`、`favicon-dark.svg`ファイルを含めて、サイトのファビコンが正しく表示されるようにします。
|
||||
#### 基本設定
|
||||
|
||||
`favicon.ico`は一般的に古いブラウザ用ですが、`favicon.svg`と`favicon-dark.svg`は現代のブラウザでサポートされています。
|
||||
[favicon.io](https://favicon.io/)や[favycon](https://github.com/ruisaraiva19/favycon)などのツールを使用して、このようなアイコンを生成できます。
|
||||
最低限、`static` フォルダに `favicon.svg` を含めてください。これがサイトのデフォルトファビコンとして使用されます。
|
||||
|
||||
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"}
|
||||
params:
|
||||
@@ -203,18 +242,34 @@ params:
|
||||
displayToggle: true
|
||||
```
|
||||
|
||||
`theme.default`のオプション：
|
||||
`theme.default` のオプション：
|
||||
|
||||
- `light` - 常にライトモードを使用
|
||||
- `dark` - 常にダークモードを使用
|
||||
- `system` - オペレーティングシステムの設定と同期（デフォルト）
|
||||
|
||||
`theme.displayToggle`パラメータを使用して、テーマを変更するためのトグルボタンを表示できます。
|
||||
`true`に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えることができます。
|
||||
`theme.displayToggle` パラメータはテーマを変更するためのトグルボタンを表示します。
|
||||
`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"}
|
||||
params:
|
||||
@@ -227,7 +282,7 @@ params:
|
||||
|
||||
### ページ幅
|
||||
|
||||
ページの幅は、設定ファイルの`params.page.width`パラメータでカスタマイズできます：
|
||||
ページの幅は設定ファイルの `params.page.width` パラメータでカスタマイズできます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -236,14 +291,14 @@ params:
|
||||
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)による全文検索はデフォルトで有効です。
|
||||
検索インデックスをカスタマイズするには、設定ファイルで`params.search.flexsearch.index`パラメータを設定します：
|
||||
[FlexSearch](https://github.com/nextapps-de/flexsearch) を利用した全文検索はデフォルトで有効です。
|
||||
検索インデックスをカスタマイズするには、設定ファイルで `params.search.flexsearch.index` パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -253,35 +308,36 @@ params:
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# ページをインデックスする方法: content | summary | heading | title
|
||||
# インデックス対象: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
`flexsearch.index`のオプション：
|
||||
`flexsearch.index` のオプション：
|
||||
|
||||
- `content` - ページの全内容（デフォルト）
|
||||
- `summary` - ページの要約、詳細は[Hugoコンテンツ要約](https://gohugo.io/content-management/summaries/)を参照
|
||||
- `content` - ページの全文（デフォルト）
|
||||
- `summary` - ページの要約、詳細は [Hugo コンテンツ要約](https://gohugo.io/content-management/summaries/) を参照
|
||||
- `heading` - レベル1とレベル2の見出し
|
||||
- `title` - ページタイトルのみを含める
|
||||
|
||||
検索トークン化をカスタマイズするには、設定ファイルで`params.search.flexsearch.tokenize`パラメータを設定します：
|
||||
検索トークン化をカスタマイズするには、設定ファイルで `params.search.flexsearch.tokenize` パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
# ...
|
||||
flexsearch:
|
||||
# full | forward | reverse | strict
|
||||
tokenize: forward
|
||||
```
|
||||
|
||||
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)のオプション：
|
||||
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) のオプション：
|
||||
|
||||
- `strict` - 単語全体をインデックス
|
||||
- `forward` - 前方方向に単語を増分的にインデックス
|
||||
- `reverse` - 両方向に単語を増分的にインデックス
|
||||
- `full` - すべての可能な組み合わせをインデックス
|
||||
|
||||
検索インデックスからページを除外するには、ページのフロントマターで`excludeSearch: true`を設定します：
|
||||
FlexSearch 検索インデックスからページを除外するには、ページのフロントマターで `excludeSearch: true` を設定します：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -290,12 +346,65 @@ excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### Googleアナリティクス
|
||||
### Google アナリティクス
|
||||
|
||||
[Googleアナリティクス](https://marketingplatform.google.com/about/analytics/)を有効にするには、`hugo.yaml`で`services.googleAnalytics.ID`フラグを設定します：
|
||||
[Google アナリティクス](https://marketingplatform.google.com/about/analytics/) を有効にするには、`hugo.yaml` で `services.googleAnalytics.ID` フラグを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
services:
|
||||
googleAnalytics:
|
||||
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"
|
||||
```
|
||||
@@ -4,24 +4,24 @@ prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugoは静的サイトを生成するため、柔軟なホスティングオプションが可能です。
|
||||
このページでは、Hextraサイトをさまざまなプラットフォームにデプロイするためのガイドを提供します。
|
||||
Hugo は静的サイトを生成するため、柔軟なホスティングオプションが利用可能です。
|
||||
このページでは、Hextra サイトを様々なプラットフォームにデプロイする方法を解説します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## 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"}
|
||||
# HugoサイトをGitHub Pagesにデプロイするためのサンプルワークフロー
|
||||
# Hugo サイトをビルドし GitHub Pages にデプロイするサンプルワークフロー
|
||||
name: Deploy Hugo site to Pages
|
||||
|
||||
on:
|
||||
@@ -29,22 +29,21 @@ on:
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Actionsタブから手動でこのワークフローを実行可能
|
||||
# Actions タブから手動で実行可能
|
||||
workflow_dispatch:
|
||||
|
||||
# GITHUB_TOKENの権限を設定してGitHub Pagesへのデプロイを許可
|
||||
# GITHUB_TOKEN の権限を設定（GitHub Pages へのデプロイを許可）
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# 同時実行を1つに制限し、進行中の実行と最新のキューイングされた実行の間の実行をスキップ。
|
||||
# ただし、進行中の実行はキャンセルしないでください。これらの本番デプロイを完了させたいためです。
|
||||
# 同時実行を1つに制限（進行中の実行はキャンセルしない）
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
# デフォルトはbash
|
||||
# デフォルトシェルを bash に設定
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
@@ -59,7 +58,7 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # .GitInfoと.Lastmodのためにすべての履歴を取得
|
||||
fetch-depth: 0 # .GitInfo と .Lastmod 用に全履歴を取得
|
||||
submodules: recursive
|
||||
- name: Setup Go
|
||||
uses: actions/setup-go@v5
|
||||
@@ -74,7 +73,7 @@ jobs:
|
||||
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
|
||||
- name: Build with Hugo
|
||||
env:
|
||||
# Hugoモジュールとの最大限の互換性のために
|
||||
# Hugo モジュールとの最大互換性のため
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
@@ -103,13 +102,13 @@ jobs:
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定します：
|
||||
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定してください:
|
||||
|
||||
{{< /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]}
|
||||
run: |
|
||||
@@ -118,47 +117,47 @@ run: |
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
独自のドメインにデプロイする場合は、`--baseURL` の値を適宜変更してください。
|
||||
独自ドメインを使用する場合は、`--baseURL` の値を適宜変更してください。
|
||||
|
||||
|
||||
## Cloudflare Pages
|
||||
|
||||
1. サイトのソースコードをGitリポジトリ（例：GitHub）に配置します。
|
||||
2. [Cloudflareダッシュボード](https://dash.cloudflare.com/)にログインし、アカウントを選択します。
|
||||
3. アカウントホームで、**Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択します。
|
||||
4. リポジトリを選択し、**Set up builds and deployments** セクションで以下の情報を提供します：
|
||||
1. サイトのソースコードを Git リポジトリ（GitHub など）に配置
|
||||
2. [Cloudflare ダッシュボード](https://dash.cloudflare.com/) にログインしアカウントを選択
|
||||
3. Account Home で **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択
|
||||
4. リポジトリを選択し、**Set up builds and deployments** セクションで以下を設定:
|
||||
|
||||
| 設定 | 値 |
|
||||
| ---------------- | ------------------- |
|
||||
| 本番ブランチ | `main` |
|
||||
| ビルドコマンド | `hugo --gc --minify` |
|
||||
| ビルドディレクトリ | `public` |
|
||||
| 設定項目 | 値 |
|
||||
| ----------------- | -------------------- |
|
||||
| Production branch | `main` |
|
||||
| Build command | `hugo --gc --minify` |
|
||||
| Build directory | `public` |
|
||||
|
||||
詳細については、以下を確認してください：
|
||||
- [Hugoサイトのデプロイ](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)。
|
||||
- [言語サポートとツール](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)。
|
||||
詳細は以下を参照:
|
||||
- [Deploy a Hugo site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)
|
||||
- [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)
|
||||
|
||||
|
||||
## Netlify
|
||||
|
||||
1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。
|
||||
2. [プロジェクトをインポート](https://app.netlify.com/start)してNetlifyに追加します。
|
||||
3. [hextra-starter-template][hextra-starter-template]を使用していない場合、以下の設定を手動で行います：
|
||||
- ビルドコマンドを `hugo --gc --minify` に設定します。
|
||||
- 公開ディレクトリを `public` に指定します。
|
||||
- 環境変数 `HUGO_VERSION` を追加し、`0.147.7` に設定するか、`netlify.toml` ファイルに設定します。
|
||||
4. デプロイします！
|
||||
1. コードを Git リポジトリ（GitHub, GitLab など）にプッシュ
|
||||
2. Netlify に [プロジェクトをインポート](https://app.netlify.com/start)
|
||||
3. [hextra-starter-template][hextra-starter-template] を使用していない場合、以下を手動設定:
|
||||
- Build command を `hugo --gc --minify` に設定
|
||||
- Publish directory を `public` に指定
|
||||
- 環境変数 `HUGO_VERSION` を追加し `0.147.7` を設定、または `netlify.toml` ファイルで設定
|
||||
4. デプロイ！
|
||||
|
||||
詳細については、[NetlifyでのHugo](https://docs.netlify.com/integrations/frameworks/hugo/)を確認してください。
|
||||
詳細は [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) を参照
|
||||
|
||||
|
||||
## Vercel
|
||||
|
||||
1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。
|
||||
2. [Vercelダッシュボード](https://vercel.com/dashboard)に移動し、Hugoプロジェクトをインポートします。
|
||||
3. プロジェクトを設定し、フレームワークプリセットとしてHugoを選択します。
|
||||
4. ビルドコマンドとインストールコマンドを上書きします：
|
||||
1. ビルドコマンドを `hugo --gc --minify` に設定します。
|
||||
2. インストールコマンドを `yum install golang` に設定します。
|
||||
1. コードを Git リポジトリ（GitHub, GitLab など）にプッシュ
|
||||
2. [Vercel ダッシュボード](https://vercel.com/dashboard) に移動し Hugo プロジェクトをインポート
|
||||
3. プロジェクトを設定、Framework Preset で Hugo を選択
|
||||
4. Build Command と Install command を上書き:
|
||||
1. Build Command を `hugo --gc --minify` に設定
|
||||
2. Install Command を `yum install golang` に設定
|
||||
|
||||
|
||||
|
||||
@@ -4,15 +4,15 @@ weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
現在、Hextraはダイアグラムのために[Mermaid](#mermaid)をサポートしています。
|
||||
現在、Hextra は [Mermaid](#mermaid) によるダイアグラム作成をサポートしています。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 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
|
||||
```mermaid
|
||||
@@ -24,7 +24,7 @@ graph TD;
|
||||
```
|
||||
````
|
||||
|
||||
これは次のようにレンダリングされます:
|
||||
これは以下のようにレンダリングされます:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
@@ -34,20 +34,20 @@ graph TD;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
シーケンス図:
|
||||
シーケンス図の例:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: こんにちはJohn、元気ですか？
|
||||
loop 健康チェック
|
||||
John->>John: 心気症と戦う
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: 理性的な思考 <br/>が勝つ！
|
||||
John-->>Alice: 元気です！
|
||||
John->>Bob: あなたはどうですか？
|
||||
Bob-->>John: とても元気です！
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
詳細については、[Mermaidドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。
|
||||
詳細については、[Mermaid ドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。
|
||||
@@ -3,32 +3,35 @@ title: "LaTeX"
|
||||
weight: 4
|
||||
---
|
||||
|
||||
デフォルトでは、\(\KaTeX\) が LaTeX 数式のレンダリングに使用されます。
|
||||
手動での有効化は不要で、Markdown コンテンツで LaTeX 数式をすぐに使い始めることができます。
|
||||
LaTeX の数式表現はデフォルトで \(\KaTeX\) を使用してレンダリングされます。特別な設定なしで、Markdown コンテンツ内に直接記述できます。
|
||||
|
||||
## 例
|
||||
## 使用方法
|
||||
|
||||
Markdown コンテンツ内で、インラインおよび別段落の LaTeX 数式がサポートされています。
|
||||
LaTeX はインライン式とブロック式の両方で使用できます。
|
||||
|
||||
### インライン
|
||||
### インライン数式
|
||||
|
||||
文中に数式を含めるには、`\(` と `\)` で囲みます。
|
||||
|
||||
```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"}
|
||||
$$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"}
|
||||
$$
|
||||
@@ -52,11 +55,28 @@ $$
|
||||
\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]
|
||||
> Hugo が Markdown コンテンツ内の LaTeX 数式を検出できるように、Hugo 設定ファイルで [パススルー拡張機能](https://gohugo.io/content-management/mathematics/) を有効にして設定してください。
|
||||
> Hugo が Markdown コンテンツ内の LaTeX 数式を認識できるよう、[パススルー拡張](https://gohugo.io/content-management/mathematics/) を Hugo 設定ファイルで有効にしてください。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
@@ -69,35 +89,47 @@ markup:
|
||||
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"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```yaml {filename="hugo.yaml"}
|
||||
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 を使用するには、`hugo.yaml` 設定ファイルに以下を追加してください:
|
||||
代わりに [MathJax][mathjax] を使用して数式をレンダリングすることもできます:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -105,5 +137,10 @@ params:
|
||||
engine: mathjax
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> MathJax をさらにカスタマイズするには（ローダーオプションの調整や CDN/ソースの変更など）、プロジェクトの `layouts/_partials/scripts/mathjax.html` でテンプレートを上書きしてください。Hugo はテーマのデフォルトではなく、あなたのバージョンを使用します。
|
||||
|
||||
[katex]: https://katex.org/
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
|
||||
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/
|
||||
@@ -3,19 +3,19 @@ title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugoは、テキストのフォーマットやリストの作成などに[Markdown](https://ja.wikipedia.org/wiki/Markdown)構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。
|
||||
Hugo はテキストの書式設定やリスト作成などに [Markdown](https://en.wikipedia.org/wiki/Markdown) 構文をサポートしています。このページでは、最も一般的な Markdown 構文の例を紹介します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Markdownの例
|
||||
## Markdown の例
|
||||
|
||||
### テキストのスタイル
|
||||
### テキストのスタイリング
|
||||
|
||||
| スタイル | 構文 | 例 | 出力 |
|
||||
| -------- | -------- | ------ | ------ |
|
||||
| :------------ | :----------------------- | :------------------------------------ | :------------------------------------ |
|
||||
| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
|
||||
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | *斜体テキスト* |
|
||||
| 取り消し線 | `~~取り消し線テキスト~~` | `~~取り消し線テキスト~~` | ~~取り消し線テキスト~~ |
|
||||
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | _斜体テキスト_ |
|
||||
| 打ち消し線 | `~~打ち消し線テキスト~~` | `~~打ち消し線テキスト~~` | ~~打ち消し線テキスト~~ |
|
||||
| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
|
||||
| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
|
||||
|
||||
@@ -23,84 +23,84 @@ Hugoは、テキストのフォーマットやリストの作成などに[Markdo
|
||||
|
||||
引用元付きのブロッククォート
|
||||
|
||||
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
|
||||
> — <cite>ロブ・パイク[^1]</cite>
|
||||
> メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
|
||||
> — <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}
|
||||
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
|
||||
> — <cite>ロブ・パイク[^1]</cite>
|
||||
> メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
|
||||
> — <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" >}}
|
||||
|
||||
アラートは、ブロッククォート構文に基づく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)がサポートされています。
|
||||
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]
|
||||
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
|
||||
> コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。
|
||||
|
||||
> [!TIP]
|
||||
> 物事をより良く、または簡単に行うための役立つアドバイス。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ユーザーが目標を達成するために知っておくべき重要な情報。
|
||||
> ユーザーが目標を達成するために知っておく必要がある重要な情報。
|
||||
|
||||
> [!WARNING]
|
||||
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
|
||||
> 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。
|
||||
|
||||
> [!CAUTION]
|
||||
> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
|
||||
> 特定のアクションによるリスクやネガティブな結果についての警告。
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> [!NOTE]
|
||||
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
|
||||
> コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。
|
||||
|
||||
> [!TIP]
|
||||
> 物事をより良く、または簡単に行うための役立つアドバイス。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ユーザーが目標を達成するために知っておくべき重要な情報。
|
||||
> ユーザーが目標を達成するために知っておく必要がある重要な情報。
|
||||
|
||||
> [!WARNING]
|
||||
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
|
||||
> 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。
|
||||
|
||||
> [!CAUTION]
|
||||
> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
|
||||
> 特定のアクションによるリスクやネガティブな結果についての警告。
|
||||
```
|
||||
|
||||
### テーブル
|
||||
|
||||
テーブルはMarkdownのコア仕様には含まれていませんが、Hugoはデフォルトでサポートしています。
|
||||
テーブルはコアMarkdown仕様の一部ではありませんが、Hugoはデフォルトでサポートしています。
|
||||
|
||||
| 名前 | 年齢 |
|
||||
|--------|------|
|
||||
| ボブ | 27 |
|
||||
| アリス | 23 |
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 名前 | 年齢 |
|
||||
|--------|------|
|
||||
| ボブ | 27 |
|
||||
| アリス | 23 |
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
```
|
||||
|
||||
#### テーブル内のインラインMarkdown
|
||||
|
||||
| 斜体 | 太字 | コード |
|
||||
| -------- | -------- | ------ |
|
||||
| *斜体* | **太字** | `コード` |
|
||||
| :-------- | :-------- | :-------- |
|
||||
| _斜体_ | **太字** | `コード` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 斜体 | 太字 | コード |
|
||||
| -------- | -------- | ------ |
|
||||
| *斜体* | **太字** | `コード` |
|
||||
| :-------- | :-------- | :-------- |
|
||||
| _斜体_ | **太字** | `コード` |
|
||||
```
|
||||
|
||||
### コードブロック
|
||||
@@ -137,22 +137,22 @@ Hextraの最新バージョンと[Hugo v0.146.0](https://github.com/gohugoio/hug
|
||||
|
||||
#### ネストされたリスト
|
||||
|
||||
* 果物
|
||||
* りんご
|
||||
* オレンジ
|
||||
* バナナ
|
||||
* 乳製品
|
||||
* 牛乳
|
||||
* チーズ
|
||||
- 果物
|
||||
- りんご
|
||||
- オレンジ
|
||||
- バナナ
|
||||
- 乳製品
|
||||
- 牛乳
|
||||
- チーズ
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* 果物
|
||||
* りんご
|
||||
* オレンジ
|
||||
* バナナ
|
||||
* 乳製品
|
||||
* 牛乳
|
||||
* チーズ
|
||||
- 果物
|
||||
- りんご
|
||||
- オレンジ
|
||||
- バナナ
|
||||
- 乳製品
|
||||
- 牛乳
|
||||
- チーズ
|
||||
```
|
||||
|
||||
### 画像
|
||||
@@ -165,16 +165,18 @@ Hextraの最新バージョンと[Hugo v0.146.0](https://github.com/gohugoio/hug
|
||||
|
||||
キャプション付き:
|
||||
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
|
||||
```
|
||||
|
||||
より高度な機能が必要な場合は、Hugoの組み込み[Figureショートコード](https://gohugo.io/shortcodes/figure/)を使用してください。
|
||||
|
||||
## 設定
|
||||
|
||||
HugoはMarkdownの解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
|
||||
Markdownのレンダリングは、`hugo.yaml`の`markup.goldmark`で設定できます。
|
||||
HugoはMarkdown解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
|
||||
Markdownのレンダリング設定は`hugo.yaml`の`markup.goldmark`で行えます。
|
||||
以下はHextraのデフォルト設定です:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
@@ -186,11 +188,11 @@ markup:
|
||||
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://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
* [Markdownチュートリアル](https://www.markdowntutorial.com/)
|
||||
* [Markdownリファレンス](https://commonmark.org/help/)
|
||||
- [Markdownガイド](https://www.markdownguide.org/)
|
||||
- [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
- [Markdownチュートリアル](https://www.markdowntutorial.com/)
|
||||
- [Markdownリファレンス](https://commonmark.org/help/)
|
||||
@@ -6,8 +6,8 @@ prev: /docs/guide
|
||||
|
||||
## ディレクトリ構造
|
||||
|
||||
デフォルトでは、Hugoは`content`ディレクトリ内のMarkdownファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
|
||||
このサイトを例に取ります：
|
||||
デフォルトでは、Hugo は `content` ディレクトリ内の Markdown ファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
|
||||
このサイトを例に挙げます：
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -29,7 +29,7 @@ prev: /docs/guide
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
各`_index.md`ファイルは、対応するセクションのインデックスページです。他のMarkdownファイルは通常のページです。
|
||||
各 `_index.md` ファイルは、対応するセクションのインデックスページです。他の Markdown ファイルは通常のページです。
|
||||
|
||||
```
|
||||
content
|
||||
@@ -47,15 +47,15 @@ content
|
||||
|
||||
## レイアウト
|
||||
|
||||
Hextraは、異なるコンテンツタイプに対して3つのレイアウトを提供します：
|
||||
Hextra は、異なるコンテンツタイプに対して3つのレイアウトを提供します：
|
||||
|
||||
| レイアウト | ディレクトリ | 特徴 |
|
||||
| :-------- | :-------------------- | :--------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 構造化されたドキュメントに最適で、このセクションと同じです。 |
|
||||
| `blog` | `content/blog/` | ブログ投稿用で、リスト表示と詳細記事表示の両方があります。 |
|
||||
| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事表示です。 |
|
||||
| :-------- | :------------------- | :------------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 構造化されたドキュメントに最適。このセクションと同じです。 |
|
||||
| `blog` | `content/blog/` | ブログ投稿用。リスト表示と詳細記事ビューの両方があります。 |
|
||||
| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事ビュー。 |
|
||||
|
||||
セクションの動作をビルトインレイアウトと同じにするには、セクションの`_index.md`のフロントマターで希望するタイプを指定します。
|
||||
セクションの動作を組み込みレイアウトと同じにするには、セクションの `_index.md` のフロントマターで希望するタイプを指定します。
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
@@ -65,11 +65,11 @@ cascade:
|
||||
---
|
||||
```
|
||||
|
||||
上記の設定例により、`content/my-docs/`内のコンテンツファイルはデフォルトでドキュメント（`docs`タイプ）として扱われます。
|
||||
上記の設定例により、`content/my-docs/` 内のコンテンツファイルはデフォルトでドキュメント（`docs` タイプ）として扱われます。
|
||||
|
||||
## サイドバーナビゲーション
|
||||
|
||||
サイドバーナビゲーションは、コンテンツの整理に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdownファイルのフロントマターで`weight`パラメータを使用します。
|
||||
サイドバーナビゲーションは、コンテンツのアルファベット順に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdown ファイルのフロントマターで `weight` パラメータを使用します。
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
@@ -79,24 +79,93 @@ weight: 2
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
サイドバーがあまり深くならないようにすることをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
|
||||
サイドバーを深くしすぎないことをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
|
||||
{{< /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
|
||||
```
|
||||
|
||||
### パンくずリンクのタイトルをカスタマイズ
|
||||
### パンくずリストのリンクタイトルのカスタマイズ
|
||||
|
||||
デフォルトでは、各パンくずリンクはそのページの`title`パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle`を指定します。
|
||||
デフォルトでは、各パンくずリストのリンクはそのページの `title` パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle` を指定します。
|
||||
|
||||
例えば、`Organize Files`の代わりに`Foo Bar`と表示したい場合：
|
||||
たとえば、`Organize Files` の代わりにパンくずリストを `Foo Bar` にしたい場合：
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
@@ -105,14 +174,14 @@ title: Organize Files
|
||||
---
|
||||
```
|
||||
|
||||
これにより、以下のパンくずが生成されます：
|
||||
これにより、次のパンくずリストが生成されます：
|
||||
```
|
||||
Documentation > Guide > Foo Bar
|
||||
```
|
||||
|
||||
### パンくずを非表示にする
|
||||
### パンくずリストの非表示
|
||||
|
||||
ページのフロントマターで`breadcrumbs: false`を指定することで、パンくずを完全に非表示にできます：
|
||||
ページからパンくずリストを完全に非表示にするには、フロントマターで `breadcrumbs: false` を指定します：
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
@@ -123,13 +192,13 @@ title: Organize Files
|
||||
|
||||
## コンテンツディレクトリの設定
|
||||
|
||||
デフォルトでは、Hugoはサイトを構築するためにルートの`content/`ディレクトリを使用します。
|
||||
例えば`docs/`など、異なるディレクトリをコンテンツに使用する必要がある場合は、サイト設定`hugo.yaml`で[`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir)パラメータを設定することで行えます。
|
||||
デフォルトでは、Hugo はサイトを構築するためにルートの `content/` ディレクトリを使用します。
|
||||
別のディレクトリ（例えば `docs/`）をコンテンツ用に使用する必要がある場合は、サイト設定 `hugo.yaml` で [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) パラメータを設定することで可能です。
|
||||
|
||||
## 画像の追加
|
||||
|
||||
画像を追加する最も簡単な方法は、画像ファイルをMarkdownファイルと同じディレクトリに置くことです。
|
||||
例えば、`my-page.md`ファイルと同じディレクトリに`image.png`ファイルを追加します：
|
||||
画像を追加する最も簡単な方法は、画像ファイルを Markdown ファイルと同じディレクトリに置くことです。
|
||||
たとえば、`my-page.md` ファイルと同じディレクトリに `image.png` ファイルを追加します：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -140,13 +209,13 @@ title: Organize Files
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
その後、以下のMarkdown構文を使用してコンテンツに画像を追加できます：
|
||||
そして、次の Markdown 構文を使用してコンテンツに画像を追加できます：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
また、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/folder name="content" >}}
|
||||
@@ -163,7 +232,7 @@ title: Organize Files
|
||||
|
||||
```
|
||||
|
||||
または、画像ファイルを`static`ディレクトリに置くこともできます。これにより、すべてのページで画像が利用可能になります：
|
||||
あるいは、画像ファイルを `static` ディレクトリに置くこともできます。これにより、画像はすべてのページで利用可能になります：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
@@ -178,7 +247,7 @@ title: Organize Files
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
画像パスはスラッシュ`/`で始まり、`static`ディレクトリからの相対パスであることに注意してください：
|
||||
画像パスはスラッシュ `/` で始まり、static ディレクトリからの相対パスであることに注意してください：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
|
||||
@@ -5,18 +5,18 @@ prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
|
||||
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に記述する簡潔なスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
|
||||
|
||||
Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="コールアウト" icon="warning" >}}
|
||||
{{< card link="cards" title="カード" icon="card" >}}
|
||||
{{< card link="details" title="詳細" icon="chevron-right" >}}
|
||||
{{< card link="callout" title="Callout" icon="warning" >}}
|
||||
{{< card link="cards" title="Cards" icon="card" >}}
|
||||
{{< card link="details" title="Details" icon="chevron-right" >}}
|
||||
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
|
||||
{{< card link="icon" title="アイコン" icon="badge-check" >}}
|
||||
{{< card link="steps" title="ステップ" icon="one" >}}
|
||||
{{< card link="tabs" title="タブ" icon="collection" >}}
|
||||
{{< card link="icon" title="Icon" icon="badge-check" >}}
|
||||
{{< card link="steps" title="Steps" icon="one" >}}
|
||||
{{< card link="tabs" title="Tabs" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
@@ -25,5 +25,5 @@ Hugo と Hextra が提供する追加のショートコード:
|
||||
|
||||
{{< cards >}}
|
||||
{{< 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 >}}
|
||||
@@ -6,30 +6,30 @@ aliases:
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
読者に重要な情報を示すための組み込みコンポーネントです。
|
||||
読者に重要な情報を表示するための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングするため、コンテンツの移植性と可読性が向上します。
|
||||
|
||||
## 例
|
||||
|
||||
{{< callout emoji="👾">}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
## 使用方法
|
||||
@@ -37,24 +37,24 @@ prev: /docs/guide/shortcodes
|
||||
### デフォルト
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 情報
|
||||
|
||||
{{< callout type="info" >}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
最新リリースについてはGitHubをご覧ください。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
最新リリースについてはGitHubをご覧ください。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
@@ -66,18 +66,18 @@ prev: /docs/guide/shortcodes
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
このAPIは次のバージョンで非推奨になります。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### エラー
|
||||
|
||||
{{< callout type="error" >}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
問題が発生しました。まもなく爆発します。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
問題が発生しました。まもなく爆発します。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
@@ -13,8 +13,8 @@ linkTitle: カード
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}}
|
||||
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" >}}
|
||||
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" >}}
|
||||
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" >}}
|
||||
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## 使用方法
|
||||
@@ -30,8 +30,8 @@ linkTitle: カード
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
@@ -42,18 +42,18 @@ linkTitle: カード
|
||||
| `link` | URL（内部または外部）。 |
|
||||
| `title` | カードのタイトル見出し。 |
|
||||
| `subtitle` | サブタイトル見出し（Markdown対応）。 |
|
||||
| `icon` | アイコンの名前。 |
|
||||
| `tag` | タグ内のテキスト。 |
|
||||
| `icon` | アイコン名。 |
|
||||
| `tag` | タグのテキスト。 |
|
||||
| `tagColor` | タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。 |
|
||||
|
||||
## 画像カード
|
||||
|
||||
さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:
|
||||
さらに、カードには画像の追加と以下のパラメータを通じた処理がサポートされています:
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|----------- |---------------------------------------------|
|
||||
| `image` | カードの画像URLを指定します。 |
|
||||
| `method` | Hugoの画像処理メソッドを設定します。 |
|
||||
| `method` | Hugoの画像処理方法を設定します。 |
|
||||
| `options` | Hugoの画像処理オプションを設定します。 |
|
||||
|
||||
カードは3種類の画像をサポートします:
|
||||
@@ -62,14 +62,14 @@ linkTitle: カード
|
||||
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
|
||||
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
|
||||
|
||||
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebPフォーマット）を適用します。
|
||||
現在サポートされている`method`は`Resize`、`Fit`、`Fill`、`Crop`です。
|
||||
Hextraはビルド時に画像処理が必要か自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebP形式）を適用します。
|
||||
現在サポートされている`method`: `Resize`、`Fit`、`Fill`、`Crop`。
|
||||
|
||||
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
Hugoの組み込み画像処理コマンド、方法、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
|
||||
## タグ
|
||||
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに便利です。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
|
||||
@@ -81,10 +81,10 @@ Hugoの組み込み画像処理コマンド、メソッド、オプションの
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" */>}}
|
||||
{{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="デフォルト色タグ付きカード" tag="タグテキスト" */>}}
|
||||
{{</* card link="../callout" title="赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
|
||||
{{</* card link="../callout" title="黄色タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
|
||||
{{</* card link="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 詳細
|
||||
---
|
||||
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -12,7 +12,7 @@ title: 詳細
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
Markdown は **サポートされています**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
@@ -22,14 +22,14 @@ Markdownは**サポートされています**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## 使い方
|
||||
## 使用方法
|
||||
|
||||
````markdown
|
||||
{{%/* details title="詳細" */%}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
Markdown は **サポートされています**。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: アイコン
|
||||
next: /docs/guide/shortcodes/steps
|
||||
---
|
||||
|
||||
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
|
||||
@@ -8,7 +9,7 @@ title: アイコン
|
||||
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-->
|
||||
|
||||
@@ -29,13 +30,13 @@ enableInlineShortcodes: true
|
||||
|
||||
### 独自のアイコンを追加する方法
|
||||
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自の SVG アイコンを追加します:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
```
|
||||
|
||||
その後、ショートコードで以下のように使用できます:
|
||||
追加したアイコンは以下のようにショートコードで使用できます:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。
|
||||
ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。
|
||||
@@ -6,15 +6,15 @@ sidebar:
|
||||
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-->
|
||||
|
||||
## 使用方法
|
||||
|
||||
### ローカルノートブックを使用する
|
||||
### ローカルノートブックの使用
|
||||
|
||||
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
|
||||
|
||||
@@ -29,11 +29,11 @@ Jupyter Notebook ショートコードを使用するには、プロジェクト
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます：
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を組み込みます:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: My Page
|
||||
title: マイページ
|
||||
math: true
|
||||
---
|
||||
|
||||
@@ -55,16 +55,16 @@ math: true
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: My Page
|
||||
title: マイページ
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
### リモートノートブックを使用する
|
||||
### リモートノートブックの使用
|
||||
|
||||
ノートブックファイルの URL を指定して、リモートノートブックを使用することもできます。たとえば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに含めるには、次のショートコードを使用します：
|
||||
ノートブックファイルの 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" */%}}
|
||||
@@ -72,7 +72,7 @@ math: true
|
||||
|
||||
## ノートブックの例
|
||||
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれるノートブックファイルの例です。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
|
||||
@@ -3,22 +3,23 @@ title: その他のショートコード
|
||||
linkTitle: その他
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
これらの一部はHugoの組み込みショートコードです。
|
||||
これらの一部は Hugo 組み込みのショートコードです。
|
||||
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
|
||||
{{< /callout >}}
|
||||
|
||||
## バッジ
|
||||
|
||||
```
|
||||
{{</* badge "バッジ" */>}}
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge "バッジ" >}}
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
バリエーション:
|
||||
|
||||
@@ -37,16 +38,16 @@ 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動画を埋め込みます。
|
||||
YouTube 動画を埋め込みます。
|
||||
|
||||
```
|
||||
{{</* youtube VIDEO_ID */>}}
|
||||
@@ -56,17 +57,17 @@ YouTube動画を埋め込みます。
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
詳細については、[Hugo の YouTube ショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
|
||||
## PDF
|
||||
|
||||
PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
|
||||
PDF ショートコードを使用すると、コンテンツ内に PDF ファイルを埋め込むことができます。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
|
||||
プロジェクトディレクトリ内に PDF ファイルを配置し、相対パスを使用することもできます。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: ステップ
|
||||
---
|
||||
|
||||
ステップのシリーズを表示するための組み込みコンポーネント。
|
||||
一連のステップを表示するための組み込みコンポーネントです。
|
||||
|
||||
## 例
|
||||
|
||||
@@ -22,14 +22,15 @@ title: ステップ
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## 使い方
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
このショートコードは**Markdownコンテンツ専用**であることに注意してください。
|
||||
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
|
||||
このショートコードは **Markdown コンテンツ専用** であることに注意してください。
|
||||
HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
|
||||
{{< /callout >}}
|
||||
|
||||
`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
|
||||
`steps` ショートコード内に Markdown の h3 ヘッダーを配置します。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
@@ -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 >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
{{< tab >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -20,23 +20,23 @@ next: /docs/guide/deploy-site
|
||||
```
|
||||
{{</* 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 */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 選択されたインデックスを指定
|
||||
### 選択インデックスの指定
|
||||
|
||||
`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。
|
||||
`defaultIndex` プロパティを使用して選択するタブを指定します。インデックスは 0 から始まります。
|
||||
|
||||
```
|
||||
{{</* 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 */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -45,14 +45,14 @@ next: /docs/guide/deploy-site
|
||||
|
||||
{{< 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 >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### Markdown を使用
|
||||
### Markdown の使用
|
||||
|
||||
コードブロックを含む Markdown 構文もサポートされています:
|
||||
|
||||
@@ -91,3 +91,35 @@ next: /docs/guide/deploy-site
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /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 */>}}
|
||||
```
|
||||
@@ -3,8 +3,8 @@ title: "シンタックスハイライト"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
Hugoは、純粋なGoで書かれた汎用シンタックスハイライターである[Chroma](https://github.com/alecthomas/chroma)を使用してシンタックスハイライトを行います。
|
||||
Markdownコンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば：
|
||||
Hugo は構文強調表示に、純粋な Go で書かれた汎用シンタックスハイライタ [Chroma](https://github.com/alecthomas/chroma) を使用しています。
|
||||
Markdown コンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば:
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -15,7 +15,7 @@ def say_hello():
|
||||
```
|
||||
````
|
||||
|
||||
は次のようにレンダリングされます：
|
||||
は次のようにレンダリングされます:
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
@@ -26,7 +26,7 @@ def say_hello():
|
||||
|
||||
### ファイル名
|
||||
|
||||
コードブロックにファイル名やタイトルを追加するには、`filename`属性を設定します：
|
||||
コードブロックにファイル名やタイトルを追加するには、`filename` 属性を設定します:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
@@ -44,7 +44,7 @@ def say_hello():
|
||||
|
||||
{{< 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"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
@@ -76,7 +76,7 @@ def say_hello():
|
||||
|
||||
### 行のハイライト
|
||||
|
||||
行をハイライトするには、`hl_lines`属性に行番号のリストを設定します：
|
||||
特定の行をハイライト表示するには、`hl_lines` 属性に行番号のリストを設定します:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```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"}
|
||||
params:
|
||||
@@ -109,6 +109,6 @@ params:
|
||||
display: hover
|
||||
```
|
||||
|
||||
## サポートされている言語
|
||||
## 対応言語
|
||||
|
||||
サポートされている言語のリストについては、[Chromaのドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。
|
||||
対応言語の一覧については、[Chroma のドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。
|
||||
Reference in New Issue
Block a user