一個由社區驅動的站點，高度：建立該網站

在上一篇文章中，我們探索了社區驅動網站的計劃階段。我們討論了接受用戶提交的眾多注意事項，這些因素是從我的經驗建築風格階段中汲取的。

現在，讓我們潛入代碼！我們將建立一個高高的設置，為您的社區（或個人）網站提供基礎。

系列：

1. 計劃捐款
2. 建立網站（當前文章）

本文涵蓋：

• 設置高度並創建開發和構建腳本。
• 建議的配置自定義。
• 定義自定義數據並合併多個數據源。
• 使用Nunjucks創建佈局和高度的佈局鏈條。
• 部署到Netlify。

項目願景

想像一個平台，用戶在其中提交貓和狗的照片，參加可愛比賽。

本文僅關注寵物提交；用戶投票（易於使用無服務器功能實施）留下來供將來開發。用戶提交寵物的個人資料，每週產生一個“戰鬥”，其中包含隨機貓與主頁上的隨機狗。

高度設置

首先使用npm init初始化一個新項目，然後安裝Eleventy：

 NPM安裝 @11ty/升高

可選，修改package.json腳本部分：

 “腳本”：{
  “開發”：“高度 - 服務”，
  “構建”：“高度”
}，，

這可以通過Browsersync Hot Rodading（ npm run develop ）和生產構建（ npm run build ）進行開發。

安裝fast-glob以進行有效的數據處理：

 NPM安裝 -  save-dev fast-Glob

目錄結構

高架允許自定義輸入和輸出目錄。在項目根部創建eleventy.js ：

模塊。 Exports= function（leventyConfig）{
  返回 {
    dir：{
      輸入：“ SRC”，
      輸出：“公共”
    }，，
  };
};

創建一個pets目錄來存儲寵物數據，進一步細分為cats dogs子目錄：

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

每個寵物的數據將是一個帶有以下模式的JSON文件：

 {
  “姓名”： ””，
  “ petcolor”：“”，
  “最愛食品”：“”，
  “ FairiteToy”：“”，
  “ photourl”：“”，
  “ ownername”：“”，
  “ ownertwitter”：“”
}

創建一個CONTRIBUTING.md文件（或README.md ），以指導用戶發布提交指南和數據架構。請注意， favoriteFood ， favoriteToy和ownerTwitter是可選的。出於安全性和託管原因， photoURL應該是URL，而不是文件上傳。

數據處理

在_data目錄中創建cats.js and dogs.js以將單個PET文件組合到數組中：

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

module.exports = async（）=> {
  const catfiles =等待fastglob（“ ./ src/pets/cats/*。json”，{
    casesEnsitiveMatch：false，
  }）;

  令Cats = new Set（）;
  for（讓貓貓的貓）{
    const catdata = json.parse（fs.ReadFilesync（cat））;
    cats.add（catdata）;
  }

  返回[...貓];
};

（ dogs.js是相似的，用“狗”代替“貓”）。這種方法最大程度地減少了合併衝突。

數據輸出和模板

將一些樣本JSON文件添加到pets/cats和pets/dogs中。在src目錄中創建index.njk ：

<h1 id="貓">貓</h1>

{貓中的貓％}
• {{cat.name}}
{％endfor％}

狗

{狗中的狗％}
• {{dog.name}}
{％endfor％}

寵物檔案頁面和分頁

在src目錄中創建cats.njk和dogs.njk ，並使用分頁前物質（ cats.njk ）：

 ---
分頁：
  數據：貓
  別名：貓
  尺寸：1
永久鏈接：“ https：//www.php.cn/link/543817ED62FA34E371BB2229D4F7B603F”
---

這為每個寵物生成單獨的頁面。

佈局和計算數據

在src/_includes base.njk和pets.njk中創建。 base.njk提供HTML樣板{{ content | safe }} 。添加layout: base.njk Front物質到index.njk 。還將layout: base.njk添加到pets.njk中，以進行佈局鏈。

使用cats.njk和dogs.njk中的eleventyComputed分享模板變量：

 ---
高度計算：
  標題：“ {{cat.name}}”
  petcolor：“ {{{cat.petcolor}}”
  fairmyfood：“ {{{cat.favoritefood}}”
  FairiteToy：“ {{{cat.favoriteToy}}””
  photourl：“ {{{cat.photourl}}”
  ownername：“ {{cat.ownername}}”
  ownertwitter：“ {{{cat.ownertwitter}}”
---

將內容添加到pets.njk中以顯示PET數據。添加layout: pets.njk到cats.njk和dogs.njk 。

部署進行Netlify

部署網站以進行Netlify。配置NetLify從public目錄中使用，並在合併上運行npm run build 。 netlify.toml文件可以簡化此過程。啟用拉動請求的部署預覽。

接受提交

審查貢獻指南並製定分支保護規則。提交過程涉及分叉，克隆，創建JSON文件，進行更改，打開拉請請求和合併。

結論

這將創建一個具有自動部署的功能站點。進一步的增強功能包括電子郵件新聞通訊，社交媒體預覽，評論系統和Netlify CMS。完整的示例可在GitHub上找到。

以上是一個由社區驅動的站點，高度：建立該網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！