elastiq

elastiq.ch

https://elastiq.ch/ Website

Inhalte bearbeiten

Website hier bearbeiten

lokale Installation

Dieses Setup verwendet Node und NPM, um die Website statisch aufzubauen.

1. Node und NPM installieren (https://nodejs.org/en/)
2. Verwenden Sie das Terminal/die Befehlszeile, um zu dem Ordner zu navigieren, in dem Sie das Projekt ausgecheckt haben
3. Installieren Sie Deps, indem Sie npm install eingeben
4. Sobald Sie fertig sind, geben Sie npm start mit der Arbeit am Projekt

aufstellen

• packet.js erstellt alles
• posthtml-expressions Dieses Plugin bietet eine Syntax zum Einbinden lokaler Variablen und Ausdrücke in Ihre Vorlagen und erweitert außerdem benutzerdefinierte Tags, um als Hilfsmittel für Bedingungen und Schleifen zu fungieren. Wird hauptsächlich zum Einbinden von Inhalten aus data.yml verwendet. posthtml-load-config stellt sicher, dass .posthtmlrc.js die Daten aus dem YML in den locals von posthtml-expressions landen.
• .browserslistrc Legt die Browserkompatibilität für Autoprefixer fest

 ┌──────────┐    ┌────────────────────┐
│ data.yml │───▶│posthtml-expressions│──┐
└──────────┘    └────────────────────┘  │
┌──────────┐    ┌───────────────────┐   │
│style.scss│───▶│  sass & postCSS   │──┐│  ┌─────────────┐
└──────────┘    └───────────────────┘  ├┴─▶│ /index.html │
┌──────────┐    ┌───────────────────┐  │   └──────┬──────┘
│ main.js  │───▶│     babel.js      │──┤         ┌┘
└──────────┘    └───────────────────┘  │         │
                         ┌──────────┐  │         ▼
                         │  images  │──┘    ┌─────────┐
                         └──────────┘       │ Magic * │
                                            └─────────┘
                                                 │
                                                 │
                                                 │
     * Magic = parcel.js             ┌───────────▼─────────┐
                                     │       ./dist        │
                                    ┌┴─────────────────────┴┐
                                    │      index.html       │
                                    ├───────────────────────┤
                                    │       style.css       │
                                    ├───────────────────────┤
                                    │  *.{jpg|png|gif...}   │
                                    └┬─────────────────────┬┘
                                     └─────────────────────┘

Lizenz

© David Aerne Fühlen Sie sich frei, mit den Quellen zu machen, was auch immer. Bis auf die Illustrationen. Geben Sie sie nicht weiter oder verwenden Sie sie nicht wieder.