蜡-cli — Rust 应用程序 // Lib.rs • Rust 包仓库

13 个版本

0.2.1	2022 年 11 月 10 日
0.2.0	2022 年 11 月 6 日
0.1.10	2022 年 11 月 5 日

#2887 in 解析实现

每月 131 次下载

MIT 许可证

28KB
459 行

蜡

_{具有组件的 HTML}

安装

使用 cargo 安装蜡 cli

$ cargo install wax-cli

用法

^{创建新项目}

$ wax create <NAME>

^构建项目

$ wax build <PATH>

项目结构

./<my-wax-site>/* 
  │
  ├─ .wax       - # Wax file cache
  ├─ dist       - # Wax build output
  │
  ├─ src/*      - # Your codebase (html, css, and js)
  │  ├─ lib/       - # Html wax components
  │  ├─ pages/     - # Your html pages
  │  └─ ...
  │
  └─ wax.toml   - # Wax config file

静态组件

蜡组件是 HTML 的扩展。

^{示例：组件文件}

~ src/lib/my-component.html

<p>
  Hello from my component ! :D
</p>

使用 <wax!> 标签导入/包括蜡组件。
例如。 <wax! … src="[path]" … >

^{示例：导入}

~ src/routes/index.html

<body>
  …
  <wax! src="../lib/my-component.html" />
  …
</body>

动态组件 *

使用 HTML 属性传递组件参数。
例如。 <wax! … [key]="[value]" … >

^{示例：导入}

~ src/routes/index.html

<body>
  …
  <wax! src="../lib/my-component.html" title="My dynamic title" />
  …
</body>

每个组件都必须使用 <params! … [key] … > 声明其参数。
可以使用 { [key] } 将参数插入到 HTML 中。

^{示例：组件文件}

~ src/lib/my-component.html

<params! title>

<h1>
  { title }
</h1>

配置

^{* ? : 表示它是可选的}

# wax.toml

[website]
pages = "RelativePath"  # Path to the directory containing your index.html.

[build]
minify = "Boolean?"     # If enabled, will minify the collapsed HTML files.

测试

^{* 使用 ./assets 中的测试项目}

$ cargo run build ./assets

依赖项

~15–29MB
~381K SLoC