一个典型的项目会有一个目录下都是模板,最方便的方式就是设置 LiquidJS 的 root 然后调用 .renderFile() 或 .renderFileSync() 来渲染其中的一个模板文件。
渲染一个文件
例如你有如下的目录结构:
. |
其中 hello.liquid 内容为:
name: {{name}} |
在 index.js 中可以这样渲染 hello.liquid:
var engine = new Liquid({ |
执行 node index.js 你将会得到类似这样的输出:
name: alice |
模板查找
传递给 .renderFile(), .parseFile() .renderFileSync(), .parseFileSync() 这些 API 的模板名,
以及传递给 include, layout 这些标签的模板名,将会根据 root 选项来查找。
root 可以设置为 string 类型的路径(见上面的例子), 也可以设置为一个字符串数组表示路径列表,这时 LiquidJS 将会按顺序去查找。例如:
var engine = new Liquid({ |
相对路径当模板中引入子模板时(`{% render "foo" %}`),或者调用 `.renderFile('foo')` 时,LiquidJS 会依次查看如下几个文件,并渲染第一个存在的文件: - `cwd()`/views/foo.liquid - `cwd()`/views/partials/foo.liquid 如果上述文件都不存在,将会抛出一个 `ENOENT` 错误。
root中使用相对路径将会被解释为相对于cwd()(当前工作目录)。
示例在 Node.js 示例中展示了怎么渲染一个文件 liquidjs/demo/nodejs/。
在浏览器中使用 LiquidJS 时,比如当前路径为 https://example.com/bar/index.html,只会去 root 数组中的第一个路径下获取,也就是这个文件:
如果获取失败(比如得到一个 404/500 错误)或网络错误,将会抛出一个 ENOENT 错误。
示例在这个示例中展示了如何从网络获取并渲染一个模板文件 liquidjs/demo/browser/。
文件系统接口
LiquidJS 定义了一个文件系统接口(src/fs/ifs.ts),在 Node.js 下的默认实现是 src/fs/node.ts,在浏览器打包文件中的默认实现是 src/fs/browser.ts。
你可以通过创建 Liquid 时的 fs 参数来指定一个自定义实现来指定如何读取模板文件。比如从数据库里读取:
const engine = new Liquid({ |