Erstellen Sie Ihr eigenes Bragdoc mit ELEITY

Als Entwickler tragen unsere großen oder kleinen Leistungen erheblich zu unserem beruflichen Wachstum bei. Diese Erfolge bleiben jedoch oft unbemerkt und sind inmitten anderer Aufgaben verloren. Diese "unsichtbare Arbeit", wie von Ryan T. Harter beschrieben in seinem Vortrag "Anerkennung für unsichtbare Arbeiten", ist leicht zu vergessen, insbesondere bei Performance -Bewertungen.

Der Artikel von Julia Evans zur Aufrechterhaltung eines "Brag -Dokuments" bietet eine Lösung. Ein Brag -Dokument ist lediglich eine Aufzeichnung Ihrer wertvollen Beiträge, einschließlich Projektbeteiligung, Unterstützung für Kollegen, Prozessverbesserungen, Präsentationen, Workshops, Lernerfahrungen, außerschulische Aktivitäten (Blogging, persönliche Projekte), Auszeichnungen und berufliche Fortschritte.

Während verschiedene Tools zum Erstellen von Brag -Dokumenten wie Bragdocs.com vorhanden sind, bietet das Erstellen Ihrer eigenen Anpassungen. In diesem Tutorial wird gezeigt, wie man eine bragdocs.com-ähnliche Website mit dem statischen Site Generator ELEGY erstellt. Mit minimalem JavaScript und CSS können Sie Ihr persönliches Brag -Dokument erstellen.

Erstellen Sie Ihr Prahler -Dokument

Das Ergebnis dieses Tutorials spiegelt Bragdocs.com wider und bildet eine Grundlage für Ihr eigenes Brag -Dokument. Hier ist eine Live -Demo erhältlich.

Voraussetzungen

• Node.js (Version 10 oder höher) und NPM.
• Vertrautheit mit HTML und CSS.
• Verständnis von Markdown, Nunjucks Templating und JavaScript (hilfreich, aber nicht streng erforderlich).
• Grundlegende Programmierkonzepte (wenn Aussagen, Schleifen, Zugriff auf JSON -Variablen).

Einführung in elf

ELEDSY ist ein statischer Stättengenerator. Im Gegensatz zur Entwicklung der Full-Stack-Entwicklung ermöglicht es eine flexible Erstellung von Inhalten unter Verwendung verschiedener Vorlagensprachen (HTML, Markdown, Flüssigkeit, Nunjucks usw.). ELFENY verarbeitet diesen Inhalt und generiert statische HTML -Seiten zum einfachen Hosting.

Einrichten Ihres elf -Projekts einrichten

In diesem Tutorial wird das Repository ELEGY-BRAGDOC verwendet.

1. Projekterstellung: Erstellen Sie ein Github-Repository (z. B. eleventy-bragdoc ) mit einem README.md und einer .gitignore Datei für Knoten.

2. Initialisierung: Navigieren Sie in Ihrem Terminal zum eleventy-bragdoc -Verzeichnis und rennen Sie: npm init -y Dies erstellt eine package.json -Datei.

3. ELEGY INSTALTION: npm install @11ty/eleventy

4. Konfiguration ( package.json ): Aktualisieren Sie den Abschnitt scripts von package.json :

 {
  // ...
  "Skripte": {{
    "Start": "ELEGY -SERVE",
    "bauen": "elfy"
  },
  // ...
}

5. ELEGY -Konfigurationsdatei ( .eleventy.js ): Erstellen Sie eine .eleventy.js -Datei, um Eingangs- und Ausgabeverzeichnisse anzugeben:

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

6. Inhaltserstellung: Erstellen Sie das src -Verzeichnis und fügen Sie eine index.md -Datei hinzu (Ihre erste Seite). ELEDENTEN unterstützt verschiedene Vorlagensprachen; In diesem Beispiel wird Markdown verwendet.

7. Vorlageerstellung: Erstellen Sie das Verzeichnis src/_includes/layouts und fügen Sie eine base.njk -Datei hinzu (Ihre Basisvorlage mit Nunjucks).

8. Verbinden von CSS und Bildern: Erstellen Sie src/css und src/images -Verzeichnisse. Update .eleventy.js :

 module.exports = function (ELEDENTYCONfig) {
  ELEDENTYCONFIG.ADDWATCHTARGET ("./ SRC/CSS/")
  ELEFENTYCONFIG.ADDWATCHTARGET ("./ SRC/Images/")
  ELEDENTYCONFIG.ADDPASSThroughCopy ("./ SRC/CSS/")
  ELEDENTYCONFIG.ADDPASSThroughCopy ("./ SRC/Images/")
  // ...
}

Die verbleibenden Schritte beschreiben die Konstruktion der Bragdoc -Funktionalität, einschließlich Sammlungen, Datenhandhabung, Styling und Bereitstellung. Der vollständige Code und die detaillierten Erläuterungen für jeden Schritt finden Sie im Originaltext.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihr eigenes Bragdoc mit ELEITY. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!