ZotLit でテンプレートをカスタマイズする

zotero

obsidian

ZotLit でテンプレートをカスタマイズする方法のメモです。

Author

Maple

Published

2025-09-15

Modified

2025-09-15

ZotLit プラグインでは、テンプレートをカスタマイズして、自分好みのノートを作成することができます。

テンプレートファイルの出力

まず、Obsidian の設定から ZotLit のテンプレートを出力します。

Obsidian を開き、左側のサイドバーから歯車マークの [Settings] をクリックし、[Community Plugins] > [ZotLit] > [Template] を選択します。
[Ejectable] セクションの [Eject] ボタンをクリックします。

Obsidian のルートフォルダに ZotLitTemplates フォルダが作成され、その中にテンプレートファイルが出力されます。内容ごとにファイルに分かれており、各ファイルを編集することでテンプレートをカスタマイズできます。

Note

[Eject] ボタンをクリックすると、テンプレートファイルが出力されますが、このボタンを押さずに、設定から直接編集することもできます。
お好みの方法でテンプレートを編集してください。個人的には、可読性の観点から、ファイルに出力して編集する方法をが好みです。

テンプレートの編集

テンプレートは、Eta というテンプレートエンジンを使用しており、JavaScript のコードを埋め込むことができます。やや学習曲線はありますが、柔軟にカスタマイズできるのが魅力です。基本的には、<% %> の中に JavaScript のコードを記述し、<%= %> の中に変数や式を記述します。大体は、公式サイトの Template Cheatsheet に記載されている内容で十分です。

Live Template Editor を開く

ZotLit の設定画面には、[Live Template Editor] というテンプレートをリアルタイムで編集できる機能があります。これを使うと、テンプレートの変更がすぐに反映されるため、編集が楽になります。

コマンドパレット を開きます。ショートカットキーは Ctrl + P (Windows) または Cmd + P (Mac) です。
「ZotLit: Open Live Template Editor」と入力して選択します。

右側に注釈パネルが開かれます。リンクアイコンの [Choose Follow Mode] ボタンを選択し、[Link with Selected Literature] をクリックします。

Zotero の文献を選択します。すると、注釈パネルにその文献の注釈一覧が表示されます。
注釈パネルの上部にある、情報アイコンの [Show details] ボタンをクリックします。新しいウインドウが開かれ、ここでテンプレートを編集できます。

Live Template Editor の使い方

Live Template Editor では、左側にテンプレートのコード、中央にプレビュー、右側に変数一覧が表示されます。

ここでは、4つのテンプレートファイルの編集ができるようです。

zt-field.eta: 文献のメタデータ（フロントマター）のテンプレート
zt-note.eta: ノート本文のテンプレート
zt-annot.eta: 単体の注釈のテンプレート
zt-annots.eta: すべての注釈を並べるときのテンプレート

それぞれについて、私がカスタマイズした内容とともにまとめます。

`zt-field.eta`

zt-field.eta は、文献のメタデータ（フロントマター）のテンプレートです。デフォルトでは、以下のようになっています。

zt-field.eta

title: "<%= it.title %>"
citekey: "<%= it.citekey %>"

以下のようにカスタマイズしました。

zt-field.eta

title: "<%= it.title || '' %>"
citekey: "<%= it.citekey || '' %>"
authorsShort: <%= it.authorsShort ? it.authorsShort : '' %>
authors: [<%= it.authors ? it.authors : '' %>]
publish-date: <%= it.date ? it.date : '' %>
DOI: <%= it.DOI || '' %>
import-date: <%= it.dateAccessed ? it.dateAccessed : '' %>
tags: <%= it.tags ? JSON.stringify(it.tags) : '[]' %>
collections: [<%= it.collections ? it.collections : '' %>]
abstract: <%= it.abstractNote && it.abstractNote.first() 
              ? it.abstractNote.first().replace(/[\r\n]+/g, " ") 
              : '' %>

編集後は、以下のように表示されます。

`zt-note.eta`

zt-note.eta は、ノート本文のテンプレートです。

デフォルトでは、以下のようになっています。

zt-note.eta

# <%= it.title %>

[Zotero](<%= it.backlink %>) <%= it.fileLink %>
<%~ include("annots", it.annotations) %>

以下のようにカスタマイズしました。

zt-note.eta


# <%= it.title %>

[Zotero Link](<%= it.backlink %>) 

## Notes

<%- it.notes.forEach(note => { %> 
<%= note -%>
<% }) %>


## Annotations

<%~ include("annots", it.annotations) %>

編集後は、以下のように表示されます。

`zt-annot.eta`

zt-annot.eta は、単体の注釈のテンプレートです。

デフォルトでは、以下のようになっています。

zt-annot.eta

[!note] Page <%= it.pageLabel %>

<%= it.imgEmbed %><%= it.text %>
<% if (it.comment) { %>
---
<%= it.comment %>
<% } %>

以下のようにカスタマイズしました。

zt-annot.eta

[!<%= it.colorName %>] Page <%= it.pageLabel %>
[Annotation Link](<% if (it.backlink) { %><%= it.backlink %><% } %>)
<% if (it.imgEmbed) { 
  const width = it.width ?? 500;                  // 任意: 幅を変数化
  const embed = /\|\d+\]\]$/.test(it.imgEmbed)    // 既に |数値 が付いているか確認
    ? it.imgEmbed                                 // 付いていればそのまま
    : it.imgEmbed.replace(/\]\]$/, `|${width}]]`);// なければ |500 を挿入
%>
<%= embed %>
<% } %><%= it.text %>
<% if (it.comment) { %>
---
<%= it.comment %>
<% } %>

ブロックの名前を Zotero の注釈の色に対応させました。後述のカスタム CSS と組み合わせて使うことで、Obsidian 上で注釈の色を変えられます。
注釈の Zotero へのリンクを追加しました。クリックすると、Zotero の該当の注釈が開きます。
画像が大きすぎる場合に、幅を500ピクセルにリサイズできるようになりました。

また、注釈の色を変えるために、Obsidian のカスタム CSS を使用しました。以下のコードを Obsidian の obsidian.css ファイルに追加しました。

obsidian.css

/* Callout box */

.callout[data-callout="yellow"] {
    --callout-color: 255, 212, 0;
    --callout-icon: lucide-pen-line;
}

.callout[data-callout="red"] {
    --callout-color: 255, 102, 102;
    --callout-icon: lucide-pen-line;
}

.callout[data-callout="green"] {
    --callout-color: 95, 178, 54;
    --callout-icon: lucide-pen-line;
}

.callout[data-callout="blue"] {
    --callout-color: 46, 168, 229;
    --callout-icon: lucide-pen-line;
}

.callout[data-callout="purple"] {
    --callout-color: 162, 138, 229;
    --callout-icon: lucide-pen-line;
}

.callout[data-callout="magenta"] {
    --callout-color: 229, 110, 238;
    --callout-icon: lucide-pen-line;
}

.callout[data-callout="orange"] {
    --callout-color: 241, 152, 55;
    --callout-icon: lucide-pen-line;
}

.callout[data-callout="gray"] {
    --callout-color: 170, 170, 170;
    --callout-icon: lucide-pen-line;
}

Tip

Obsidian のカスタム CSS を使用するには、[Settings] > [Appearance] > [CSS snippets] から、obsidian.css ファイルを有効にする必要があります。

有効にした後、フォルダアイコンの [Open snippets folder] をクリックし、obsidian.css ファイルの場所を開き、コードエディターで編集します。

テンプレートファイルに、zt-colored.eta というファイルがあるので、こちらでも色を変えられるのかもしれないのですが、公式ドキュメントに説明がないため、私は試していません。

なお、編集後、それぞれの注釈は Zotero の注釈に対応した色で、以下のように表示されます。

追記

zt-annot.eta は、一度記事を書いた後に少し変更したため、表示されている内容が若干異なります。 具体的には、上の画像では注釈のリンクが表示されていません。

色は変更していないため、色の参考としてご覧ください。

また、画像の注釈も問題なく表示されます。

Note

ちなみに、リサイズのコードを入れる前は少し大きすぎたため、500ピクセルにリサイズするようにしました。

画像が小さいと感じる場合は、 const width = it.width ?? 500; の 500 の部分を変更してください。

また、画像をクリックすると、画面いっぱいの大きさに表示されます。

`zt-annots.eta`

zt-annots.eta は、すべての注釈を並べるときのテンプレートです。デフォルトでは、以下のようになっています。

zt-annots.eta

<% for (const annotation of it) { %>
<%~ include("annotation", annotation) %>
<% } %>

私はこのファイルは編集していません。

注釈を色でグループ化する

もし色ごとに注釈をグループ化したい場合は、以下の公式ドキュメントをご覧ください。

Grouping - Obsidian ZotLit

参考

Template Basics - Obsidian ZotLit: ZotLit のテンプレートの基本
Customizing Templates - Obsidian ZotLit: ZotLit のテンプレートのカスタマイズ方法
Template Cheatsheet - Obsidian ZotLit: ZotLit のテンプレートのカスタマイズのチートシート
zotero/reader - GitHub: Zotero で使われている注釈の色とカラーコードの対応表
Callouts - Obsidian Help: Obsidian の Callout の使い方やカスタマイズ方法
Lucide: Obsidian のコールアウトで使うことのできるアイコンの一覧
Zotlit to Obsidian Workflow for manually created Zotero notecards: Obsidian フォーラムの関連スレッド
Zotlit (previously Obsidian-Zotero) import templates?