Obsidian Publishに新規＆更新履歴・タグ・画像を配置する

📗Obsidian Publishのサイトにプロパティ(メタデータ)を表示したい - Minervaを参考にしながら改造。

Javascript

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

.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