ページの内容が古くなっています
このページは旧バージョン(v3)のQuartzを対象とした内容になっています。 v4からアーキテクチャが大きく変わっていますのでご注意ください。
本サイトはObsidianで管理しているノートをQuartzを使って公開しているが、本サイト向けにカスタマイズした内容をまとめておく。
トップページ
最近更新されたノート一覧の表示
gitのcommit日時を更新日時として取り扱って、新しい順に表示する設定にした。
enableGitInfo = true
HugoでGit情報を扱うための設定
enableRecentNotes: true
Scrapboxのようなカードビュー
更新日時の新しい順に表示
{{- $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>
ノート中に画像があれば先頭画像をアイキャッチとして使用し、無ければサマリを表示するようにした。
<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テンプレートを修正
{{ i18n "create_date" }} : {{- if .Date}}
{{- .Date.Format "2006年1月2日"}}
{{- else}}
Unknown
{{- end}}
{{ i18n "last_updated" }} : {{- if .Lastmod}}
{{- .Lastmod.Format "2006年1月2日"}}
{{- else}}
Unknown
{{- end}}
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行目を追加した。
<!-- 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を使用していないページでも以下のファイルが無条件にロードされる。
- https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css
- https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js
- https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js
- https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/copy-tex.min.js
本サイトでは数式を記述しているページは少なく効率化のため、
- サイト全体としてはデフォルト未使用
- ページ単位でKatex要否を指定可能
とする修正をした。1
{{if .Params.enableLatex}}
ページパラメタのenableLatex
を参照してロード要否を判断するように修正。
{{if .Params.enableLatex }}
renderMathInElement(doc.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
],
macros: {
'’': "'"
},
throwOnError : false
});
{{end}}
上と同じ。あとは、data/config.yaml
のenableLatex
を削除した。
Footnotes
-
Hugoのレンダーフックで処理できるかもしれないが未調査 ↩