Hugoを使っていて困っている点

Tags: Hugo

Hugoを使ったブログが一応形になってきたものの、やりたいのに実現できていないことがいろいろあるので、備忘録も兼ねて、Hugoを使っていて困っている点を挙げてみる。

  • 年別・月別の記事一覧を出せるようにしたい
    • 一般的なブログにはたいていあるやつ。
    • さらに言うと、ここのサイトでは各記事のURLを//example.com/2015/10/15/みたいにしているけど、これを//example.com/2015/10/としたら「2015年10月分」が、//example.com/2015/としたら「2015年分すべて」が表示されるようにしたい。
  • 記事ごとに言語(lang属性)を指定したい
    • 今のところ日本語の記事しか書いてないけど、英語の記事を書くときは(適当な要素に)lang="en"を指定して、CSSを使って英語部分には別のスタイルを指定できるようにしたい。
    • テンプレート変数に.Site.LanguageCodeというのがあるけど、これってたぶん「サイト全体」の言語指定だよね……。
  • ある記事でしか使わない画像ファイルの置き場所をどうするか
    • 例えば、ある記事の中で説明用にスクリーンショットの画像を作ったとして、仮にその記事のURLが//example.com/2015/10/15/だとしたら、画像ファイルも//example.com/2015/10/15/screenshot.pngに配置したい
    • もちろん、staticディレクトリ内にstatic/2015/10/15/screenshot.pngみたいにディレクトリを掘って格納するのがstraightforwardな解ではあろうけど、いちいちそれやるのもめんどうだし、運用上、記事に付随する画像ファイルとかはcontentディレクトリ内に閉じる形で管理したいという思いもある。
  • Markdownで定義リストが使えるようにしたい
    • これは以前の記事でも書いたとおり、最新版のソースでは使えるらしいので、次バージョンのリリース待ち。
    • これを機にGo言語の環境を整えてみるのもいいかもしれない。
  • Markdownで出力した見出しのid属性の末尾にmd5文字列がつくのを抑止したい
    • URLの一部分にもなる文字列なので、なるべくシンプルにしたい。
    • id属性に見出しのテキストが(日本語のまま)追加されるのは、config.tomlの[blackfriday]セクションでextensionsmask = ["autoHeaderIds"]を追加することで抑止した。
  • Markdownで出力したtableにclass="table"を付けたい
    • これを付けないと、Bootstrapではテーブルをきれいに表示してくれない。
    • この件に限らず、MarkdownのHTMLレンダリングをカスタマイズする汎用的な手段があるのかどうか。

余談

「ブログをHugoに移行した」という話はよく聞くし、ブログ用に作られたHugoのテーマもいろいろ見つかるものの、いわゆるふつーのブログにあるような機能を網羅しているような事例はあまり見つからなかったりする。Hugoベースのブログって、なんというか「シンプル」なブログが多いんですよね。

なので、やりたいことを実現する方法はないものかとHugoの公式サイトのドキュメントを眺めているわけですが、Hugoのテンプレート周りについてはいまいち理解が追いつかなくて苦労しているところ。Hugoのドキュメントを見るだけではなくて、前提知識としてGo言語標準のテンプレートエンジンの仕様も見ないと分からない、みたいな話なのかもしれず。


Hugoにおける拡張Markdown記法の定義リストのサポート状況

Tags: Hugo

以前Hugoで最初に書いた記事にて、Markdown拡張の定義リスト(<dl><dt><dd>)が使えないので後で調べないと、みたいなことを書いてからだいぶ時間がたったけど、ようやく重い腰を上げてHugoのMarkdownレンダリングまわりについて調査してみた。

Hugoで使っているMarkdownパーザーはBlackfridayとのことで、READMEを見る限りでは、世の中のメジャーなMarkdown拡張記法を含むいろいろな機能をサポートしているように見える。

で、Hugoの公式ドキュメントを眺めていると「Configure Blackfriday rendering」というセクションがあり、このへんのオプションをあれこれすることでBlackfriday側の設定を変えることができるらしい。ざっと見たところ、導入したい拡張機能の名前をextensionsに列挙すればよさそうだが、そのへんはBlackfridayのソースを見て察しろという感じの投げっぷり。実際にextensionsに指定する具体的な名前は、Blackfridayのmarkdown.goで定義されている定数名から頭のEXTENSION_を削ってlower camel caseにすればいいみたい。

Blackfridayソースを見るにEXTENSION_DEFINITION_LISTSというのがあるので、以下のようにconfig.tomlのextensions"definitionLists"を追加してみたが、定義リストは使えなかった。

[blackfriday]
  extensions = ["definitionLists"]

ちょっと調べたところ、最新のソースでは、Hugo側でのdefinitionListsの指定が、Blackfriday側のEXTENSION_DEFINITION_LISTSにちゃんとマッピングされていた。手元で使っているv0.14の時点では、この修正がまだ入っていない模様。

というわけで、定義リストを使いたい人は、最新版のソースを取ってきてビルドするか、あるいは次のバージョンのバイナリがリリースされるまで待て、ということですかね。


広告ブロッカーが原因でAjax通信に失敗する

Tags: reading webdev

Hacker News経由で読んだ記事。Ajax通信にて謎のエラーが発生し、あれこれ調査した結果、広告ブロッカー(uBlock)がAjaxの通信先のURLに含まれている文字列に反応して、その通信をブロックしていたのが原因だったというお話。確かにこれは気づきにくそう。

Hacker Newsのコメントにて、uBlockのソース上で実際にXMLHttpRequest.open()をoverrideしている箇所の情報が出ているけど(https://github.com/chrisaljoudi/uBlock/blob/master/platform/safari/vapi-client.js#L278)、えーこんなところまで上書きしてくるのかー、という感想。このソースはSafari向けの処理なので、実際に影響を及ぼしていたのがここなのかは分からないけど……。

この記事のケースで使っていた広告ブロッカーはuBlockだったけど、たぶんこれ、他の広告ブロック系の拡張機能でも似たような感じなんでしょうな。似たような事例に出くわしたときのために、頭の片隅に置いておきたい。