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!