--- > [!NOTE] 目次 ```table-of-contents title: minLevel: 0 maxLevel: 0 includeLinks: true ``` --- > [!NOTE] リスト掲載用文字列 - [📗Obsidian Publishのサイトにプロパティ(メタデータ)を表示したい](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(%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF)%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F%E3%81%84)【Minerva】() --- > [!NOTE] この記事の要約（箇条書き） - Obsidian Publishのサイトにプロパティ（メタデータ）を表示する方法を解説。 - **2通りの方法**がある。 - **1. YAMLですべてのプロパティを表示**： `publish.css`に`display: block !important;`を追加する最も簡単な方法。 - **2. 任意のプロパティを任意のデザインで表示**： JavaScriptとCSSを使用。 - `publish.js`でDOM変更を監視し、プロパティ情報を読み込みHTMLを挿入する。 - **具体例1: `created`と`updated`日付を右上に表示**：`frontmatter`から日付を取得し、`div`要素として挿入。CSSでスタイルを設定。 - **具体例2: `tags`を左上に表示**：`frontmatter`から`tags`を取得し、リンク付きの`div`要素として挿入。CSSでスタイルを設定。 - JavaScriptによる実装では、`insertMetaDates`関数でプロパティを読み込み、HTML構造に挿入し、必要に応じて`clearInterval`で処理を停止する。 > [!NOTE] 要約おわり --- 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);