Hugo Server動作時にMarkdownをVS Codeで開くリンクを表示する

こんにちはnasustです。 Hugoでウェブサイトを運営しているとMarkdownが増えて行きます。 過去の記事を編集する時にMarkdownを探すのに時間が掛かります。

そこでアプリのディープリンクという機能を使用して、 Hugo Server動作時にMarkdownを直接開けるリンクを表示します。

アプリのディープリンクとはウェブページのリンクからアプリに移動する機能の事です。

MarkdownをVS Codeで開く場合は以下のページで説明されているvscode://file/{full path to file}というURLスキームを使用します。

The Visual Studio Code command-line options

これをHugo Serverの時だけリンクを表示します。

テンプレート例

{{ if .Site.IsServer }}
    <div class="m_open-markdown" >
        {{ emojify ":star:" }} Hugo {{ hugo.Version }} : Server Mode
        {{ if .Page.IsPage }}
            : {{ emojify ":memo:" }} Edit: <a class="m_open-markdown_link"
            href="vscode://file/{{ .File.Filename }}">{{ .File.Path }}</a>
        {{ end }}
    </div>
{{ end }}

表示例

sample

Hugo Server動作時にVS CodeでMarkdownを開くリンクを表示します。

sample2

クリックするとVS Codeで開くか確認するダイアログが表示されます。 開くとVS Codeで開きます。

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker