## 経緯 いつの間にか[[Excalidraw]]の2.0.0が出ていて、なんとPublishに対応したとかしないとか... ということで試してみた。 以下のビデオを参考に進める。 ![](https://www.youtube.com/watch?v=JC1E-jeiWhI) ## 前提条件 - [[Obsidian Publish]]を使っていること - [[カスタムドメインを指定 (Obsidian Publish)|カスタムドメインを指定]]していること ## サイトイメージ 先ほどのビデオで紹介されていた作者のページ。 <div class="link-card"> <div class="link-card-header"> <img src="https://publish.obsidian.md/favicon.ico?95d9d9d3ff25b12adb87" class="link-card-site-icon"/> <span class="link-card-site-name">Excalidraw</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">Welcome - Excalidraw</p> <p class="link-card-description">Welcome.excalidraw.svg</p> </div> <img src="https://ogimage.obsidian.md/og-image.png?title=Welcome&description=Welcome.excalidraw.svg&logoUrl=https%3A%2F%2Fpublish-01.obsidian.md%2Faccess%2Febae449fc3332bf3eddeedf2a6cbd21b%2FProjects%2FBook%2520on%2520a%2520Page%2520Workshop%2FLogo%2520-%2520Visual%2520Thinking%2520Workshop.png&siteName=Excalidraw" class="link-card-image" /> </div> <a href="https://excalidraw-obsidian.online/"></a> </div> 表示される図はインターラクティブになっており、クリックすると別の[[ノート]]が開ける！ 実態を確認すると[[SVG]]になっており、内部に色々と仕込まれていそうだった。たしかに[[SVG]]であれば[[リンク]]を仕込むことも可能だ。[[バックリンク]]などに反応するのかは気になるところ... (流石に無理かなと) ## 手順 <div class="link-card"> <div class="link-card-header"> <img src="https://publish.obsidian.md/favicon.ico?95d9d9d3ff25b12adb87" class="link-card-site-icon"/> <span class="link-card-site-name">Excalidraw</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">How to set up Obsidian Publish - Excalidraw</p> <p class="link-card-description">How to set up Excalidraw Publish.excalidraw.svg</p> </div> <img src="https://ogimage.obsidian.md/og-image.png?title=How+to+set+up+Obsidian+Publish&description=How+to+set+up+Excalidraw+Publish.excalidraw.svg&logoUrl=https%3A%2F%2Fpublish-01.obsidian.md%2Faccess%2Febae449fc3332bf3eddeedf2a6cbd21b%2FProjects%2FBook%2520on%2520a%2520Page%2520Workshop%2FLogo%2520-%2520Visual%2520Thinking%2520Workshop.png&siteName=Excalidraw" class="link-card-image" /> </div> <a href="https://excalidraw-obsidian.online/Hobbies/Excalidraw+Blog/How-to/How+to+set+up+Obsidian+Publish"></a> </div> ちゃんと確認したわけではないが、以下でいけそう。 1. `publish.css`と`publish.js`にコード追加 2. [[SVG]]ファイルをpublish ### Excalidrawファイルの作成 [[test.excalidraw]]を作成する。 ![[Pasted image 20240108125810.png|frame]] ### SVGファイルの同期 [[excalidrawファイルを自動でSVGファイルに同期]]できるようにするため、以下2つの設定をONにする。 - Embedding Excalidraw into your Notes and Exporting - Export Settings - Auto-export Settings - Keep the .SVG and/or .PNG filenames in sync with the drawing file - Auto-export SVG ### `publish.css`の追加 以下を利用。 <div class="link-card"> <div class="link-card-header"> <img src="https://publish.obsidian.md/favicon.ico?95d9d9d3ff25b12adb87" class="link-card-site-icon"/> <span class="link-card-site-name">Excalidraw</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">Publish js and css files - Excalidraw</p> <p class="link-card-description">Create two files in your vault root: publish.css and publish.js. These files won't be editable inside Obsidian, unless you install a dedicated plugin for that. Use an external ... </p> </div> <img src="https://ogimage.obsidian.md/og-image.png?title=Publish+js+and+css+files&description=Create+two+files+in+your+vault+root%3A+publish.css+and+publish.js.+These+files+won%27t+be+editable+inside+Obsidian%2C+unless+you+install+a+dedicated+plugin+for+that.+Use+an+external+text+editor+to+edit+the%E2%80%A6&logoUrl=https%3A%2F%2Fpublish-01.obsidian.md%2Faccess%2Febae449fc3332bf3eddeedf2a6cbd21b%2FProjects%2FBook%2520on%2520a%2520Page%2520Workshop%2FLogo%2520-%2520Visual%2520Thinking%2520Workshop.png&siteName=Excalidraw" class="link-card-image" /> </div> <a href="https://excalidraw-obsidian.online/Hobbies/Excalidraw+Blog/How-to/Publish+js+and+css+files#publish.css"></a> </div> `publish.css`の末尾にくっつける。 ### `publish.js`の追加 以下を利用。 <div class="link-card"> <div class="link-card-header"> <img src="https://publish.obsidian.md/favicon.ico?95d9d9d3ff25b12adb87" class="link-card-site-icon"/> <span class="link-card-site-name">Excalidraw</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">Publish js and css files - Excalidraw</p> <p class="link-card-description">Create two files in your vault root: publish.css and publish.js. These files won't be editable inside Obsidian, unless you install a dedicated plugin for that. Use an external ... </p> </div> <img src="https://ogimage.obsidian.md/og-image.png?title=Publish+js+and+css+files&description=Create+two+files+in+your+vault+root%3A+publish.css+and+publish.js.+These+files+won%27t+be+editable+inside+Obsidian%2C+unless+you+install+a+dedicated+plugin+for+that.+Use+an+external+text+editor+to+edit+the%E2%80%A6&logoUrl=https%3A%2F%2Fpublish-01.obsidian.md%2Faccess%2Febae449fc3332bf3eddeedf2a6cbd21b%2FProjects%2FBook%2520on%2520a%2520Page%2520Workshop%2FLogo%2520-%2520Visual%2520Thinking%2520Workshop.png&siteName=Excalidraw" class="link-card-image" /> </div> <a href="https://excalidraw-obsidian.online/Hobbies/Excalidraw+Blog/How-to/Publish+js+and+css+files#Publish.js"></a> </div> `publish.js`の末尾にくっつける。 ## 成果物 ![](https://twitter.com/i/status/1744217546763784681) 今のところPublishするメリットはそこまで感じなかったため、設定は削除した。