Un site axé sur la communauté avec Eleventy: Construire le site

Dans l'article précédent, nous avons exploré la phase de planification d'un site Web axé sur la communauté. Nous avons discuté des nombreuses considérations impliquées dans l'acceptation des soumissions d'utilisateurs, en tirant de ma phase de style de construction d'expérience.

Maintenant, plongeons dans le code! Nous allons créer une configuration Eleventy qui sert de base à votre site Web communautaire (ou personnel).

Série:

1. Planification des contributions
2. Construire le site (article actuel)

Cet article couvre:

• Configuration de Eleventy et création de scripts de développement et de construction.
• Personnalisation de la configuration recommandée.
• Définir des données personnalisées et fusion de plusieurs sources de données.
• Création de dispositions avec Nunjucks et chaînage de disposition Eleventy.
• Déploiement sur netlify.

Vision du projet

Imaginez une plate-forme où les utilisateurs soumettent des photos de leurs chats et de leurs chiens, en concurrence dans des concours de gentillesse.

Cet article se concentre uniquement sur les soumissions d'animaux de compagnie; Le vote des utilisateurs (facilement implémenté avec des fonctions sans serveur) est laissé pour un développement futur. Les utilisateurs soumettent les profils de leurs animaux de compagnie, générant une "bataille" hebdomadaire avec un chat aléatoire par rapport à un chien aléatoire sur la page d'accueil.

SELETTY SETUP

Commencez par initialiser un nouveau projet à l'aide de npm init , puis installez Eleventy:

 Installer NPM @ 11ty / eleventy

Facultativement, modifiez la section Scripts package.json :

 "scripts": {
  "Développer": "Eleventy - Seser",
  "Build": "Eleventy"
},

Cela permet le développement avec Browsersync à hot-rechargement ( npm run develop ) et les builds de production ( npm run build ).

Installez fast-glob pour une gestion efficace des données:

 Installation de NPM - Save-Dv Fast-Glob

Structure de répertoire

Eleventy permet la personnalisation des répertoires d'entrée et de sortie. Créez eleventy.js à la racine du projet:

 module.exports = fonction (eleventyconfig) {
  retour {
    dir: {
      Entrée: "Src",
      Sortie: "public"
    },
  };
};

Créez un répertoire pets pour stocker les données des animaux de compagnie, subdivisés en sous-répertoires cats et dogs :

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

Les données de chaque animal seront un fichier JSON avec le schéma suivant:

 {
  "nom": "",
  "Petcolor": "",
  "Favorisfood": "",
  "Favoritetoy": "",
  "Photourl": "",
  "Ownername": "",
  "Propersertwitter": ""
}

Créez un fichier CONTRIBUTING.md (ou README.md ) pour guider les utilisateurs sur les directives de soumission et le schéma de données. Notez que favoriteFood , favoriteToy et ownerTwitter sont facultatifs. photoURL doit être une URL, pas un téléchargement de fichiers, pour des raisons de sécurité et d'hébergement.

Gestion des données

Créez cats.js et dogs.js _data

 // Cats.js
const fastglob = require ("Fast-glob");
const fs = require ("fs");

module.exports = async () => {
  const Catfiles = Await FastGlob ("./ src / animaux / chats / *. json", {
    CaseSensiveMatch: False,
  });

  Soit Cats = nouveau set ();
  pour (que le chat de catfiles) {
    const CatData = JSON.Parse (fs.readfilesync (cat));
    Cats.Add (CatData);
  }

  retour [... chats];
};

( dogs.js est similaire, remplaçant le "chat" par "chien"). Cette approche minimise les conflits de fusion.

Sortie et modèles de données

Ajoutez quelques exemples de fichiers JSON aux pets/cats et pets/dogs . Créer index.njk dans le répertoire src :

<h1 id="Chats"> Chats</h1>

{% pour le chat chez les chats%}
• {{cat.name}}
{% end pour%}

Chiens

{% pour le chien en chiens%}
• {{dog.name}}
{% end pour%}

Pages de profil d'animaux et pagination

Créer cats.njk et dogs.njk dans le répertoire src avec une question de pagination (exemple pour cats.njk ):

 ---
pagination:
  Données: chats
  Alias: chat
  Taille: 1
permalink: "https://www.php.cn/link/543817ed62fa34e371bb229d4f7b603f"
---

Cela génère des pages individuelles pour chaque animal de compagnie.

Disposition et données calculées

Créer base.njk et pets.njk dans src/_includes . base.njk fournit une bailler HTML avec {{ content | safe }} . Ajouter layout: base.njk frontal Matter à index.njk . Ajoutez également layout: base.njk à pets.njk pour le chaînage de mise en page.

Utilisez eleventyComputed dans cats.njk et dogs.njk pour partager les variables de modèle:

 ---
Eleventy-computed:
  Titre: "{{cat.name}}"
  petcolor: "{{Cat.petColor}}"
  FoftFood: "{{cat.favoritefood}}"
  favoritoy: "{{cat.favoritetoy}}"
  Photourl: "{{cat.photourl}}"
  Ownername: "{{cat.ownername}}"
  Propersertwitter: "{{cat.ownertwitter}}"
---

Ajoutez du contenu à pets.njk pour afficher les données TEP. Ajouter layout: pets.njk à cats.njk et dogs.njk .

Déploiement à Netlify

Déployez le site sur Netlify. Configurez Netlify pour servir à partir du répertoire public et exécutez npm run build on Merges. Un fichier netlify.toml peut simplifier ce processus. Activez les aperçus de déploiement pour les demandes de traction.

Accepter les soumissions

Examiner les directives de contribution et établir des règles de protection des succursales. Le processus de soumission consiste à fournir, à cloner, à créer un fichier JSON, à commettre des modifications, à ouvrir une demande de traction et à fusionner.

Conclusion

Cela crée un site fonctionnel avec un déploiement automatisé. D'autres améliorations incluent les newsletters par e-mail, les aperçus des médias sociaux, les systèmes de commentaires et Netlify CMS. L'exemple complet est disponible sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!