baseof.htmlの作成 その1

こんにちはnasustです。今回はbaseof.htmlを作成します。

baseof.htmlの作成

今回はオーソドックスなシンプルなブログのテンプレートを作成するので、 よくある2カラムのデザインのブログを作成します。

sigle.htmlとlist.htmlのデザイン共通部分は、ヘッダー、フッター、サイドバーです。

コンテンツ部分は、single.htmlではブログの記事、list.htmlとなります。 それぞれのHTMLはbaseof.htmlのコンテンツ部分をを上書きして作成します。

baseof.htmlテンプレート

以下のようにbaseof.htmlを記述しました。 2カラムのブログを意識したhtml5のタグにしています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <base href="{{ .Site.BaseURL }}" />
        <link rel="canonical" href="{{ .Permalink }}" />

        <meta name="viewport" content="width=device-width,initial-scale=1">

        {{ range .AlternativeOutputFormats -}}
        <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
        {{ end -}}

        <title> 
            {{ .Title}}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}
        </title>

        {{ $description := ""}}
        {{ if .Description }}
            {{ $description = .Description }}
        {{ else if .Summary }}
            {{ $description = .Summary }}
        {{ else if isset .Site.Params "description" }}
            {{ $description = .Site.Params.description }}
        {{ end }}
        {{ with $description }}
            <meta name="description" content="{{ . }}" />
        {{ end }}

        {{ with .Site.Params.author }}
            <meta name="author" content="{{ . }}" />
        {{ end }}

        {{ partial "head_og" . }}
        {{ partial "head_style" . }}

    </head>
    <body class="m-body">
        <header class="m-global-header">
            {{ partial "header" . }}
        </header>
        <main class="m-main">
            <div class="m-main-container">
                <div class="m-content-container">
                    {{ block "content" . }}
                        {{ .Content }}
                    {{ end }}
                </div>
                <div class="m-aside-container">
                    {{ partial "right_aside" . }}
                </div>
            </div>
        </main>
        <footer class="m-global-footer">
            {{ partial "footer" . }}
        </footer>
    </body>
</html>
html

Hugoの解説していない関数を説明します。

.Site.BaseURL

サイトのベースのURLを返します。

例: http://example.org/

see also: Site Variables | Hugo,Configure Hugo | Hugo

ページの絶対リンクを返します。

see also: Page Variables | Hugo

range .AlternativeOutputFormats

config.tomlでoutputの設定でカスタマイズしている一覧を返します。

see also: Custom Output Formats | Hugo

.Site.Title と .Title

.Site.Titleはサイトのタイトルです。 .Titleは記事のタイトルです。

{{ .Title }}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}
html

の部分は、.Titleと .Site.Titleを比較して、違うなら、記事のタイトル | サイトのタイトル と表示するようにしています。

トップページなどでは、両方とも同じ内容になるのでif文で判定してます。

see also: Page Variables | Hugo,Site Variables | Hugo

ne について

neはHugoの比較する関数です。プログラム言語では!=の比較に相当します。

see also: ne | Hugo

” . “ について

.は現在のスコープ(コンテキスト)にアクセスする変数です。 この場合、現在のスコープは.Pageになります。

.は関数など使用するとスコープが変わる場合ありますので注意してください。

明示的に変数にアクセスしたい場合は、.Page.Titleと記述します。

if .Description

ifの制御構文を説明しました。この真の条件は .Description に値が設定されているか判定しています。 値が設定されているかの判定は、0, false, 空白文字以外であることです。

see also: Page Variables | Hugo

with

withは指定した変数が初期値以外であれば真の処理を行う関数です。 上記のifと同じ判定ですが、.が比較した変数になります。

see also: with | Hugo

.Summary

記事の要約です。自動的に文章から生成されます。

see also: Page Variables | Hugo

.Site.Params

.Site.Paramsはユーザ定義の変数が格納されます。

[params]
    author = "John Doe"
toml

以前の記事で説明したconfig.tomlでは上記のようにparamsを設定しました。 この場合は.Site.Params.authorで”John Doe”を取得できます。

see also: Site Variables | Hugo

isset

issetはユーザ定義した変数が存在しているか確認します。

isset .Site.Params "description"はconfig.tomlにdescriptionが設定されているか確認します。 設定されている場合は真の処理を行います。

see also: isset | Hugo

partial

partialは部分テンプレートを読む関数です。

partial "head_og" .はogpタグを記述した部分テンプレートを読んでいます。

部分テンプレートはlayout/partialsにhtmlファイルを格納します。 この場合はlayout/partials/head_og.htmlを読み込んでいます。

最後の.は部分テンプレートに現在のスコープを渡しています。 その為、部分テンプレート内の.はbaseof.htmlと同じになります。

HTMLジェネレーション時はhead要素内にogpタグが書き出されます。

see also: Partial Templates | Hugo

次のページにてhead_og.htmlを解説します。

prevnext