prevjs Download - Download prevjs Quellcodes

prevjs

Andere Kategorien

1.0.0

Herunterladen

Logo

Um

PrevJS ist ein supereinfacher statischer Website-Generator, der auf EJS-Vorlagen aufbaut. Das Hauptziel besteht darin, statische Websites mit viel weniger Aufwand zu erstellen, zu optimieren und bereitzustellen.

Merkmale

?‍Erstellen – Entwickelt für Frontend-Benutzer, die in einfachem HTML, JS und CSS programmieren möchten. Das bedeutet auch, dass Sie Ihre vorhandene statische Website problemlos in eine PrevJS-Website umwandeln können
⏱ Build – Für SEO optimierter Export mit Sitemap-Generierung, Seitenvorabruf, WebP-Konvertierung und Minimierung. Erreicht 99 Punkte im Google Pagespeed-Tool.
? Bereitstellen – Hosten Sie Ihr CDN mit einem Klick. Sofort einsatzbereite Unterstützung für AWS CloudFront
? Dynamische Vorlagen – Generieren Sie statische Webseiten dynamisch aus JSON-Daten mit einer einzigen Vorlage. Nützlich für Blog, Dokument
? Dynamische Vorlagenvorschau ohne Export. Geben Sie einfach den dynamischen Pfad in Ihren Browser ein und PrevJS lädt automatisch die Seite mit den zugehörigen Daten
? PrevJS-Sites können Teil Ihrer bestehenden Website sein. Da eine PrevJS-Site fast keine Abhängigkeiten oder Knotenmodule hat. Es kann Teil Ihrer bestehenden Website sein, auch wenn es sich um eine JSP- oder PHP-Site handelt.
? Live-Vorschau der Website – kein Neuladen der Webseiten nach der Bearbeitung
? Zukunftssicher : Der Code ist sowohl bei der Entwicklung als auch beim Export webnativ, da keine besonderen Modifikationen oder Bibliotheken (außer EJS) erforderlich sind. Das bedeutet, dass Ihr Code auch in dem unwahrscheinlichen Fall, dass PrevJS nicht gepflegt wird, nicht kaputt geht wie bei anderen nicht gepflegten Site-Generatoren.
Ⓜ️ Unterstützt nativ Markdown-Websites . Konvertieren Sie eine Website mit .md-Dateien zusammen mit Stil und Skript in HTML. Beispiel: https://prevjs.com

Voraussetzungen

Software

Installieren Sie nodejs und npm von http://nodejs.org/.
(Optional – Alternative zu NPM) Yarn-Paketmanager, installieren Sie https://yarnpkg.com/getting-started/install

Wissen

Erforderlich: Einfaches HTML, CSS für die Webseitengestaltung erforderlich
Optional: Kenntnisse der https://ejs.co/-Vorlagen sind ein großes Plus
Optional: Jquery, Bootstrap würde sehr helfen
Es sind keine Kenntnisse über fortgeschrittene Anwendungsframeworks wie React erforderlich.

Wie zu verwenden

Schritt 1: Installieren Sie den CLI-Befehl prevjs aus der NPM-Registrierung

npm install @produle/prevjs -g

(Optional – Alternative zu NPM) Yarn-Befehl: yarn --global add @produle/prevjs

Schritt 2: So erstellen Sie eine sehr einfache PrevJS-Site (optional)

prevjs --create /path-to-where-my-website-folder-should-be/

Schritt 3: Vorschau Ihrer Website auf dem lokalen Computer anzeigen

prevjs --run /path-to-my-website-folder/recipe.json

Schritt 4: Optimierung und Export Ihrer Website für die Produktion

prevjs --export /path-to-my-website-folder/recipe.json

Schritt 5: So stellen Sie Ihre exportierte Website in der Produktions-AWS-Cloudfront bereit

prevjs --deploy /path-to-my-website-folder/recipe.json (Erfordert die Einrichtung des aws-Befehls)

Um lokal verfügbare Website-Rezepte aufzulisten

prevjs --list-recipes local

Um ein bestimmtes Rezept zu installieren

prevjs --create business1 /path-to-my-site/recipe.json

Beispiel für die Struktur einer PrevJS-Website

 website/recipe.json => Stores configuration of this website for PrevJS
website/index.ejs => Index page of the website
website/about/index.ejs => Example route of another page in site

website/DRAFTS => Any page that should not be deployed, are placed inside this folder
website/DRAFTS/working.ejs => Example drafts page

website/PARTIALS => All re-used components and sections of website used in multiple pages
website/PARTIALS/header.ejs => Example partial for header in all pages

website/TEMPLATES => Contains templates for dynamically generating pages from json data
website/TEMPLATES/example-template/template.ejs => HTML page with data variables of an example template
website/TEMPLATES/example-template/template.json => Contains array of page data each with unique dynamic route

website/STATIC => All static files like images,js and css are stored here
website/STATIC/css/external => All third party css files
website/STATIC/css/internal => All internal styles written for this site
website/STATIC/js/external => All third party JS files and libraries
website/STATIC/js/internal => All internal js code written for this site
website/STATIC/images => Images used in this website, can be nested like webpages
website/STATIC/favicon.ico => Website Favicon

Beispieldatei „recipe.json“.

 {
  "recipe_ver": "0.0.1",
  "name": "business-website",
  "description": "Business - Product site",
  "author": "Business Inc",
  "production_url": "https://business.com",
  
   "optimize": {
    "webp": "true",
    "minify_js": "true",
    "minify_css": "true",
    "minify_html": "true"
  },
  "deploy": {
    "domain": "https://business.com",
    "type": "aws",
    "aws_bucket": "",
    "aws_cfdistributions": ""
  }
}

Dynamische Seitengenerierung mit TEMPLATES

Dieser TEMPLATES-Ordner wird zum dynamischen Generieren von Seiten mit Daten verwendet. Daten können entweder inline innerhalb der template.json oder von einer Remote-JSON-URL sein. Nützlich, wenn sich das Webseitendesign nicht ändert, sondern nur die Daten für jede Seite unterschiedlich sind.

Jeder Vorlagenordner in TEMPLATES sollte die folgenden Dateien mit diesen spezifischen Namen enthalten:

template.ejs = Enthält die HTML-Struktur der Vorlage, gefüllt mit Datenvariablen

template.json = Enthält ein Array von Seitendaten, die zum Generieren von Seiten mithilfe von template.ejs verwendet werden

Beispiel template.json

 {
  "generate": true,
  "pages": [
    {
      "path": "doc/article1",
      "source": "inline",
      "data": {
        "title": "Doc Title 1",
        "post": "Post article 1"
      }
    },
    {
      "path": "doc/article2",
      "source": "jsonurl",
      "dataurl": "https://recipes.prevjs.com/examples/basic/article2.json"
    
    }
  ]
}

Tipps

Um absolute Pfade zu Assets in den EJS-Dateien einzurichten, verwenden Sie diese Variable <%= siteobj.urlpath => Sie enthält einen abschließenden Schrägstrich und erkennt automatisch zwischen lokalen und Produktionsumgebungen.