mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
corrected
This commit is contained in:
Nuno Coração
@@ -1,63 +1,63 @@
|
||||
---
|
||||
title: "Content Examples"
|
||||
title: "コンテンツの例"
|
||||
weight: 11
|
||||
draft: false
|
||||
description: "All the partials available in Blowfish."
|
||||
description: "Blowfish で利用可能なすべてのパーシャル。"
|
||||
slug: "content-examples"
|
||||
tags: ["content", "example"]
|
||||
series: ["Documentation"]
|
||||
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 >}}
|
||||
**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 >}}
|
||||
|
||||
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 は、ブランチページで指定された Front Matter のパラメータを認識し、特定のページのデフォルト設定を上書きします。例えば、ブランチページで `title` パラメータを設定すると、そのページのタイトルを上書きできます。
|
||||
|
||||
### Homepage
|
||||
### ホームページ
|
||||
|
||||
| | |
|
||||
| ------------ | -------------------- |
|
||||
| **Layout:** | `layouts/index.html` |
|
||||
| **Content:** | `content/_index.md` |
|
||||
| **レイアウト:** | `layouts/index.html` |
|
||||
| **コンテンツ:** | `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
|
||||
---
|
||||
title: "Welcome to Blowfish!"
|
||||
description: "This is a demo of adding content to the homepage."
|
||||
title: "Blowfish へようこそ!"
|
||||
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` |
|
||||
| **Content:** | `content/../_index.md` |
|
||||
| **レイアウト:** | `layouts/_default/list.html` |
|
||||
| **コンテンツ:** | `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
|
||||
.
|
||||
@@ -70,39 +70,39 @@ A list page will be generated by default, however to customise the content, you
|
||||
└── project.jpg
|
||||
```
|
||||
|
||||
Hugo will generate URLs for the pages in your projects folder accordingly.
|
||||
Hugo は、projects フォルダ内の各ページに対して、適切な 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
|
||||
---
|
||||
title: "Projects"
|
||||
description: "Learn about some of my projects."
|
||||
title: "プロジェクト"
|
||||
description: "私のプロジェクトのいくつかをご紹介します。"
|
||||
cascade:
|
||||
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` |
|
||||
| **Term layout:** | `layouts/_default/term.html` |
|
||||
| **Content:** | `content/../_index.md` |
|
||||
| **リストレイアウト:** | `layouts/_default/taxonomy.html` |
|
||||
| **タームレイアウト:** | `layouts/_default/term.html` |
|
||||
| **コンテンツ:** | `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
|
||||
# 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"
|
||||
```
|
||||
|
||||
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
|
||||
---
|
||||
title: "Into the Lion's Den"
|
||||
description: "This week we're learning about lions."
|
||||
title: "ライオンの巣窟へ"
|
||||
description: "今週はライオンについて学びます。"
|
||||
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.
|
||||
タームページには、そのタームに関連付けられたすべてのページが表示されます。タームリストは、基本的に通常の[リストページ](#リストページ)と同じで、ほぼ同様に機能します。
|
||||
|
||||
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.
|
||||
タクソノミーページに独自のコンテンツを追加するには、タクソノミー名をサブディレクトリ名として、`content` フォルダ内に `_index.md` ファイルを作成するだけです。
|
||||
|
||||
```shell
|
||||
.
|
||||
@@ -141,21 +141,21 @@ In order to add custom content to taxonomy pages, simply create `_index.md` file
|
||||
└── _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` |
|
||||
| **Content (standalone):** | `content/../page-name.md` |
|
||||
| **Content (bundled):** | `content/../page-name/index.md` |
|
||||
| **レイアウト:** | `layouts/_default/single.html` |
|
||||
| **コンテンツ (スタンドアロン):** | `content/../page-name.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
|
||||
.
|
||||
@@ -168,35 +168,35 @@ The most important thing to remember about leaf pages is that unlike branch page
|
||||
└── 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
|
||||
---
|
||||
title: "My First Blog Post"
|
||||
title: "初めてのブログ記事"
|
||||
date: 2022-01-25
|
||||
description: "Welcome to my blog!"
|
||||
summary: "Learn more about me and why I am starting this blog."
|
||||
description: "私のブログへようこそ!"
|
||||
summary: "私自身と、このブログを始めた理由についてご紹介します。"
|
||||
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
|
||||
---
|
||||
title: "My Medium post"
|
||||
title: "私の Medium 記事"
|
||||
date: 2022-01-25
|
||||
externalUrl: "https://medium.com/"
|
||||
summary: "I wrote a post on Medium."
|
||||
summary: "Medium に記事を投稿しました。"
|
||||
showReadingTime: false
|
||||
_build:
|
||||
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` などの通常の Front Matter パラメータに加えて、`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
|
||||
hugo new -k external posts/my-post.md
|
||||
```
|
||||
|
||||
### Simple pages
|
||||
### シンプルページ
|
||||
|
||||
| | |
|
||||
| ----------------- | ------------------------------ |
|
||||
| **Layout:** | `layouts/_default/simple.html` |
|
||||
| **Front Matter:** | `layout: "simple"` |
|
||||
| **レイアウト:** | `layouts/_default/simple.html` |
|
||||
| **フロントマター:** | `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
|
||||
---
|
||||
title: "My landing page"
|
||||
title: "私のランディングページ"
|
||||
date: 2022-03-08
|
||||
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.
|
||||
特別なレイアウトを使用してプロジェクトを一覧表示する、カスタム「プロジェクト」ページを作成する例を見てみましょう。
|
||||
|
||||
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
|
||||
.
|
||||
@@ -268,22 +268,22 @@ In order to do this, structure your content using the normal Hugo content rules
|
||||
└── 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
|
||||
---
|
||||
title: "Blowfish"
|
||||
date: 2021-08-11
|
||||
icon: "github"
|
||||
description: "A theme for Hugo built with Tailwind CSS."
|
||||
description: "Tailwind CSS を使用して構築された Hugo テーマ。"
|
||||
topics: ["Hugo", "Web", "Tailwind"]
|
||||
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
|
||||
{{ define "main" }}
|
||||
@@ -311,8 +311,8 @@ With the projects defined, now we can create a list template that outputs the de
|
||||
{{ 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/)も、テンプレート作成について学ぶための優れた情報源です。
|
||||
|
||||
Reference in New Issue
Block a user