📝 Update

This commit is contained in:
yuubinnkyoku 2024-12-22 09:00:32 +00:00
parent 10cda7be9d
commit 416d2af2b1
7 changed files with 48 additions and 48 deletions

View file

@ -19,7 +19,7 @@ Blowfish は完全に柔軟なホームページレイアウトを提供しま
<img class="thumbnailshadow" src="img/home-profile.png"/> <img class="thumbnailshadow" src="img/home-profile.png"/>
著者情報は、言語設定ファイルで提供されます。パラメータの詳細については、[始める]({{< ref "getting-started" >}})[言語設定]({{< ref "configuration##language-and-i18n" >}}) セクションを参照してください。 著者情報は、言語設定ファイルで提供されます。パラメータの詳細については、[始める]({{< ref "getting-started" >}})[言語設定]({{< ref "configuration##language-and-i18n" >}})セクションを参照してください。
さらに、ホームページのコンテンツで提供される Markdown コンテンツはすべて、著者プロファイルの下に配置されます。これにより、ショートコードを使用して経歴やその他のカスタムコンテンツを表示するための柔軟性が向上します。 さらに、ホームページのコンテンツで提供される Markdown コンテンツはすべて、著者プロファイルの下に配置されます。これにより、ショートコードを使用して経歴やその他のカスタムコンテンツを表示するための柔軟性が向上します。
@ -67,7 +67,7 @@ Blowfish は完全に柔軟なホームページレイアウトを提供しま
カスタムレイアウトに [最新記事](#最新記事) を含めるには、`recent-articles/main.html` パーシャルを使用します。 カスタムレイアウトに [最新記事](#最新記事) を含めるには、`recent-articles/main.html` パーシャルを使用します。
例として、このサイトの [ホームページ]({{< ref "/" >}}) では、カスタムレイアウトを使用して、プロフィールレイアウトとページレイアウトを切り替えています。動作を確認するには、[GitHub リポジトリ](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) にアクセスしてください。 例として、このサイトの[ホームページ]({{< ref "/" >}})では、カスタムレイアウトを使用して、プロフィールレイアウトとページレイアウトを切り替えています。動作を確認するには、[GitHub リポジトリ](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html)にアクセスしてください。
## 最新記事 ## 最新記事
@ -81,8 +81,8 @@ Blowfish は完全に柔軟なホームページレイアウトを提供しま
Blowfish は、記事にビジュアルサポートを簡単に追加できるように構築されています。Hugo の記事構造に慣れている場合は、記事フォルダ内に `feature*` で始まる画像ファイル (ほとんどすべての形式がサポートされていますが、`.png` または `.jpg` を推奨) を配置するだけです。それだけで、Blowfish はその画像を Web サイト内のサムネイルとして使用したり、ソーシャルプラットフォーム全体の <a target="_blank" href="https://oembed.com/">oEmbed</a> カードに使用したりできるようになります。 Blowfish は、記事にビジュアルサポートを簡単に追加できるように構築されています。Hugo の記事構造に慣れている場合は、記事フォルダ内に `feature*` で始まる画像ファイル (ほとんどすべての形式がサポートされていますが、`.png` または `.jpg` を推奨) を配置するだけです。それだけで、Blowfish はその画像を Web サイト内のサムネイルとして使用したり、ソーシャルプラットフォーム全体の <a target="_blank" href="https://oembed.com/">oEmbed</a> カードに使用したりできるようになります。
詳細情報と例を確認したい場合は、[こちら]({{< ref "thumbnails" >}}) にガイドがあります。 詳細情報と例を確認したい場合は、[こちら]({{< ref "thumbnails" >}})にガイドがあります。
## カードギャラリー ## カードギャラリー
Blowfish は、記事の標準リストをカードギャラリーとして表示することもサポートしています。これは、ホームページの最新セクションと Web サイト全体の記事リストの両方で設定できます。ホームページの場合は `homepage.cardView``homepage.cardViewScreenWidth` を使用し、リストの場合は `list.cardView``list.cardViewScreenWidth` を使用します。詳細については [設定ドキュメント]({{< ref "configuration" >}}) を確認し、ライブデモについてはホームページを確認してください。 Blowfish は、記事の標準リストをカードギャラリーとして表示することもサポートしています。これは、ホームページの最新セクションと Web サイト全体の記事リストの両方で設定できます。ホームページの場合は `homepage.cardView``homepage.cardViewScreenWidth` を使用し、リストの場合は `list.cardView``list.cardViewScreenWidth` を使用します。詳細については[設定ドキュメント]({{< ref "configuration" >}})を確認し、ライブデモについてはホームページを確認してください。

View file

@ -13,7 +13,7 @@ Blowfish で構築された Hugo ウェブサイトをデプロイする方法
Blowfish は、テーマ全体で相対的な URL を使用して構築されています。これにより、サイトをサブフォルダや GitHub Pages などのホストに簡単にデプロイできます。`baseURL` パラメータが `config.toml` ファイルで設定されていれば、通常、これが機能するために特別な設定は必要ありません。 Blowfish は、テーマ全体で相対的な URL を使用して構築されています。これにより、サイトをサブフォルダや GitHub Pages などのホストに簡単にデプロイできます。`baseURL` パラメータが `config.toml` ファイルで設定されていれば、通常、これが機能するために特別な設定は必要ありません。
Hugo の公式 [ホスティングとデプロイ](https://gohugo.io/hosting-and-deployment/) ドキュメントは、サイトのデプロイ方法を学ぶのに最適な場所です。以下のセクションには、特定のプロバイダーでスムーズにデプロイするのに役立つ、テーマ固有の設定の詳細が記載されています。 Hugo の公式[ホスティングとデプロイ](https://gohugo.io/hosting-and-deployment/)ドキュメントは、サイトのデプロイ方法を学ぶのに最適な場所です。以下のセクションには、特定のプロバイダーでスムーズにデプロイするのに役立つ、テーマ固有の設定の詳細が記載されています。
**プロバイダーを選択してください:** **プロバイダーを選択してください:**
@ -124,13 +124,13 @@ jobs:
## Cloudflare Pages ## Cloudflare Pages
Cloudflare は、Hugo ブログをホストできる [Pages](https://pages.cloudflare.com/) サービスを提供しています。これは、git リポジトリからサイトをビルドし、Cloudflare の CDN でホストします。[Hugo デプロイメントガイド](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) に従って始めてください。 Cloudflare は、Hugo ブログをホストできる [Pages](https://pages.cloudflare.com/) サービスを提供しています。これは、git リポジトリからサイトをビルドし、Cloudflare の CDN でホストします。[Hugo デプロイメントガイド](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site)に従って始めてください。
Cloudflare が提供する Rocket Loader™ 機能は、JavaScript を使用した Web ページのレンダリングを高速化しようとしますが、テーマの外観スイッチャーが壊れます。また、スクリプトが間違った順序で読み込まれるため、サイトの閲覧時に迷惑な明暗の画面のちらつきが発生する可能性があります。 Cloudflare が提供する Rocket Loader™ 機能は、JavaScript を使用した Web ページのレンダリングを高速化しようとしますが、テーマの外観スイッチャーが壊れます。また、スクリプトが間違った順序で読み込まれるため、サイトの閲覧時に迷惑な明暗の画面のちらつきが発生する可能性があります。
この問題は、次のように無効にすることで修正できます。 この問題は、次のように無効にすることで修正できます。
- [Cloudflare ダッシュボード](https://dash.cloudflare.com) に移動します - [Cloudflare ダッシュボード](https://dash.cloudflare.com)に移動します
- リストでドメイン名をクリックします - リストでドメイン名をクリックします
- _Speed_ セクションで _Optimization_ をクリックします - _Speed_ セクションで _Optimization_ をクリックします
- _Rocket Loader™_ までスクロールして無効にします - _Rocket Loader™_ までスクロールして無効にします

View file

@ -9,9 +9,9 @@ series: ["Documentation"]
series_order: 2 series_order: 2
--- ---
Hugo の標準的な [クイックスタート](https://gohugo.io/getting-started/quick-start/) ガイドに従うだけで、簡単に使い始めることができます。 Hugo の[クイックスタートガイド](https://gohugo.io/getting-started/quick-start/)に従うだけで、簡単に使い始めることができます。
詳細なインストール手順は以下に記載されています。[テーマのアップデート方法](#テーマのアップデート方法) についても説明しています。 詳細なインストール手順は以下に記載されています。[テーマのアップデート方法](#テーマのアップデート方法)についても説明しています。
## インストール ## インストール
@ -19,13 +19,13 @@ Hugo の標準的な [クイックスタート](https://gohugo.io/getting-starte
### Hugo のインストール ### Hugo のインストール
Hugo を初めて使用する場合は、[公式サイトの手順に従って、ローカルマシンにインストール](https://gohugo.io/getting-started/installing) してください。すでにインストールされているかどうかは、コマンド `hugo version` を実行して確認できます。 Hugo を初めて使用する場合は、[公式サイトの手順に従って、ローカルマシンにインストール](https://gohugo.io/getting-started/installing)してください。すでにインストールされているかどうかは、コマンド `hugo version` を実行して確認できます。
{{< alert >}} {{< alert >}}
テーマは最新の Hugo の機能を活用しているため、**Hugo バージョン 0.87.0 以降** を使用していることを確認してください。 テーマは最新の Hugo の機能を活用しているため、**Hugo バージョン 0.87.0 以降** を使用していることを確認してください。
{{< /alert >}} {{< /alert >}}
お使いのプラットフォームに合わせた詳細なインストール手順は、[Hugo の公式ドキュメント](https://gohugo.io/getting-started/installing) に記載されています。 お使いのプラットフォームに合わせた詳細なインストール手順は、[Hugo の公式ドキュメント](https://gohugo.io/getting-started/installing)に記載されています。
### Blowfish Tools (推奨) ### Blowfish Tools (推奨)
@ -85,13 +85,13 @@ git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
``` ```
次に、[テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する) に進みます。 次に、[テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する)に進みます。
#### Hugo を使用してインストールする #### Hugo を使用してインストールする
この方法では、Hugo を使用してテーマを管理します。Hugo は **Go** を使用してモジュールを初期化および管理するため、続行する前に `go` がインストールされていることを確認する必要があります。 この方法では、Hugo を使用してテーマを管理します。Hugo は **Go** を使用してモジュールを初期化および管理するため、続行する前に `go` がインストールされていることを確認する必要があります。
1. Go を [ダウンロード](https://golang.org/dl/) してインストールします。コマンド `go version` を使用して、すでにインストールされているかどうかを確認できます。 1. Go を[ダウンロード](https://golang.org/dl/)してインストールします。コマンド `go version` を使用して、すでにインストールされているかどうかを確認できます。
{{< alert >}} {{< alert >}}
Hugo ではモジュールが正しく動作するために **Go バージョン 1.12 以降** が必要です。必ず対応バージョンを使用してください。 Hugo ではモジュールが正しく動作するために **Go バージョン 1.12 以降** が必要です。必ず対応バージョンを使用してください。
@ -116,7 +116,7 @@ git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blo
``` ```
4. `hugo server` を実行してサーバーを起動すると、テーマが自動的にダウンロードされます。 4. `hugo server` を実行してサーバーを起動すると、テーマが自動的にダウンロードされます。
5. [テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する) に進みます。 5. [テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する)に進みます。
#### 手動でインストールする #### 手動でインストールする
@ -125,7 +125,7 @@ git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blo
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}GitHub からダウンロード{{< /button >}} {{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}GitHub からダウンロード{{< /button >}}
2. アーカイブを解凍し、フォルダ名を `blowfish` に変更して、Hugo プロジェクトのルートフォルダ内の `themes/` ディレクトリに移動します。 2. アーカイブを解凍し、フォルダ名を `blowfish` に変更して、Hugo プロジェクトのルートフォルダ内の `themes/` ディレクトリに移動します。
3. [テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する) に進みます。 3. [テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する)に進みます。
#### テーマ設定ファイルを作成する #### テーマ設定ファイルを作成する
@ -158,13 +158,13 @@ config/_default/
### 次のステップ ### 次のステップ
これで Blowfish の基本的なインストールは完了です。[始める]({{< ref "getting-started" >}}) セクションに進んで、テーマの設定についてさらに詳しく学びましょう。 これで Blowfish の基本的なインストールは完了です。[始める]({{< ref "getting-started" >}})セクションに進んで、テーマの設定についてさらに詳しく学びましょう。
--- ---
## テーマのアップデート方法 ## テーマのアップデート方法
不具合の修正や新機能の追加を含む[新しいリリース](https://github.com/nunocoracao/blowfish/releases) が随時公開されます。これらの変更を反映するには、ウェブサイトのテーマファイルをアップデートする必要があります。 不具合の修正や新機能の追加を含む[新しいリリース](https://github.com/nunocoracao/blowfish/releases)が随時公開されます。これらの変更を反映するには、ウェブサイトのテーマファイルをアップデートする必要があります。
アップデート方法は、最初にテーマをインストールした方法によって異なります。各方法の手順は以下に記載されています。 アップデート方法は、最初にテーマをインストールした方法によって異なります。各方法の手順は以下に記載されています。

View file

@ -42,12 +42,12 @@ googleAnalytics = "G-MEASUREMENT_ID"
### Umami Analytics ### Umami Analytics
Umami Analytics のサポートを有効にするには、`config/_default/params.toml` ファイルに [Umami トラッキングコード](https://umami.is/docs/collect-data) を指定するだけです。 Umami Analytics のサポートを有効にするには、`config/_default/params.toml` ファイルに [Umami トラッキングコード](https://umami.is/docs/collect-data)を指定するだけです。
Umami のカスタムドメイン機能を使用していて、ドメインからスクリプトを配信したい場合は、追加で `domain` 設定値を指定することもできます。`domain` 値を指定しない場合、スクリプトは Umami DNS (analytics.umami.is) から直接ロードされます。 Umami のカスタムドメイン機能を使用していて、ドメインからスクリプトを配信したい場合は、追加で `domain` 設定値を指定することもできます。`domain` 値を指定しない場合、スクリプトは Umami DNS (analytics.umami.is) から直接ロードされます。
トラッカーを特定のドメインでのみ実行したい場合は、`dataDomains` 設定値を指定できます。`dataDomains` 値を指定しない場合、スクリプトは `domain``websiteid` が一致する任意のウェブサイトで実行されます。環境変数 `TRACKER_SCRIPT_NAME` が設定されている場合は、カスタムスクリプト名 `scriptName` を指定できます。設定されていない場合は、コメントアウトするか、デフォルトの `script.js` を使用してください。 トラッカーを特定のドメインでのみ実行したい場合は、`dataDomains` 設定値を指定できます。`dataDomains` 値を指定しない場合、スクリプトは `domain``websiteid` が一致する任意のウェブサイトで実行されます。環境変数 `TRACKER_SCRIPT_NAME` が設定されている場合は、カスタムスクリプト名 `scriptName` を指定できます。設定されていない場合は、コメントアウトするか、デフォルトの `script.js` を使用してください。
{{< alert >}} {{< alert >}}
**注:** Umami Analytics を有効にすると、Blowfish は [Umami トラックイベント](https://umami.is/docs/track-events) を自動的にサポートします。トラックイベントをサポートしたくない場合は、パラメータ `enableTrackEvent``false` に設定する必要があります。 **注:** Umami Analytics を有効にすると、Blowfish は [Umami トラックイベント](https://umami.is/docs/track-events)を自動的にサポートします。トラックイベントをサポートしたくない場合は、パラメータ `enableTrackEvent``false` に設定する必要があります。
{{< /alert >}} {{< /alert >}}
```toml ```toml
@ -63,7 +63,7 @@ Umami のカスタムドメイン機能を使用していて、ドメインか
### Seline Analytics ### Seline Analytics
Seline Analytics のサポートを有効にするには、`config/_default/params.toml` ファイルに [Seline トークン](https://seline.so/docs/install-seline) を指定するだけです。 Seline Analytics のサポートを有効にするには、`config/_default/params.toml` ファイルに [Seline トークン](https://seline.so/docs/install-seline)を指定するだけです。
{{< alert >}} {{< alert >}}
**注:** Seline Analytics を有効にすると、Blowfish は [Seline トラックイベント](https://seline.so/docs/custom-events)を自動的にサポートします。トラックイベントをサポートしたくない場合は、パラメータ `enableTrackEvent``false` に設定する必要があります。 **注:** Seline Analytics を有効にすると、Blowfish は [Seline トラックイベント](https://seline.so/docs/custom-events)を自動的にサポートします。トラックイベントをサポートしたくない場合は、パラメータ `enableTrackEvent``false` に設定する必要があります。
@ -85,9 +85,9 @@ Seline Analytics のサポートを有効にするには、`config/_default/para
記事にコメントを追加するために、Blowfish には、各記事ページの下部に含まれるコメントパーシャルのサポートが含まれています。選択したコメントを表示するために必要なコードを含む `layouts/partials/comments.html` を指定するだけです。 記事にコメントを追加するために、Blowfish には、各記事ページの下部に含まれるコメントパーシャルのサポートが含まれています。選択したコメントを表示するために必要なコードを含む `layouts/partials/comments.html` を指定するだけです。
組み込みの Hugo Disqus テンプレートを使用するか、独自のカスタムコードを提供できます。詳細については、[Hugo ドキュメント](https://gohugo.io/content-management/comments/) を参照してください。 組み込みの Hugo Disqus テンプレートを使用するか、独自のカスタムコードを提供できます。詳細については、[Hugo ドキュメント](https://gohugo.io/content-management/comments/)を参照してください。
パーシャルが提供されると、コメントが表示される場所をより細かく制御するために、`showComments` パラメータを使用して管理されます。この値は、`params.toml` [設定ファイル]({{< ref "configuration#theme-parameters" >}}) のテーマレベルで設定するか、[フロントマター]({{< ref "front-matter" >}}) に含めることで記事ごとに設定できます。パラメータはデフォルトで `false` であるため、コメントを表示するには、これらの場所のいずれかで `true` に設定する必要があります。 パーシャルが提供されると、コメントが表示される場所をより細かく制御するために、`showComments` パラメータを使用して管理されます。この値は、`params.toml` [設定ファイル]({{< ref "configuration#theme-parameters" >}})のテーマレベルで設定するか、[フロントマター]({{< ref "front-matter" >}})に含めることで記事ごとに設定できます。パラメータはデフォルトで `false` であるため、コメントを表示するには、これらの場所のいずれかで `true` に設定する必要があります。
## ファビコン ## ファビコン
@ -110,7 +110,7 @@ static/
## アイコン ## アイコン
[アイコンショートコード]({{< ref "shortcodes#icon" >}}) と同様に、Blowfish の `icon.html` パーシャルを使用して、独自のテンプレートやパーシャルにアイコンを含めることができます。パーシャルは、含めるアイコンの名前である1つのパラメータを受け取ります。 [アイコンショートコード]({{< ref "shortcodes#icon" >}})と同様に、Blowfish の `icon.html` パーシャルを使用して、独自のテンプレートやパーシャルにアイコンを含めることができます。パーシャルは、含めるアイコンの名前である1つのパラメータを受け取ります。
**例:** **例:**
@ -118,11 +118,11 @@ static/
{{ partial "icon.html" "github" }} {{ partial "icon.html" "github" }}
``` ```
アイコンは Hugo パイプラインを使用して設定されるため、非常に柔軟です。Blowfish には、ソーシャル、リンク、その他の目的のための組み込みアイコンが多数含まれています。サポートされているアイコンの完全なリストについては、[アイコンサンプル]({{< ref "samples/icons" >}}) ページを確認してください。 アイコンは Hugo パイプラインを使用して設定されるため、非常に柔軟です。Blowfish には、ソーシャル、リンク、その他の目的のための組み込みアイコンが多数含まれています。サポートされているアイコンの完全なリストについては、[アイコンサンプル]({{< ref "samples/icons" >}})ページを確認してください。
カスタムアイコンは、プロジェクトの `assets/icons/` ディレクトリに独自のアイコンアセットを提供することで追加できます。その後、`.svg` 拡張子なしで SVG ファイル名を使用して、パーシャルでアイコンを参照できます。 カスタムアイコンは、プロジェクトの `assets/icons/` ディレクトリに独自のアイコンアセットを提供することで追加できます。その後、`.svg` 拡張子なしで SVG ファイル名を使用して、パーシャルでアイコンを参照できます。
アイコンは、[アイコンショートコード]({{< ref "shortcodes#icon" >}}) を呼び出すことで、記事のコンテンツでも使用できます。 アイコンは、[アイコンショートコード]({{< ref "shortcodes#icon" >}})を呼び出すことで、記事のコンテンツでも使用できます。
## 拡張機能 ## 拡張機能
@ -130,7 +130,7 @@ Blowfish は、基本機能を拡張できる多数の拡張パーシャルも
### 記事リンク ### 記事リンク
記事リンクの後にコードを追加したい場合は、`layouts/partials/extend-article-link.html` ファイルを作成します。これは、特定の記事のメタデータを強調表示するために使用できる [`badge`]({{< ref "shortcodes#badge" >}}) ショートコードと組み合わせると特に効果的です。 記事リンクの後にコードを追加したい場合は、`layouts/partials/extend-article-link.html` ファイルを作成します。これは、特定の記事のメタデータを強調表示するために使用できる [`badge` ショートコード]({{< ref "shortcodes#badge" >}})と組み合わせると特に効果的です。
### ヘッダーとフッター ### ヘッダーとフッター

View file

@ -9,7 +9,7 @@ series: ["Documentation"]
series_order: 8 series_order: 8
--- ---
[デフォルトの Hugo ショートコード](https://gohugo.io/content-management/shortcodes/) に加えて、Blowfish は機能拡張のためにいくつか独自のものを追加しています。 [デフォルトの Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)に加えて、Blowfish は機能拡張のためにいくつか独自のものを追加しています。
## アラート ## アラート
@ -18,7 +18,7 @@ series_order: 8
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| パラメータ | 説明 | | パラメータ | 説明 |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icon` | **オプション** 左端に表示するアイコン。<br>**デフォルト:** `exclamation triangle icon` (アイコンの使用方法の詳細については、[アイコンショートコード](#icon) をご覧ください。) | | `icon` | **オプション** 左端に表示するアイコン。<br>**デフォルト:** `exclamation triangle icon` (アイコンの使用方法の詳細については、[アイコンショートコード](#icon)をご覧ください。) |
| `iconColor` | **オプション** 基本的な CSS スタイルのアイコンの色。<br>HEX値 (`#FFFFFF`) または色の名前 (`white`) のいずれかで指定できます。<br>デフォルトでは、現在のカラースキームに基づいて選択されます。 | | `iconColor` | **オプション** 基本的な CSS スタイルのアイコンの色。<br>HEX値 (`#FFFFFF`) または色の名前 (`white`) のいずれかで指定できます。<br>デフォルトでは、現在のカラースキームに基づいて選択されます。 |
| `cardColor` | **オプション** 基本的な CSS スタイルのカードの背景色。<br>HEX値 (`#FFFFFF`) または色の名前 (`white`) のいずれかを指定できます。<br>デフォルトでは、現在のカラースキームに基づいて選択されます。 | | `cardColor` | **オプション** 基本的な CSS スタイルのカードの背景色。<br>HEX値 (`#FFFFFF`) または色の名前 (`white`) のいずれかを指定できます。<br>デフォルトでは、現在のカラースキームに基づいて選択されます。 |
| `textColor` | **オプション** 基本的な CSS スタイルのテキストの色。<br>HEX値 (`#FFFFFF`) または色の名前 (`white`) のいずれかを指定できます。<br>デフォルトでは、現在のカラースキームに基づいて選択されます。 | | `textColor` | **オプション** 基本的な CSS スタイルのテキストの色。<br>HEX値 (`#FFFFFF`) または色の名前 (`white`) のいずれかを指定できます。<br>デフォルトでは、現在のカラースキームに基づいて選択されます。 |
@ -42,12 +42,12 @@ series_order: 8
```md ```md
{{</* alert "twitter" */>}} {{</* alert "twitter" */>}}
Twitter で私を [フォロー](https://twitter.com/nunocoracao)するのを忘れないでください。 Twitter で私を[フォロー](https://twitter.com/nunocoracao)するのを忘れないでください。
{{</* /alert */>}} {{</* /alert */>}}
``` ```
{{< alert "twitter" >}} {{< alert "twitter" >}}
Twitter で私を [フォロー](https://twitter.com/nunocoracao)するのを忘れないでください。 Twitter で私を[フォロー](https://twitter.com/nunocoracao)するのを忘れないでください。
{{< /alert >}} {{< /alert >}}
**例3:** 名前付きパラメータ **例3:** 名前付きパラメータ
@ -152,9 +152,9 @@ Twitter で私を [フォロー](https://twitter.com/nunocoracao)するのを忘
## チャート ## チャート
`chart` は Chart.js ライブラリを使用して、シンプルな構造化データを使用して記事にチャートを埋め込みます。[さまざまなチャートスタイル](https://www.chartjs.org/docs/latest/samples/) をサポートしており、すべてをショートコード内から設定できます。ショートコードタグの間にチャートパラメータを指定するだけで、Chart.js が残りの処理を行います。 `chart` は Chart.js ライブラリを使用して、シンプルな構造化データを使用して記事にチャートを埋め込みます。[さまざまなチャートスタイル](https://www.chartjs.org/docs/latest/samples/)をサポートしており、すべてをショートコード内から設定できます。ショートコードタグの間にチャートパラメータを指定するだけで、Chart.js が残りの処理を行います。
構文とサポートされているチャートタイプの詳細については、[公式 Chart.js ドキュメント](https://www.chartjs.org/docs/latest/general/) を参照してください。 構文とサポートされているチャートタイプの詳細については、[公式 Chart.js ドキュメント](https://www.chartjs.org/docs/latest/general/)を参照してください。
**例:** **例:**
@ -184,7 +184,7 @@ data: {
{{< /chart >}} {{< /chart >}}
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
[チャートのサンプル]({{< ref "charts" >}}) ページで、Chart.js の他の例を見ることができます。 [チャートのサンプル]({{< ref "charts" >}})ページで、Chart.js の他の例を見ることができます。
<br/><br/><br/> <br/><br/><br/>
@ -250,14 +250,14 @@ Blowfish には、コンテンツに画像を追加するための `figure` シ
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
| パラメータ | 説明 | | パラメータ | 説明 |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src` | **必須** 画像のローカルパス/ファイル名または URL。パスとファイル名を指定すると、テーマは次の優先順位を使用して画像の特定を試みます。まず、ページにバンドルされた [ページリソース](https://gohugo.io/content-management/page-resources/) として、次に `assets/` ディレクトリ内のアセット、最後に `static/` ディレクトリ内の静的画像。 | | `src` | **必須** 画像のローカルパス/ファイル名または URL。パスとファイル名を指定すると、テーマは次の優先順位を使用して画像の特定を試みます。まず、ページにバンドルされた[ページリソース](https://gohugo.io/content-management/page-resources/)として、次に `assets/` ディレクトリ内のアセット、最後に `static/` ディレクトリ内の静的画像。 |
| `alt` | 画像の [代替テキスト](https://moz.com/learn/seo/alt-text)。 | | `alt` | 画像の[代替テキスト](https://moz.com/learn/seo/alt-text)。 |
| `caption` | 画像の下に表示される画像キャプションの Markdown。 | | `caption` | 画像の下に表示される画像キャプションの Markdown。 |
| `class` | 画像に適用する追加の CSS クラス。 | | `class` | 画像に適用する追加の CSS クラス。 |
| `href` | 画像をリンクする URL。 | | `href` | 画像をリンクする URL。 |
| `target` | `href` URL のターゲット属性。 | | `target` | `href` URL のターゲット属性。 |
| `nozoom` | `nozoom=true` は、画像の「ズーム」機能を無効にします。これは、`href` リンクと組み合わせて使用​​するのが最も役立ちます。 | | `nozoom` | `nozoom=true` は、画像の「ズーム」機能を無効にします。これは、`href` リンクと組み合わせて使用​​するのが最も役立ちます。 |
| `default` | Hugoのデフォルトの `figure` の動作に戻すための特別なパラメータ。`default=true` を指定し、通常の [Hugo ショートコード構文](https://gohugo.io/content-management/shortcodes/#figure) を使用します。 | | `default` | Hugoのデフォルトの `figure` の動作に戻すための特別なパラメータ。`default=true` を指定し、通常の [Hugo ショートコード構文](https://gohugo.io/content-management/shortcodes/#figure)を使用します。 |
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
Blowfish も、標準の Markdown 構文を使用して含まれる画像の自動変換もサポートしています。次の形式を使用するだけで、テーマが処理してくれます。 Blowfish も、標準の Markdown 構文を使用して含まれる画像の自動変換もサポートしています。次の形式を使用するだけで、テーマが処理してくれます。
@ -438,17 +438,17 @@ Blowfish も、標準の Markdown 構文を使用して含まれる画像の自
**出力:** {{< icon "github" >}} **出力:** {{< icon "github" >}}
アイコンは Hugo パイプラインを使用して設定されるため、非常に柔軟です。Blowfish には、ソーシャル、リンク、その他の目的のための組み込みアイコンが多数含まれています。サポートされているアイコンの完全なリストについては、[アイコンのサンプル]({{< ref "samples/icons" >}}) ページを確認してください。 アイコンは Hugo パイプラインを使用して設定されるため、非常に柔軟です。Blowfish には、ソーシャル、リンク、その他の目的のための組み込みアイコンが多数含まれています。サポートされているアイコンの完全なリストについては、[アイコンのサンプル]({{< ref "samples/icons" >}})ページを確認してください。
カスタムアイコンは、プロジェクトの `assets/icons/` ディレクトリに独自のアイコンアセットを提供することで追加できます。その後、`.svg` 拡張子なしで SVG ファイル名を使用して、ショートコードでアイコンを参照できます。 カスタムアイコンは、プロジェクトの `assets/icons/` ディレクトリに独自のアイコンアセットを提供することで追加できます。その後、`.svg` 拡張子なしで SVG ファイル名を使用して、ショートコードでアイコンを参照できます。
アイコンは、[アイコンパーシャル]({{< ref "partials#icon" >}}) を呼び出すことで、パーシャルでも使用できます。 アイコンは、[アイコンパーシャル]({{< ref "partials#icon" >}})を呼び出すことで、パーシャルでも使用できます。
<br/><br/><br/> <br/><br/><br/>
## KaTeX ## KaTeX
`katex` ショートコードを使用すると、KaTeX パッケージを使用して記事のコンテンツに数式を追加できます。利用可能な構文については、[サポートされている TeX 関数](https://katex.org/docs/supported.html) のオンラインリファレンスを参照してください。 `katex` ショートコードを使用すると、KaTeX パッケージを使用して記事のコンテンツに数式を追加できます。利用可能な構文については、[サポートされている TeX 関数](https://katex.org/docs/supported.html)のオンラインリファレンスを参照してください。
記事に数式を含めるには、コンテンツを含むショートコードを任意の場所に配置するだけです。記事ごとに1回だけ含める必要があり、KaTeX はそのページのマークアップを自動的にレンダリングします。インライン表記とブロック表記の両方がサポートされています。 記事に数式を含めるには、コンテンツを含むショートコードを任意の場所に配置するだけです。記事ごとに1回だけ含める必要があり、KaTeX はそのページのマークアップを自動的にレンダリングします。インライン表記とブロック表記の両方がサポートされています。
@ -464,7 +464,7 @@ Blowfish も、標準の Markdown 構文を使用して含まれる画像の自
{{< katex >}} {{< katex >}}
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) \\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
[数式表記のサンプル]({{< ref "mathematical-notation" >}}) ページで、その他の例を確認できます。 [数式表記のサンプル]({{< ref "mathematical-notation" >}})ページで、その他の例を確認できます。
<br/><br/><br/> <br/><br/><br/>
@ -539,7 +539,7 @@ Blowfish も、標準の Markdown 構文を使用して含まれる画像の自
| `value` | `where` で定義されたパラメータに一致する必要がある値。記事のクエリに使用されます。例: `where` == `Type` の場合、有効な値は `sample` です。 | | `value` | `where` で定義されたパラメータに一致する必要がある値。記事のクエリに使用されます。例: `where` == `Type` の場合、有効な値は `sample` です。 |
{{< alert >}} {{< alert >}}
`where``value` の値は、ショートコードのコードで次のクエリ `where .Site.RegularPages $where $value` で使用されます。使用可能なパラメータの詳細については、[Hugo ドキュメント](https://gohugo.io/methods/page/) を確認してください。 `where``value` の値は、ショートコードのコードで次のクエリ `where .Site.RegularPages $where $value` で使用されます。使用可能なパラメータの詳細については、[Hugo ドキュメント](https://gohugo.io/methods/page/)を確認してください。
{{</ alert >}} {{</ alert >}}
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
@ -564,7 +564,7 @@ Blowfish も、標準の Markdown 構文を使用して含まれる画像の自
## LTR/RTL ## LTR/RTL
`ltr``rtl` を使用すると、それぞれのコンテンツを混在させることができます。多くの RTL 言語ユーザーは、コンテンツの一部に LTR を含めたいと考えています。このショートコードを使用するとそれを行うことができ、[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown) の最も外側の要素として `%` を活用することで、内部のマークダウンは通常どおりレンダリングされます。 `ltr``rtl` を使用すると、それぞれのコンテンツを混在させることができます。多くの RTL 言語ユーザーは、コンテンツの一部に LTR を含めたいと考えています。このショートコードを使用するとそれを行うことができ、[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown)の最も外側の要素として `%` を活用することで、内部のマークダウンは通常どおりレンダリングされます。
**例:** **例:**
@ -614,7 +614,7 @@ Blowfish も、標準の Markdown 構文を使用して含まれる画像の自
`mermaid` ショートコード内に Mermaid 構文を記述するだけで、プラグインが残りの処理を行います。 `mermaid` ショートコード内に Mermaid 構文を記述するだけで、プラグインが残りの処理を行います。
構文とサポートされている図の種類の詳細については、[公式 Mermaid ドキュメント](https://mermaid-js.github.io/) を参照してください。 構文とサポートされている図の種類の詳細については、[公式 Mermaid ドキュメント](https://mermaid-js.github.io/)を参照してください。
**例:** **例:**
@ -632,7 +632,7 @@ A[レモン]-->B[レモネード];
B-->C[利益] B-->C[利益]
{{< /mermaid >}} {{< /mermaid >}}
[図とフローチャートのサンプル]({{< ref "diagrams-flowcharts" >}}) ページで、Mermaid の追加の例を見ることができます。 [図とフローチャートのサンプル]({{< ref "diagrams-flowcharts" >}})ページで、Mermaid の追加の例を見ることができます。
<br/><br/><br/> <br/><br/><br/>
@ -840,7 +840,7 @@ consectetur adipiscing elit.
**例2:** **例2:**
以下に示すように、`params` 変数に Youtube のすべての [プレーヤーパラメータ](https://developers.google.com/youtube/player_parameters#Parameters) を使用できます。 以下に示すように、`params` 変数に Youtube のすべての [プレーヤーパラメータ](https://developers.google.com/youtube/player_parameters#Parameters)を使用できます。
> この動画は130秒(2分10秒)後に開始されます。 > この動画は130秒(2分10秒)後に開始されます。
@ -858,4 +858,4 @@ consectetur adipiscing elit.
{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}} {{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}}
詳細については、[youtubeLite GitHub リポジトリ](https://github.com/paulirish/lite-youtube-embed/blob/master/readme.md#custom-player-parameters) および Youtube の [プレーヤーパラメータ](https://developers.google.com/youtube/player_parameters#Parameters) ページを参照してください。 詳細については、[youtubeLite GitHub リポジトリ](https://github.com/paulirish/lite-youtube-embed/blob/master/readme.md#custom-player-parameters)および Youtube の[プレーヤーパラメータ](https://developers.google.com/youtube/player_parameters#Parameters)ページを参照してください。

View file

@ -39,7 +39,7 @@ content
└── index.md └── index.md
``` ```
あとは、前述のように画像を追加するだけです。設定例を確認したい場合は、[こちらのサンプル]({{< ref "thumbnail_sample" >}}) をご覧ください。 あとは、前述のように画像を追加するだけです。設定例を確認したい場合は、[こちらのサンプル]({{< ref "thumbnail_sample" >}})をご覧ください。
## ヒーロー画像 ## ヒーロー画像

View file

@ -26,7 +26,7 @@ Tailwind CSS は Blowfish の中核であり、今回のリリースには最新
<div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div> <div class="text-2xl text-center" style="font-size: 2.8rem">🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩</div>
コミュニティからの貢献のおかげで、Blowfish はすでに [30 の言語](https://github.com/nunocoracao/blowfish/tree/main/i18n) に翻訳されており、今後も追加される予定です。ちなみに、新しい言語の [プルリクエスト](https://github.com/nunocoracao/blowfish/pulls) はいつでも大歓迎です! コミュニティからの貢献のおかげで、Blowfish はすでに[30の言語](https://github.com/nunocoracao/blowfish/tree/main/i18n)に翻訳されており、今後も追加される予定です。ちなみに、新しい言語の[プルリクエスト](https://github.com/nunocoracao/blowfish/pulls)はいつでも大歓迎です!
## RTL 言語対応 ## RTL 言語対応