Apple Notes est mon CMS-js tutoriel-php.cn

Apple Notes est mon CMS

WBOY

Libérer： 2024-08-13 06:59:16

original

736 Les gens l'ont consulté

Introduction

Vous avez peut-être déjà rencontré ce mème et la supériorité d'Apple Notes.
Apple notes is my CMS
Et si vous pouviez l’utiliser comme CMS pour gérer le contenu de votre blog ? C’est ce que j’ai voulu essayer pour mon site « Aujourd’hui, j’ai appris ». Voici le résultat final sur https://til.julienc.me

Apple notes is my CMS

Interroger les notes Apple

Nous avons besoin d'un moyen de récupérer les notes d'Apple Notes. Pour ce faire, nous utiliserons Anyquery, c'est une base de données SQL qui peut interroger presque tout, y compris Apple Notes.

Installez Anyquery sur https://anyquery.dev/docs/#installation
Installez le plugin Apple Notes : notes d'installation anyquery
Interrogez nos notes en utilisant SQL et enregistrez-les au format JSON (dans mon cas, mes notes sont dans le dossier TIL)
```
anyquery -q "SELECT name, html_body, modification_date 
FROM notes_items WHERE folder = 'TIL';" --json > notes.json 
```
Copier après la connexion

Vous disposez désormais d'un fichier notes.json qui contient toutes vos notes dans un tableau d'objets. Chaque objet possède trois propriétés :

Le nom de la note (nom)
Sa dernière heure de modification (modification_date)
La note du corps en HTML (html_body)

Par exemple :

[
    {
        "name": "Example",
        "modification_date": "2024-08-11T00:00:00Z",
        "html_body": "<h1>Example</h1><p>This is an example</p>"
    }
]

Copier après la connexion

Notre dernière tâche est d'y connecter le site Web

Connecter le site Web

Personnellement, j'utilise Astro.JS. Notre première tâche sera de générer le chemin statique pour chaque entrée.
Pour ce faire, je peux simplement importer des notes depuis "../../notes.json" ; et transmettez-le à la fonction d'exportation getStaticPaths(). J'utilise également une fonction slugify pour garantir la validité des URL générées.

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

Copier après la connexion

Une fois les chemins générés, nous devons écrire un peu de CSS pour correspondre au style 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)

Copier après la connexion

Nous avons maintenant terminé !

Conclusion

Félicitations, vous utilisez désormais Apple Notes comme CMS. Il s'agit d'un CMS puissant et collaboratif qui est simplement lié à vos limites de stockage iCloud. Vous pouvez ajouter des images, des tableaux, du texte formaté, du code, etc.
Voici un exemple des options de formatage :
https://til.julienc.me/example-of-capabilities
Apple notes is my CMS