feat: add docs/ejs.md

This commit is contained in:
jaywcjlove 2023-08-17 00:07:22 +08:00
parent fbd3a4fffa
commit 71fa3b3c26
3 changed files with 339 additions and 4 deletions

View File

@ -46,12 +46,11 @@ Quick Reference
[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223);--> [Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223);-->
[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153);&class=tag&data-lang=Docker--> [Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153);&class=tag&data-lang=Docker-->
[Django](./docs/django.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python--> [Django](./docs/django.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->
[Ejs](./docs/ejs.md)<!--rehype:style=background: rgb(169 30 80);&class=contributing tag&data-lang=JavaScript-->
[Flask](./docs/flask.md)<!--rehype:style=background: rgb(210 168 255);&class=contributing tag&data-lang=Python--> [Flask](./docs/flask.md)<!--rehype:style=background: rgb(210 168 255);&class=contributing tag&data-lang=Python-->
[Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart--> [Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->
[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193);--> [Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193);-->
[GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146);--> [GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146);-->
[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60);-->
[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60);-->
[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么?--> [Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么?-->
[Julia](./docs/julia.md)<!--rehype:style=background: rgb(26 188 156);&class=contributing&data-info=👆看看还缺点儿什么?--> [Julia](./docs/julia.md)<!--rehype:style=background: rgb(26 188 156);&class=contributing&data-info=👆看看还缺点儿什么?-->
[Kotlin](./docs/kotlin.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么?--> [Kotlin](./docs/kotlin.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么?-->
@ -67,12 +66,18 @@ Quick Reference
[Scala](./docs/scala.md)<!--rehype:style=background: rgb(34 82 94);--> [Scala](./docs/scala.md)<!--rehype:style=background: rgb(34 82 94);-->
[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57);--> [Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57);-->
[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247);&class=tag&data-lang=swift--> [SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247);&class=tag&data-lang=swift-->
[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132);-->
[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230);-->
[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);--> [Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);-->
[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么?--> [Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么?-->
<!--rehype:class=home-card--> <!--rehype:class=home-card-->
## 配置
[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60);-->
[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60);-->
[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132);-->
[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230);-->
<!--rehype:class=home-card-->
## 前端 ## 前端
[前端导航](./docs/feds.md)<!--rehype:style=background: rgb(35 115 205);&class=tag&data-lang=导航--> [前端导航](./docs/feds.md)<!--rehype:style=background: rgb(35 115 205);&class=tag&data-lang=导航-->

1
assets/ejs.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em"><path d="M384.28144981 252.31647403v112.80048696L145.20918813 474.54291854 384.28144981 587.88378965v110.53930269L21.43812835 526.28761486v-100.68590819l362.84332146-173.28714866zm246.90017394 102.1173521c0-28.82050958-26.50183907-46.93105778-47.58641778-32.52080298-21.0845787 14.41025479-21.0845787 50.63135118 0 65.04352199 21.08649586 14.41025479 47.58641778-3.70220942 47.58641778-32.52271901zm-86.46152988 88.55216697c-71.49939257-39.1951269-71.49939257-137.71758023 0-176.91462428 71.50130859-39.1951269 161.36227954 10.06609977 161.36227954 88.45827072s-89.86096981 127.65339648-161.36036352 88.45635356zm382.94102812 229.81099065c0-28.82050958-26.50183907-46.93105778-47.58641778-32.52080298-21.0845787 14.41025479-21.0845787 50.63135118 0 65.04160597 21.08649586 14.41025479 47.58641778-3.69837625 47.58641778-32.51888697zm-86.46152988 88.55216583c-71.49939257-39.1951269-71.49939257-137.71758023 0-176.91462315S1002.56187165 594.50062621 1002.56187165 672.89279602s-89.86096981 127.65339648-161.36036352 88.45635356zm-219.70656598 13.75681195 372.53958429-526.21192306H866.73755363l-378.74825784 526.21192306h133.50181432z"></path></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

329
docs/ejs.md Normal file
View File

@ -0,0 +1,329 @@
Ejs 备忘清单
====
[![NPM version](https://img.shields.io/npm/v/ejs.svg?style=flat)](https://www.npmjs.com/package/ejs)
[![Downloads](https://img.shields.io/npm/dm/ejs.svg?style=flat)](https://www.npmjs.com/package/ejs)
[![Repo Dependents](https://badgen.net/github/dependents-repo/mde/ejs)](https://github.com/mde/ejs/network/dependents)
[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/mde/ejs)
EJS嵌入式 JavaScript是一种简单的模板语言可让您使用纯 JavaScript 生成 HTML 标记
<!--rehype:style=padding-top: 12px;-->
入门
----
### Hello world
#### 安装
```shell
$ npm install ejs
```
#### hello.ejs
```ejs
<% if (user.email) { %>
<h1><%= user.email %></h1>
<% } %>
```
#### 命令 CLI
```shell
$ ejs hello.ejs -o hello.html
```
### 使用数据渲染
```js
let ejs = require('ejs');
let people = ['geddy', 'neil', 'alex'];
let tpl = '<%= people.join(", "); %>';
let html = ejs.render(tpl, {
people: people
});
console.log(html);
```
`EJS` 传递模板字符串和一些数据
### 浏览器支持
```html
<script src="ejs.js"></script>
<script>
let people = ['geddy', 'neil', 'alex'];
let html = ejs.render(
'<%= people.join(", "); %>',
{ people: people }
);
</script>
```
在脚本标签中使用 `ejs`
### 变量
| | |
|--------------|----------------------------------|
| `<%= var %>` | 打印变量的值 |
| `<%- var %>` | 打印时不进行 HTML 转义 |
### CLI
渲染并指定输出文件
```shell
$ ejs hello.ejs -o hello.html
```
为其提供模板文件和数据文件
```shell
$ ejs hello.ejs -f data.json -o hello.html
```
### 注释
```ejs
<%# 该行将表示一条注释 %>
```
--------
```ejs
<%# 这是一个多行 EJS 注释。
它可以跨越多行,
但不会显示
在最终的 HTML 输出中。
%>
```
### 方法
```js
let ejs = require('ejs');
let template = ejs.compile(str, options);
template(data);
// => 渲染的 HTML 字符串
ejs.render(str, data, options);
// => 渲染的 HTML 字符串
ejs.renderFile(filename, data, options,
function(err, str){
// str => 渲染的 HTML 字符串
}
);
```
### 包括文件
<!--rehype:wrap-class=col-span-2-->
```ejs
<%- include('partials/navbar.ejs') %>
```
包含带有数据的模板:
```ejs
<% include('header', { title: 'My Page' }) %>
```
--------
```ejs
<ul>
<% users.forEach(function(user){ %>
<%- include('item', {user: user}); %>
<% }); %>
</ul>
```
要包含模板,需要文件名选项,路径是相对的
文档
--------
### 条件句
```ejs
<% if (userLoggedIn) { %>
<p>Welcome, <%= username %>!</p>
<% } else { %>
<p>Please log in.</p>
<% } %>
```
### 使用循环
```ejs
<% if (userLoggedIn) { %>
<p>Welcome, <%= username %>!</p>
<% } else { %>
<p>Please log in.</p>
<% } %>
```
### 自定义分隔符
<!--rehype:wrap-class=row-span-2-->
```js
let ejs = require('ejs'),
users = ['geddy', 'neil', 'alex'];
// 只需一个模板
ejs.render('<?= users.join(" | "); ?>',
{users: users},
{delimiter: '?'});
// => 'geddy | neil | alex'
// 或全局范围内
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>',
{users: users});
// => 'geddy | neil | alex'
```
### 缓存
```js
let ejs = require('ejs'),
LRU = require('lru-cache');
// LRU 缓存具有 100 项限制
ejs.cache = LRU(100);
```
### 布局
```ejs
<%- include('header'); -%>
<h1> Title </h1>
<p>
My page
</p>
<%- include('footer'); -%>
```
### 自定义文件加载器
<!--rehype:wrap-class=col-span-2-->
```js
let ejs = require('ejs');
let myFileLoader = function (filePath) {
return 'myFileLoader: ' + fs.readFileSync(filePath);
};
ejs.fileLoader = myFileLoader;
```
客户端支持
-----
<!--rehype:body-class=cols-2-->
### 例子
```html
<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
let people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', {people: people});
// With jQuery:
$('#output').html(html);
// Vanilla JS:
document.getElementById('output').innerHTML = html;
</script>
```
### 注意事项
```js
let str = "Hello <%= include('file', {person: 'John'}); %>",
fn = ejs.compile(str, {client: true});
fn(data, null, function(path, d){ // include callback
// path -> 'file'
// d -> {person: 'John'}
// Put your code here
// Return the contents of file as a string
}); // returns rendered string
```
## 选项
<!--rehype:body-class=cols-1-->
### 选项列表
选项 | 描述
:---|---
`cache` | 编译后的函数被缓存,需要文件名
`filename` | 由缓存用于关键缓存,并用于包含
`root` | 使用绝对路径(例如 `/file.ejs`)设置包含项目的根目录。 可以是一个数组来尝试解析来自多个目录的包含。
`views` | 解析包含相对路径时要使用的路径数组。
`context` | 函数执行上下文
`compileDebug` | 当 `false` 时,不编译任何调试工具
`client` | 返回独立编译的函数
`delimiter` | 用于内部分隔符的字符,默认为 `%`
`openDelimiter` | 用于打开分隔符的字符,默认为 `<`
`closeDelimiter` | 用于结束分隔符的字符,默认为 `>`
`debug` | 输出生成的函数体
`strict` | 当设置为 `true` 时,生成的函数处于严格模式
`_with` | 是否使用 `with() {}` 构造。 如果为 `false`,则局部变量将存储在局部变量对象中。 (暗示`--strict`
`localsName` | 不使用时用于存储局部变量的对象的名称 默认为局部变量
`rmWhitespace` | 删除所有可安全删除的空格,包括前导和尾随空格。 它还为所有 `scriptlet` 标记启用了更安全版本的 `-%>` 行吸收(它不会在行中间去除新的标记行)
`escape` | 与 `<%=` 构造一起使用的转义函数。 它用于渲染,并在生成客户端函数时进行 `.toString()` 处理。 (默认情况下转义 XML
`outputFunctionName` | 设置为字符串(例如 `echo``print`),以便函数在 `scriptlet` 标签内打印输出
`async` | 当 `true`EJS 将使用异步函数进行渲染。 (取决于 `JS` 运行时中的 `async`/`await` 支持
## 标签
<!--rehype:body-class=cols-1-->
### 标签列表
标签 | 描述
:---|---
`<%` | 'Scriptlet' 标签,用于控制流,无输出
`<%_` | “Whitespace Slurping”Scriptlet 标签,删除其前面的所有空格
`<%=` | 将值输出到模板中HTML 转义)
`<%-` | 将未转义的值输出到模板中
`<%#` | 注释标签,不执行,不输出
`<%%` | 输出文字 `<%`
`%>` | 普通结束标签
`-%>` | 修剪模式('newline slurp')标签,修剪换行符后的内容
`_%>` | “Whitespace Slurping”结束标签删除其后的所有空格
## Cli
<!--rehype:body-class=cols-1-->
### Cli 列表
选项 | 描述
:---|---
`cache` | 编译后的函数被缓存,需要文件名
`-o / --output-file FILE` | 将渲染的输出写入 FILE 而不是 stdout。
`-f / --data-file FILE` | 必须是 JSON 格式。 使用来自 FILE 的解析输入作为渲染数据。
`-i / --data-input STRING` | 必须采用 JSON 格式和 URI 编码。 使用来自 STRING 的解析输入作为渲染数据。
`-m / --delimiter CHARACTER` | 使用带有尖括号的 CHARACTER 来表示打开/关闭(默认为 %)。
`-p / --open-delimiter CHARACTER` | 使用 CHARACTER 而不是左尖括号来打开。
`-c / --close-delimiter CHARACTER` | 使用 CHARACTER 而不是右尖括号来结束。
`-s / --strict` | 当设置为 `true` 时,生成的函数处于严格模式
`-n / --no-with` | 对变量使用 `locals` 对象,而不是使用 `with`(隐含--strict
`-l / --locals-name` | 不使用“with”时用于存储局部变量的对象的名称。
`-w / --rm-whitespace` | 删除所有可安全删除的空格,包括前导和尾随空格。
`-d / --debug` | 输出生成的函数体
`-h / --help` | 显示此帮助消息。
`-V/v / --version` | 显示 EJS 版本。
使用示例:
```bash
$ ejs -p [ -c ] ./template_file.ejs -o ./output.html
$ ejs ./test/fixtures/user.ejs name=Lerxst
$ ejs -n -l _ ./some_template.ejs -f ./data_file.json
```