미니 SSG를 사용하여 동적으로 HTML 작성

5144 단어 websitessghtml
이것은 나에 대한 이야기입니다.

언젠가는 간단한 정적 웹 사이트를 만들어야합니다.

하나의 HTML 파일로 폴더를 만듭니다. "index.html"

다음 날 "about.html"이라는 새 파일을 추가하고 싶어서 새 파일을 만든 다음 모든 머리글, 바닥글, 사이드바를 복사하여 붙여넣어 페이지의 일관성을 유지합니다.

다음 날, 나는 새 파일을 다시 추가해야 합니다. 다시.. 그리고 또. 이전과 마찬가지로 모든 소셜 그래프가 있는 head와 Twitter 카드 사이의 성가신 메타 태그는 물론이고 대부분의 부분을 복사하여 붙여넣어야 합니다.

헤더의 간단한 오타 하나를 변경해야 하는 경우 모든 파일을 열고 하나씩 변경해야 합니다.

그건 내 이야기야, 너도 문제 같아?

솔루션 검색



여기에 두 가지 옵션이 있습니다.

첫째, 서버 측 언어를 사용하여 해당 문제에 대한 템플릿 시스템을 가질 수 있습니다. 그러나 나는 정적 사이트를 좋아합니다. 보안에 대해 너무 걱정하지 않고 무료로 호스팅할 수 있는 많은 옵션이 있습니다.

그래서 우리는 다음 옵션으로 넘어갑니다. SSG(정적 사이트 생성기) 사용. 다양한 사용 사례와 함께 이미 많은 옵션이 있습니다. 그러나 몇 가지 간단한 사이트를 만드는 경우 이러한 모든 새로운 구문과 개념을 배우는 것은 정말 압도적입니다.

그래서 어려운 방법을 택했습니다. 개발자인 저 자신도 아시겠지만.. 제 필요에 맞는 SSG를 직접 만드세요.

미니 SSG를 소개합니다



나는 내 자신의 문제를 염두에 두고 내 자신의 SSG를 만들었습니다. 나중에 어떻게 사용할지 상상하면서 시작했습니다. 나는 구문이 매우 최소화되고 우아하기를 원합니다. 저는 laravel 블레이드 템플릿 시스템에서 아이디어를 선택합니다.

Mini SSG를 사용하면 재사용 가능한 HTML 파일을 작성할 수 있습니다. 기본 레이아웃을 만들고 부분 코드를 가져오고 프로젝트의 구성 요소를 만들 수 있습니다.

NPM을 통해 설치할 수 있는 노드/자바스크립트 패키지입니다. how to install is here에 대해 자세히 알아보기

이 게시물에서는 구문이 얼마나 최소인지 살펴보기를 원합니다.

부분 파일을 가져오려면

@import(header)     

<p>Your awesome content</p>

@import(footer)


일반 레이아웃을 사용하려면 다음을 수행할 수 있습니다.

예: base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@attach(title)</title> <!-- render your title above -->
</head>
<body>
    @attach(section) <!-- render everything from section above -->
</body>
</html>


나중에 해당 부분을 첨부하기 위해 @section을 사용합니다.

@layout(base) <!-- 'base' is your html file name, could be anything -->      

@section(title, Your Page Title)

@section
<main>
    Hey.. meet your awesome content
</main>
@endsection


다음과 같이 가져오기와 일반 레이아웃을 결합할 수도 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@attach(title)</title> <!-- render your title above -->
</head>
<body>
    @import(header)
    @attach(section) <!-- render everything from section above -->
    @import(footer)
</body>
</html>


재사용 가능한 동적 구성 요소가 필요합니까?

<div>
    <div class="flex is-space-around">
        <div class="someClass">
            @attach(fullDiv)
        </div>

        <p>@attach(textOnly)</p>
    </div>  
</div>


이렇게 붙인다

<h2>Other stuff</h2>

@component(story)
    @slot(fullDiv)
        <p>😀 I'm slot with name text</p>
        <p>I can be very complex element</p>
    @endslot

    @slot(textOnly)
        I can also be just text like this
    @endslot
@endcomponent


빌드 도구이므로 최종 정적 사이트를 생성하려면 명령(이 경우 npm run dev\ )을 실행해야 합니다. 또한 라이브 서버를 통합하므로 사이트를 구축하는 동안 로컬 서버를 실행할 수 있습니다.

그것은 내가 만든 미니 SSG 패키지의 미리보기입니다. 아마도 이것도 필요할 것입니다. :). 여기는 mini SSG website's link
Apache Ant 입문
IOS 버전 업데이트 판정(부트 페이지 로드용)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage