Apple Notes 是我的 CMS

介紹

您可能已經了解過這個表情包以及 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": "<h1>example</h1><p>this is an example</p>"
    }
]

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

連接網站

就我個人而言，我使用 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+x deploy.sh
• 運行 vercel 來初始化并連接項目
• 運行 ./deploy.sh 構建項目并將其推送到 vercel

鏈接

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

以上就是Apple Notes 是我的 CMS的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！