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的详细内容。更多信息请关注PHP中文网其他相关文章！