## 概要
[[Obsidian Publish]]のサイトに[[メタデータ (Obsidian)|メタデータ]]を表示したい。
## ソリューション
2通りの方法があります。
### [[YAML]]ですべての[[プロパティ (Obsidian)|プロパティ]]を表示する場合
一番簡単な方法です。以下の[[CSS]]を[[Notes/publish.css|publish.css]]として追加します。
```css
.frontmatter.language-yaml {
display: block !important;
}
```
### 任意のプロパティを任意のデザインで表示する場合
[[JavaScript]]を使います。
ページに変更が入るタイミングで、[[プロパティ (Obsidian)|プロパティ]]の情報を読み込み、任意の場所に任意の形式で[[HTML]]を挿入します。
まずは[[Notes/publish.js|publish.js]]に以下を実装します。
```js
let id;
function insertMetaDates() {
// TODO: あとで実装
}
const onChangeDOM = (mutationsList, observer) => {
for (let mutation of mutationsList) {
if (
mutation.type === "childList" &&
mutation.addedNodes[0]?.className === "page-header"
) {
clearInterval(id);
id = setInterval(insertMetaDates, 50);
}
}
};
const targetNode = document.querySelector(
".markdown-preview-sizer.markdown-preview-section"
);
const observer = new MutationObserver(onChangeDOM);
observer.observe(targetNode, { childList: true, subtree: true });
id = setInterval(insertMetaDates, 50);
```
`// TODO: あとで実装` の部分は内容によって変わります。ここでは2つのケースについて例として紹介します。
#### `created`と`updated`の日付を右上に表示する
以下のようなイメージのケースです。
![[Pasted image 20231029123308.png|frame]]
*`created`と`updated`を表示*
`TODO`となっていた`insertMetaDates`は以下のように実装します。
```ts
function insertMetaDates() {
const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter;
if (!frontmatter) {
clearInterval(id);
return;
}
const created = frontmatter["created"]?.replaceAll("-", "/");
const updated = frontmatter["updated"]?.replaceAll("-", "/");
if (!created && !updated) {
clearInterval(id);
return;
}
const frontmatterEl = document.querySelector(".frontmatter");
if (!frontmatterEl) {
return;
}
frontmatterEl.insertAdjacentHTML(
"afterend",
`
<div class="properties">
<div class="created">作成:${created}</div>
<div class="updated">更新:${updated}</div>
</div>
`
);
clearInterval(id);
}
```
デザインは[[CSS]]で設定します。`properties`と`created`、`updated`の3クラスです。先ほどの画像例だと以下のように設定しています。
```css
.properties {
display: flex;
justify-content: end;
gap: 8px;
}
.properties > .created {
font-size: 0.75em;
font-weight: bolder;
position: relative;
vertical-align: middle;
padding-left: 23px;
}
.properties > .updated {
font-size: 0.75em;
font-weight: bolder;
position: relative;
vertical-align: middle;
padding-left: 23px;
}
.properties > .created::before,
.properties > .updated::before {
display: inline-block;
filter: invert(0.4) hue-rotate(180deg);
width: 14px;
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQ4MCAxMjhhNjQgNjQgMCAwIDAtNjQtNjRoLTE2VjQ4LjQ1YzAtOC42MS02LjYyLTE2LTE1LjIzLTE2LjQzQTE2IDE2IDAgMCAwIDM2OCA0OHYxNkgxNDRWNDguNDVjMC04LjYxLTYuNjItMTYtMTUuMjMtMTYuNDNBMTYgMTYgMCAwIDAgMTEyIDQ4djE2SDk2YTY0IDY0IDAgMCAwLTY0IDY0djEyYTQgNCAwIDAgMCA0IDRoNDQwYTQgNCAwIDAgMCA0LTR6IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNMzIgNDE2YTY0IDY0IDAgMCAwIDY0IDY0aDMyMGE2NCA2NCAwIDAgMCA2NC02NFYxNzlhMyAzIDAgMCAwLTMtM0gzNWEzIDMgMCAwIDAtMyAzem0zNDQtMjA4YTI0IDI0IDAgMSAxLTI0IDI0YTI0IDI0IDAgMCAxIDI0LTI0em0wIDgwYTI0IDI0IDAgMSAxLTI0IDI0YTI0IDI0IDAgMCAxIDI0LTI0em0tODAtODBhMjQgMjQgMCAxIDEtMjQgMjRhMjQgMjQgMCAwIDEgMjQtMjR6bTAgODBhMjQgMjQgMCAxIDEtMjQgMjRhMjQgMjQgMCAwIDEgMjQtMjR6bTAgODBhMjQgMjQgMCAxIDEtMjQgMjRhMjQgMjQgMCAwIDEgMjQtMjR6bS04MC04MGEyNCAyNCAwIDEgMS0yNCAyNGEyNCAyNCAwIDAgMSAyNC0yNHptMCA4MGEyNCAyNCAwIDEgMS0yNCAyNGEyNCAyNCAwIDAgMSAyNC0yNHptLTgwLTgwYTI0IDI0IDAgMSAxLTI0IDI0YTI0IDI0IDAgMCAxIDI0LTI0em0wIDgwYTI0IDI0IDAgMSAxLTI0IDI0YTI0IDI0IDAgMCAxIDI0LTI0eiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg+PC9zdmc+");
margin-right: 5px;
position: absolute;
top: 0;
left: 7px;
}
```
#### `tags`を左上に表示する
先ほどは自作の[[プロパティ (Obsidian)|プロパティ]]でしたが、今度はタグとして利用できる`tags`[[プロパティ (Obsidian)|プロパティ]]を入れてみます。以下がイメージです。
![[Pasted image 20231029121133.png|frame]]
*Obsidian Publishでプロパティのtagsを表示*
![[Pasted image 20231029121140.png|frame]]
*クリックするとタグのページ一覧が表示される*
クリックでタグのページ一覧は[[Obsidian Publish]]の機能なので追加実装はしません。`insertMetaDates`の実装は以下のようになります。
```js
function insertMetaDates() {
const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter;
if (!frontmatter) {
clearInterval(id);
return;
}
const tags = frontmatter["tags"];
if (!tags) {
clearInterval(id);
return;
}
const frontmatterEl = document.querySelector(".frontmatter");
if (!frontmatterEl) {
return;
}
const tagElms = tags
.map(
(tag) => `
<a href="#${tag}" class="tag" target="_blank" rel="noopener">#${tag}</a>
`
)
.join("");
frontmatterEl.insertAdjacentHTML(
"afterend",
`
<div class="properties">
${tagElms}
</div>
`
);
clearInterval(id);
}
```
`properties`クラスのレイアウトは[[CSS]]で設定します。
```css
.properties {
display: flex;
justify-content: end;
gap: 8px;
}
```
> [!caution]
> `.tag` の[[CSS]]は別途用意が必要です。