🪴 namaraii.com

Search

SearchSearch

本サイト向けQuartzカスタマイズ内容

作成日: 2022-12-15 更新日: 2022-12-15

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

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

本サイトはObsidianで管理しているノートをQuartzを使って公開しているが、本サイト向けにカスタマイズした内容をまとめておく。

トップページ

最近更新されたノート一覧の表示

gitのcommit日時を更新日時として取り扱って、新しい順に表示する設定にした。

config.toml
enableGitInfo = true

HugoでGit情報を扱うための設定

data/config.yaml
enableRecentNotes: true

Scrapboxのようなカードビュー

更新日時の新しい順に表示

layouts/partials/recent.html
{{- $paginator := slice }}
{{- if .Site.IsServer }}
{{- $paginator = .Paginate .Site.RegularPages.ByDate.Reverse }}
{{- else }}
{{- $paginator = .Paginate .Site.RegularPages.ByLastmod.Reverse }}
{{- end }}

<div class="container__wrapper">
  {{- range $paginator.Pages }}
  {{ partial "summary.html" . }}
  {{- end -}}
</div>

<div class="pager">
  {{ template "_internal/pagination.html" . }}
</div>

ノート中に画像があれば先頭画像をアイキャッチとして使用し、無ければサマリを表示するようにした。

layouts/partials/summary.html
<div class="card">
  <h3 class="heading card__item flexible"><a href="{{ .Permalink }}" class="internal-link" data-src="{{ .RelPermalink }}">{{- .Title -}}</a></h3>
  {{- $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 }}
</div>

ノート

作成日と更新日を表示する

ノート上部へ作成日、更新日を表示するためpartialテンプレートを修正

layouts/partial/date-fmt.html
{{ i18n "create_date" }} :&nbsp;{{- if .Date}}
{{- .Date.Format "2006年1月2日"}}
{{- else}}
Unknown
{{- end}}
&nbsp;&nbsp;
{{ i18n "last_updated" }} :&nbsp;{{- if .Lastmod}}
{{- .Lastmod.Format "2006年1月2日"}}
{{- else}}
Unknown
{{- end}}

Scrapbox的な2ホップリンクを表示する

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

Amazon商品紹介用ショートコードの導入

Amazonの商品紹介用ショートコードを導入した。layouts/shortcodes配下へ置くと普通に動くが、当然ながらObsidianでのプレビューはできない。

Amazonの商品紹介用ショートコードは、こちらのものを利用させてもらった。

こんな感じで表示されます。

Mermaid.jsのソースコード参照用リンク

mermaid で描いた図を載せている箇所へ、ソースコードを参照するためのリンクを自動的に追加するようにした（廃止: 2023/01/04)

Wiki形式のリンク表示にFrontMatterのTitleを使用する

このサイトではMarkdownファイルの可搬性を考慮し、

  • ノートのファイル名に日本語を使用しない
  • 日本語のタイトルは各ファイルのFrontMatterへ記述する

という運用をしているがこの場合、Wiki形式で内部ページへのリンクを記述してもFrontMatterのタイトル表示されず可読性が悪い。

このため、Titleがあればそれを使用するように修正した。

foobar.mdのFrontMatterへtitle: フーバーを設定していた場合、[[foobar]]と書くと、

<a href="foobar">フーバー</a>

が展開される。52行目を修正、53行目を追加した。

layouts/partial/textprocessing.html
    <!-- If path to Hugo page -->
    {{if not (eq $curpage.String "nopPage") }}
      {{$block := default "" (index $reference 1)}}
      {{$block = strings.TrimRight "/" (cond (eq $block "") $block (printf "#%s" $block)) | urlize | lower}}
      {{$href := $curpage.RelPermalink}}
      {{$display := default $display $curpage.Title}}
      {{$link := printf "<a href=\"%s%s\" rel=\"noopener\" class=\"internal-link\" data-src=\"%s\">%s</a>" $href $block $href $display }}

Excalidrawで描いた図を使用する

これはカスタマイズではないが、Obsidianのobsidian-excalidrawプラグインで描いた図をObsidian/Quartzの両方で使用する運用について。

全体

katex.jsの読み込みをページ単位で制御する

Quartzのデフォルトの動作ではdata/config.yamlのenableLatexをtrueに設定すると、サイト全体でKatexが有効になり、Katexを使用していないページでも以下のファイルが無条件にロードされる。

本サイトでは数式を記述しているページは少なく効率化のため、

  • サイト全体としてはデフォルト未使用
  • ページ単位でKatex要否を指定可能

とする修正をした。1

layouts/partials/katex.html
{{if .Params.enableLatex}}

ページパラメタのenableLatexを参照してロード要否を判断するように修正。

layouts/partials/head.html
{{if .Params.enableLatex }}
renderMathInElement(doc.body, {
	delimiters: [
	  {left: '$$', right: '$$', display: true},
	  {left: '$', right: '$', display: false},
	],
	macros: {
	  '’': "'"
	},
	throwOnError : false
	});
{{end}}

上と同じ。あとは、data/config.yamlのenableLatexを削除した。

Footnotes

  1. Hugoのレンダーフックで処理できるかもしれないが未調査 ↩

Backlinks

Recent Notes

Graph View