```yaml
created: 2023-03-09
updated: 2024-08-12
tags:
- Obsidian
cover: 📗Obsidian逆引きレシピ/attachments/obsidian-recipe.jpg
```
作成:2023/03/09
更新:2024/08/12
## 概要
## ソリューション
2通りの方法があります。
### [YAML](https://minerva.mamansoft.net/Notes/YAML)ですべての[プロパティ](https://minerva.mamansoft.net/Notes/%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3+\(Obsidian\))を表示する場合
```css
.frontmatter.language-yaml {
display: block !important;
}
```
### 任意のプロパティを任意のデザインで表示する場合
ページに変更が入るタイミングで、[プロパティ](https://minerva.mamansoft.net/Notes/%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3+\(Obsidian\))の情報を読み込み、任意の場所に任意の形式で[HTML](https://minerva.mamansoft.net/Notes/HTML)を挿入します。
```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`の日付を右上に表示する
以下のようなイメージのケースです。
*`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](https://minerva.mamansoft.net/Notes/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`を左上に表示する
先ほどは自作の[プロパティ](https://minerva.mamansoft.net/Notes/%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3+\(Obsidian\))でしたが、今度はタグとして利用できる`tags`[プロパティ](https://minerva.mamansoft.net/Notes/%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3+\(Obsidian\))を入れてみます。以下がイメージです。
*Obsidian Publishでプロパティのtagsを表示*
*クリックするとタグのページ一覧が表示される*
クリックでタグのページ一覧は[Obsidian Publish](https://minerva.mamansoft.net/Notes/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](https://minerva.mamansoft.net/Notes/CSS)で設定します。
```css
.properties {
display: flex;
justify-content: end;
gap: 8px;
}
```