elastiq

elastiq.ch

https://elastiq.ch/网站

编辑内容

在这里编辑网站

本地安装

此设置使用 Node 和 NPM 静态构建网站。

1. 安装节点和 npm (https://nodejs.org/en/)
2. 使用终端/命令行导航到您签出项目的文件夹
3. 通过输入npm install安装 deps
4. 完成后输入npm start处理该项目

设置

• Parcel.js 构建一切
• posthtml-expressions 该插件提供了在模板中包含局部变量和表达式的语法，还扩展了自定义标签以充当条件和循环的帮助程序。主要用于包含data.yml中的内容。 posthtml-load-config 确保 .posthtmlrc.js 来自 YML 的数据最终位于posthtml-expressions的locals数据中。
• .browserslistrc 设置 autoprefixer 的浏览器兼容性

 ┌──────────┐    ┌────────────────────┐
│ 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 随意使用资源。除了插图。不要共享或重复使用它们。