介紹

您可能已經了解過這個梗以及 Apple Notes 的優越性。

那麼，如果您可以將其用作 CMS 來管理您的部落格內容呢？這就是我想在我的“今天我學到了”網站上嘗試的。這是最終結果 https://til.julienc.me

查詢蘋果筆記

我們需要一種從 Apple Notes 取得筆記的方法。為此，我們將使用 Anyquery，它是一個 SQL 資料庫，可以查詢幾乎任何內容，包括 Apple Notes。

1. 在 https://anyquery.dev/docs/#installation 安裝 Anyquery
2. 安裝Apple Notes插件：anyquery install Notes

3. 使用 SQL 查詢我們的筆記並將其儲存為 JSON（在我的例子中，我的筆記位於 TIL 資料夾中）
   

   anyquery -q "SELECT name, html_body, modification_date 
   FROM notes_items WHERE folder = 'TIL';" --json > notes.json 
   

您現在有一個檔案notes.json，其中包含物件陣列中的所有筆記。每個物件都有三個屬性：

• 註釋名稱（name）
• 最後修改時間 (modification_date)
• HTML 中的正文註解 (html_body)

例如：

[
    {
        "name": "Example",
        "modification_date": "2024-08-11T00:00:00Z",
        "html_body": "
Example
This is an example
"
    }
]

我們的最後一個任務是將網站連接到它

連結網站

就我個人而言，我使用 Astro.JS。我們的第一個任務是為每個條目產生靜態路徑。
為此，我可以從“../../notes.json”匯入註解；並將其傳遞給匯出函數 getStaticPaths()。我還使用 slugify 函數來確保產生的 URL 有效。

// [...blog].astro
import notes from "../../notes.json";

function slugify(string: string) {
    return string
        .toLowerCase()
        .replace(/\s /g, "-")
        .replace(/[^a-z0-9-]/g, "");
}

export function getStaticPaths() {
    return notes.map((note) => {
        return {
            params: {
                blog: slugify(note.name),
            },
        };
    });
}

const { blog } = Astro.params;
const note = notes.find((note) => slugify(note.name) === blog);

產生路徑後，我們需要寫一些 CSS 來搭配 Apple Notes 樣式：

article.notes {
            color: #454545;
            font-size: 0.9rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: -0.015rem;
        }

article.notes > div:first-child > h1 {
        color: #de9807;
        margin-bottom: 0.5rem;
}

... truncated (retrieve the full CSS in the repository at src/styles.css)

我們現在完成了！

結論

恭喜，您現在正在使用 Apple Notes 作為 CMS。它是一款功能強大的協作式 CMS，僅受您的 iCloud 儲存空間限制。您可以新增圖片、表格、格式化文字、程式碼等
以下是格式選項的範例：
https://til.julienc.me/example-of-capability

您可以透過執行以下操作將您自己的部落格從 Apple Notes 部署到 Vercel：

• 複製儲存庫 git clone https://github.com/julien040/apple-notes-cms
• 運行 npm install 或 pnpm install
• 運行 chmod u xdeploy.sh
• 運行 vercel 初始化並連接專案
• 運行 ./deploy.sh 建置專案並將其推送到 Vercel

連結

原始碼：https://github.com/julien040/apple-notes-cms
結果：https://til.julienc.me/