Nota Apple ialah CMS saya

pengenalan

Anda mungkin telah menemui meme ini dan kelebihan Apple Notes.

Nah, bagaimana jika anda boleh menggunakannya sebagai CMS untuk mengurus kandungan blog anda? Itulah yang saya ingin cuba untuk tapak web « Hari ini saya belajar » saya. Berikut ialah keputusan akhir di https://til.julienc.me

Menyoal Nota Apple

Kami memerlukan cara untuk mengambil nota daripada Apple Notes. Untuk berbuat demikian, kami akan menggunakan Anyquery, ia adalah pangkalan data SQL yang boleh menanyakan hampir semua perkara, termasuk Apple Notes.

1. Pasang Anyquery di https://anyquery.dev/docs/#installation
2. Pasang pemalam Apple Notes: sebarang pertanyaan memasang nota

3. Soal nota kami menggunakan SQL dan simpan ke JSON (dalam kes saya, nota saya ada dalam folder TIL)
   

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

Anda kini mempunyai fail note.json yang mengandungi semua nota anda dalam pelbagai objek. Setiap objek mempunyai tiga sifat:

• Nama nota (nama)
• Masa terakhir diubah suai (tarikh_pengubahsuaian)
• Nota isi dalam HTML (html_body)

Contohnya:

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

Tugas terakhir kami ialah menyambungkan tapak web dengannya

Menyambung laman web

Secara peribadi, saya menggunakan Astro.JS. Tugas pertama kami ialah menjana laluan statik untuk setiap entri.
Untuk berbuat demikian, saya hanya boleh melakukan import nota daripada "../../notes.json"; dan hantar ke fungsi eksport getStaticPaths(). Saya juga menggunakan fungsi slugify untuk memastikan URL yang dijana adalah sah.

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

Setelah laluan dijana, kita perlu menulis sedikit CSS untuk dipadankan dengan gaya 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)

Kami sudah selesai!

Kesimpulan

Tahniah, anda kini menggunakan Apple Notes sebagai CMS. Ia adalah CMS kolaboratif yang berkuasa yang hanya terikat pada had storan iCloud anda. Anda boleh menambah imej, jadual, teks berformat, kod, dsb.
Berikut ialah contoh pilihan pemformatan:
https://til.julienc.me/example-of-capabilities

Anda boleh menggunakan blog anda sendiri daripada Apple Notes ke Vercel dengan melakukan perkara berikut:

• Klon klon git repositori https://github.com/julien040/apple-notes-cms
• Jalankan npm install atau pnpm install
• Jalankan chmod u+x deploy.sh
• Jalankan vercel ke init dan sambungkan projek
• Jalankan ./deploy.sh untuk membina dan menolak projek ke Vercel

Pautan

Kod sumber: https://github.com/julien040/apple-notes-cms
Keputusan: https://til.julienc.me/

Atas ialah kandungan terperinci Nota Apple ialah CMS saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!