Hugoでイメージギャラリー hugo-shortcode-gallery

自分用にHugoのショートコードの入力を支援するChrome拡張を書いた。 htakeuchi/HugoShortcoder: Chrome extension to copy Hugo shortcode to clipboard according to open URL. 機能 # たとえばHugoの公式ショートコードでTweetを引用しようとすると、 URLからユーザIDとTweet ID?を調べる。 URLがhttps://twitter.com/SanDiegoZoo/status/1453110110599868418だとすると {{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}の形式でショートコードを書く ことになり、なかなか面倒だ。 この機能拡張はこれらを支援するもので、引用したいページを開きコンテキストメニューから機能拡張を起動すれば、URLからショートコードを組み立ててクリップボードへコピーされる。 サポートしているサービスは以下の通り。 gist Instagram X (Twitter) Vimeo YouTube これらのサービス以外のページでは、Markdown形式でページタイトルとURLのリンクが作成され、クリップボードへコピーされる。 使用方法 # せっかくなので、Chromeウェブストアで公開しようかと思ったが、機能拡張が悪用されるケース多いせいか、手続きが煩雑になっていたため、野良で使うことにした。 Release v1.0 · htakeuchi/HugoShortcoder からzipをダウンロードし、 任意のディレクトリで解凍する Chromeを起動し設定-拡張機能を選択する デベロッパーモードをオンにしてパッケージ化されていない拡張機能を読み込むボタンをクリック 1.のディレクトリを選択 以上でマウス右クリックで表示されるコンテキストメニューにHugoShortcoderが追加される。

Hugoで作成したページがhugo serveしても表示されない場合がある。 timeZoneを指定していない 以下の両条件を満たしていると実行する時刻によっては表示されない config.tomlでtimeZoneを明示していない timeZone = “Japan” ページのFront Matterのdateを日付のみ指定し時刻を省略 date: 2022-12-29 このパターンにハマってしまった。hugo serveのオプションを調べていて--buildFutureを付けてみたら表示され気付いた。 draftフラグを設定している ページのFront Matterがtrueになっている

ページタイトル変更時の問題 # Obsidianでノート名（ファイル名）を変更した場合、そのノートに張られているリンクは自動的に修正される。このため、Obsidian単体で使っている限りは気軽にノート名を変更して問題ない。 ページの内容が変化した場合、それにあわせてノート名を変更したくなるのは自然なことで、Obsidianはそれをアプリケーションの機能として実現しているわけだ。 ただ、Obsidian PublishやQuartzなどを使って、Obsidianのノートをインターネット上で公開する際には、外部サイトからリンクを張られる可能性がある点を考慮する必要がある。 Obsidianを単体で使うときのように気軽にノート名を変更してしまうと、外部サイトからのリンクがデッドリンクになってしまうからだ。 この問題に対してScrapboxは、 ページタイトルをURLにする(ページタイトルとは別に一意なページIDを持っている) 外部からのアクセス時、ページが無くなっていた場合は、そのURLのアクセスログからページIDを探し、ページIDから移動先へリダイレクトする という方法で対応しているようだ。 wikiでページのURLをIDにすると絶対にうまくいかない - 橋本商会 本サイトでの対応 # 本サイトではこのページタイトル問題について、以下のように対応している。 ノート名（ファイル名）は半角英数字と一部の記号(- _)だけを使用する Markdownファイルとしての取り扱いを考慮 ノート名（ファイル名）は基本的に変更しない（外部公開時のパーマリンク維持のため） それでも変更したくなったらFront Matterにaliasesを書いておけば大丈夫そう これはHugoの機能。ただしまだQuartzでは試していない。 ノートのタイトルはFront Matterのtitleを使用する URLの構成要素ではなくなるので気軽に変更できる ただ、これだとファイルエクスプローラなどで視認性が落ちてしまう… ファイル名表示をtitleがあればそれを使用するプラグインがあった obsidian-front-matter-title オプションのAlias titleをONにすれば、Aliasを本来の目的で使用できなくなるものの、Wikiリンクの補完時に日本語のtitle、ファイル名のどちらでも候補を検索できるようになる 現時点では大きな問題は無さそうだが、しばらく運用して再評価したい。

Hugoでhugo serveで起動するローカルサーバでのみ実行する処理を書きたい場合、.Site.IsServerを参照すれば良い。ローカルサーバの場合Trueが設定されている。 Site Variables |Hugo {{- if .Site.IsServer }} {{- $notes = .Site.RegularPages.ByDate.Reverse}} {{- else }} {{- $notes = .Site.RegularPages.ByLastmod.Reverse }} {{- end }}

Hugoでアイキャッチ画像を取り扱う場合、ページのfront matterでアイキャッチ画像を指定し、ページレベルパラメタで取得するのが確実だが、アイキャッチ画像が指定されていない場合、記事内の画像をアイキャッチ画像として扱えれば便利なケースが多い。 layouts/partials/summary.html 1 2 3 4 5 6 7 8 9 10 {{- $image := index (findRE "<img.*?src=([^>]*)?>" .Content 1) 0 }} {{- if $image }} <figure class="ellipsis card_img"> {{ $image | safeHTML }} </figure> {{- else }} <p class="ellipsis card_summary"> {{ .Summary }} </p> {{- end }} 上のコードは正規表現で<img>タグを検索し存在すれば画像を出力し、存在しなければサマリを出力するもの。

オープンソースの静的サイトジェネレーター。go言語で記述されておりページ生成の速度が速くカスタマイズ性が高い。 The world’s fastest framework for building websites | Hugo Hugo関連のノート # Hugoメモ Hugoのショートコードをうまく使い回す方法 Hugoのローカルサーバでページが表示されない場合 Hugoで本文の先頭画像をアイキャッチとして使用する Hugoでローカルサーバのみ実行する処理を書く方法 Hugoで楽譜を描画する(abcjs) Hugoのレンダーフックを使ったMermaidの利用 Hugoのショートコード入力を支援するChrome拡張 Hugoでイメージギャラリーを表示するhugo-shortcode-gallery Hugoで写真をリサイズしExif情報を表示する