[Hugo] テーマのデサイン変更　準備編

2016-08-12

ベーステーマのデザイン調整

このサイトはhugo-unoというベーステーマを元に変更を行っている。デサインを変更するための準備について説明する。

fredrikloch/hugo-uno: A responsive hugo theme with awesome font’s, charts and lightbox galleries

hugoのフォルダ構成

今回の説明に関連のありそうな部分のみを抜粋すると、hugoのフォルダ構成は下記のようになっている。

project_folder
├── 📁archetypes
├── config.toml
├── 📁content
├── 📁layouts
├── 📁public
├── 📁static
└── 📁themes
    └── 📁hugo-uno
        ├── 📁archetypes
        ├── 📁images
        ├── 📁layouts
        ├── 📁static
        │   ├── 📁css
        │   ├── 📁fonts
        │   ├── 📁images
        │   ├── 📁js
        │   └── 📁scss
        └── theme.toml

• archetypes、layouts、staticのフォルダは、プロジェクトフォルダの直下のファイルが優先的に使用される。
• プロジェクトフォルダの直下にないものは、themesフォルダのファイルが使用される。

config.toml

まず、hugo自体の設定ファイルを編集する。このサイトでは下記のようになっている。

config.toml

 1baseurl = "http://siteurl"
 2languageCode = "ja_jp"
 3title = "サイトタイトル"
 4author = "作成者"
 5copyright = "Powered by Hugo. Copyright © 2016 製作者名"
 6theme = "hugo-uno"
 7canonifyurls = true
 8hasCJKLanguage = true
 9pygmentscodefences = true
10pygmentsstyle = "solarizedlight"
11PygmentsOptions = "linenos=table,nobackground=true"
12
13[Params]
14description = "サイトの説明"
15github = "gituhubアカウント名"
16facebook = "フェイスブックアカウント名"
17linkedin = "Linkedinアカウント名"
18logo = "/images/ロゴファイル名"
19
20[taxonomies]
21tag = "tags"
22archive = "archives"
23
24[permalinks]
25blog = "/:year/:month/:day/:slug/"
26work = "/work/:year/:slug"

• 先頭のパラメータはHugo自体のパラメータ。.Site.パラメータ名で取得できる。
  • 特にSyntaxhighlite関連のパラメータ(pygments~)は、なかなかネットでも情報がないので苦労しました。また記事にするかもしれません。
• [Params]のパラメータは、テーマで使うパラメータ。.Site.Params.パラメータ名で取得できる。
• [taxonomies]は特殊な一覧ページを作成したい場合に使用する。このサイトではタグ一覧と、記事のアーカイブ一覧を作成している。
• [permalinks]記事のタイプごとのPermalinkのフォーマットを指定する。

※上記には独自に拡張したパラメータも含んでいます。

archetypes

• 記事を新規作成した時の、記事ファイルの先頭部分(フロントマター)を設定するためのフォルダ
• default.mdというファイルのみが置かれている。
• ベーステーマの内容から変更したい場合、project_folder/archetypes/default.mdにファイルを置く。
• 記事のタイプ(blog/work)ごとに初期値を変えたい場合は、blog.mdやwork.mdを作成する。

project_folder/archetypes/default.md

 1+++
 2date = "now()"
 3draft = true
 4slug = ""
 5tags = ["", ""]
 6title = ""
 7description = ""
 8image = ""
 9landscape = true
10+++

• slugでPermalinkに使用される文字列が指定できるようになる。指定しなければPermalinkはタイトルと同じになる。
• descriptionはこのサイトでは、一覧の説明文、Open Graphに設定されるように対応している。
• imageはOpen Graphに設定されるように対応している。なければサイトのデフォルトの画像がOpen Graphになる。
• imageの向きを指定する。

※description、imageはHugo標準の機能ではなく、独自に拡張しています。別途記事に書きます。

layouts

• theme/hugo-uno/layoutsに含まれるファイルの内、変更するものだけをプロジェクトフォルダの直下のlayoutsにコピーして編集する。
• 特に出力する日付のフォーマットを変更したい場合、ほぼ全てのファイルが変更が必要。
  • {{ .Date.Format "Mon, Jan 2, 2006" }}を{{ .Date.Format "2006-01-02" }}に変更する。
  • config.tomlで日付フォーマットを指定できればいいのに・・。

static

• staticフォルダの中身は、最終的にpublicフォルダにそのままコピーされる。
  • プロジェクトフォルダの直下のstaticのファイルが優先的にpublicコピーされ、そこにないファイルだけがtheme/hugo-uno/staticからコピーされる。
• よって、theme/hugo-uno/static/css、theme/hugo-uno/static/js、theme/hugo-uno/static/scssのファイルは、全てプロジェクトフォルダの直下のstaticに全てコピーしてから編集するのが事故が起こらなくていいと思う。

static/scss

• .scssファイルを変更した場合、ビルドが必要である。
• hugo-unoのページにも書いてあるが、ビルドには、sassとbourbonが必要。

1gem install sass
2gem install bourbon
3bourbon install --path static/scss

• .scssのビルド方法は、[gulp] sass編を参照。