Apple ノートは私の CMS です-jsチュートリアル-php.cn

Apple ノートは私の CMS です

WBOY

リリース： 2024-08-13 06:59:16

オリジナル

735 人が閲覧しました

導入

あなたはすでにこのミームと Apple Notes の優位性を知っているかもしれません。
Apple notes is my CMS
では、ブログのコンテンツを管理する CMS として使用できたらどうでしょうか?それが私が「今日学んだこと」ウェブサイトで試してみたかったことです。最終結果は https://til.julienc.me

にあります。

Apple notes is my CMS

Apple ノートのクエリ

Apple Notes からメモを取得する方法が必要です。これを行うには、Anyquery を使用します。Anyquery は、Apple Notes を含むほぼあらゆるものをクエリできる SQL データベースです。

Anyquery を https://anyquery.dev/docs/#installation でインストールします。
Apple Notes プラグインをインストールします: anyquery install Notes
SQL を使用してメモをクエリし、JSON に保存します (私の場合、メモはフォルダー TIL にあります)
```
anyquery -q "SELECT name, html_body, modification_date 
FROM notes_items WHERE folder = 'TIL';" --json > notes.json 
```
ログイン後にコピー

これで、オブジェクトの配列にすべてのメモが含まれるファイルnotes.jsonが完成しました。各オブジェクトには 3 つのプロパティがあります:

ノートの名前(名前)
最終更新時刻 (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>"
    }
]

ログイン後にコピー

最後のタスクは、Web サイトを Web サイトに接続することです

ウェブサイトに接続する

個人的には、Astro.JS を使用しています。最初のタスクは、各エントリの静的パスを生成することです。
そのためには、「../../notes.json」からメモをインポートするだけです。それをエクスポート関数 getStaticPaths() に渡します。また、生成された URL が有効であることを確認するために slugify 関数も使用しています。

// [...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);

ログイン後にコピー

パスが生成されたら、Apple Notes スタイルに一致するように少し CSS を記述する必要があります。

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 として使用できるようになりました。これは、iCloud ストレージの制限にのみ制限される、強力で共同作業が可能な CMS です。画像、表、書式設定されたテキスト、コードなどを追加できます。
以下は書式設定オプションの例です:
https://til.julienc.me/example-of-capabilities
Apple notes is my CMS