Leakenty와 함께 자신의 Bragdoc을 만듭니다

개발자로서 우리의 업적은 크든 작든 우리의 전문적인 성장에 크게 기여합니다. 그러나 이러한 업적은 종종 다른 작업 속에서 눈에 띄지 않게됩니다. Ryan T. Harter가 "보이지 않는 작업에 대한 신용을 얻는 것"에서 묘사 한이 "보이지 않는 작품"은 특히 성과 검토 중에 쉽게 잊혀집니다.

"Brag 문서"유지 관리에 관한 Julia Evans의 기사는 솔루션을 제공합니다. Brag 문서는 프로젝트 참여, 동료 지원, 프로세스 개선, 프레젠테이션, 워크샵, 학습 경험, 과외 활동 (블로그, 개인 프로젝트), 상 및 경력 발전을 포함하여 귀중한 기여의 기록입니다.

Bragdocs.com과 같은 Brag 문서를 만들기위한 다양한 도구가 있지만 자체적으로 구축하면 더 큰 사용자 정의가 제공됩니다. 이 튜토리얼은 정적 사이트 생성기 Eleventy를 사용하여 bragdocs.com- 유사 사이트를 재현하는 방법을 보여줍니다. 최소한의 JavaScript 및 CSS를 사용하면 자신의 개인화 된 Brag 문서를 작성할 수 있습니다.

Brag 문서 구축

이 튜토리얼의 결과는 Bragdocs.com을 반영하여 고유 한 Brag 문서의 기초를 제공합니다. 라이브 데모는 여기에서 제공됩니다.

전제 조건

• node.js (버전 10 이상) 및 NPM.
• HTML 및 CSS에 대한 친숙 함.
• Markdown, Nunjucks 템플릿 및 JavaScript에 대한 이해 (도움이지만 엄격하게 필요하지 않음).
• 기본 프로그래밍 개념 (IF 문, 루프, JSON 변수 액세스).

Eleventy 소개

Eleventy는 정적 사이트 생성기입니다. 풀 스택 개발과 달리 다양한 템플릿 언어 (HTML, Markdown, Liquid, Nunjucks 등)를 사용하여 유연한 컨텐츠 제작을 허용합니다. Eleventy는이 컨텐츠를 처리하여 쉽게 호스팅 할 수 있도록 정적 HTML 페이지를 생성합니다.

Eleventy Project 설정

이 튜토리얼은 저장소 Eleventy-Bragdoc을 사용합니다.

1. 프로젝트 생성 : README.md 및 node 용 .gitignore 파일을 사용하여 Github 리포지토리 (예 : eleventy-bragdoc )를 만듭니다.

2. 초기화 : 터미널의 eleventy-bragdoc 디렉토리로 이동하고 실행 : npm init -y 이것은 package.json 파일을 만듭니다.

3. Eleventy 설치 : Eleventy 설치 : npm install @11ty/eleventy

4. configuration ( package.json ) : package.json 의 scripts 섹션 업데이트 :

 {
  // ...
  "스크립트": {
    "시작": "eleventy -서브",
    "Build": "Eleventy"
  },
  // ...
}

5. Eleventy 구성 파일 ( .eleventy.js ) : 입력 및 출력 디렉토리를 지정하려면 .eleventy.js 파일을 작성하십시오.

 module.exports = function (eleventyconfig) {
  반품 {
    dir : {
      입력 : "SRC",
      출력 : "공개"
    }
  }
}

6. 컨텐츠 생성 : src 디렉토리를 생성하고 index.md 파일 (첫 번째 페이지)을 추가하십시오. Eleventy는 다양한 템플릿 언어를 지원합니다. 이 예제는 Markdown을 사용합니다.

7. 템플릿 생성 : src/_includes/layouts 디렉토리를 만들고 base.njk 파일 (nunjucks를 사용한 기본 템플릿)을 추가하십시오.

8. CSS 및 이미지 연결 : src/css 및 src/images 디렉토리를 만듭니다. .eleventy.js 를 업데이트합니다.

 module.exports = function (eleventyconfig) {
  eleventyconfig.addwatchtarget ( "./ src/css/")
  eleventyconfig.addwatchtarget ( "./ src/images/")
  eleventyconfig.addpassthroughcopy ( "./ src/css/")
  eleventyconfig.addpassthroughcopy ( "./ src/images/")
  // ...
}

나머지 단계는 컬렉션, 데이터 처리, 스타일링 및 배포를 포함하여 Bragdoc 기능의 구성을 자세히 설명합니다. 각 단계에 대한 전체 코드 및 자세한 설명은 원본 텍스트에서 제공됩니다.

위 내용은 Leakenty와 함께 자신의 Bragdoc을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!