Skip to main content

Obsidian to Docusaurus

思路​

  • Docusaurus 是 Facebook 開源的文件工具,可以方便地製作文件
  • Obsidian 是好用、自由度高的筆記軟體(or Markdown 編輯器)
  • 想要實現的概念:
    • 捕捉即時的想法,特性是沒有明確的分類
      • 一個筆記可能屬於多個類別,使得以「資料夾」分類的概念變得難行
    • 筆記之間相互連結(Internal links)

需求​

  • 寫一個轉換器將在 Obsidian 上寫的筆記,轉換成 Docusaurus 可以吃的格式
    • 以卡片 id 為永久網址的網站(例如:https://hanklu.tw/notes/<id>),而非以資料夾和檔案名稱決定的網址(如:https://hanklu.tw/notes/sleep/why-we-sleep)
      • 好處:不會因為改變檔案位置或名稱就找不到該筆記
    • Wikilinks 轉成 Markdown Links
    • 生成陳列所有卡片的頁面
    • 生成以 Category 為導向的 Sidebar
    • Popover

Obsidian 設定​

Template​

  • id:ZettelKastern id,同時也是 Docusaurus 的 document id
    • 讓網址變成 https://hanklu.tw/notes/<id>,目的是讓每篇筆記都有一個永久網址,對應到檔案的 id,而不是檔案名稱(預設)
  • draft:用於不生成不想公開的筆記
  • tags
  • categories:用於生成 Docusaurus doc Sidebar
doc.md
---
id: 2023-0602-2302
draft: false
tags:
- obsidian
- docusaurus
categories:
- Tools
---

Markdown starts here.

Templatur plugin​

---
title: <% tp.file.title %>
id: <% tp.date.now("YYYY-MMDD-HHmm") %>
date: <% tp.date.now("YYYY-MM-DDTHH:mm:ssZ") %>
lastmod: <% tp.file.last_modified_date("YYYY-MM-DDTHH:mm:ssZ") %>
draft: <% tp.system.suggester(["Public", "Private"], ["false", "true"]) %>
tags:
- other
---

設定​

  • Use [[WIkilinks]]
  • Default location for new attachments
    • assets/Images

assets/images/Pasted image 20230602232528.png

Script​

Card​

  • relative_path: 相對 src_folder 用於保存檔案的結構
  • frontmatter: obsidian yaml frontmatter
  • content: markdown content
  • id: 用於決定 doc id 以及永久網址
  • tags, categories
  • is_index: index.md 沒有 id 要另外處理

Notebase​

  • get_cards()
    • 遍歷卡片、記錄檔案位置
  • generate_doc()
    • 將改過的 markdown 寫入 des_path
    • to_markdown()
      • 將所有 cards 中的 wikilinks 轉換成 markdown links
      • 把 == 換成 <mark>
      • replace_wikilinks(), replace_images(), replace_highlights()
  • generate_all_cards_page()
    • 用 Python 直接生成 Markdown 檔案
    • 以時間編排所有筆記
  • generate_sidebar()
    • 用 Python 直接生成 JS 檔案,有點粗糙
    • 生成以 Categories 為階層的 Sidebar

Docusaurus​

presets: [
[
'classic',
({
docs: {
path: "doc",
routeBasePath: "notes",
sidebarPath: require.resolve('./sidebars.js'),
exclude: []
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
  • 筆記網址:https://hanklu.tw/notes/<id>
  • 結構,因為是以 id 做導覽,所以不需要階層的資料夾了
- doc
- assets
- image1.png
- image2.png
- doc1.md
- doc2.md
- doc3.md

Components​

Comments​

參考:How to add Giscus comments to Docusaurus - DEV Community

npm run swizzle -- --list
npm run swizzle @docusaurus/theme-classic Docitem/Footer -- --eject
src/theme/DocItem/Footer/index.js
import React from 'react';
import Footer from '@theme-original/DocItem/Footer';
import GiscusComponent from '@site/src/components/GiscusComponent';

export default function FooterWrapper(props) {
return (
<>
<Footer {...props} />
<GiscusComponent />
</>
);
}
import React from 'react';
export default function InternalLink({children, link}) {
return (
<a href={link} class='internal-link'>{children}</a>
);
}

todo

Admonition​

text = re.sub(r'(:::)([\s\S]*?)(:::)', r':::\2:::', text)

參考: