一个由社区驱动的站点，高度：建立该网站

在上一篇文章中，我们探索了社区驱动网站的计划阶段。我们讨论了接受用户提交的众多注意事项，这些因素是从我的经验建筑风格阶段中汲取的。

现在，让我们潜入代码！我们将建立一个高高的设置，为您的社区（或个人）网站提供基础。

系列：

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中文网其他相关文章！