Construire un plugin de grognement de générateur de sites statique

Vous connaissez probablement des générateurs de sites statiques comme Jekyll et Wintersmith. Ce tutoriel montre la construction d'un plugin grogné personnalisé pour générer un site statique à partir de modèles et de fichiers de marque, offrant un plus grand contrôle et intégration avec votre flux de travail existant.

Avantages clés de l'utilisation du grognement:

Cette approche offre plusieurs avantages:

• Personnalisation et intégration: Tirez le parti de l'écosystème de l'API et du plugin de Grunt pour une personnalisation approfondie et une intégration transparente avec d'autres outils.
• Flexibilité du flux de travail: Tapissez votre processus de génération de site statique à vos besoins exacts, en choisissant les préprocesseurs CSS préférés et les méthodes de déploiement.
• Conception modulaire: Ajouter facilement des fonctionnalités via des plugins de grognement supplémentaires (par exemple, génération de sitemap).
• Templage du système Agnosticisme: Adaptez le plugin à différents moteurs de modèles comme le guidon ou le jade.

Configuration:

En supposant que vous avez installé Git, Node.js et Grunt-Cli, suivez ces étapes:

1. installer grunt-init: npm install -g grunt-init
2. Installez le modèle de plugin grogn: git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
3. Créer un répertoire de projet (par exemple, grunt-mini-static-blog).
4. Initialiser le plugin grogn: grunt-init gruntplugin (Répondez aux invites; les paramètres sont acceptables).
5. Installez les dépendances: npm install
6. Installez des modules supplémentaires: npm install handlebars highlight.js meta-marked moment rss lodash --save-dev

Génération d'articles de blog:

La fonctionnalité de base implique la génération de articles de blog individuels. Modifier Gruntfile.js pour inclure la configuration suivante pour mini_static_blog:

<code class="language-javascript">mini_static_blog: {
  default: {
    options: {
      data: {
        author: "Your Name",
        url: "http://yourwebsite.com",
        disqus: "", // Disqus username (optional)
        title: 'My Blog',
        description: 'My Blog Description'
      },
      template: {
        post: 'templates/post.hbs',
        page: 'templates/page.hbs',
        index: 'templates/index.hbs',
        header: 'templates/partials/header.hbs',
        footer: 'templates/partials/footer.hbs',
        notfound: 'templates/404.hbs'
      },
      src: {
        posts: 'content/posts/',
        pages: 'content/pages/'
      },
      www: {
        dest: 'build'
      }
    }
  }
}</code>

Créez les fichiers de modèle nécessaires (templates/post.hbs, templates/page.hbs, templates/index.hbs, templates/partials/header.hbs, templates/partials/footer.hbs, templates/404.hbs). Ces modèles utilisent le guidon.

Code de plugin (mini_statique_blog.js):

La logique principale réside dans tasks/mini_static_blog.js. Le code gère l'analyse de marque, le rendu de modèle et la rédaction de fichiers. Cette section comprend le traitement Markdown avec la mise en évidence de la syntaxe, la compilation de modèles, la génération de post, la génération de pages, la création de flux RSS et la création de pages 404. Le code gère également la pagination des pages d'index. (Le code complet et détaillé est trop étendu pour inclure ici, mais la structure et les éléments clés sont décrits ci-dessus.)

Développement supplémentaire:

Ce plugin constitue une base pour un générateur de sites statique plus complet. Considérez ces améliorations:

• Fonctionnalité de recherche (lunr.js): Intégrer un index de recherche pour une navigation améliorée du site.
• Prise en charge de la catégorie: Ajouter un support pour catégoriser les articles de blog.
• Templage alternatif: Explorez d'autres moteurs de modèles.
• Commentaires avancés: Intégrer des systèmes de commentaires plus robustes.

Ce tutoriel fournit un point de départ solide pour créer un générateur de sites statique personnalisé à l'aide de grognement. N'oubliez pas de consulter le code complet (disponible sur [lien vers le code source - remplacer par un lien réel si disponible]) pour une implémentation détaillée.

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!