ObsidianとHugoを組み合わせて使用していたところ新たなる問題が発生しました

Obsidianでマークダウンに動画を貼っ付けるとリンクはWikiLinkになりますが、HugoはWikiLinkを読み込んでくれません

仕方ないので自力で置き換えることにしました

WikiLinkについて

Obsidianでは以下のように記述することで動画を貼り付けることができます

![[folder/my-video.mp4]]

この文字列をビルド時にvideoタグに変換します

正規表現で置換

テーマのsingle.html等で記事のテキスト内に存在するリンクを正規表現で置き換えているだけです

{{ $Content }}

を探して、以下のようなコードに書き換えます

{{ $content := replaceRE `<p>(.*?)(?:\!\[\[(.*?\.(webm|mp4))\]\])(.*?)<\/p>` `$1<video controls width="100%" preload="metadata"><source src="$2" type="video/$3"></video>$4` .Content }}
{{ $content | safeHTML }}

ビルドするとこんな感じになります

※webmかmp4しか使用予定がないのでこの2つだけを対象にしていますが、ほかも使いたいのであれば

(webm|mp4|mkv|mov)

とか適宜追加すれば問題ないかと思います(例はすごい適当)

※ 追記:WebMってiOS対応してないんですね・・・使うの辞めました

ひとりごと

ちなみにObsidianでは、マークダウン記法で画像を貼る時の書き方でも動画リンクとして認識されます

![](folder/my-video.mp4)

もちろん他のマークダウンエディタでは認識されませんし、Hugoでビルドする際には画像リンクと同様に勝手に変換されてしまうので、正しく表示されなくなります

現状、動画はWikiLinkにするのが無難かと思います

最初はvideoタグを直接書く手も使ったのですが

• 何故かObsidianがvideoタグのリンクを正しく取得してくれなかった
• 毎度毎度HTMLタグを使用するのはあまり美しくない

ということで辞めました

書くことがなくなったので終わります