Eleventyを備えたコミュニティ主導のサイト：サイトの構築

前の記事では、コミュニティ主導のWebサイトの計画段階を調査しました。ユーザーの提出物を受け入れることに伴う多くの考慮事項について議論しました。

それでは、コードに飛び込みましょう！コミュニティ（または個人）Webサイトの基盤として機能する110のセットアップを構築します。

シリーズ：

1. 貢献の計画
2. サイトの構築（現在の記事）

この記事では：

• ASETUPを設定し、開発とビルドスクリプトを作成します。
• 推奨される構成のカスタマイズ。
• カスタムデータの定義と複数のデータソースのマージ。
• NunjucksとLeaoutチェーンを使用してレイアウトを作成します。
• Netlifyに展開します。

プロジェクトビジョン

ユーザーが猫と犬の写真を提出し、可愛らしさのコンテストで競うプラットフォームを想像してください。

この記事では、PETの提出のみに焦点を当てています。ユーザー投票（サーバーレス関数で簡単に実装）は、将来の開発のために残されています。ユーザーはペットのプロフィールを提出し、ホームページでランダムな犬とランダムな犬をフィーチャーした毎週の「戦闘」を生成します。

110のセットアップ

npm initを使用して新しいプロジェクトを初期化することから始めてから、110をインストールします。

 npmインストール @11ty/eleleen

オプションで、 package.jsonスクリプトセクションを変更します。

 「スクリプト」：{
  「開発」：「Eleventy -Serve」、
  「ビルド」：「Eleventy」
}、

これにより、BrowserSync Hot-Reloading（ npm run develop ）と生産ビルド（ npm run build ）を使用した開発が可能になります。

効率的なデータ処理のためにfast-globをインストールしてください：

 npmインストール -  save-dev fast-glob

ディレクトリ構造

Eleventyを使用すると、入力および出力ディレクトリのカスタマイズが許可されています。プロジェクトルートでeleventy.jsを作成します：

 module.exports = function（eleventyconfig）{
  戻る {
    dir：{
      入力：「SRC」、
      出力：「パブリック」
    }、
  };
};

ペットデータを保存するpetsディレクトリを作成し、さらにcatsやdogsサブディレクトリに細分されます。

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

各ペットのデータは、次のスキーマを備えたJSONファイルになります。

 {
  "名前"： ""、
  「ペットコラー」： ""
  「FavoreFood」： ""
  「faveitetoy」： ""
  「フォトール」： ""
  「OwnerName」： ""
  「ownertwitter」： ""
}

投稿ガイドラインとデータスキーマに関するユーザーをガイドするために、 CONTRIBUTING.mdファイル（またはREADME.md ）を作成します。 favoriteFood 、 favoriteToy 、およびownerTwitterオプションであることに注意してください。 photoURL 、セキュリティとホスティングの理由のために、ファイルのアップロードではなくURLである必要があります。

データ処理

_dataディレクトリでcats.jsとdogs.jsを作成して、個々のペットファイルを配列に結合します。

 // cats.js
const fastglob = require（ "fast-glob"）;
const fs = require（ "fs"）;

module.exports = async（）=> {
  const catfiles = await fastglob（ "./ src/pets/cats/*。json"、{
    caseSensitivematch：false、
  }）;

  cats = new set（）;
  for
    const catdata = json.parse（fs.readfilesync（cat））;
    cats.add（catdata）;
  }

  return [... cats];
};

（ dogs.jsは似ており、「猫」を「犬」に置き換えます）。このアプローチは、マージの競合を最小限に抑えます。

データ出力とテンプレート

サンプルJSONファイルをpets/catsとpets/dogsに追加します。 srcディレクトリにindex.njkを作成します。

<h1 id="猫">猫</h1>

{猫の猫の％％}
• {{cat.name}}
{％endfor％}

犬

{犬の犬の％％}
• {{dog.name}}
{％endfor％}

ペットのプロフィールページとページネーション

cats.njkとdogs.njkを作成して、ページネーションフロントマター（ cats.njkの例）を備えたsrcディレクトリで：

 ---
ページネーション：
  データ：猫
  エイリアス：猫
  サイズ：1
パーマリンク：「https://www.php.cn/link/543817ed62fa34e371bb229d4f7b603f」
---

これにより、各ペットの個々のページが生成されます。

レイアウトと計算データ

src/_includesでbase.njkとpets.njkを作成します。 base.njkは、 {{ content | safe }} 。 layout: base.njk front matter to index.njk 。また、レイアウトチェーンのlayout: base.njkをpets.njkに追加します。

cats.njkとdogs.njkでeleventyComputed使用して、テンプレート変数を共有します。

 ---
イレブンティック：
  タイトル： "{{cat.name}}"
  PetColor： "{{cat.PetColor}}"
  お気に入りのフード： "{{cat.favoritefood}}"
  faveitetoy： "{{cat.favoritetoy}}"
  Photourl： "{{cat.photourl}}"
  OwnerName： "{{cat.Ownermame}}"
  ownertwitter： "{{cat.OwnertWitter}}"
---

pets.njkにコンテンツを追加して、ペットデータを表示します。 layout: pets.njk cats.njkとdogs.njkに。

Netlifyへの展開

サイトを展開してnetlifyにします。 publicディレクトリからサーブするようにnetlifyを構成し、 npm run buildをマージに実行します。 netlify.tomlファイルは、このプロセスを簡素化できます。プルリクエストのプレビューの展開を有効にします。

提出を受け入れる

貢献ガイドラインを確認し、支店の保護規則を確立します。提出プロセスには、フォーキング、クローニング、JSONファイルの作成、変更のコミット、プルリクエストの開く、およびマージが含まれます。

結論

これにより、自動展開を備えた機能サイトが作成されます。さらなる機能強化には、電子メールニュースレター、ソーシャルメディアプレビュー、コメントシステム、Netlify CMSが含まれます。完全な例はGitHubで利用できます。

以上がEleventyを備えたコミュニティ主導のサイト：サイトの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。