thumbsupで各画像へのリンクを貼れるようにする

PngNoteのノートを公開するのに使っているgithub-pages-galleryで、各ページにリンクが貼りたくなったので調べて作業した。 画像自体へのリンクは貼れるのだが、「16ページから19ページに該当するノートがある」みたいな時にはギャラリーを16ページを選ばれた状態で開きたい。

github pages galleryは、thumbsup · Static gallery generatorというのを使ってlightGalleryというjsライブラリを使ったページを生成する。 このlightGalleryにはhashというプラグインがあって、それを有効にすると各ページへのurlが作れるようになって、このurlを使えば望む挙動をさせられる。 これをthumbsupのテーマで実現する。

作業手順

まず普段使っているテーマがcardsなので、thumbsup/theme-cards: Thumbsup cards themeをダウンロード。 themeというフォルダをほってそこに展開したtheme下を置く。

次にalbum.hbsで、

    <!-- LightGallery -->
    <script src=""></script>
    <script src=""></script>

となっている所にlg-hashを追加する。

    <!-- LightGallery -->
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

最後にconfig.jsonで

{
...
  "theme": "cards",
...
}

となっている所を、

{
...
  "theme-path": "./theme",
...
}

とtheme-pathに変更すれば良い。

ドキュメントにはlightGallery呼び出しの所でpluginsのプロパティを追加する必要があると書いてあるが、どうもこれは古い情報っぽくて、 現在はscriptタグを追加するだけでプラグインは有効になっている模様。 これで、こんな感じで18ページ目にリンクが貼れるようになった。

作業時に調べたメモ: RandomThoughts/GithubPagesGallery