update.超爆速でコンパイルができる、Go言語製の静的サイトジェネレーターHUGO。HUGOでは静的HTMLサイトしか作ることができない。テンプレート機能をうまく作ればWordPressにも負けないようなパーツが結構作れてしまう。この記事では、HUGOで構築した自分のブログを例に、いくつかのCMSっぽいパーツ見本集をまとめる。2016-06-06T21:37:59+09:00テンプレート機能の見本なので、CSSについては言及しないHUGOのページの種類とVariablesの関係HUGOでは、ページの種類によってテンプレートから参照できる変数に違いがある。Variablesに分類されているものを一覧系のページで呼び出すこともできない。Variablesで完結させる必要がある。各見本の冒頭部には、そのテンプレートが依存する変数がどれに分類されるかを記載する。Variables]この例では、記事のMarkdownへアイキャッチ画像用のURLをfront-matterのimageプロパティを記述し、項目が存在する場合はHTMLに出力するようにしている。存在の有無でclassも変化する為、レイアウトをそれぞれ適当なものに変えることができる。trueを設定しないとおかしな表示になってしまうので、日本語のブログを作るときは必ず設定しておこう。--></li>Markdownアイキャッチ画像がある場合はimageプロパティにパスを記載する。"/blog/makeowndigitalbook/stackroom.png"+++なお.Summaryの内容を制御する方法はこちらの記事が詳しい。Variables]前項とほぼ一緒だが、ボタン部分に加えて、一覧の抽出条件の書き方が違ってくる。HTML(一覧)この書き方だと、出力される記事件数はデフォルトの件数となる。ページネーションのデフォルト件数はconfig.tomlに設定できる。liパーシャルの中身は前項ママでそのまま使えるので省略する。-->config.toml1ページあたり20件の表示としたい場合はこのように書く。20HTML(ボタン部分)ページネーションの操作UIは、次のように実装した。</p></nav>押せない時に薄くなる表現はCSSで実装している。Variables]標準の機能では記事の内部に目次を混ぜることはできない。そこで、あらかじめ本文中に空のHTML構造を挿入しておき、目次のパーツをJavaScriptで移動させる。これで、外観上は目次が途中に挿入されているように見える。$('.js-toc').appendTo($tocPlace);}Markdownfront-matter内でusetocフラグを使い、必要な記事にだけ目次を挿入できるようにしている。true+++それでもメリットはかなり大きい。本を自炊するためにはどうしても機材が必要になる。メール送信に対応したリンク要素を生成する。本来の用途と異なるかもしれないが、safeJSフィルターが良好に機能した。Variables]表示中の記事に含まれるタグを持つ、自分自身を含まない他の記事の一覧を出力する。HTML残念ながら、この書き方だと関連記事が0件の時にもh2の見出しが出力されてしまう。試したものの、テンプレートのレベルでは解消できなかった。解消できたらここへ追記する。-->JavaScript......こういった訳で、見出しはJavaScript側で除去する実装。Variables]同一セクションに限定し、前後の投稿がある場合はそれを出力する。Variables]pickupフラグがtrueの記事だけを限定して抽出してアイキャッチ画像を並べる。各記事のfront-matterにpickup、type、imageを記述しておく。-->Markdown上記の抽出条件にマッチさせるには、front-matter内へ次を記載する。cardに対応したメタタグ。OGPの内容にこだわると結構条件分岐が増える。パーシャル化して運用した方がよいだろう。}}に関連する記事の一覧です。}}に関連する記事の一覧です。}}に関連する記事の一覧です。}}<!--記事にアイキャッチ画像がある場合はそれをOGP:imageに指定する。存在しない場合はサイトデフォルトの画像を指定する。}}<!--記事ページはog:typeをarticleにする。}}">意味情報(JSON-LD)バージョン0.16からjsonifyフィルタや、記事からプレーンテキストだけを取得できる.Plain変数が追加され、JSON-LDのテンプレートがかなり作成しやすくなった。Variables]記事ページをBlogPostingとしてマークアップするためのJSON-LDを記載する。注意が必要な点として、BlogPostingタイプでは、記事の画像(image)、著者(author)、出版元(publisher)フィールドが必須となっている。上の3つはそれぞれImageObject、Person、Organizationのタイプでなければならない。そのため、画像のない記事には、あらかじめ適当なデフォルト画像をあてがう必要がある。OGP対応のためのデフォルト画像を流用するのが適当だろう。ImageObjectタイプはwidthheightの値が必須となるので、画像の縦横ピクセル値をFront-matterへ記載する必要もある。記事にimageが設定されていない場合のデフォルト画像。