QuartzにScrapbox的な2ホップリンクを追加する

ページの内容が古くなっています

このページは旧バージョン(v3)のQuartzを対象とした内容になっています。 v4からアーキテクチャが大きく変わっていますのでご注意ください。

Quartzでは標準で各ページのバックリンクが表示されるが、Scrapboxのような２ホップリンクを追加したい。QuartzではHugoを使用しているので、カスタマイズはHugoの知見が必要になる。

バックリンクを生成しているQuartzオリジナルのlayouts/partials/backlinks.htmlのコードを参考partialテンプレートを作成した。

layouts/partials/relatedlinks.html

<h3>{{ i18n "relatedlinks" }}</h3>
<ul class="backlinks">
    {{$url := urls.Parse .Site.BaseURL }}
    {{$host := strings.TrimRight "/" $url.Path }}
    {{$curPage := strings.TrimPrefix $host (strings.TrimRight "/" .Page.RelPermalink)}}
    {{$linkIndex := getJSON "/assets/indices/linkIndex.json"}}
    {{$outband := index $linkIndex.index.links $curPage}}
    {{$contentTable := getJSON "/assets/indices/contentIndex.json"}}
    {{if $outband}}
    {{$links := dict "SENTINEL" "SENTINEL"}}
    {{range $k, $v := $outband}}
      {{$cleanedOutband := replace $v.target " " "-"}}
      {{$ctx := $v.text}}
      {{$links = merge $links (dict $cleanedOutband $ctx)}}
    {{end}}
    {{- range $lnk, $ctx := $links -}}
      {{$l := printf "%s%s/" $host $lnk}}
      {{$l = cond (eq $l "//") "/" $l}}
      {{$relatedLinks := index $linkIndex.index.backlinks $lnk}}
      {{with (index $contentTable $lnk)}}
      <li><a href="{{$l}}" rel=noopener data-src="{{$lnk}}" class="internal-link">{{index (index . "title")}}</a>
        {{if $relatedLinks}}
          {{range $k, $v := ($relatedLinks | sort | uniq)}}
          <ul class="backlinks">
            {{with (index $contentTable $v.source)}}
              {{if ne $curPage $v.source}}
              <li><a href="{{$v.source}}/" rel=noopener data-src="{{$v.source}}/" class="internal-link">{{index (index . "title")}}</a></li>
              {{end}}
            {{end}}
          </ul>
          {{end}}
        {{end}}
      </li>
      {{end}}
    {{- end -}}
    {{else}}
    <li>{{ i18n "no_relatedlinks" }}</li>
    {{end}}
</ul>

以下のテンプレートへrelatedlinks.htmlを展開するための行を追加

• layouts/partials/footer.html
• layouts/partials/footerIndex.html

    <div class="backlinks-container">
        {{partial "backlinks.html" .}}
        {{partial "relatedlinks.html" .}} 
    </div>