はじめに

Congoに同梱されている設定ファイルには、テーマが認識できるすべての設定が含まれおり、デフォルトでは多くはコメントアウトされていますが、特定の機能を有効にしたり変更したりするには、コメントアウトを解除するだけです。

基本設定 #

コンテンツを作成する前に、新規インストール用に設定すべきことがいくつかあります。まず config.toml ファイルで、baseURL と languageCode パラメーターを設定し、 languageCode には、コンテンツの作成に使用するメインの言語を設定しましょう。

# config/_default/config.toml

baseURL = "https://your_domain.com/"
languageCode = "en"

次のステップは言語設定です。Congoは多言語をサポートしていますが、今はメインの言語だけを設定してください。

config/_default の中にある languages.en.toml ファイルを探してください。メイン言語が英語の場合は、このファイルをそのまま使うことができます。そうでない場合は、ファイル名に正しい言語コードが含まれるようにファイル名を変更してください。例えばフランス語の場合は、 languages.fr.toml にファイル名を変更します。

# config/_default/languages.en.toml

title = "My awesome website"

[params.author]
name = "My name"
image = "img/author.jpg"
headline = "A generally awesome human"
bio = "A little bit about me"
links = [
  { twitter = "https://twitter.com/username" }
]

[params.author] はウェブサイト上でどのように著者情報を表示するかを決定します。画像はサイトの assets/ に置きましょう。リンクはリストの記述順に沿って表示されます。

各設定に関する詳細情報は、 設定セクションで説明されています。

カラースキーム #

Congoにはいくつかのカラースキームが同梱されています。配色を変更するには、colorScheme パラメーターを設定するだけです。有効なオプションは congo （デフォルト）、 avocado 、 cherry 、 fire 、 ocean 、 sapphire 、 slate です。

# config/_default/params.toml

colorScheme = "congo"

Congoは、テーマ全体で使用される3色のパレットを定義しています。それぞれのメインカラーには、 Tailwindに含まれる10色の濃淡が含まれています。

Congo (default) #

Avocado #

Cherry #

Fire #

Ocean #

Sapphire #

Slate #

独自の配色を作成することもできます。詳しくは 高度な設定セクションを参照してください。

コンテンツの整理 #

Congoは特定のコンテンツタイプを強制しません。そのため、自由にコンテンツを定義することができます。静的なサイトにはpages、ブログにはposts、ポートフォリオにはprojectsがいいかもしれません。

ディレクトリ構造 #

基本的なCongoプロジェクトの概要を説明します。すべてのコンテンツは content に置かれます:

.
├── assets
│   └── img
│       └── author.jpg
├── config
│   └── _default
├── content
│   ├── _index.md
│   ├── about.md
│   └── posts
│       ├── _index.md
│       ├── first-post.md
│       └── another-post
│           ├── aardvark.jpg
│           └── index.md
└── themes
    └── congo

このテーマはHugoのページバンドルを最大限に活用するように設計されているため、Hugoがどのようにコンテンツを整理することを想定しているかをしっかりと把握することが重要です。詳しくは Hugo公式ドキュメントを読んでください。

feature、cover、そしてthumb(nail) #

Congoは、記事リストと個々の記事ページの上部に画像を表示できます。サポートされている画像には3つのタイプがあり、それぞれに使用例があります: feature 、 cover 、 thumb です。

以下の例では、 first-post の記事に cover と thumb を用意しています:

.
└── content
    └── posts
        ├── _index.md
        └── first-post
            ├── cover.jpg
            ├── index.md
            └── thumb.jpg

thumb 画像は記事のサムネイルとして記事リストで表示され、 cover 画像は個々の記事ページで記事内容の上部に表示されます。

The feature image is a special type, and when present, it will be used in place of both the thumb and cover images. Feature images are also present in the article metadata, which is included when content is shared to third-party networks like Facebook and Twitter. feature 画像は特別で、存在する場合には thumb 画像と cover 画像の両方の代わりに使用されます。 feature 画像は記事のメタデータとして、FacebookやTwitterのようなサードパーティのネットワークにコンテンツが共有される場合にも含まれます。

Congoは記事画像をインテリジェントに検出し、自動的にあなたのサイトに追加します。フロントマターでそれらを指定する必要はなく、ページリソース内に適切な名前のファイルを配置するだけです。画像ファイル名のどこかに feature 、 cover 、 thumb という単語があれば、それがその目的で使用されます。

例には、これらの画像の例が多数掲載されています（また、 ソースコードを参照してファイル構造を確認することもできます）。

Taxonomies #

CongoはTaxonomiesに関しても柔軟です。 tags や categories を使ってコンテンツをグループ化したい人もいれば、 topics を使いたい人もいるでしょう。

Hugoはデフォルトで posts 、 tags 、 categories を使用するようになっています。しかし、これをカスタマイズしたい場合は、 taxonomies.toml 設定ファイルを作成することでカスタマイズできます:

# config/_default/taxonomies.toml

topic = "topics"

上記の例はデフォルトの tags と categories を topics に置き換えます。詳細は、 Hugo Taxonomy docsを参照してください。

When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.

メニュー #

Congoには2つのメニューがあり、サイトの内容やレイアウトに合わせてカスタマイズすることができます。 main メニューはサイトのヘッダーに表示され、 footer メニューはページの一番下、著作権表示のすぐ上に表示されます。

Both menus are configured in the menus.en.toml file. Similarly to the languages config file, if you wish to use another language, rename this file and replace en with the language code you wish to use. Menu links will be sorted from lowest to highest weight, and then alphabetically by name. どちらのメニューも menus.en.toml ファイルで設定すします。 menus.en.toml ファイルは言語設定ファイルと同様に、他の言語を使いたい場合はファイル名を変更して使いたい言語コードに置き換えてください。メニューのリンクは weight の低いものから高いものへとソートされ、次にアルファベット順に name でソートされます。

# config/_default/menus.en.toml

[[main]]
  name = "Blog"
  pageRef = "posts"
  weight = 10

[[main]]
  name = "Topics"
  pageRef = "topics"
  weight = 20

[[main]]
  name = "GitHub"
  url = "https://github.com/jpanther/congo"
  weight = 30
  [main.params]
    icon = "github"
    showName = false
    target = "_blank"

[[main]]
  identifier = "search"
  weight = 99
  [main.params]
    action = "search"
    icon = "search"

[[footer]]
  name = "Privacy"
  pageRef = "privacy"

基本のリンク #

name パラメーターはメニューリンクで使用するテキストを指定します。また、オプションでリンクのHTMLタイトル属性となる title を指定することもできます。

pageRef パラメーターを使うと、HugoのコンテンツページやTaxonomyを簡単に参照することができます。Hugoのコンテンツアイテムを参照するだけで、自動的に正しいリンクが作成されるので、メニューを設定する最も簡単な方法です。外部URLへのリンクには url パラメーターを使用します。

リンク内に params を指定することで、さらなるカスタマイズが可能です。 icon を追加したり、 showName でリンクテキストを切り替えたり、URLに target を設定したりすることができます。上記の例では、GitHubリンクはアイコンのみで表示され、リンクは新しいウィンドウで開きます。

アクションリンク #

There is a special case for creating menu items for links that take theme actions. These are denoted using the action parameter, and a value of the action the link should perform. Action links allow for all the same custom parameters as other links and can be styled with an icon or text name. 特別なケースとして、アクションを実行するリンク項目を作成する場合があります。これらは action パラメーターと実行するアクションの値を使って指定します。アクションリンクでは基本のリンクと同じカスタムパラメーターを使用することができ、アイコンやテキスト名でスタイルを設定することもできます。

有効なテーマ・アクションは2つあります:

• appearance は外観を切り替えるリンクを作成します
• search はサイト内検索を行うリンクを作成します

どちらのメニューも完全にオプションであり、必要なければコメントアウトすることができます。デフォルトとして提供されているテンプレートも参考にしてください。

詳細な設定 #

上記の手順は最低限の設定です。これで hugo server を実行すると、空白のCongoウェブサイトが表示されます。詳細な設定については、 設定セクションを参照してください。