|
| 1 | +Ejs 备忘清单 |
| 2 | +==== |
| 3 | + |
| 4 | +[](https://www.npmjs.com/package/ejs) |
| 5 | +[](https://www.npmjs.com/package/ejs) |
| 6 | +[](https://github.com/mde/ejs/network/dependents) |
| 7 | +[](https://github.com/mde/ejs) |
| 8 | + |
| 9 | +EJS（嵌入式 JavaScript）是一种简单的模板语言，可让您使用纯 JavaScript 生成 HTML 标记 |
| 10 | +<!--rehype:style=padding-top: 12px;--> |
| 11 | + |
| 12 | +入门 |
| 13 | +---- |
| 14 | + |
| 15 | +### Hello world |
| 16 | + |
| 17 | +#### 安装 |
| 18 | + |
| 19 | +```shell |
| 20 | +$ npm install ejs |
| 21 | +``` |
| 22 | + |
| 23 | +#### hello.ejs |
| 24 | + |
| 25 | +```ejs |
| 26 | +<% if (user.email) { %> |
| 27 | + <h1><%= user.email %></h1> |
| 28 | +<% } %> |
| 29 | +``` |
| 30 | + |
| 31 | +#### 命令 CLI |
| 32 | + |
| 33 | +```shell |
| 34 | +$ ejs hello.ejs -o hello.html |
| 35 | +``` |
| 36 | + |
| 37 | +### 使用数据渲染 |
| 38 | + |
| 39 | +```js |
| 40 | +let ejs = require('ejs'); |
| 41 | + |
| 42 | +let people = ['geddy', 'neil', 'alex']; |
| 43 | +let tpl = '<%= people.join(", "); %>'; |
| 44 | + |
| 45 | +let html = ejs.render(tpl, { |
| 46 | + people: people |
| 47 | +}); |
| 48 | +console.log(html); |
| 49 | +``` |
| 50 | + |
| 51 | +向 `EJS` 传递模板字符串和一些数据 |
| 52 | + |
| 53 | +### 浏览器支持 |
| 54 | + |
| 55 | +```html |
| 56 | +<script src="ejs.js"></script> |
| 57 | +<script> |
| 58 | + let people = ['geddy', 'neil', 'alex']; |
| 59 | + let html = ejs.render( |
| 60 | + '<%= people.join(", "); %>', |
| 61 | + { people: people } |
| 62 | + ); |
| 63 | +</script> |
| 64 | +``` |
| 65 | + |
| 66 | +在脚本标签中使用 `ejs` |
| 67 | + |
| 68 | +### 变量 |
| 69 | + |
| 70 | +| | | |
| 71 | +|--------------|----------------------------------| |
| 72 | +| `<%= var %>` | 打印变量的值 | |
| 73 | +| `<%- var %>` | 打印时不进行 HTML 转义 | |
| 74 | + |
| 75 | +### CLI |
| 76 | + |
| 77 | +渲染并指定输出文件 |
| 78 | + |
| 79 | +```shell |
| 80 | +$ ejs hello.ejs -o hello.html |
| 81 | +``` |
| 82 | + |
| 83 | +为其提供模板文件和数据文件 |
| 84 | + |
| 85 | +```shell |
| 86 | +$ ejs hello.ejs -f data.json -o hello.html |
| 87 | +``` |
| 88 | + |
| 89 | +### 注释 |
| 90 | + |
| 91 | +```ejs |
| 92 | +<%# 该行将表示一条注释 %> |
| 93 | +``` |
| 94 | + |
| 95 | +-------- |
| 96 | + |
| 97 | +```ejs |
| 98 | +<%# 这是一个多行 EJS 注释。 |
| 99 | + 它可以跨越多行， |
| 100 | + 但不会显示 |
| 101 | + 在最终的 HTML 输出中。 |
| 102 | +%> |
| 103 | +``` |
| 104 | + |
| 105 | +### 方法 |
| 106 | + |
| 107 | +```js |
| 108 | +let ejs = require('ejs'); |
| 109 | +let template = ejs.compile(str, options); |
| 110 | + |
| 111 | +template(data); |
| 112 | +// => 渲染的 HTML 字符串 |
| 113 | + |
| 114 | +ejs.render(str, data, options); |
| 115 | +// => 渲染的 HTML 字符串 |
| 116 | + |
| 117 | +ejs.renderFile(filename, data, options, |
| 118 | + function(err, str){ |
| 119 | + // str => 渲染的 HTML 字符串 |
| 120 | + } |
| 121 | +); |
| 122 | +``` |
| 123 | + |
| 124 | +### 包括文件 |
| 125 | +<!--rehype:wrap-class=col-span-2--> |
| 126 | + |
| 127 | +```ejs |
| 128 | +<%- include('partials/navbar.ejs') %> |
| 129 | +``` |
| 130 | + |
| 131 | +包含带有数据的模板： |
| 132 | + |
| 133 | +```ejs |
| 134 | +<% include('header', { title: 'My Page' }) %> |
| 135 | +``` |
| 136 | + |
| 137 | +-------- |
| 138 | + |
| 139 | +```ejs |
| 140 | +<ul> |
| 141 | + <% users.forEach(function(user){ %> |
| 142 | + <%- include('item', {user: user}); %> |
| 143 | + <% }); %> |
| 144 | +</ul> |
| 145 | +``` |
| 146 | + |
| 147 | +要包含模板，需要文件名选项，路径是相对的 |
| 148 | + |
| 149 | +文档 |
| 150 | +-------- |
| 151 | + |
| 152 | +### 条件句 |
| 153 | + |
| 154 | +```ejs |
| 155 | +<% if (userLoggedIn) { %> |
| 156 | + <p>Welcome, <%= username %>!</p> |
| 157 | +<% } else { %> |
| 158 | + <p>Please log in.</p> |
| 159 | +<% } %> |
| 160 | +``` |
| 161 | + |
| 162 | +### 使用循环 |
| 163 | + |
| 164 | +```ejs |
| 165 | +<% if (userLoggedIn) { %> |
| 166 | + <p>Welcome, <%= username %>!</p> |
| 167 | +<% } else { %> |
| 168 | + <p>Please log in.</p> |
| 169 | +<% } %> |
| 170 | +``` |
| 171 | + |
| 172 | +### 自定义分隔符 |
| 173 | +<!--rehype:wrap-class=row-span-2--> |
| 174 | + |
| 175 | +```js |
| 176 | +let ejs = require('ejs'), |
| 177 | + users = ['geddy', 'neil', 'alex']; |
| 178 | + |
| 179 | +// 只需一个模板 |
| 180 | +ejs.render('<?= users.join(" | "); ?>', |
| 181 | + {users: users}, |
| 182 | + {delimiter: '?'}); |
| 183 | +// => 'geddy | neil | alex' |
| 184 | + |
| 185 | +// 或全局范围内 |
| 186 | +ejs.delimiter = '$'; |
| 187 | +ejs.render('<$= users.join(" | "); $>', |
| 188 | + {users: users}); |
| 189 | +// => 'geddy | neil | alex' |
| 190 | +``` |
| 191 | + |
| 192 | +### 缓存 |
| 193 | + |
| 194 | +```js |
| 195 | +let ejs = require('ejs'), |
| 196 | +LRU = require('lru-cache'); |
| 197 | + |
| 198 | +// LRU 缓存具有 100 项限制 |
| 199 | +ejs.cache = LRU(100); |
| 200 | +``` |
| 201 | + |
| 202 | +### 布局 |
| 203 | + |
| 204 | +```ejs |
| 205 | +<%- include('header'); -%> |
| 206 | +<h1> Title </h1> |
| 207 | +<p> |
| 208 | + My page |
| 209 | +</p> |
| 210 | +<%- include('footer'); -%> |
| 211 | +``` |
| 212 | + |
| 213 | +### 自定义文件加载器 |
| 214 | +<!--rehype:wrap-class=col-span-2--> |
| 215 | + |
| 216 | +```js |
| 217 | +let ejs = require('ejs'); |
| 218 | +let myFileLoader = function (filePath) { |
| 219 | + return 'myFileLoader: ' + fs.readFileSync(filePath); |
| 220 | +}; |
| 221 | + |
| 222 | +ejs.fileLoader = myFileLoader; |
| 223 | +``` |
| 224 | + |
| 225 | +客户端支持 |
| 226 | +----- |
| 227 | +<!--rehype:body-class=cols-2--> |
| 228 | + |
| 229 | +### 例子 |
| 230 | + |
| 231 | +```html |
| 232 | +<div id="output"></div> |
| 233 | +<script src="ejs.min.js"></script> |
| 234 | +<script> |
| 235 | + let people = ['geddy', 'neil', 'alex'], |
| 236 | + html = ejs.render('<%= people.join(", "); %>', {people: people}); |
| 237 | + // With jQuery: |
| 238 | + $('#output').html(html); |
| 239 | + // Vanilla JS: |
| 240 | + document.getElementById('output').innerHTML = html; |
| 241 | +</script> |
| 242 | +``` |
| 243 | + |
| 244 | +### 注意事项 |
| 245 | + |
| 246 | +```js |
| 247 | +let str = "Hello <%= include('file', {person: 'John'}); %>", |
| 248 | + fn = ejs.compile(str, {client: true}); |
| 249 | + |
| 250 | +fn(data, null, function(path, d){ // include callback |
| 251 | + // path -> 'file' |
| 252 | + // d -> {person: 'John'} |
| 253 | + // Put your code here |
| 254 | + // Return the contents of file as a string |
| 255 | +}); // returns rendered string |
| 256 | +``` |
| 257 | + |
| 258 | +## 选项 |
| 259 | +<!--rehype:body-class=cols-1--> |
| 260 | + |
| 261 | +### 选项列表 |
| 262 | + |
| 263 | +选项 | 描述 |
| 264 | +:---|--- |
| 265 | +`cache` | 编译后的函数被缓存，需要文件名 |
| 266 | +`filename` | 由缓存用于关键缓存，并用于包含 |
| 267 | +`root` | 使用绝对路径（例如 `/file.ejs`）设置包含项目的根目录。 可以是一个数组来尝试解析来自多个目录的包含。 |
| 268 | +`views` | 解析包含相对路径时要使用的路径数组。 |
| 269 | +`context` | 函数执行上下文 |
| 270 | +`compileDebug` | 当 `false` 时，不编译任何调试工具 |
| 271 | +`client` | 返回独立编译的函数 |
| 272 | +`delimiter` | 用于内部分隔符的字符，默认为 `%` |
| 273 | +`openDelimiter` | 用于打开分隔符的字符，默认为 `<` |
| 274 | +`closeDelimiter` | 用于结束分隔符的字符，默认为 `>` |
| 275 | +`debug` | 输出生成的函数体 |
| 276 | +`strict` | 当设置为 `true` 时，生成的函数处于严格模式 |
| 277 | +`_with` | 是否使用 `with() {}` 构造。 如果为 `false`，则局部变量将存储在局部变量对象中。 （暗示`--strict`） |
| 278 | +`localsName` | 不使用时用于存储局部变量的对象的名称 默认为局部变量 |
| 279 | +`rmWhitespace` | 删除所有可安全删除的空格，包括前导和尾随空格。 它还为所有 `scriptlet` 标记启用了更安全版本的 `-%>` 行吸收（它不会在行中间去除新的标记行） |
| 280 | +`escape` | 与 `<%=` 构造一起使用的转义函数。 它用于渲染，并在生成客户端函数时进行 `.toString()` 处理。 （默认情况下转义 XML） |
| 281 | +`outputFunctionName` | 设置为字符串（例如 `echo` 或 `print`），以便函数在 `scriptlet` 标签内打印输出 |
| 282 | +`async` | 当 `true` 时，EJS 将使用异步函数进行渲染。 （取决于 `JS` 运行时中的 `async`/`await` 支持 |
| 283 | + |
| 284 | +## 标签 |
| 285 | +<!--rehype:body-class=cols-1--> |
| 286 | + |
| 287 | +### 标签列表 |
| 288 | + |
| 289 | +标签 | 描述 |
| 290 | +:---|--- |
| 291 | +`<%` | 'Scriptlet' 标签，用于控制流，无输出 |
| 292 | +`<%_` | “Whitespace Slurping”Scriptlet 标签，删除其前面的所有空格 |
| 293 | +`<%=` | 将值输出到模板中（HTML 转义） |
| 294 | +`<%-` | 将未转义的值输出到模板中 |
| 295 | +`<%#` | 注释标签，不执行，不输出 |
| 296 | +`<%%` | 输出文字 `<%` |
| 297 | +`%>` | 普通结束标签 |
| 298 | +`-%>` | 修剪模式（'newline slurp'）标签，修剪换行符后的内容 |
| 299 | +`_%>` | “Whitespace Slurping”结束标签，删除其后的所有空格 |
| 300 | + |
| 301 | +## Cli |
| 302 | +<!--rehype:body-class=cols-1--> |
| 303 | + |
| 304 | +### Cli 列表 |
| 305 | + |
| 306 | +选项 | 描述 |
| 307 | +:---|--- |
| 308 | +`cache` | 编译后的函数被缓存，需要文件名 |
| 309 | +`-o / --output-file FILE` | 将渲染的输出写入 FILE 而不是 stdout。 |
| 310 | +`-f / --data-file FILE` | 必须是 JSON 格式。 使用来自 FILE 的解析输入作为渲染数据。 |
| 311 | +`-i / --data-input STRING` | 必须采用 JSON 格式和 URI 编码。 使用来自 STRING 的解析输入作为渲染数据。 |
| 312 | +`-m / --delimiter CHARACTER` | 使用带有尖括号的 CHARACTER 来表示打开/关闭（默认为 %）。 |
| 313 | +`-p / --open-delimiter CHARACTER` | 使用 CHARACTER 而不是左尖括号来打开。 |
| 314 | +`-c / --close-delimiter CHARACTER` | 使用 CHARACTER 而不是右尖括号来结束。 |
| 315 | +`-s / --strict` | 当设置为 `true` 时，生成的函数处于严格模式 |
| 316 | +`-n / --no-with` | 对变量使用 `locals` 对象，而不是使用 `with`（隐含--strict）。 |
| 317 | +`-l / --locals-name` | 不使用“with”时用于存储局部变量的对象的名称。 |
| 318 | +`-w / --rm-whitespace` | 删除所有可安全删除的空格，包括前导和尾随空格。 |
| 319 | +`-d / --debug` | 输出生成的函数体 |
| 320 | +`-h / --help` | 显示此帮助消息。 |
| 321 | +`-V/v / --version` | 显示 EJS 版本。 |
| 322 | + |
| 323 | +使用示例： |
| 324 | + |
| 325 | +```bash |
| 326 | +$ ejs -p [ -c ] ./template_file.ejs -o ./output.html |
| 327 | +$ ejs ./test/fixtures/user.ejs name=Lerxst |
| 328 | +$ ejs -n -l _ ./some_template.ejs -f ./data_file.json |
| 329 | +``` |
0 commit comments