정적 사이트 생성기 Grunt 플러그인 구축

당신은 Jekyll 및 Wintersmith와 같은 정적 사이트 생성기에 익숙 할 것입니다. 이 튜토리얼은 템플릿 및 마크 다운 파일에서 정적 사이트를 생성하기위한 사용자 정의 Grunt 플러그인을 구축하여 기존 워크 플로와의 더 큰 제어 및 통합을 제공합니다.

grunt 사용의 주요 장점 :

이 접근법은 몇 가지 이점을 제공합니다

사용자 정의 및 통합 : 다른 도구와의 광범위한 사용자 정의 및 완벽한 통합을 위해 Grunt의 API 및 플러그인 생태계를 활용합니다. 워크 플로우 유연성 :

정적 사이트 생성 프로세스를 정확한 요구에 맞게 조정하여 우선 CSS 전 처리기 및 배포 방법을 선택하십시오. 모듈 식 디자인 : 추가 Grunt 플러그인 (예 : Siteemap Generation)을 통해 기능을 쉽게 추가합니다. 템플릿 시스템의 무자비 성 : 핸들 바 또는 제이드와 같은 다른 템플릿 엔진에 플러그인을 조정합니다.

설정 :

git, node.js 및 grunt-cli가 설치되어 있다고 가정하면 다음을 따르십시오.

install :
• grunt 플러그인 템플릿을 설치하십시오 : 프로젝트 디렉토리를 만듭니다 (예 :
) grunt 플러그인 초기화 :
• (프롬프트 답변, 기본값은 허용됩니다). 의 종속성 설치 :
  추가 모듈을 설치하십시오 : 블로그 게시물 생성 :
핵심 기능은 개별 블로그 게시물을 생성하는 것입니다. : 에 대한 다음 구성을 포함하도록 를 수정하십시오 필요한 템플릿 파일을 만듭니다 (, , , , ). 이 템플릿은 핸들 바를 사용합니다 플러그인 코드 (mini_static_blog.js) :
• 핵심 논리는 내에 있습니다. 코드는 Markdown 구문 분석, 템플릿 렌더링 및 파일 쓰기를 처리합니다. 이 섹션에는 구문 하이라이트, 템플릿 컴파일, 포스트 생성, 페이지 생성, RSS 피드 생성 및 404 페이지 생성이 포함 된 마크 다운 처리가 포함됩니다. 이 코드는 또한 인덱스 페이지의 페이지 매김을 관리합니다. (완전하고 자세한 코드는 여기에 포함하기에는 너무 광범위하지만 구조와 주요 요소는 위에서 설명되어 있습니다.) 추가 개발 :

  이 플러그인은보다 포괄적 인 정적 사이트 생성기를위한 기초를 형성합니다. 이러한 개선 사항을 고려하십시오 검색 기능 (LUNR.JS) : 개선 된 사이트 탐색을 위해 검색 인덱스를 통합합니다. 카테고리 지원 :

  블로그 게시물을 분류하기위한 지원 추가

  대체 템플릿 :

  다른 템플릿 엔진 탐색 고급 댓글 :
  보다 강력한 주석 시스템을 통합합니다
  • 이 자습서는 Grunt를 사용하여 사용자 정의 된 정적 사이트 생성기를 생성하기위한 확실한 시작점을 제공합니다. 자세한 구현을 위해 전체 코드 ([소스 코드 - 실제 링크로 교체)에서 사용할 수 있음)를 참조하십시오. .

위 내용은 정적 사이트 생성기 Grunt 플러그인 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!