프로토타입: Silkie용 Markdown Frontmatter 지원

정적 사이트 생성기(SSG)의 세계를 돌아다닌 후 문서 사이트에 중점을 둔 눈길을 끄는 잘 문서화되고 개발자 친화적인 사이트를 발견했습니다: Docusaurus . 그들의 문서를 좀 더 깊이 파고든 후, 나는 그들이 처음부터 작성한 SSG인 Silke에 통합을 시도할 수 있는 많은 기본 기능을 가지고 있다는 것을 깨달았습니다.

Docusaurus에 대한 몇 마디

Docusaurus로 정적 사이트를 설정하고 실행하는 것은 놀라울 정도로 빨랐습니다. 단일 명령으로 몇 가지 예제와 함께 모든 상용구 코드를 가져와서 사용해 볼 수 있습니다: npm init docusaurus@latest my-website classic . 또한 Docusaurus는 개발자가 직관적인 디렉토리 구조, 라우팅 기반 코드 및 핫 리로딩을 통해 새 페이지를 매우 쉽게 추가할 수 있도록 합니다.

기능에 압도적으로 감명을 받은 저는 Silkie에 잠재적으로 더 많은 유연성과 SEO 최적화를 추가할 수 있는 좋은 기능을 찾았습니다.

Markdown 머리말 지원

당분간은 slug , title , hide_title , description , tags 5 개의 머리말 필드를 지원할 계획이었습니다. 하지만 그렇게 짧은 시간 안에 모든 것을 완성하는 것은 거의 불가능했습니다. 사실 머리말을 파싱하는 것만으로도 이미 내 코드베이스에 큰 변화가 생겼습니다. 따라서 이번 주에 이 기능의 프로토타입만 제공하기로 결정했습니다(커밋 확인here ).

GitHub 문제

GitHub Issues는 기능을 더 작은 해결 가능한 문제로 분류하는 데 정말 도움이 되었습니다. Markdown Frontmatter 지원을 위해 major issue을 제출했습니다. 이 문제는 기능을 구성하는 더 작은 문제 목록도 추적합니다.

바퀴를 재발명하지 않기 위해 이러한 작업을 도와줄 수 있는 사용 가능한 Python 라이브러리를 조사했습니다. 결국 Python Frontmatter이 주요 문제를 해결하는 데 도움이 되었습니다. Silkie는 이제 각 파일의 머리말을 구문 분석하고 다음을 수행할 수 있습니다.

경로 기반 빌드 디렉토리 구조 생성

생성된 HTML 문서의 제목을 설정합니다

생성된 HTML 문서의 설명을 설정합니다

.

예를 들어 아래에 my-blog.md 라는 Markdown 파일이 있는 경우:

---
slug: blog/blog-post
title: "Lorem Ipsum Blog"
description: "This is a description"
tags: [blog, demo]
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Silke에 전달되면 빌드 디렉토리(dist/)는 생성된 HTML 파일을 폴더blog/ 안에 배치해야 합니다.

blog-post.html의 내용은 다음과 같아야 합니다.

<!DOCTYPE html>
<html lang="en-CA">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="This is a description" />
    <meta property="og:description" content="This is a description" />
    <title>Lorem Ipsum Blog</title>
  </head>
  <body>
    <h1>Lorem Ipsum Blog</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet</p>
  </body>
</html>

아직 개발해야 할 것이 많습니다. 기능의 각 요구 사항에 대해 별도의 문제를 제출했으므로 다음에 무엇을 빌드해야 하는지 알 수 있을 것입니다. 다른 사람들이 그것을 확인하고 내 프로젝트에 기여할 수 있다면 좋을 것입니다.

Reference

이 문제에 관하여(프로토타입: Silkie용 Markdown Frontmatter 지원), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/oliverpham/prototype-markdown-frontmatter-support-for-silkie-502a

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

프로토타입: Silkie용 Markdown Frontmatter 지원

Docusaurus에 대한 몇 마디

Markdown 머리말 지원

GitHub 문제

Reference

좋은 웹페이지 즐겨찾기