Eta

使用模板引擎 Eta 构建页面。

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".eta" ]

pageSubExtension string

Optional sub-extension for page files

includes string

Custom includes path

Default:

site.options.includes

options object

Configuration to pass to Eta

autoEscape boolean: Whether or not to automatically XML-escape interpolations. Default true
autoFilter boolean: Apply a filter function defined on the class to every interpolation or raw interpolation
autoTrim object [object, object]: Configure automatic whitespace trimming. Default [false, 'nl']
cache boolean: Whether or not to cache templates if name or filename is passed
cacheFilepaths boolean: Holds cache of resolved filepaths. Set to false to disable.
debug boolean: Whether to pretty-format error messages (introduces runtime penalties)
escapeFunction function: Function to XML-sanitize interpolations
filterFunction function: Function applied to all interpolations when autoFilter is true
functionHeader string: Raw JS code inserted in the template function. Useful for declaring global variables for user templates
parse object: Parsing options
plugins object: Array of plugins
rmWhitespace boolean: Remove all safe-to-remove whitespace
tags [string, string]: Delimiters: by default ['<%', '%>']
useWith boolean: Make data available on the global object instead of varName
Default:
true
varName string: Name of the data object. Default it
views string: Directory that contains templates
defaultExtension string: Control template file extension defaults. Default .eta

描述

Eta 是一个 JavaScript 模板引擎，其语法与 EJS 非常相似。此插件允许使用此模板引擎创建页面和布局。

安装

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import eta from "lume/plugins/eta.ts";

const site = lume();

site.use(eta(/* 选项 */));

export default site;

创建布局

在 _includes 目录中添加一个扩展名为 .eta 的文件。使用 layout 页面变量来指定此布局。

--- title: Welcome to my page intro: This is my first post using lume, I hope
you like it! ---

<html>
  <head>
    <title><%= title %></title>
  </head>

  <body>
    <%~ await includeFile("partials/nav.eta") %>

    <p><%= title %></p>
  </body>
</html>

请注意，传递给 includeFile() 函数的路径始终相对于 _includes 目录。

创建页面

创建页面与创建布局相同，只需将 .eta 文件放置在 _includes 目录之外。

配置 VSCode

你可以使用 Eta VS Code 扩展来进行语法高亮和一些有用的代码片段。