Créer votre propre bragdoc avec Eleventy

En tant que développeurs, nos réalisations, grandes ou petites, contribuent considérablement à notre croissance professionnelle. Cependant, ces réalisations passent souvent inaperçues, perdues au milieu d'autres tâches. Ce «travail invisible», comme décrit par Ryan T. Harter dans son discours «obtenant le crédit pour un travail invisible», est facilement oublié, en particulier lors des revues de performance.

L'article de Julia Evans sur le maintien d'un "document de vantardise" offre une solution. Un document de vantardise est simplement un enregistrement de vos précieuses contributions, notamment la participation au projet, l'assistance aux collègues, les améliorations des processus, les présentations, les ateliers, les expériences d'apprentissage, les activités parascolaires (blogs, projets personnels), les récompenses et les progrès professionnels.

Bien que divers outils existent pour créer des documents de vantardise, tels que Bragdocs.com, la création de vos propres offres de personnalisation. Ce tutoriel montre comment recréer un site de type Bragdocs.com à l'aide du générateur de sites statique Eleventy. Avec un minimum JavaScript et CSS, vous pouvez créer votre propre document de vantardise personnalisé.

Construire votre document de vantardise

Le résultat de ce tutoriel reflète Bragdocs.com, offrant une base pour votre propre document de vantardise unique. Une démo en direct est disponible ici .

Condition préalable

• Node.js (version 10 ou supérieure) et NPM.
• Familiarité avec HTML et CSS.
• Compréhension de Markdown, Templates Nunjucks et JavaScript (utile, mais pas strictement requise).
• Concepts de programmation de base (si instructions, boucles, accéder aux variables JSON).

Introduction à Eleventy

Eleventy est un générateur de sites statique. Contrairement au développement complet, il permet une création de contenu flexible en utilisant diverses langues de modèles (HTML, Markdown, Liquid, Nunjucks, etc.). Eleventy traite ce contenu, générant des pages HTML statiques pour un hébergement facile.

Configuration de votre projet Eleventy

Ce tutoriel utilise le référentiel Eleventy-Bragdoc .

1. Création de projet: créez un référentiel GitHub (par exemple, eleventy-bragdoc ) avec un fichier README.md et un fichier .gitignore pour nœud.

2. Initialisation: accédez au répertoire eleventy-bragdoc dans votre terminal et exécutez: npm init -y cela crée un fichier package.json .

3. ELEVINE INSTALLATION: Installer Eleventy: npm install @11ty/eleventy

4. Configuration ( package.json ): Mettez à jour la section scripts de package.json :

 {
  // ...
  "scripts": {
    "Start": "Eleventy --serve",
    "Build": "Eleventy"
  },
  // ...
}

5. Fichier de configuration d'Eleventy ( .eleventy.js ): Créez un fichier .eleventy.js pour spécifier les répertoires d'entrée et de sortie:

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

6. Création de contenu: créez le répertoire src et ajoutez un fichier index.md (votre première page). Eleventy prend en charge diverses langues de modèles; Cet exemple utilise Markdown.

7. Création du modèle: créez le répertoire src/_includes/layouts et ajoutez un fichier base.njk (votre modèle de base à l'aide de Nunjucks).

8. Connexion CSS et images: Créez des répertoires src/css et src/images . Mettre à jour .eleventy.js :

 module.exports = fonction (eleventyconfig) {
  eleventyconfig.addwatchtarget ("./ src / css /")
  eleventyconfig.addwatchtarget ("./ src / images /")
  eleventyconfig.addpassthroughcopy ("./ src / css /")
  eleventyconfig.addpassthroughcopy ("./ src / images /")
  // ...
}

Les étapes restantes détaillent la construction de la fonctionnalité Bragdoc, y compris les collections, la manipulation des données, le style et le déploiement. Le code complet et les explications détaillées pour chaque étape sont disponibles dans le texte d'origine.

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!