Hugo で画像をポップアップ表示させる
このブログは Hugo に PaperMod というテーマを入れている。 このテーマは画像の横幅が決まっているため、以下のように大きいサイズの画像を貼り付けると画像の内容が分かりづらくなってしまう。 どうにかできないかと調べたら Lightbox という JavaScript ライブラリを使えば画像をポップアップ表示できそうということが分かった。 こちらのサイトを参考に Hugo に Lightbox を入れていく。 Adding lightbox to Hugo julianstier.com Lightbox 導入 準備 Lightbox を GitHub のリリースページからダウンロード Releases · lokesh/lightbox2 THE original Lightbox script (v2). Contribute to lokesh/lightbox2 development by creating an account on GitHub. github.com CDN もあるらしいけど今回は一旦ローカル保存 lightbox2 - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites. cdnjs.com 必要なファイルの配置 CSS /assets/css/extended/ に Lightbox の CSS ファイル lightbox.min.css を配置 JavaScript /static/js/ に Lightbox の JS ファイル lightbox.min.js を配置 テーマのヘッダーに CSS を追加 PaperMod の /themes/PaperMod/layouts/partials/head.html を /layouts/partials/head.html にコピーして以下を追加 ...