概要

• gautamkrishnar/github-pages-gallery

github pagesを使った photo gallery のテンプレート。 PngNoteの公開に使っている。＞blog: PngNoteのノートの公開にはGithub Pages Galleryを使う事にした

内部的には、thumbsupというコマンドラインツール（？）を使って静的ページを生成している。 これはsachinchoolur/lightGalleryというjsライブラリを使ったページを生成する。

ページに直接リンクを貼りたい

ノートの特定のページへのリンクを貼りたいので、方法を調べる。 lightGallery的にはhashというプラグインがあって、これを有効にすればurlにハッシュが付きそう。

ver 1のデモだが、lightGallery: Hashを見るとどういう感じか分かる。

プラグインを有効にする方法はトップページ、sachinchoolur/lightGalleryのInstallationに書いてあり、

<script src="js/plugins/lg-zoom.umd.js"></script>

とか足して、

<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
        plugins: [lgZoom, lgThumbnail],
        speed: 500,
        licenseKey: 'your_license_key'
        ... other settings
    });
</script>

とすればいいらしい。 これは例えば自分の例だと、gh-pagesブランチのImageGallery/Biochemistry705x.html at gh-pages · karino2/ImageGalleryに該当箇所があるので、 これをカスタマイズ出来れば良さそう。

どうやってthumbsupで有効にするかは分からないが、本家のissueではテーマで出来ると言っている。 Major missing feature: direct linking to pictures, that would allow sharing · Issue #35 · thumbsup/thumbsup

Creating a theme ｜ thumbsupに作り方が載っているがhtmlの生成のカスタマイズはどうやるんだろう？album.hbsのカスタマイズで良さそう。＞Add option to rotate images on browser · Issue #248 · thumbsup/thumbsup

テーマクラシックは以下にある。thumbsup/theme-classic: Thumbsup classic theme。 自分が使っているcardsはこっちか。thumbsup/theme-cards: Thumbsup cards theme

これをdupしてalbum.hbsを書き換えれば良さそう。 Creating a themeのページにローカルのテーマを適用する方法は載っているが、これをgithub-pages-galleryでやる方法はどうやるのだろう？

config.jsonを使っているので、MiscellaneousとCheat sheetをあわせて考えると、config.jsonにtheme-pathを足せば良さそう。

なんか試してみた所、以下のlgHashでスクリプトエラーが出る。

        plugins: [lgHash],

どうもlg-hash.jsをスクリプトタグでincludeすればその時点でプラグインは有効になるように変更されたっぽい？ という事でこの行を無くして無事有効になった。

karino2/ImageGallery: Image gallery for PngNote で動いているのが確認出来るはず。

一応手順をブログにまとめておいた。＞ blog: thumbsupで各画像へのリンクを貼れるようにする