Ein gemeindenaher gesteuerter Standort mit ELEGY: Bauen des Standorts

Im vorherigen Artikel haben wir die Planungsphase für eine Community-gesteuerte Website untersucht. Wir haben die zahlreichen Überlegungen besprochen, die bei der Akzeptanz von Benutzeranlagen beteiligt sind und aus meiner Erlebnisstil -Bühne gezogen wurden.

Lassen Sie uns nun in den Code eintauchen! Wir werden ein elf Setup erstellen, das als Grundlage für Ihre Community (oder persönliche) Website dient.

Serie:

1. Planung für Beiträge
2. Erstellen der Website (aktueller Artikel)

Dieser Artikel deckt:

• ERSTELLEN SIE ELEGTY UND ERSTELLUNGEN UND SCHRIPTE ERSTELLEN.
• Empfohlene Konfigurationsanpassungen.
• Definieren benutzerdefinierter Daten und Zusammenführen mehrerer Datenquellen.
• Erstellen von Layouts mit Nunjucks und elf Layout -Verkettung.
• Bereitstellung für Netlify.

Projekt Vision

Stellen Sie sich eine Plattform vor, auf der Benutzer Fotos von ihren Katzen und Hunden einreichen und an Niedlichkeitswettbewerben teilnehmen.

Dieser Artikel konzentriert sich ausschließlich auf PET -Einreichungen. Benutzerabstimmungen (leicht mit serverlosen Funktionen implementiert) bleibt für die zukünftige Entwicklung. Benutzer senden die Profile ihrer Haustiere ein und generieren einen wöchentlichen "Kampf" mit zufälliger Katze im Vergleich zu einem zufälligen Hund auf der Homepage.

ELEGSY SETUP

Beginnen Sie mit der Initialisierung eines neuen Projekts mit npm init und installieren Sie dann ELEVY:

 NPM Install @11ty/ELEDY

Optional ändern Sie den Abschnitt package.json -Skripte:

 "Skripte": {{
  "entwickeln": "ELEGY -SERVE",
  "bauen": "elfy"
},

Dies ermöglicht die Entwicklung mit BrowserSync Hot-Reloading ( npm run develop ) und Produktionsbauten ( npm run build ).

Installieren Sie fast-glob für eine effiziente Datenbehandlung:

 NPM Install-Save-dev Fast-Glob

Verzeichnisstruktur

ELFENY ermöglicht die Anpassung von Eingangs- und Ausgabeverzeichnissen. Erstellen Sie eleventy.js an der Projektwurzel:

 module.exports = function (ELEDENTYCONfig) {
  zurückkehren {
    Dir: {
      Eingabe: "Src",
      Ausgabe: "öffentlich"
    },
  };
};

Erstellen Sie ein pets -Verzeichnis, um PET -Daten zu speichern, die weiter in cats und dogs unterteilt wurden: Unterverzeichnisse:

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

Die Daten jedes Haustieres sind eine JSON -Datei mit dem folgenden Schema:

 {
  "Name": "",
  "Petcolor": "",
  "Lieblingsfood": "",
  "favoritetoy": "",
  "Photourl": "",
  "eigener Name": "",
  "Ownertwitter": ""
}

Erstellen Sie eine CONTRIBUTING.md -Datei (oder README.md ), um Benutzer zu Einreichungsrichtlinien und dem Datenschema zu veranlassen. Beachten Sie, dass favoriteFood , favoriteToy und ownerTwitter optional sind. photoURL sollte aus Sicherheits- und Hosting -Gründen eine URL sein, keine Datei -Upload.

Datenhandhabung

Erstellen Sie im Verzeichnis _data cats.js und dogs.js um einzelne PET -Dateien in Arrays zu kombinieren:

 // cats.js
const fastglob = require ("Fast-Glob");
const fs = erfordern ("fs");

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

  let cats = new set ();
  für (let cat of catfiles) {
    const catdata = json.parse (fs.readFilesync (cat));
    cats.add (catdata);
  }

  Rückkehr [... Katzen];
};

( dogs.js ist ähnlich und ersetzt "Katze" durch "Hund"). Dieser Ansatz minimiert zusammenführende Konflikte.

Datenausgabe und Vorlagen

Fügen Sie einige Beispiel -JSON -Dateien für pets/cats und pets/dogs hinzu. Erstellen index.njk im src -Verzeichnis:

<h1 id="Katzen"> Katzen</h1>

{ % für Katze in Katzen %}
• {{cat.name}}
{ % endfor %}

Hunde

{ % für Hund in Hunden %}
• {{dog.name}}
{ % endfor %}

Pet -Profilseiten und Paginierung

Erstellen Sie cats.njk und dogs.njk im src -Verzeichnis mit Pagination Front Matter (Beispiel für cats.njk ):

 ---
Pagination:
  Daten: Katzen
  Alias: Katze
  Größe: 1
Permalink: "https://www.php.cn/link/543817ed62fa34e371bb229d4f7b603f"
---

Dies erzeugt einzelne Seiten für jedes Haustier.

Layout und berechnete Daten

Erstellen Sie base.njk und pets.njk in src/_includes . base.njk bietet HTML -Boilerplate mit {{ content | safe }} . layout: base.njk Front Materie zu index.njk . Fügen Sie auch layout: base.njk zu pets.njk zum Layoutketten.

Verwenden Sie in cats.njk und dogs.njk eleventyComputed , um Vorlagenvariablen zu teilen:

 ---
ELEGENTY COMPUTED:
  Titel: "{{cat.name}}"
  petcolor: "{{cat.petcolor}}"
  Lieblingsfood: "{{cat.favoritefood}}"
  favoritetoy: "{{cat.favoritetoy}}"
  Photourl: "{{cat.photourl}}"
  eigener Name: "{{cat.ownername}}"
  OwnertWitter: "{{cat.owntwitter}}"
---

Fügen Sie Inhalte zu pets.njk hinzu, um PET -Daten anzuzeigen. Fügen Sie layout: pets.njk zu cats.njk und dogs.njk .

Bereitstellung zu netlify

Stellen Sie die Site auf Netlify ein. Konfigurieren Sie Netlify, um aus dem public Verzeichnis zu dienen und npm run build in Zusammenführungen auszuführen. Eine netlify.toml -Datei kann diesen Prozess vereinfachen. Aktivieren Sie die Bereitstellung der Vorschau für Pull -Anfragen.

Einreichungen akzeptieren

Überprüfen Sie die Richtlinien für die Beitrags und ermitteln Sie den Schutz der Niederlassungen. Der Einreichungsverfahren umfasst das Gabeln, Klonen, Erstellen einer JSON -Datei, Änderungen, Öffnen einer Pull -Anfrage und Verschmelzung.

Abschluss

Dadurch werden eine Funktionsstelle mit automatisierter Bereitstellung erstellt. Weitere Verbesserungen umfassen E -Mail -Newsletter, Vorschau auf soziale Medien, Kommentarsysteme und Netlify CMS. Das vollständige Beispiel ist auf GitHub verfügbar.

Das obige ist der detaillierte Inhalt vonEin gemeindenaher gesteuerter Standort mit ELEGY: Bauen des Standorts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!