forked from drowl87/hextra_mirror
docs(i18n): add ja translation
- translated via llm
This commit is contained in:
Xin
23
exampleSite/content/docs/guide/_index.ja.md
Normal file
23
exampleSite/content/docs/guide/_index.ja.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: ガイド
|
||||
weight: 2
|
||||
prev: /docs/getting-started
|
||||
next: /docs/guide/organize-files
|
||||
sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
Hextraの使い方を学ぶために、以下のセクションを探索してください:
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="organize-files" title="ファイルの整理" icon="document-duplicate" >}}
|
||||
{{< card link="configuration" title="設定" icon="adjustments" >}}
|
||||
{{< card link="markdown" title="Markdown" icon="markdown" >}}
|
||||
{{< card link="syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
|
||||
{{< card link="latex" title="LaTeX" icon="variable" >}}
|
||||
{{< card link="diagrams" title="ダイアグラム" icon="chart-square-bar" >}}
|
||||
{{< card link="shortcodes" title="ショートコード" icon="template" >}}
|
||||
{{< card link="deploy-site" title="サイトのデプロイ" icon="server" >}}
|
||||
{{< /cards >}}
|
||||
288
exampleSite/content/docs/guide/configuration.ja.md
Normal file
288
exampleSite/content/docs/guide/configuration.ja.md
Normal file
@ -0,0 +1,288 @@
|
||||
---
|
||||
title: 設定
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取ります。
|
||||
この設定ファイルでは、サイトのすべての側面を設定できます。
|
||||
利用可能な設定とベストプラクティスの包括的な理解を得るために、GitHub上のこのサイトの設定ファイル[`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml)をチェックしてください。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## ナビゲーション
|
||||
|
||||
### メニュー
|
||||
|
||||
右上のメニューは、設定ファイルの`menu.main`セクションで定義されます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- name: ドキュメント
|
||||
pageRef: /docs
|
||||
weight: 1
|
||||
- name: ブログ
|
||||
pageRef: /blog
|
||||
weight: 2
|
||||
- name: について
|
||||
pageRef: /about
|
||||
weight: 3
|
||||
- name: 検索
|
||||
weight: 4
|
||||
params:
|
||||
type: search
|
||||
- name: GitHub
|
||||
weight: 5
|
||||
url: "https://github.com/imfing/hextra"
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
メニュー項目にはさまざまなタイプがあります：
|
||||
|
||||
1. `pageRef`を使用してサイト内のページにリンク
|
||||
```yaml
|
||||
- name: ドキュメント
|
||||
pageRef: /docs
|
||||
```
|
||||
2. `url`を使用して外部URLにリンク
|
||||
```yaml
|
||||
- name: GitHub
|
||||
url: "https://github.com"
|
||||
```
|
||||
3. `type: search`を使用して検索バーを表示
|
||||
```yaml
|
||||
- name: 検索
|
||||
params:
|
||||
type: search
|
||||
```
|
||||
4. アイコン
|
||||
```yaml
|
||||
- name: GitHub
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
これらのメニュー項目は、`weight`パラメータを設定して並べ替えることができます。
|
||||
|
||||
### ロゴとタイトル
|
||||
|
||||
デフォルトのロゴを変更するには、`hugo.yaml`を編集し、`static`ディレクトリ下のロゴファイルへのパスを追加します。
|
||||
オプションで、ロゴをクリックしたときにユーザーがリダイレクトされるリンクや、ロゴの幅と高さをピクセル単位で設定できます。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
navbar:
|
||||
displayTitle: true
|
||||
displayLogo: true
|
||||
logo:
|
||||
path: images/logo.svg
|
||||
dark: images/logo-dark.svg
|
||||
link: /
|
||||
width: 40
|
||||
height: 20
|
||||
```
|
||||
|
||||
## サイドバー
|
||||
|
||||
### メインサイドバー
|
||||
|
||||
メインサイドバーは、コンテンツディレクトリの構造から自動的に生成されます。
|
||||
詳細については、[ファイルの整理](/docs/guide/organize-files)ページを参照してください。
|
||||
|
||||
左サイドバーから単一のページを除外するには、ページのフロントマターで`sidebar.exclude`パラメータを設定します：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 設定
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
### 追加リンク
|
||||
|
||||
サイドバーの追加リンクは、設定ファイルの`menu.sidebar`セクションで定義されます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
sidebar:
|
||||
- name: その他
|
||||
params:
|
||||
type: separator
|
||||
weight: 1
|
||||
- name: "について"
|
||||
pageRef: "/about"
|
||||
weight: 2
|
||||
- name: "Hugo Docs ↗"
|
||||
url: "https://gohugo.io/documentation/"
|
||||
weight: 3
|
||||
```
|
||||
|
||||
## 右サイドバー
|
||||
|
||||
### 目次
|
||||
|
||||
目次は、コンテンツファイルの見出しから自動的に生成されます。ページのフロントマターで`toc: false`を設定することで無効にできます。
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 設定
|
||||
toc: false
|
||||
---
|
||||
```
|
||||
|
||||
### ページ編集リンク
|
||||
|
||||
ページ編集リンクを設定するには、設定ファイルで`params.editURL.base`パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
editURL:
|
||||
enable: true
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
提供されたURLをルートディレクトリとして、各ページの編集リンクが自動的に生成されます。
|
||||
特定のページの編集リンクを設定したい場合は、ページのフロントマターで`editURL`パラメータを設定します：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 設定
|
||||
editURL: "https://example.com/edit/this/page"
|
||||
---
|
||||
```
|
||||
|
||||
## フッター
|
||||
|
||||
### 著作権
|
||||
|
||||
ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml`という名前のファイルを作成します。
|
||||
このファイルに、以下のように新しい著作権テキストを指定します：
|
||||
|
||||
```yaml {filename="i18n/en.yaml"}
|
||||
copyright: "© 2024 YOUR TEXT HERE"
|
||||
```
|
||||
|
||||
参考として、GitHubリポジトリに[`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml)ファイルの例があります。また、著作権テキストにMarkdown形式を使用することもできます。
|
||||
|
||||
## その他
|
||||
|
||||
### ファビコン
|
||||
|
||||
サイトの[ファビコン](https://ja.wikipedia.org/wiki/Favicon)をカスタマイズするには、`static`フォルダ下にアイコンファイルを配置して、[テーマのデフォルトのファビコン](https://github.com/imfing/hextra/tree/main/static)を上書きします：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/file name="android-chrome-192x192.png" >}}
|
||||
{{< filetree/file name="android-chrome-512x512.png" >}}
|
||||
{{< filetree/file name="apple-touch-icon.png" >}}
|
||||
{{< filetree/file name="favicon-16x16.png" >}}
|
||||
{{< filetree/file name="favicon-32x32.png" >}}
|
||||
{{< filetree/file name="favicon-dark.svg" >}}
|
||||
{{< filetree/file name="favicon.ico" >}}
|
||||
{{< filetree/file name="favicon.svg" >}}
|
||||
{{< filetree/file name="site.webmanifest" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
プロジェクトに`favicon.ico`、`favicon.svg`、`favicon-dark.svg`ファイルを含めて、サイトのファビコンが正しく表示されるようにします。
|
||||
|
||||
`favicon.ico`は一般的に古いブラウザ用ですが、`favicon.svg`と`favicon-dark.svg`は現代のブラウザでサポートされています。
|
||||
[favicon.io](https://favicon.io/)や[favycon](https://github.com/ruisaraiva19/favycon)などのツールを使用して、このようなアイコンを生成できます。
|
||||
|
||||
### テーマ設定
|
||||
|
||||
`theme`設定を使用して、デフォルトのテーマモードとトグルボタンを設定し、訪問者がライトモードとダークモードを切り替えられるようにします。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
theme:
|
||||
# light | dark | system
|
||||
default: system
|
||||
displayToggle: true
|
||||
```
|
||||
|
||||
`theme.default`のオプション：
|
||||
|
||||
- `light` - 常にライトモードを使用
|
||||
- `dark` - 常にダークモードを使用
|
||||
- `system` - オペレーティングシステムの設定と同期（デフォルト）
|
||||
|
||||
`theme.displayToggle`パラメータを使用して、テーマを変更するためのトグルボタンを表示できます。
|
||||
`true`に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えることができます。
|
||||
|
||||
### ページ幅
|
||||
|
||||
ページの幅は、設定ファイルの`params.page.width`パラメータでカスタマイズできます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
# full (100%), wide (90rem), normal (1280px)
|
||||
width: wide
|
||||
```
|
||||
|
||||
利用可能なオプションは`full`、`wide`、`normal`です。デフォルトでは、ページ幅は`normal`に設定されています。
|
||||
|
||||
同様に、ナビゲーションバーとフッターの幅は、`params.navbar.width`と`params.footer.width`パラメータでカスタマイズできます。
|
||||
|
||||
### 検索インデックス
|
||||
|
||||
[FlexSearch](https://github.com/nextapps-de/flexsearch)による全文検索はデフォルトで有効です。
|
||||
検索インデックスをカスタマイズするには、設定ファイルで`params.search.flexsearch.index`パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
# 検索
|
||||
search:
|
||||
enable: true
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# ページをインデックスする方法: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
`flexsearch.index`のオプション：
|
||||
|
||||
- `content` - ページの全内容（デフォルト）
|
||||
- `summary` - ページの要約、詳細は[Hugoコンテンツ要約](https://gohugo.io/content-management/summaries/)を参照
|
||||
- `heading` - レベル1とレベル2の見出し
|
||||
- `title` - ページタイトルのみを含める
|
||||
|
||||
検索トークン化をカスタマイズするには、設定ファイルで`params.search.flexsearch.tokenize`パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
# ...
|
||||
flexsearch:
|
||||
# full | forward | reverse | strict
|
||||
tokenize: forward
|
||||
```
|
||||
|
||||
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)のオプション：
|
||||
|
||||
- `strict` - 単語全体をインデックス
|
||||
- `forward` - 前方方向に単語を増分的にインデックス
|
||||
- `reverse` - 両方向に単語を増分的にインデックス
|
||||
- `full` - すべての可能な組み合わせをインデックス
|
||||
|
||||
検索インデックスからページを除外するには、ページのフロントマターで`excludeSearch: true`を設定します：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 設定
|
||||
excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### Googleアナリティクス
|
||||
|
||||
[Googleアナリティクス](https://marketingplatform.google.com/about/analytics/)を有効にするには、`hugo.yaml`で`services.googleAnalytics.ID`フラグを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
services:
|
||||
googleAnalytics:
|
||||
ID: G-MEASUREMENT_ID
|
||||
```
|
||||
164
exampleSite/content/docs/guide/deploy-site.ja.md
Normal file
164
exampleSite/content/docs/guide/deploy-site.ja.md
Normal file
@ -0,0 +1,164 @@
|
||||
---
|
||||
title: サイトのデプロイ
|
||||
prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugoは静的サイトを生成するため、柔軟なホスティングオプションが可能です。
|
||||
このページでは、Hextraサイトをさまざまなプラットフォームにデプロイするためのガイドを提供します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
[GitHub Pages](https://docs.github.com/pages)は、無料でウェブサイトをデプロイおよびホストするための推奨方法です。
|
||||
|
||||
[hextra-starter-template](https://github.com/imfing/hextra-starter-template)を使用してサイトをブートストラップした場合、GitHub Pagesへの自動デプロイを支援するGitHub Actionsワークフローがすぐに利用可能です。
|
||||
|
||||
{{% details title="GitHub Actionsの設定" closed="true" %}}
|
||||
|
||||
以下は、[hextra-starter-template](https://github.com/imfing/hextra-starter-template)からの設定例です：
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml"}
|
||||
# HugoサイトをGitHub Pagesにデプロイするためのサンプルワークフロー
|
||||
name: Deploy Hugo site to Pages
|
||||
|
||||
on:
|
||||
# デフォルトブランチへのプッシュ時に実行
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Actionsタブから手動でこのワークフローを実行可能
|
||||
workflow_dispatch:
|
||||
|
||||
# GITHUB_TOKENの権限を設定してGitHub Pagesへのデプロイを許可
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# 同時実行を1つに制限し、進行中の実行と最新のキューイングされた実行の間の実行をスキップ。
|
||||
# ただし、進行中の実行はキャンセルしないでください。これらの本番デプロイを完了させたいためです。
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
# デフォルトはbash
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
|
||||
jobs:
|
||||
# ビルドジョブ
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
HUGO_VERSION: 0.138.0
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # .GitInfoと.Lastmodのためにすべての履歴を取得
|
||||
submodules: recursive
|
||||
- name: Setup Go
|
||||
uses: actions/setup-go@v5
|
||||
with:
|
||||
go-version: '1.22'
|
||||
- name: Setup Pages
|
||||
id: pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: Setup Hugo
|
||||
run: |
|
||||
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
|
||||
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
|
||||
- name: Build with Hugo
|
||||
env:
|
||||
# Hugoモジュールとの最大限の互換性のために
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "${{ steps.pages.outputs.base_url }}/"
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./public
|
||||
|
||||
# デプロイジョブ
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
```
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定します：
|
||||
|
||||
{{< /callout >}}
|
||||
|
||||
デフォルトでは、上記のGitHub Actionsワークフロー `.github/workflows/pages.yaml` は、サイトが `https://<USERNAME>.github.io/<REPO>/` にデプロイされることを前提としています。
|
||||
|
||||
`https://<USERNAME>.github.io/` にデプロイする場合は、`--baseURL` を変更します：
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
独自のドメインにデプロイする場合は、`--baseURL` の値を適宜変更してください。
|
||||
|
||||
|
||||
## Cloudflare Pages
|
||||
|
||||
1. サイトのソースコードをGitリポジトリ（例：GitHub）に配置します。
|
||||
2. [Cloudflareダッシュボード](https://dash.cloudflare.com/)にログインし、アカウントを選択します。
|
||||
3. アカウントホームで、**Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択します。
|
||||
4. リポジトリを選択し、**Set up builds and deployments** セクションで以下の情報を提供します：
|
||||
|
||||
| 設定 | 値 |
|
||||
| ---------------- | ------------------- |
|
||||
| 本番ブランチ | `main` |
|
||||
| ビルドコマンド | `hugo --gc --minify` |
|
||||
| ビルドディレクトリ | `public` |
|
||||
|
||||
詳細については、以下を確認してください：
|
||||
- [Hugoサイトのデプロイ](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)。
|
||||
- [言語サポートとツール](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)。
|
||||
|
||||
|
||||
## Netlify
|
||||
|
||||
1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。
|
||||
2. [プロジェクトをインポート](https://app.netlify.com/start)してNetlifyに追加します。
|
||||
3. [hextra-starter-template][hextra-starter-template]を使用していない場合、以下の設定を手動で行います：
|
||||
- ビルドコマンドを `hugo --gc --minify` に設定します。
|
||||
- 公開ディレクトリを `public` に指定します。
|
||||
- 環境変数 `HUGO_VERSION` を追加し、`0.138.0` に設定するか、`netlify.toml` ファイルに設定します。
|
||||
4. デプロイします！
|
||||
|
||||
詳細については、[NetlifyでのHugo](https://docs.netlify.com/integrations/frameworks/hugo/)を確認してください。
|
||||
|
||||
|
||||
## Vercel
|
||||
|
||||
1. コードをGitリポジトリ（GitHub、GitLabなど）にプッシュします。
|
||||
2. [Vercelダッシュボード](https://vercel.com/dashboard)に移動し、Hugoプロジェクトをインポートします。
|
||||
3. プロジェクトを設定し、フレームワークプリセットとしてHugoを選択します。
|
||||
4. ビルドコマンドとインストールコマンドを上書きします：
|
||||
1. ビルドコマンドを `hugo --gc --minify` に設定します。
|
||||
2. インストールコマンドを `yum install golang` に設定します。
|
||||
|
||||
|
||||
53
exampleSite/content/docs/guide/diagrams.ja.md
Normal file
53
exampleSite/content/docs/guide/diagrams.ja.md
Normal file
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: ダイアグラム
|
||||
weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
現在、Hextraはダイアグラムのために[Mermaid](#mermaid)をサポートしています。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme)は、JavaScriptベースのダイアグラムおよびチャート作成ツールで、Markdownにインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。
|
||||
|
||||
HextraでMermaidを使用するのは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
````
|
||||
|
||||
これは次のようにレンダリングされます:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
シーケンス図:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: こんにちはJohn、元気ですか？
|
||||
loop 健康チェック
|
||||
John->>John: 心気症と戦う
|
||||
end
|
||||
Note right of John: 理性的な思考 <br/>が勝つ！
|
||||
John-->>Alice: 元気です！
|
||||
John->>Bob: あなたはどうですか？
|
||||
Bob-->>John: とても元気です！
|
||||
```
|
||||
|
||||
詳細については、[Mermaidドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。
|
||||
97
exampleSite/content/docs/guide/latex.ja.md
Normal file
97
exampleSite/content/docs/guide/latex.ja.md
Normal file
@ -0,0 +1,97 @@
|
||||
---
|
||||
title: "LaTeX"
|
||||
weight: 4
|
||||
math: true
|
||||
---
|
||||
|
||||
$\KaTeX$ は LaTeX の数式をレンダリングするために使用されます。ページのフロントマターで `math` を `true` に設定することで、ページごとに有効にすることができます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
```yaml {filename="page.md"}
|
||||
---
|
||||
title: "LaTeX を使用した私のページ"
|
||||
math: true
|
||||
---
|
||||
|
||||
```
|
||||
|
||||
有効にすると、KaTeX のスクリプト、スタイルシート、フォントが自動的にサイトに含まれます。Markdown コンテンツ内で LaTeX 数式を使用できます。
|
||||
|
||||
## 例
|
||||
|
||||
Markdown コンテンツ内で、インラインおよび別段落の LaTeX 数式がサポートされています。
|
||||
|
||||
### インライン
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
これは $\sigma(z) = \frac{1}{1 + e^{-z}}$ インラインです。
|
||||
```
|
||||
|
||||
これは $\sigma(z) = \frac{1}{1 + e^{-z}}$ インラインです。
|
||||
|
||||
### 別段落
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
|
||||
```
|
||||
|
||||
次のようにレンダリングされます:
|
||||
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Hugo 設定ファイルで [パススルー拡張機能](https://gohugo.io/content-management/mathematics/) を有効にして設定してください。これにより、複雑な式のレンダリング問題を回避するために、デリミタ内の生のコンテンツが保持されます。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
extensions:
|
||||
passthrough:
|
||||
delimiters:
|
||||
block: [['\[', '\]'], ['$$', '$$']]
|
||||
inline: [['\(', '\)']]
|
||||
enable: true
|
||||
```
|
||||
|
||||
例えば、aligned 環境を使用する場合:
|
||||
|
||||
```latex {filename="page.md"}
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
```
|
||||
|
||||
次のようにレンダリングされます:
|
||||
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
|
||||
## サポートされている関数
|
||||
|
||||
サポートされている関数の一覧については、[KaTeX サポートされている関数](https://katex.org/docs/supported.html) を参照してください。
|
||||
|
||||
## 化学
|
||||
|
||||
化学式は [mhchem](https://mhchem.github.io/MathJax-mhchem/) 拡張機能を介してサポートされています。
|
||||
|
||||
インライン: $\ce{H2O}$ は水です。
|
||||
|
||||
別段落:
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```
|
||||
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
196
exampleSite/content/docs/guide/markdown.ja.md
Normal file
196
exampleSite/content/docs/guide/markdown.ja.md
Normal file
@ -0,0 +1,196 @@
|
||||
---
|
||||
title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugoは、テキストのフォーマットやリストの作成などに[Markdown](https://ja.wikipedia.org/wiki/Markdown)構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Markdownの例
|
||||
|
||||
### テキストのスタイル
|
||||
|
||||
| スタイル | 構文 | 例 | 出力 |
|
||||
| -------- | -------- | ------ | ------ |
|
||||
| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
|
||||
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | *斜体テキスト* |
|
||||
| 取り消し線 | `~~取り消し線テキスト~~` | `~~取り消し線テキスト~~` | ~~取り消し線テキスト~~ |
|
||||
| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
|
||||
| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
|
||||
|
||||
### ブロッククォート
|
||||
|
||||
引用元付きのブロッククォート
|
||||
|
||||
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
|
||||
> — <cite>ロブ・パイク[^1]</cite>
|
||||
|
||||
[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
|
||||
> — <cite>ロブ・パイク[^1]</cite>
|
||||
|
||||
[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
|
||||
```
|
||||
|
||||
### アラート
|
||||
|
||||
{{< new-feature version="v0.9.0" >}}
|
||||
|
||||
アラートは、ブロッククォート構文に基づくMarkdown拡張で、重要な情報を強調するために使用できます。
|
||||
[GitHubスタイルのアラート](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)がサポートされています。
|
||||
Hextraの最新バージョンと[Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)以降を使用していることを確認してください。
|
||||
|
||||
> [!NOTE]
|
||||
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
|
||||
|
||||
> [!TIP]
|
||||
> 物事をより良く、または簡単に行うための役立つアドバイス。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ユーザーが目標を達成するために知っておくべき重要な情報。
|
||||
|
||||
> [!WARNING]
|
||||
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
|
||||
|
||||
> [!CAUTION]
|
||||
> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> [!NOTE]
|
||||
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
|
||||
|
||||
> [!TIP]
|
||||
> 物事をより良く、または簡単に行うための役立つアドバイス。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ユーザーが目標を達成するために知っておくべき重要な情報。
|
||||
|
||||
> [!WARNING]
|
||||
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
|
||||
|
||||
> [!CAUTION]
|
||||
> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
|
||||
```
|
||||
|
||||
### テーブル
|
||||
|
||||
テーブルはMarkdownのコア仕様には含まれていませんが、Hugoはデフォルトでサポートしています。
|
||||
|
||||
| 名前 | 年齢 |
|
||||
|--------|------|
|
||||
| ボブ | 27 |
|
||||
| アリス | 23 |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 名前 | 年齢 |
|
||||
|--------|------|
|
||||
| ボブ | 27 |
|
||||
| アリス | 23 |
|
||||
```
|
||||
|
||||
#### テーブル内のインラインMarkdown
|
||||
|
||||
| 斜体 | 太字 | コード |
|
||||
| -------- | -------- | ------ |
|
||||
| *斜体* | **太字** | `コード` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 斜体 | 太字 | コード |
|
||||
| -------- | -------- | ------ |
|
||||
| *斜体* | **太字** | `コード` |
|
||||
```
|
||||
|
||||
### コードブロック
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../../guide/syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
### リスト
|
||||
|
||||
#### 順序付きリスト
|
||||
|
||||
1. 最初の項目
|
||||
2. 2番目の項目
|
||||
3. 3番目の項目
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
1. 最初の項目
|
||||
2. 2番目の項目
|
||||
3. 3番目の項目
|
||||
```
|
||||
|
||||
#### 順序なしリスト
|
||||
|
||||
* リスト項目
|
||||
* 別の項目
|
||||
* さらに別の項目
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* リスト項目
|
||||
* 別の項目
|
||||
* さらに別の項目
|
||||
```
|
||||
|
||||
#### ネストされたリスト
|
||||
|
||||
* 果物
|
||||
* りんご
|
||||
* オレンジ
|
||||
* バナナ
|
||||
* 乳製品
|
||||
* 牛乳
|
||||
* チーズ
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* 果物
|
||||
* りんご
|
||||
* オレンジ
|
||||
* バナナ
|
||||
* 乳製品
|
||||
* 牛乳
|
||||
* チーズ
|
||||
```
|
||||
|
||||
### 画像
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
キャプション付き:
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
## 設定
|
||||
|
||||
HugoはMarkdownの解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
|
||||
Markdownのレンダリングは、`hugo.yaml`の`markup.goldmark`で設定できます。
|
||||
以下はHextraのデフォルト設定です:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
highlight:
|
||||
noClasses: false
|
||||
```
|
||||
|
||||
その他の設定オプションについては、Hugoのドキュメント[Configure Markup](https://gohugo.io/getting-started/configuration-markup/)を参照してください。
|
||||
|
||||
## 学習リソース
|
||||
|
||||
* [Markdownガイド](https://www.markdownguide.org/)
|
||||
* [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
* [Markdownチュートリアル](https://www.markdowntutorial.com/)
|
||||
* [Markdownリファレンス](https://commonmark.org/help/)
|
||||
187
exampleSite/content/docs/guide/organize-files.ja.md
Normal file
187
exampleSite/content/docs/guide/organize-files.ja.md
Normal file
@ -0,0 +1,187 @@
|
||||
---
|
||||
title: ファイルの整理
|
||||
weight: 1
|
||||
prev: /docs/guide
|
||||
---
|
||||
|
||||
## ディレクトリ構造
|
||||
|
||||
デフォルトでは、Hugoは`content`ディレクトリ内のMarkdownファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
|
||||
このサイトを例に取ります：
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="getting-started.md" >}}
|
||||
{{< filetree/folder name="guide" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="organize-files.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="post-1.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
各`_index.md`ファイルは、対応するセクションのインデックスページです。他のMarkdownファイルは通常のページです。
|
||||
|
||||
```
|
||||
content
|
||||
├── _index.md // <- /
|
||||
├── docs
|
||||
│ ├── _index.md // <- /docs/
|
||||
│ ├── getting-started.md // <- /docs/getting-started/
|
||||
│ └── guide
|
||||
│ ├── _index.md // <- /docs/guide/
|
||||
│ └── organize-files.md // <- /docs/guide/organize-files/
|
||||
└── blog
|
||||
├── _index.md // <- /blog/
|
||||
└── post-1.md // <- /blog/post-1/
|
||||
```
|
||||
|
||||
## レイアウト
|
||||
|
||||
Hextraは、異なるコンテンツタイプに対して3つのレイアウトを提供します：
|
||||
|
||||
| レイアウト | ディレクトリ | 特徴 |
|
||||
| :-------- | :-------------------- | :--------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 構造化されたドキュメントに最適で、このセクションと同じです。 |
|
||||
| `blog` | `content/blog/` | ブログ投稿用で、リスト表示と詳細記事表示の両方があります。 |
|
||||
| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事表示です。 |
|
||||
|
||||
セクションの動作をビルトインレイアウトと同じにするには、セクションの`_index.md`のフロントマターで希望するタイプを指定します。
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
title: My Docs
|
||||
cascade:
|
||||
type: docs
|
||||
---
|
||||
```
|
||||
|
||||
上記の設定例により、`content/my-docs/`内のコンテンツファイルはデフォルトでドキュメント（`docs`タイプ）として扱われます。
|
||||
|
||||
## サイドバーナビゲーション
|
||||
|
||||
サイドバーナビゲーションは、コンテンツの整理に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdownファイルのフロントマターで`weight`パラメータを使用します。
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
title: Guide
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
サイドバーがあまり深くならないようにすることをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
|
||||
{{< /callout >}}
|
||||
|
||||
## パンくずナビゲーション
|
||||
|
||||
パンくずは、`/content`のディレクトリ構造に基づいて自動生成されます。
|
||||
|
||||
例えば、[上記のファイル構造](#directory-structure)を考えます。その構造に基づいて、`/docs/guide/organize-files/`ページの上部にパンくずが自動的に表示されます：
|
||||
|
||||
```
|
||||
Documentation > Guide > Organize Files
|
||||
```
|
||||
|
||||
### パンくずリンクのタイトルをカスタマイズ
|
||||
|
||||
デフォルトでは、各パンくずリンクはそのページの`title`パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle`を指定します。
|
||||
|
||||
例えば、`Organize Files`の代わりに`Foo Bar`と表示したい場合：
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
linkTitle: Foo Bar
|
||||
title: Organize Files
|
||||
---
|
||||
```
|
||||
|
||||
これにより、以下のパンくずが生成されます：
|
||||
```
|
||||
Documentation > Guide > Foo Bar
|
||||
```
|
||||
|
||||
### パンくずを非表示にする
|
||||
|
||||
ページのフロントマターで`breadcrumbs: false`を指定することで、パンくずを完全に非表示にできます：
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
breadcrumbs: false
|
||||
title: Organize Files
|
||||
---
|
||||
```
|
||||
|
||||
## コンテンツディレクトリの設定
|
||||
|
||||
デフォルトでは、Hugoはサイトを構築するためにルートの`content/`ディレクトリを使用します。
|
||||
例えば`docs/`など、異なるディレクトリをコンテンツに使用する必要がある場合は、サイト設定`hugo.yaml`で[`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir)パラメータを設定することで行えます。
|
||||
|
||||
## 画像の追加
|
||||
|
||||
画像を追加する最も簡単な方法は、画像ファイルをMarkdownファイルと同じディレクトリに置くことです。
|
||||
例えば、`my-page.md`ファイルと同じディレクトリに`image.png`ファイルを追加します：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
その後、以下のMarkdown構文を使用してコンテンツに画像を追加できます：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
また、Hugoの[ページバンドル][page-bundles]機能を利用して、画像ファイルをMarkdownファイルと一緒に整理することもできます。そのためには、`my-page.md`ファイルを`my-page`ディレクトリに変換し、コンテンツを`index.md`というファイルに置き、画像ファイルを`my-page`ディレクトリ内に置きます：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
|
||||
```
|
||||
|
||||
または、画像ファイルを`static`ディレクトリに置くこともできます。これにより、すべてのページで画像が利用可能になります：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/folder name="images" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
画像パスはスラッシュ`/`で始まり、`static`ディレクトリからの相対パスであることに注意してください：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
29
exampleSite/content/docs/guide/shortcodes/_index.ja.md
Normal file
29
exampleSite/content/docs/guide/shortcodes/_index.ja.md
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
title: ショートコード
|
||||
weight: 9
|
||||
prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
|
||||
|
||||
Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="コールアウト" icon="warning" >}}
|
||||
{{< card link="cards" title="カード" icon="card" >}}
|
||||
{{< card link="details" title="詳細" icon="chevron-right" >}}
|
||||
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
|
||||
{{< card link="icon" title="アイコン" icon="badge-check" >}}
|
||||
{{< card link="steps" title="ステップ" icon="one" >}}
|
||||
{{< card link="tabs" title="タブ" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
|
||||
Hugo と Hextra が提供する追加のショートコード:
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="その他" icon="view-grid" >}}
|
||||
{{< /cards >}}
|
||||
83
exampleSite/content/docs/guide/shortcodes/callout.ja.md
Normal file
83
exampleSite/content/docs/guide/shortcodes/callout.ja.md
Normal file
@ -0,0 +1,83 @@
|
||||
---
|
||||
title: コールアウトコンポーネント
|
||||
linkTitle: コールアウト
|
||||
aliases:
|
||||
- callouts
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
読者に重要な情報を示すための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。
|
||||
|
||||
## 例
|
||||
|
||||
{{< callout emoji="👾">}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
### デフォルト
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 情報
|
||||
|
||||
{{< callout type="info" >}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 警告
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
このAPIは次のバージョンで非推奨になります。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### エラー
|
||||
|
||||
{{< callout type="error" >}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
115
exampleSite/content/docs/guide/shortcodes/cards.ja.md
Normal file
115
exampleSite/content/docs/guide/shortcodes/cards.ja.md
Normal file
@ -0,0 +1,115 @@
|
||||
---
|
||||
title: カードコンポーネント
|
||||
linkTitle: カード
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="コールアウト" icon="warning" >}}
|
||||
{{< card link="../callout" title="タグ付きカード" icon="tag" tag="カスタムタグ">}}
|
||||
{{< card link="/" title="アイコンなし" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}}
|
||||
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" >}}
|
||||
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="コールアウト" icon="warning" */>}}
|
||||
{{</* card link="../callout" title="タグ付きカード" icon="tag" tag= "カスタムタグ" */>}}
|
||||
{{</* card link="/" title="アイコンなし" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## カードパラメータ
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|----------- |-----------------------------------------------------------------|
|
||||
| `link` | URL（内部または外部）。 |
|
||||
| `title` | カードのタイトル見出し。 |
|
||||
| `subtitle` | サブタイトル見出し（Markdown対応）。 |
|
||||
| `icon` | アイコンの名前。 |
|
||||
| `tag` | タグ内のテキスト。 |
|
||||
| `tagColor` | タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。 |
|
||||
|
||||
## 画像カード
|
||||
|
||||
さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|----------- |---------------------------------------------|
|
||||
| `image` | カードの画像URLを指定します。 |
|
||||
| `method` | Hugoの画像処理メソッドを設定します。 |
|
||||
| `options` | Hugoの画像処理オプションを設定します。 |
|
||||
|
||||
カードは3種類の画像をサポートします:
|
||||
|
||||
1. リモート画像: `image`パラメータに完全なURLを指定。
|
||||
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
|
||||
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
|
||||
|
||||
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebPフォーマット）を適用します。
|
||||
現在サポートされている`method`は`Resize`、`Fit`、`Fill`、`Crop`です。
|
||||
|
||||
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
|
||||
## タグ
|
||||
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
|
||||
{{< card link="../callout" title="エラータグ付きカード" tag="タグテキスト" tagType="error" >}}
|
||||
{{< card link="../callout" title="情報タグ付きカード" tag="タグテキスト" tagType="info" >}}
|
||||
{{< card link="../callout" title="警告タグ付きカード" tag="タグテキスト" tagType="warning" >}}
|
||||
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" tag="タグテキスト" tagType="error" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" */>}}
|
||||
{{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
|
||||
{{</* card link="../callout" title="黄色タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## 列
|
||||
|
||||
`cards`ショートコードに`cols`パラメータを渡すことで、カードが広がる最大列数を指定できます。ただし、小さい画面では列は折りたたまれます。
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="上部カード" >}}
|
||||
{{< card link="/" title="下部カード" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards cols="2" >}}
|
||||
{{< card link="/" title="左カード" >}}
|
||||
{{< card link="/" title="右カード" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards cols="1" */>}}
|
||||
{{</* card link="/" title="上部カード" */>}}
|
||||
{{</* card link="/" title="下部カード" */>}}
|
||||
{{</* /cards */>}}
|
||||
|
||||
{{</* cards cols="2" */>}}
|
||||
{{</* card link="/" title="左カード" */>}}
|
||||
{{</* card link="/" title="右カード" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
43
exampleSite/content/docs/guide/shortcodes/details.ja.md
Normal file
43
exampleSite/content/docs/guide/shortcodes/details.ja.md
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: 詳細
|
||||
---
|
||||
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 例
|
||||
|
||||
{{% details title="詳細" %}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
{{% details title="クリックして表示" closed="true" %}}
|
||||
|
||||
これはデフォルトで非表示になります。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## 使い方
|
||||
|
||||
````markdown
|
||||
{{%/* details title="詳細" */%}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
|
||||
````markdown
|
||||
{{%/* details title="クリックして表示" closed="true" */%}}
|
||||
|
||||
これはデフォルトで非表示になります。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
34
exampleSite/content/docs/guide/shortcodes/filetree.ja.md
Normal file
34
exampleSite/content/docs/guide/shortcodes/filetree.ja.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: FileTree コンポーネント
|
||||
linkTitle: FileTree
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="closed" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="introduction.md" >}}
|
||||
{{< filetree/file name="introduction.fr.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/file name="hugo.toml" >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```text {filename="Markdown"}
|
||||
{{</* filetree/container */>}}
|
||||
{{</* filetree/folder name="content" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/folder name="docs" state="closed" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/file name="introduction.md" */>}}
|
||||
{{</* filetree/file name="introduction.fr.md" */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* filetree/file name="hugo.toml" */>}}
|
||||
{{</* /filetree/container */>}}
|
||||
```
|
||||
46
exampleSite/content/docs/guide/shortcodes/icon.ja.md
Normal file
46
exampleSite/content/docs/guide/shortcodes/icon.ja.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: アイコン
|
||||
---
|
||||
|
||||
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 例
|
||||
|
||||
{{< icon "academic-cap" >}}
|
||||
{{< icon "cake" >}}
|
||||
{{< icon "gift" >}}
|
||||
{{< icon "sparkles" >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
[Heroicons](https://v1.heroicons.com/) v1 のアウトラインアイコンがデフォルトで利用可能です。
|
||||
|
||||
### 独自のアイコンを追加する方法
|
||||
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
```
|
||||
|
||||
その後、ショートコードで以下のように使用できます:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。
|
||||
79
exampleSite/content/docs/guide/shortcodes/jupyter.ja.md
Normal file
79
exampleSite/content/docs/guide/shortcodes/jupyter.ja.md
Normal file
@ -0,0 +1,79 @@
|
||||
---
|
||||
title: "Jupyter Notebook コンポーネント"
|
||||
linktitle: "Jupyter Notebook"
|
||||
math: true
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的な機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) は、[Project Jupyter](https://jupyter.org/) の言語に依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 使用方法
|
||||
|
||||
### ローカルノートブックを使用する
|
||||
|
||||
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="assets" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: My Page
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
あるいは、Hugo の [ページバンドル][page-bundles] 機能を利用して、Jupyter Notebook を Markdown ファイルと一緒に整理することもできます。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: My Page
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
### リモートノートブックを使用する
|
||||
|
||||
ノートブックファイルの URL を指定して、リモートノートブックを使用することもできます。たとえば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに含めるには、次のショートコードを使用します：
|
||||
|
||||
```
|
||||
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
## ノートブックの例
|
||||
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
77
exampleSite/content/docs/guide/shortcodes/others.ja.md
Normal file
77
exampleSite/content/docs/guide/shortcodes/others.ja.md
Normal file
@ -0,0 +1,77 @@
|
||||
---
|
||||
title: その他のショートコード
|
||||
linkTitle: その他
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
これらの一部はHugoの組み込みショートコードです。
|
||||
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
|
||||
{{< /callout >}}
|
||||
|
||||
## バッジ
|
||||
|
||||
```
|
||||
{{</* badge "バッジ" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge "バッジ" >}}
|
||||
|
||||
バリエーション:
|
||||
|
||||
```
|
||||
{{</* badge content="info" type="info" */>}}
|
||||
{{</* badge content="warning" type="warning" */>}}
|
||||
{{</* badge content="error" type="error" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge content="info" type="info" >}}
|
||||
{{< badge content="warning" type="warning" >}}
|
||||
{{< badge content="error" type="error" >}}
|
||||
|
||||
リンクとアイコン付き:
|
||||
|
||||
```
|
||||
{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
## YouTube
|
||||
|
||||
YouTube動画を埋め込みます。
|
||||
|
||||
```
|
||||
{{</* youtube VIDEO_ID */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
|
||||
## PDF
|
||||
|
||||
PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
```
|
||||
|
||||
例:
|
||||
|
||||
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
|
||||
46
exampleSite/content/docs/guide/shortcodes/steps.ja.md
Normal file
46
exampleSite/content/docs/guide/shortcodes/steps.ja.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: ステップ
|
||||
---
|
||||
|
||||
ステップのシリーズを表示するための組み込みコンポーネント。
|
||||
|
||||
## 例
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### ステップ 1
|
||||
|
||||
これは最初のステップです。
|
||||
|
||||
### ステップ 2
|
||||
|
||||
これは2番目のステップです。
|
||||
|
||||
### ステップ 3
|
||||
|
||||
これは3番目のステップです。
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
## 使い方
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
このショートコードは**Markdownコンテンツ専用**であることに注意してください。
|
||||
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
|
||||
{{< /callout >}}
|
||||
|
||||
`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
### ステップ 1
|
||||
|
||||
これは最初のステップです。
|
||||
|
||||
### ステップ 2
|
||||
|
||||
これは2番目のステップです。
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
93
exampleSite/content/docs/guide/shortcodes/tabs.ja.md
Normal file
93
exampleSite/content/docs/guide/shortcodes/tabs.ja.md
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
title: タブ
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
### デフォルト
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 選択されたインデックスを指定
|
||||
|
||||
`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
`YAML` タブがデフォルトで選択されます。
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### Markdown を使用
|
||||
|
||||
コードブロックを含む Markdown 構文もサポートされています:
|
||||
|
||||
````
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... 他のタブも同様に追加
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
|
||||
{{< tab >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
114
exampleSite/content/docs/guide/syntax-highlighting.ja.md
Normal file
114
exampleSite/content/docs/guide/syntax-highlighting.ja.md
Normal file
@ -0,0 +1,114 @@
|
||||
---
|
||||
title: "シンタックスハイライト"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
Hugoは、純粋なGoで書かれた汎用シンタックスハイライターである[Chroma](https://github.com/alecthomas/chroma)を使用してシンタックスハイライトを行います。
|
||||
Markdownコンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば：
|
||||
|
||||
<!--more-->
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
は次のようにレンダリングされます：
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
## 機能
|
||||
|
||||
### ファイル名
|
||||
|
||||
コードブロックにファイル名やタイトルを追加するには、`filename`属性を設定します：
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### ファイルへのリンク
|
||||
|
||||
{{< new-feature version="v0.9.2" >}}
|
||||
|
||||
`base_url`属性を使用して、ファイル名と組み合わせてリンクを生成するベースURLを提供できます。
|
||||
|
||||
ファイル名には、ベースパス内のファイルの場所を指定する相対パスを含めることができます。
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
````
|
||||
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
|
||||
### 行番号
|
||||
|
||||
行番号を設定するには、`linenos`属性を`table`に設定し、オプションで`linenostart`を開始行番号に設定します：
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### 行のハイライト
|
||||
|
||||
行をハイライトするには、`hl_lines`属性に行番号のリストを設定します：
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
|
||||
### コピーボタン
|
||||
|
||||
デフォルトでは、コードブロックにコピーボタンが有効になっています。その動作はサイト設定ファイルを変更することで変更できます：
|
||||
|
||||
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
|
||||
params:
|
||||
highlight:
|
||||
copy:
|
||||
enable: true
|
||||
# hover | always
|
||||
display: hover
|
||||
```
|
||||
|
||||
## サポートされている言語
|
||||
|
||||
サポートされている言語のリストについては、[Chromaのドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。
|
||||
Reference in New Issue
Block a user