ノート

Hugoでwebサイト構築(12) タグの列挙

1. サイト内にはどんなタグがあるのか

前回、記事にタグをつける方法を紹介しました。今回はサイト内に存在するタグに どんなものがあるのかを列挙する方法を説明します。


Hugoでwebサイト構築(11) タグ

(※2015/11/11 間違いの修正 ×tags.html -> ◯tag.html)

1. ブログにおけるタグをHugoでつくる

Hugoではブログ様のサイトを構築することができます。ブログでよく使われる機能であるタグも実装することができます。


Hugoでwebサイト構築(10) データファイル(パラメータを作る)

1. dataフォルダとデータファイル

サイト全体で共有するパラメータはconfig.tomlの[Params]を用いることができますが、すべてをconfig.tomlにまとめるのは煩雑であるのと同時に利用の際もなかなか面倒です。Hugoではconfig.toml以外にサイト全体で共有するパラメータを書く場所としてdataフォルダが用意されています。


Hugoでwebサイト構築(9) リストのページネーション(Pagination)

1. リストのページネーション

Hugoで自動的に生成されるリストページではPagination(ページネーション)の機能が使えます。ページネーションとは名前通り、リストを一定件数ごとに区切って複数ページ化してくれる機能です。前回、記事を列挙する際に用いた.Paginatorがページネーションの機能になります。

前回のSectionリストページでは.Paginatorから記事情報を10件に絞る処理を入れていましたが、絞った10件以外の記事情報はリスト化できない状況でした。 そこで、前回のコードに10件ずつ記事情報を表示していき、かつ次の10件をみられるような「ページめくりリンク」機能を追加していきます。


Hugoでwebサイト構築(8) Sectionのリスト

1. Sectionのリストをつくる

Hugoではリストを自動的に作る機能があります。前回紹介したセクション単位でリストを作ることができるので、これを例にリスト作成を行ってみます。


Hugoでwebサイト構築(7) Sectionで記事を分類する

1. Sectionで記事を分類する

「content」フォルダ内にサブフォルダを作ると、それがSectionになります。とても簡単です。サブフォルダ内にmdファイルを入れることでそのセクションに分類される記事となります。下記にFoodというセクションとPhotoというセクションを作った場合のフォルダ構成を示します。


Hugoでwebサイト構築(6) publicへの記事出力について

1. サイト作成時の出力について

前回まででHugoの基本的な部品構成をひととおり紹介しました。 ここまで準備すればHugoコマンドを入力してサイトを生成できるのですが、publicの出力には少し癖があるため、これを説明します。 この記事のHugoのバージョンはHugo v0.14です。


Hugoでwebサイト構築(5) そのままコピーする'static'フォルダ

1. 加工なしのリソースをpublicに移す

Hugoで生成されたサイトコードはpublicフォルダに入りますが、 Hugoのビルド工程を経ずに任意のフォルダ構成でそのままコピーしたいリソースがあります。 例えばサイト全体で共有するcssファイルやjsファイル、また画像ファイルなどです。


Hugoでwebサイト構築(4) markdownで記事を書く

1. Hugoで記事を書いていく

前回のpartialの作り方までにサイトの基本構成であるパラメータの設定、基本レイアウトを作れました。 今回は、これらのレイアウトとマークダウンで記述した記事を連携して、実際にHTMLの記事を生成していきます。

「content」フォルダ内にmdファイルを入れることで記事となります。


Hugoでwebサイト構築(3) partialで部品をつくる

1. partialを用いた部品の作成

サイト構築(1)でも軽く触れましたが、partialでの部品作りを少し詳しく行います。

「layouts > partials」フォルダ内にあるHTMLファイルが部品として機能します。