ホームページ >ウェブフロントエンド >jsチュートリアル >Apple ノートは私の CMS です
Apple ノートは私の CMS です
- WBOYオリジナル
- 2024-08-13 06:59:16743ブラウズ
導入
あなたはすでにこのミームと Apple Notes の優位性を知っているかもしれません。
では、ブログのコンテンツを管理する CMS として使用できたらどうでしょうか?それが私が「今日学んだこと」ウェブサイトで試してみたかったことです。最終結果は https://til.julienc.me
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": "4a249f0d628e2318394fd9b75b4636b1Example473f0a7621bec819994bb5020d29372ae388a4556c0f65e1904146cc1a846beeThis is an example94b3e26ee717c64999d7867364b1b4a3"
}
]
最後のタスクは、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 から 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/
以上がApple ノートは私の CMS ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。