MTブログスタイル Hugo用テンプレート『sakmug』
2カラム、左サイドバー固定幅+右メインリキッド、Movable Typeのブログでよく見られるトラディショナルな編成のhugo用テンプレートセットです。
ダウンロード
- ファイル sakmug.7z - Google Driveを参照。
特徴
- レスポンシブ対応
- カテゴリー分類・タグ付け
- 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の手順を行うこと。
- 適当な作業用ディレクトリでコマンドシェルを立ち上げ
hugo new (適当な名前)を実行。 - 指定した名前でディレクトリが作成される。これを以下 \ とする。
- \themes内にsakmugディレクトリを入れる。
- \content\postsディレクトリ内にMarkdown(UTF-8 BOM無し)記事ファイルを配置する。
- \config.ymlファイルをテキストエディターで適当に書き換える。
- コマンドシェルで\をカレントディレクトリにする
- コマンド
hugo -t=sakmugでビルドプレビュー、hugoでHTMLをpublicにビルド。
ライセンス
外部コンポーネント
- jQuery, Bootstrap, Font Awesome(CSS) : MIT
- Font Awesome(Font) : SIF OFL 1.1
- MathJax : Apache License
- static\res\img\noimage.jpg - Public Domain File:Image of none.svg - Wikimedia Commons
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