Erstellen eines statischen Site -Generator -Grunzen -Plugins

Sie sind wahrscheinlich mit statischen Site -Generatoren wie Jekyll und Wintersmith vertraut. Dieses Tutorial zeigt, dass ein benutzerdefiniertes Grunzen -Plugin erstellt wird, um eine statische Site aus Vorlagen und Markierendateien zu erstellen, die eine größere Steuerung und Integration in Ihren vorhandenen Workflow bietet.

Schlüsselvorteile der Verwendung von Grunzen:

Dieser Ansatz bietet mehrere Vorteile:

• Anpassung und Integration: Die API- und Plugin -Ökosystem von Grunzen für umfangreiche Anpassungen und nahtlose Integration in andere Tools.
.
• Flexibilität der Workflow: Anpassungsverfahren für Ihre statische Site -Erzeugung auf Ihre genauen Anforderungen, wählen Sie bevorzugte CSS -Vorprozessoren und Bereitstellungsmethoden.
• Modulares Design: Fügen Sie einfach Funktionen durch zusätzliche Grunzplugins (z. B. Sitemap -Erzeugung) hinzu.
.
• Templating -System Agnostizismus:
Passen Sie das Plugin an verschiedene Vorlagenmotoren wie Lenker oder Jade an.

Setup:

Angenommen, Sie haben git, node.js und grunzen-cli installiert, folgen Sie folgenden Schritten:

1. grunt-init installieren npm install -g grunt-init:
2. git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin Installieren Sie die Grunz -Plugin -Vorlage:
3. grunt-mini-static-blog Erstellen Sie ein Projektverzeichnis (z. B.
).
4. grunt-init gruntplugin Initialisieren Sie das Grunz -Plugin:
(Beantworten Sie die Eingabeaufforderungen; Standardeinstellungen sind akzeptabel).
5. npm install Abhängigkeiten installieren:
6. npm install handlebars highlight.js meta-marked moment rss lodash --save-dev zusätzliche Module installieren:

Blog -Beiträge generieren:

Gruntfile.js Die Kernfunktionalität beinhaltet das Generieren individueller Blog -Beiträge. Ändern Sie mini_static_blog, um die folgende Konfiguration für

:

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'
      }
    }
  }
}

hinzuzufügen

templates/post.hbs Erstellen Sie die erforderlichen Vorlagendateien (templates/page.hbs, templates/index.hbs, templates/partials/header.hbs, templates/partials/footer.hbs, templates/404.hbs,

). Diese Vorlagen verwenden Lenker.

Plugin -Code (mini_static_blog.js):

tasks/mini_static_blog.js Die Kernlogik liegt in

. Der Code übernimmt Markdown -Analyse, Vorlagenrendern und Dateischreiben. Dieser Abschnitt enthält die Markdown -Verarbeitung mit Syntax -Hervorhebung, Vorlagenkompilierung, Postgenerierung, Seitengenerierung, RSS -Feed -Erstellung und 404 Seitenerstellung. Der Code verwaltet auch die Pagination für die Indexseiten. (Der vollständige, detaillierte Code ist zu umfangreich, um hier einzuschließen, aber die Struktur und die Schlüsselelemente werden oben beschrieben.)

Weitere Entwicklung:

Dieses Plugin bildet eine Grundlage für einen umfassenderen statischeren Site -Generator. Betrachten Sie diese Verbesserungen:

• Suchfunktionalität (Lunr.js): Integrieren Sie einen Suchindex für eine verbesserte Standortnavigation.
• Kategorie Unterstützung: Unterstützung für die Kategorisierung von Blog -Posts hinzufügen.
• Alternative Vorlagen: andere Vorlagenmotoren erforschen.
• Erweiterte Kommentar: integrieren Sie robustere Kommentarsysteme.

Dieses Tutorial bietet einen soliden Ausgangspunkt für das Erstellen eines benutzerdefinierten statischen Site -Generators mit Grunzen. Denken Sie daran, den vollständigen Code zu konsultieren (verfügbar unter [Link zum Quellcode - ersetzen Sie, falls verfügbar] für eine detaillierte Implementierung.

Das obige ist der detaillierte Inhalt vonErstellen eines statischen Site -Generator -Grunzen -Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!