[📗Obsidian Publishのサイトにプロパティ(メタデータ)を表示したい - Minerva](https://minerva.mamansoft.net/%F0%9F%93%97Obsidian%E9%80%86%E5%BC%95%E3%81%8D%E3%83%AC%E3%82%B7%E3%83%94/%F0%9F%93%97Obsidian+Publish%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%28%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF%29%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F%E3%81%84)を参考にしながら改造。
## Javascript
```js
let id;
function insertMetaDates() {
const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter;
if (!frontmatter) {
return;
}
const created = frontmatter["create"]?.replaceAll("-", "/");
const updated = frontmatter["updated"]?.replaceAll("-", "/");
const tags = frontmatter["tags"];
const cover = frontmatter["cover"]
if (!created && !updated) {
return;
}
if (!tags) {
return;
}
if (!cover) {
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>
`
)
frontmatterEl.insertAdjacentHTML(
"afterend",
`
<div class="properties">
<div class="properties--text__lineheight">作成:${created}</div>
<div class="properties--text__lineheight">更新:${updated}</div>
</div>
<div class="properties--text__lineheight">${tagElms}</div>
<img class="properties--iamge__margin" src="https://publish-01.obsidian.md/access/388b9940a7f477574623c20b92a6828b/${cover}">
`
);
clearInterval(id);
}
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);
```
## CSS
```css
.page-header {
margin-bottom: 0.5em;
}
.properties {
display: flex;
gap: 8px;
}
.properties--text__lineheight {
line-height: 2em;
}
.properties--iamge__margin {
margin: 20px 0 10px;
}
```
## リンク
- [[フロントマターで指定したcoverをObsidian Publishで表示する]]
- [📗Obsidian Publishのサイトにプロパティ(メタデータ)を表示したい - Minerva](https://minerva.mamansoft.net/%F0%9F%93%97Obsidian%E9%80%86%E5%BC%95%E3%81%8D%E3%83%AC%E3%82%B7%E3%83%94/%F0%9F%93%97Obsidian+Publish%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%28%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF%29%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F%E3%81%84)