templates/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-04-21 02:01:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

📝 Update

Browse source
This commit is contained in:
yuubinnkyoku 2024-12-16 10:05:55 +00:00
parent 7d16bb699a
commit b301244545
1 changed files with 96 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

192
exampleSite/content/docs/content-examples/index.ja.md
View file

@ -1,63 +1,63 @@
--- ---
title: "Content Examples" title: "コンテンツの例"
weight: 11 weight: 11
draft: false draft: false
description: "All the partials available in Blowfish." description: "Blowfish で利用可能なすべてのパーシャル。"
slug: "content-examples" slug: "content-examples"
tags: ["content", "example"] tags: ["content", "example"]
series: ["Documentation"] series: ["Documentation"]
series_order: 12 series_order: 12
--- ---
If you've been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project. ドキュメントを順番に読んできたなら、Blowfish で利用可能なすべての機能と設定について理解できたはずです。このページは、すべてをまとめて、Hugo プロジェクトで使用できる実例を提供するために設計されています。
{{< alert >}} {{< alert >}}
**Tip:** If you're new to Hugo, be sure to check out the [official docs](https://gohugo.io/content-management/page-bundles/) to learn more about the concept of page bundles and resources. **ヒント:** Hugo を初めて使用する場合は、[公式ドキュメント](https://gohugo.io/content-management/page-bundles/) をチェックして、ページバンドルとリソースの概念について詳しく学んでください。
{{< /alert >}} {{< /alert >}}
The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project. このページの例はすべて、さまざまなシナリオに適用できますが、個々のプロジェクトで特定のコンテンツ項目をフォーマットする方法について、いくつかのアイデアを提供できれば幸いです。
## Branch pages ## ブランチページ
Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is **`_index.md`**. Hugo のブランチページバンドルは、ホームページ、セクションリスト、タクソノミーページなどのアイテムをカバーしています。ブランチバンドルについて覚えておくべき重要なことは、このコンテンツタイプのファイル名が **`_index.md`** であることです。
Blowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the `title` parameter in a branch page will allow overriding the page title. Blowfish は、ブランチページで指定されたフロントマターパラメータを尊重し、これらは特定のページのデフォルト設定を上書きします。たとえば、ブランチページで `title` パラメータを設定すると、ページタイトルを上書きできます。
### Homepage ### ホームページ
| | | | | |
| ------------ | -------------------- | | ------------ | -------------------- |
| **Layout:** | `layouts/index.html` | | **レイアウト:** | `layouts/index.html` |
| **Content:** | `content/_index.md` | | **コンテンツ:** | `content/_index.md` |
The homepage in Blowfish is special in that it's overarching design is controlled by the homepage layout config parameter. You can learn more about this in the [Homepage Layout]({{< ref "homepage-layout" >}}) section. Blowfish のホームページは、ホームページレイアウト設定パラメータによって全体的なデザインが制御されるという点で特別です。これについては、[ホームページレイアウト]({{< ref "homepage-layout" >}}) セクションで詳しく説明しています。
If you want to add custom content to this page, you simply need to create a `content/_index.md` file. Anything in this file will then be included in your homepage. このページにカスタムコンテンツを追加する場合は、`content/_index.md` ファイルを作成するだけです。このファイルのすべてがホームページに含まれます。
**Example:** **例:**
```yaml ```yaml
--- ---
title: "Welcome to Blowfish!" title: "Blowfish へようこそ!"
description: "This is a demo of adding content to the homepage." description: "これはホームページにコンテンツを追加するデモです。"
--- ---
Welcome to my website! I'm really happy you stopped by. 私のウェブサイトへようこそ! お越しいただきありがとうございます。
``` ```
_This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links._ _この例では、カスタムタイトルを設定し、ページの本文に追加のテキストを追加しています。ショートコード、画像、リンクなど、Markdown 形式のテキストはすべて使用できます。_
### List pages ### リストページ
| | | | | |
| ------------ | ---------------------------- | | ------------ | ---------------------------- |
| **Layout:** | `layouts/_default/list.html` | | **レイアウト:** | `layouts/_default/list.html` |
| **Content:** | `content/../_index.md` | | **コンテンツ:** | `content/../_index.md` |
List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects. リストページは、セクション内のすべてのページをグループ化し、訪問者が各ページにアクセスする方法を提供します。ブログやポートフォリオは、投稿やプロジェクトをグループ化するため、リストページの例です。
Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects. リストページの作成は、コンテンツフォルダにサブディレクトリを作成するのと同じくらい簡単です。たとえば、「プロジェクト」セクションを作成するには、`content/projects/` を作成します。次に、プロジェクトごとに Markdown ファイルを作成します。
A list page will be generated by default, however to customise the content, you should also create an `_index.md` page in this new directory. リストページはデフォルトで生成されますが、コンテンツをカスタマイズするには、この新しいディレクトリに `_index.md` ページも作成する必要があります。
```shell ```shell
. .
@ -70,39 +70,39 @@ A list page will be generated by default, however to customise the content, you
└── project.jpg └── project.jpg
``` ```
Hugo will generate URLs for the pages in your projects folder accordingly. Hugo は、プロジェクトフォルダ内のページの URL をそれに応じて生成します。
Just like the homepage, content in the `_index.md` file will be output into the generated list index. Blowfish will then list any pages in this section below the content. ホームページと同様に、`_index.md` ファイルのコンテンツは、生成されたリストインデックスに出力されます。Blowfish は、このセクションのページをコンテンツの下にリストします。
**Example:** **例:**
```yaml ```yaml
--- ---
title: "Projects" title: "プロジェクト"
description: "Learn about some of my projects." description: "私のプロジェクトのいくつかについて学びましょう。"
cascade: cascade:
showReadingTime: false showReadingTime: false
--- ---
This section contains all my current projects. このセクションには、私の現在のプロジェクトがすべて含まれています。
``` ```
_In this example, the special `cascade` parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page._ _この例では、特別な `cascade` パラメータを使用して、このセクション内のサブページの閲覧時間を非表示にしています。これにより、プロジェクトページには閲覧時間が表示されなくなります。これは、個々のページに含めることなく、セクション全体のデフォルトのテーマパラメータを上書きする優れた方法です。_
The [samples section]({{< ref "samples" >}}) of this site is an example of a list page. このサイトの [サンプルセクション]({{< ref "samples" >}}) は、リストページの例です。
### Taxonomy pages ### タクソノミーページ
| | | | | |
| ---------------- | -------------------------------- | | ---------------- | -------------------------------- |
| **List layout:** | `layouts/_default/taxonomy.html` | | **リストレイアウト:** | `layouts/_default/taxonomy.html` |
| **Term layout:** | `layouts/_default/term.html` | | **タームレイアウト:** | `layouts/_default/term.html` |
| **Content:** | `content/../_index.md` | | **コンテンツ:** | `content/../_index.md` |
Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term. タクソノミーページには、タクソノミーリストとタクソノミータームの2つの形式があります。リストは、特定のタクソノミー内の各タームのリストを表示し、タームは特定のタームに関連するページのリストを表示します。
The terminology can get a little confusing so let's explore an example using a taxonomy named `animals`. 用語は少し混乱する可能性があるため、`animals` という名前のタクソノミーを使用した例を見てみましょう。
Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at `config/_default/taxonomies.toml` and defining the taxonomy name. まず、Hugo でタクソノミーを使用するには、設定する必要があります。これを行うには、`config/_default/taxonomies.toml` に設定ファイルを作成し、タクソノミー名を定義します。
```toml ```toml
# config/_default/taxonomies.toml # config/_default/taxonomies.toml
@ -110,27 +110,27 @@ Firstly, to use taxonomies in Hugo, they have to be configured. This is done by
animal = "animals" animal = "animals"
``` ```
Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular `animal` equals the plural `animals` to create our example taxonomy. Hugo はタクソノミーが単数形と複数形でリストされることを期待しているため、単数形の `animal` を複数形の `animals` と等しくして、サンプルのタクソノミーを作成します。
Now that our `animals` taxonomy exists, it needs to be added to individual content items. It's as simple as inserting it into the front matter: `animals` タクソノミーができたので、個々のコンテンツアイテムに追加する必要があります。フロントマターに挿入するだけです。
```yaml ```yaml
--- ---
title: "Into the Lion's Den" title: "ライオンの巣窟へ"
description: "This week we're learning about lions." description: "今週はライオンについて学びます。"
animals: ["lion", "cat"] animals: ["lion", "cat"]
--- ---
``` ```
This has now created two _terms_ within our `animals` taxonomy - `lion` and `cat`. これで、`animals` タクソノミー内に `lion` と `cat` の 2 つの _ターム_ が作成されました。
Although it's not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at `/animals/` and the term pages can be found at `/animals/lion/` and `/animals/cat/`. この時点では明らかではありませんが、Hugo はこの新しいタクソノミーのリストページとタームページを生成します。デフォルトでは、リストは `/animals/` でアクセスでき、タームページは `/animals/lion/` と `/animals/cat/` にあります。
The list page will list all the terms contained within the taxonomy. In this example, navigating to `/animals/` will show a page that has links for "lion" and "cat" which take visitors to the individual term pages. リストページには、タクソノミーに含まれるすべてのタームがリストされます。この例では、`/animals/` に移動すると、「lion」と「cat」のリンクがあるページが表示され、個々のタームページに移動できます。
The term pages will list all the pages contained within that term. These term lists are essentially the same as normal [list pages](#list-pages) and behave in much the same way. タームページには、そのタームに含まれるすべてのページがリストされます。これらのタームリストは、基本的に通常の [リストページ](#list-pages) と同じであり、ほぼ同じように動作します。
In order to add custom content to taxonomy pages, simply create `_index.md` files in the content folder using the taxonomy name as the sub-directory name. タクソノミーページにカスタムコンテンツを追加するには、タクソノミー名をサブディレクトリ名として使用して、コンテンツフォルダに `_index.md` ファイルを作成するだけです。
```shell ```shell
. .
@ -141,21 +141,21 @@ In order to add custom content to taxonomy pages, simply create `_index.md` file
└── _index.md # /animals/lion └── _index.md # /animals/lion
``` ```
Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named `lion` but override the `title` to be "Lion". これらのコンテンツファイルのすべてが、生成されたタクソノミーページに配置されるようになりました。他のコンテンツと同様に、フロントマター変数を使用してデフォルトを上書きできます。このようにして、`lion` という名前のタグを付けて、`title` を「lion」に上書きできます。
To see how this looks in reality, check out the [tags taxonomy listing]({{< ref "tags" >}}) on this site. これが実際にどのように見えるかを確認するには、このサイトの [タグタクソノミーリスト]({{< ref "tags" >}}) をご覧ください。
## Leaf pages ## リーフページ
| | | | | |
| ------------------------- | ------------------------------- | | ------------------------- | ------------------------------- |
| **Layout:** | `layouts/_default/single.html` | | **レイアウト:** | `layouts/_default/single.html` |
| **Content (standalone):** | `content/../page-name.md` | | **コンテンツ (スタンドアロン):** | `content/../page-name.md` |
| **Content (bundled):** | `content/../page-name/index.md` | | **コンテンツ (バンドル):** | `content/../page-name/index.md` |
Leaf pages in Hugo are basically standard content pages. They are defined as pages that don't contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website. Hugo のリーフページは、基本的に標準のコンテンツページです。サブページを含まないページとして定義されます。これらは、アバウトページや、ウェブサイトのブログセクションにある個々のブログ投稿などです。
The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named `index.md` _without_ an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name. リーフページについて覚えておくべき最も重要なことは、ブランチページとは異なり、リーフページはアンダースコアを _付けずに_ `index.md` という名前にする必要があることです。リーフページは、セクションのトップレベルでグループ化し、一意の名前を付けることができるという点でも特別です。
```shell ```shell
. .
@ -168,35 +168,35 @@ The most important thing to remember about leaf pages is that unlike branch page
└── image.jpg └── image.jpg
``` ```
When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an `index.md` file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages. 画像などのページにアセットを含める場合は、ページバンドルを使用する必要があります。ページバンドルは、`index.md` ファイルを含むサブディレクトリを使用して作成されます。アセットをコンテンツとともに独自のディレクトリにグループ化することは、多くのショートコードやその他のテーマロジックがリソースがページと一緒にバンドルされていることを前提としているため、重要です。
**Example:** **例:**
```yaml ```yaml
--- ---
title: "My First Blog Post" title: "私の最初のブログ投稿"
date: 2022-01-25 date: 2022-01-25
description: "Welcome to my blog!" description: "私のブログへようこそ!"
summary: "Learn more about me and why I am starting this blog." summary: "私と私がこのブログを始めた理由について詳しく学びましょう。"
tags: ["welcome", "new", "about", "first"] tags: ["welcome", "new", "about", "first"]
--- ---
_This_ is the content of my blog post. _これ_ は私のブログ投稿のコンテンツです。
``` ```
Leaf pages have a wide variety of [front matter]({{< ref "front-matter" >}}) parameters that can be used to customise how they are displayed. リーフページには、表示方法をカスタマイズするために使用できるさまざまな [フロントマター]({{< ref "front-matter" >}}) パラメータがあります。
### External links ### 外部リンク
Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you'd like to link to, without replicating the content in your Hugo site. Blowfish には、記事リストの記事と外部リンクを一緒に表示できる特別な機能があります。これは、Medium などのサードパーティのウェブサイトにコンテンツがある場合や、Hugo サイトにコンテンツを複製せずにリンクしたい研究論文がある場合に便利です。
In order to create an external link article, some special front matter needs to be set: 外部リンク記事を作成するには、いくつかの特別なフロントマターを設定する必要があります。
```yaml ```yaml
--- ---
title: "My Medium post" title: "私の Medium 投稿"
date: 2022-01-25 date: 2022-01-25
externalUrl: "https://medium.com/" externalUrl: "https://medium.com/"
summary: "I wrote a post on Medium." summary: "Medium に投稿を書きました。"
showReadingTime: false showReadingTime: false
_build: _build:
render: "false" render: "false"
@ -204,57 +204,57 @@ _build:
--- ---
``` ```
Along with the normal front matter parameters like `title` and `summary`, the `externalUrl` parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article. `title` や `summary` などの通常のフロントマターパラメータに加えて、`externalUrl` パラメータは、これが通常の記事ではないことを Blowfish に伝えるために使用されます。ここに指定された URL は、訪問者がこの記事を選択したときにリダイレクトされる場所です。
Additionally, we use a special Hugo front matter parameter `_build` to prevent a normal page for this content being generated - there's no point generating a page since we're linking to an external URL! さらに、特別な Hugo フロントマターパラメータ `_build` を使用して、このコンテンツの通常のページが生成されないようにします。外部リンクにリンクしているため、ページを生成する意味はありません。
The theme includes an archetype to make generating these external link articles simple. Just specify `-k external` when making new content. テーマには、これらの外部リンク記事を簡単に生成するためのアーキタイプが含まれています。新しいコンテンツを作成するときに、`-k external` を指定するだけです。
```shell ```shell
hugo new -k external posts/my-post.md hugo new -k external posts/my-post.md
``` ```
### Simple pages ### シンプルページ
| | | | | |
| ----------------- | ------------------------------ | | ----------------- | ------------------------------ |
| **Layout:** | `layouts/_default/simple.html` | | **レイアウト:** | `layouts/_default/simple.html` |
| **Front Matter:** | `layout: "simple"` | | **フロントマター:** | `layout: "simple"` |
Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features. Blowfish には、シンプルなページ用の特別なレイアウトも含まれています。シンプルなレイアウトは、特別なテーマ機能なしで Markdown コンテンツをページに配置するだけの全幅テンプレートです。
The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page [front matter]({{< ref "front-matter" >}}) variables. シンプルなレイアウトで利用できる唯一の機能は、パンくずリストと共有リンクです。ただし、これらの動作は、通常のページの [フロントマター]({{< ref "front-matter" >}}) 変数を使用して制御できます。
To enable the simple layout on a particular page, add the `layout` front matter variable with a value of `"simple"`: 特定のページでシンプルなレイアウトを有効にするには、`layout` フロントマター変数を `"simple"` の値で追加します。
```yaml ```yaml
--- ---
title: "My landing page" title: "私のランディングページ"
date: 2022-03-08 date: 2022-03-08
layout: "simple" layout: "simple"
--- ---
This page content is now full-width. このページコンテンツは全幅になりました。
``` ```
## Custom layouts ## カスタムレイアウト
One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages. Hugo の利点の 1 つは、サイト全体、個々のセクション、またはページのカスタムレイアウトを簡単に作成できることです。
Layouts follow all the normal Hugo templating rules and more information is available in the [official Hugo docs](https://gohugo.io/templates/introduction/). レイアウトは、通常の Hugo テンプレートルールに従い、詳細については [公式 Hugo ドキュメント](https://gohugo.io/templates/introduction/) をご覧ください。
### Overriding default layouts ### デフォルトレイアウトの上書き
Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website. 上記の各コンテンツタイプは、各タイプのページを生成するために使用されるレイアウトファイルをリストしています。このファイルがローカルプロジェクトで作成されると、テーマテンプレートが上書きされるため、ウェブサイトのデフォルトスタイルをカスタマイズするために使用できます。
For example, creating a `layouts/_default/single.html` file will allow the layout of leaf pages to be completely customised. たとえば、`layouts/_default/single.html` ファイルを作成すると、リーフページのレイアウトを完全にカスタマイズできます。
### Custom section layouts ### カスタムセクションレイアウト
It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style. 個々のコンテンツセクションのカスタムレイアウトを作成することも簡単です。これは、特定のスタイルを使用して特定のタイプのコンテンツをリストするセクションを作成する場合に便利です。
Let's step through an example that creates a custom "Projects" page that lists projects using a special layout. 特別なレイアウトを使用してプロジェクトをリストするカスタム「Projects」ページを作成する例を見てみましょう。
In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a `list.html` file. これを行うには、通常の Hugo コンテンツルールを使用してコンテンツを構造化し、プロジェクトのセクションを作成します。さらに、コンテンツと同じディレクトリ名を使用して `list.html` ファイルを追加することで、プロジェクトセクションの新しいレイアウトを作成できます。
```shell ```shell
. .
@ -268,22 +268,22 @@ In order to do this, structure your content using the normal Hugo content rules
└── list.html └── list.html
``` ```
This `list.html` file will now override the default list template, but only for the `projects` section. Before we look at this file, lets first look at the individual project files. この `list.html` ファイルは、デフォルトのリストテンプレートを上書きしますが、`projects` セクションに対してのみです。このファイルを見る前に、まず個々のプロジェクトファイルを見てみましょう。
```yaml ```yaml
--- ---
title: "Blowfish" title: "Blowfish"
date: 2021-08-11 date: 2021-08-11
icon: "github" icon: "github"
description: "A theme for Hugo built with Tailwind CSS." description: "Tailwind CSS で構築された Hugo のテーマ。"
topics: ["Hugo", "Web", "Tailwind"] topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/nunocoracao/blowfish/" externalUrl: "https://github.com/nunocoracao/blowfish/"
--- ---
``` ```
_In this example we are assigning some metadata for each project that we can then use in our list template. There's no page content, but there's nothing stopping you from including it. It's your own custom template after all!_ _この例では、各プロジェクトにメタデータを割り当てています。ページのコンテンツはありませんが、それを含めることを妨げるものは何もありません。結局のところ、これはあなた自身のカスタムテンプレートなのですから!_
With the projects defined, now we can create a list template that outputs the details of each project. プロジェクトが定義されたので、各プロジェクトの詳細を出力するリストテンプレートを作成できます。
```go ```go
{{ define "main" }} {{ define "main" }}
@ -311,8 +311,8 @@ With the projects defined, now we can create a list template that outputs the de
{{ end }} {{ end }}
``` ```
Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed. これは非常に簡単な例ですが、このセクションの各ページ (つまり、各プロジェクト) をステップスルーし、アイコンと一緒に各プロジェクトへの HTML リンクを出力することがわかります。各プロジェクトのフロントマターのメタデータは、表示される情報を決定するために使用されます。
Keep in mind that you'll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the [Advanced Customisation]({{< ref "advanced-customisation" >}}) section. 関連するスタイルとクラスが利用可能であることを確認する必要があることに注意してください。これには、Tailwind CSS の再コンパイルが必要になる場合があります。これについては、[高度なカスタマイズ]({{< ref "advanced-customisation" >}}) セクションで詳しく説明されています。
When making custom templates like this one, it's always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the [Hugo docs](https://gohugo.io/templates/introduction/) are a great resource to learn more about creating templates too. このようなカスタムテンプレートを作成する場合、デフォルトの Blowfish テンプレートの動作を確認し、それをガイドとして使用するのが常に最も簡単です。テンプレートの作成について詳しく学ぶには、[Hugo ドキュメント](https://gohugo.io/templates/introduction/) も優れたリソースであることを忘れないでください。