Apple Notes는 나의 CMS입니다.-JS 튜토리얼-php.cn

Apple Notes는 나의 CMS입니다.

WBOY

풀어 주다： 2024-08-13 06:59:16

원래의

746명이 탐색했습니다.

소개

이미 이 밈과 Apple Notes의 우수성을 접하셨을 수도 있습니다.
Apple notes is my CMS
그렇다면 블로그 콘텐츠를 관리하기 위한 CMS로 사용할 수 있다면 어떨까요? 이것이 바로 제가 « 오늘 배운 것» 웹사이트에서 시도하고 싶었던 것입니다. https://til.julienc.me

에서 최종 결과를 확인하세요.

Apple notes is my CMS

Apple Notes 쿼리 중

Apple Notes에서 메모를 가져올 수 있는 방법이 필요합니다. 이를 위해 Apple Notes를 포함하여 거의 모든 것을 쿼리할 수 있는 SQL 데이터베이스인 Anyquery를 사용하겠습니다.

https://anyquery.dev/docs/#installation에서 Anyquery를 설치하세요.
Apple Notes 플러그인 설치: anyquery 설치 노트
SQL을 사용하여 노트를 쿼리하고 JSON에 저장합니다(제 경우 노트는 TIL 폴더에 있습니다)
```
anyquery -q "SELECT name, html_body, modification_date 
FROM notes_items WHERE folder = 'TIL';" --json > notes.json 
```
로그인 후 복사

이제 개체 배열의 모든 메모가 포함된 Notes.json 파일이 생겼습니다. 각 객체에는 세 가지 속성이 있습니다.

메모 이름(이름)
마지막 수정 시간(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()에 전달합니다. 또한 생성된 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-capability
Apple notes is my CMS