Ellenty가있는 커뮤니티 중심 사이트 : 사이트 구축

이전 기사에서는 커뮤니티 중심 웹 사이트의 계획 단계를 살펴 보았습니다. 우리는 내 경험 구축 스타일 단계에서 사용자 제출 수용과 관련된 수많은 고려 사항에 대해 논의했습니다.

이제 코드에 뛰어 들자! 우리는 당신의 커뮤니티 (또는 개인) 웹 사이트를위한 기초 역할을하는 Eleventy 설정을 구축합니다.

시리즈:

1. 기부금 계획
2. 사이트 구축 (현재 기사)

이 기사는 다음과 같습니다.

• 고도를 설정하고 개발 및 빌드 스크립트를 작성합니다.
• 권장 구성 사용자 정의.
• 사용자 정의 데이터를 정의하고 여러 데이터 소스를 병합합니다.
• Nunjucks 및 Leltymenty Layout 체인으로 레이아웃 생성.
• NetLify에 배포.

프로젝트 비전

사용자가 귀여움 경연 대회에서 경쟁하는 고양이와 개 사진을 제출하는 플랫폼을 상상해보십시오.

이 기사는 PET 제출에만 중점을 둡니다. 향후 개발을 위해 사용자 투표 (서버리스 기능으로 쉽게 구현)가 남아 있습니다. 사용자는 애완 동물의 프로필을 제출하여 홈페이지에서 임의의 고양이 대 임의의 개를 특징으로하는 매주 "배틀"을 생성합니다.

고도로 설정

npm init 사용하여 새 프로젝트를 초기화하여 시작한 다음 Eleventy를 설치하십시오.

 npm @11ty/elventy 설치

선택적으로 package.json 스크립트 섹션을 수정하십시오.

 "스크립트": {
  "개발": "Eleventy -서브",
  "Build": "Eleventy"
},

이를 통해 BrowserSync Hot Reloading ( npm run develop ) 및 생산 빌드 ( npm run build )로 개발할 수 있습니다.

효율적인 데이터 처리를 위해 fast-glob 설치하십시오.

 NPM 설치-사브 데브 패스트 글로브

디렉토리 구조

Eleventy는 입력 및 출력 디렉토리를 사용자 정의 할 수 있습니다. 프로젝트 루트에서 eleventy.js 만듭니다.

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

애완 동물 데이터를 저장하기위한 pets 디렉토리를 만들고 cats 와 dogs 하위 디렉토리로 세분화하십시오.

 <code>pets/ cats/ dogs/</code>

각 애완 동물의 데이터는 다음 스키마가있는 JSON 파일입니다.

 {
  "이름": "",
  "Petscolor": "",
  "좋아하는 음식": "",
  "PaRityToy": "",
  "Photourl": "",
  "소유자 이름": "",
  "소유자 와이터": "" "
}

CONTRIBUTING.md 파일 (또는 README.md )을 작성하여 제출 지침 및 데이터 스키마를 사용자에게 안내하십시오. favoriteFood , favoriteToy 및 ownerTwitter 선택 사항입니다. photoURL 보안 및 호스팅 이유를 위해 파일 업로드가 아닌 URL이어야합니다.

데이터 처리

_data 디렉토리에서 cats.js and dogs.js 만들려면 개별 애완 동물 파일을 배열로 결합합니다.

 // cats.js
const fastglob = 요구 사항 ( "Fast-Glob");
const fs = 요구 사항 ( "FS");

module.exports = async () => {
  const catfiles = fastglob ( "./ src/pets/cats/*. json", {
    CassenSitiveMatch : False,
  });

  고양이 = 새로운 set ();
  (고양이의 고양이) {
    const catdata = json.parse (fs.readfilesync (cat));
    cats.add (catdata);
  }

  반환 [... 고양이];
};

( dogs.js 는 비슷하며 "고양이"를 "개"로 대체합니다). 이 접근법은 병합 충돌을 최소화합니다.

데이터 출력 및 템플릿

pets/cats 및 pets/dogs 에 샘플 JSON 파일을 추가하십시오. src 디렉토리에서 index.njk 만들기 :

<h1 id="고양이"> 고양이</h1>

{고양이의 고양이 %} %}
• {{cat.name}}
{ % endfor %}

개

{개에서 개에 대한 %}}
• {{dog.name}}
{ % endfor %}

애완 동물 프로필 페이지와 페이지 매김

Pagination Front Matter ( cats.njk 의 예)가있는 src 디렉토리에서 cats.njk 및 dogs.njk 만듭니다.

 ---
쪽수 매기기:
  데이터 : 고양이
  별칭 : 고양이
  크기 : 1
Permalink : "https://www.php.cn/link/543817ed62fa34e371bb29d4f7b603f"
---

이것은 각 애완 동물의 개별 페이지를 생성합니다.

레이아웃 및 계산 데이터

src/_includes 에서 base.njk 및 pets.njk 만듭니다. base.njk 는 {{ content | safe }} . layout: base.njk 프론트 물질에 index.njk . 또한 레이아웃 체인을 위해 layout: base.njk to pets.njk .

cats.njk 및 dogs.njk 에서 eleventyComputed 사용하여 템플릿 변수를 공유합니다.

 ---
Eleventycomputed :
  제목 : "{{cat.name}}"
  Petcolor : "{{cat.petcolor}}"
  좋아하는 음식 : "{{cat.favoritefood}}"
  PaRitetoy : "{{cat.favoritetoy}}"
  PhotOurl : "{{cat.photourl}}"
  소유자 이름 : "{{cat.ownername}}"
  소유자 : "{{cat.ownertwitter}}"
---

애완 동물 데이터를 표시하려면 pets.njk 에 콘텐츠를 추가하십시오. layout: pets.njk 에 cats.njk and dogs.njk .

NetLify에 배치

사이트를 NetLify에 배포하십시오. NetLify를 public 디렉토리에서 제공하도록 구성하고 npm run build 에서 MERGE를 실행하십시오. netlify.toml 파일은이 프로세스를 단순화 할 수 있습니다. 풀 요청에 대한 배포 미리보기를 활성화하십시오.

제출 수락

기여 가이드 라인을 검토하고 지점 보호 규칙을 설정하십시오. 제출 프로세스에는 포킹, 복제, JSON 파일 생성, 변경 커밋, 풀 요청 열기 및 병합이 포함됩니다.

결론

이는 자동 배포가있는 기능 사이트를 만듭니다. 추가 개선에는 이메일 뉴스 레터, 소셜 미디어 미리보기, 댓글 시스템 및 Netlify CMS가 포함됩니다. 전체 예제는 Github에서 사용할 수 있습니다.

위 내용은 Ellenty가있는 커뮤니티 중심 사이트 : 사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!