Image: MTブログスタイル Hugo用テンプレート『sakmug』

2カラム、左サイドバー固定幅+右メインリキッド、Movable Typeのブログでよく見られるトラディショナルな編成のhugo用テンプレートセットです。

ダウンロード

特徴

  • レスポンシブ対応
  • カテゴリー分類・タグ付け
  • HTML5基準のコード記述
  • RSS2.0フィード生成
  • sitemap.xml生成
  • 記事見出し画像を設定可能
  • Googleカスタム検索、Googleアナリティクス、Disqusコメント欄を設置可

動作確認環境

  • ジェネレーター
    • Windows 10 Pro x64 Build 14393.5
    • Hugo v0.16
  • ブラウザ
    • Firefox 48.0beta Windows版
    • Firefox 47.0 Android版
    • Microsoft Edge (EdgeHTML 14.14393)

公開日

  • 2016/07/28:jQuery 3.0系(jQuery v3.1.0、Bootstrap v3.3.7)に更新、既存コードへの変更は無し
  • 2016/07/24:メタデータを埋め込みRSSからメタタグに移動(cont_head.html、single.html)、日時フォーマット(タイムゾーン)の出力を汎用化(cont_head.html)、画像ポップアップ表示で画面端にカーソルが移動したときに表示位置を変えるように改善(ahoverimg.js)
  • 2016/07/21:埋め込みメタデータの日時フォーマットを修正(li.html)、見出し画像のid属性を修正(li.html、single.html)、W3C Feed Validation Serviceで指摘されたエラーを修正 (rss.xml)
  • 2016/04/21:preserveTaxonomyNames=trueを適用。タグのkeyに英文字・記号がそのまま含まれるようになった
  • 2016/04/21:本テキスト新規作成
  • 2016/04/20:テンプレート作成

使用方法

以下の4~7の手順を行うこと。

  1. 適当な作業用ディレクトリでコマンドシェルを立ち上げhugo new (適当な名前)を実行。
  2. 指定した名前でディレクトリが作成される。これを以下 \ とする。
  3. \themes内にsakmugディレクトリを入れる。
  4. \content\postsディレクトリ内にMarkdown(UTF-8 BOM無し)記事ファイルを配置する。
  5. \config.ymlファイルをテキストエディターで適当に書き換える。
  6. コマンドシェルで\をカレントディレクトリにする
  7. コマンドhugo -t=sakmugでビルドプレビュー、hugoでHTMLをpublicにビルド。

ライセンス

外部コンポーネント

Jekyll用テンプレ(sakmyll)からの変更点

Jekyllと比べるとブログサイトを組むためのコードをよりシンプルに書ける反面、柔軟性は低く完全移植とはいきませんでした。Jekyllはテンプレに沿ったサイト生成ツールとして万能に使えるけど、hugoは最初からブログ生成が目的。ページ構成が決まっている。一から作るのと同じくらいの手間が掛かったけど、結果的には前より良くなったのでいいとしよう。

  • カテゴリ・タグページの構成・内容変更
    • Bootstrapタブを廃止し、個別ページとした
    • タッチデバイスに配慮して記事一覧をTableリスト化した
    • 記事名にマウスオーバーで見出し画像表示
  • レイアウト改善
    • ページ幅(max-width)最大約1200pxで制限
    • 余白についてIEのスクロールバー表示を考慮
    • Googleカスタム検索の表示崩れを修正
    • javascriptを使ったサイズ補正は廃止
    • bootstrapを外してもレイアウトが崩れないようになった(互換性の改善)
  • markdown解釈エンジンがkramdownからBlackfridayに変わったことにより、記事について以下の手直しが必要。
    • ファイル名の先頭のyyyy-MM-dd-は不要
    • ソースコードハイライトの囲み
    • mathjaxの囲み
    • Markdownに書いたリンク指定のないURLにも自動的にリンクが付く。ただ、その前後にスペースを入れておかないと不正なリンクになる。
    • MovableType等の他からインポートした記事のFrontmatterヘッダーにエラーになる文字が含まれている場合がある
    • mathjax文中でアンダーバーを使用する場合その直前にエスケープ文字(\)を付ける必要がある
  • RSS1.0フィード廃止 (ジェネレーターの都合)
  • Pygmentsによるソースコードハイライトはオプション

開発メモ

レスポンシブ対応

画面幅が768px以下の場合はサイドバーが非表示になります。代わりにトップのプルダウンメニューが出現します。bootstrapと自前のcssの複合で実現しています。

カテゴリー・タグをサポート

カテゴリー・タグの分類をサポートしています。sakmyllとは違い、日本語のカテゴリ・タグ名に対しては普通に日本語のページ・リンクが生成されます。

Internet Explorer 8以前での表示

IE8以前では2カラムにならないという不具合があります。HTMLコードでサイドバーをメインカラムより後に配置してあるのは、これに配慮したためです。

記事ファイルYAMLヘッダー独自拡張

imgurl
変更なし。(sakmyll: 画像ファイル(jpgまたはpng)への絶対URLを指定。記事見出し画像を指定します。これを指定すると記事ページとindexページに見出し画像を表示し、またRSS2.0フィードの該当記事にenclosureでURLを指定します。省略可能。)
mathjax
mathjax原稿を含む場合はtrueを指定。既定はfalse。省略可能。
shortinfo
JekyllインポートHTMLページ用概要文。省略可能。markdown原稿の概要文はdescriptionに記述して下さい。
update
今回は不使用。以前と同じようにするのは簡単なので、必要ならテンプレを改造して下さい。(sakmyll: 日付を指定。記事の更新日時を指定します。省略可能。)

誤り文置換用キーワード

ソースコード ハイライト文置換用キーワード
maruku/kramdown→Blackfriday
検索文(EmEditor正規表現)
\{% highlight ([A-Z,a-z]+) %\}
置換文


検索文(正規表現でなく普通の置換文)
{% endhighlight %}
置換文


Markdownリンクミス 〔〕閉じ忘れ 検索ワード(EmEditor正規表現)
関係ない文がヒットする可能性もあるので、置換には使用しない
[^\]]\(http[s]?://
[^:][^\(<>":]http[s]?://

参考サイト

Hugo関連

WindowsでHugoを使う - ureta.net
http://ureta.net/2015/05/hugo-on-windows/
Hugoをセットアップしてデプロイするまで[前編]Hugoのセットアップからビルドするまで - creative tweet.
http://creative-tweet.net/blog/2015/10/usage-hugo-1.html
Hugo のテンプレート 基本 - My Blog
http://takunagai.github.io/post/hugo/template/
hugo で RSS feed のファイル名を指定する - Qiita
http://qiita.com/hfm/items/2d5c0d7f437a3ebbd745
time - The Go Programming Language
https://golang.org/pkg/time/#pkg-constants
Hugo - Hugo Template Functions
https://gohugo.io/templates/functions
Hugo - Template Variables
https://gohugo.io/templates/variables/
Hugo - Single Content Template
https://gohugo.io/templates/content/
Hugo - Syntax Highlighting
https://gohugo.io/extras/highlighting/
Hugo - MathJax Support
https://gohugo.io/tutorials/mathjax/
hugo/configuration.md at master spf13/hugo GitHub
https://github.com/spf13/hugo/blob/master/docs/content/overview/configuration.md

Bootstrap関連

html - how to make a whole row in a table clickable as a link? - Stack Overflow
http://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link
css - Use table row coloring for cells in Bootstrap - Stack Overflow
http://stackoverflow.com/questions/16763818/use-table-row-coloring-for-cells-in-bootstrap

HTML/CSS全般

divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ - コリス
http://coliss.com/articles/build-websites/operation/work/sectioning-content-in-html5-by-ire.html
Web標準HTMLコーディングのHomeWeb-coding - CSSレイアウトのコツ1 ~widthとpaddingを同時に記述しない~
http://www.homeweb-coding.com/info/column/column_10.html
IEに互換表示をさせないX-UA-Compatibleの指定 - loconoco
http://www.loconoco.info/?p=665

comments powered by Disqus

※コメント欄が表示されない場合はdisqusについてJavascriptが有効であることを確認して下さい.

Update: 2016-07-28

(C) 2008-2017 akm. This blog theme is based on sakmug. Hosted by Xdomain