elastiq

elastiq.ch

https://elasticq.ch/ ウェブサイト

内容を編集する

ここでウェブサイトを編集

ローカルインストール

このセットアップでは、ノードと NPM を使用して Web サイトを静的に構築します。

1. ノードと npm をインストールします (https://nodejs.org/en/)
2. ターミナル/コマンドラインを使用して、プロジェクトをチェックアウトしたフォルダーに移動します。
3. npm installと入力してdepsをインストールします
4. 完了したら、 npm start

設定

• パーセル.js はすべてを構築します
• posthtml-expressions このプラグインは、テンプレートにローカル変数と式を含めるための構文を提供し、条件分岐とループのヘルパーとして機能するカスタム タグも拡張します。主に data.yml のコンテンツを含めるために使用されます。 posthtml-load-config は、 .posthtmlrc.js によって YML からのデータがposthtml-expressionsからのlocalsに到達することを確認します。
• .browserslistrc オートプレフィクサーのブラウザ互換性を設定します。

 ┌──────────┐    ┌────────────────────┐
│ 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...}   │
                                    └┬─────────────────────┬┘
                                     └─────────────────────┘

ライセンス

© David Aerne ソースに関しては自由に何でもしてください。イラスト以外は。共有したり再利用したりしないでください。