Vento 默认

使用 Vento 模板引擎创建页面和布局。

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".vento", ".vto" ]

pageSubExtension string

Optional sub-extension for page files

includes string

Custom includes path

Default:

site.options.includes

plugins function[]

Plugins to use by vento

autoTrim boolean

Whether or not to auto-trim the templates

Default:

true

options object

The options for the Vento engine

See https://vento.js.org/configuration/

dataVarname string: The name of the variable to access to the data in the templates
Default:
"it"
useWith boolean: Make data available on the global object instead of varName
Default:
true
autoescape boolean: Whether or not to automatically XML-escape interpolations.
Default:
false

描述

Vento 是一种模板语言，由 Lume (Óscar Otero) 的同一位创建者创建，并受到其他流行的模板引擎（如 Nunjucks、Liquid 或 Eta）的启发。此插件允许你使用它来创建页面和布局。

安装

此插件默认已安装。🎉

创建布局

在 _includes 目录中添加一个扩展名为 .vto 的文件。使用 front matter 为模板设置数据。

---
title: 欢迎来到我的页面
intro: 这是我使用 Lume 的第一篇文章。希望你喜欢！
---

<html>
  <head>
    <title>{{ title }}</title>
  </head>

  <body>
    <p>{{ intro }}</p>
  </body>
</html>

创建页面

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

vto 过滤器

Vento 插件还注册了 vto 过滤器，用于将任何字符串值渲染为 Vento 模板并将其输出为 HTML。此过滤器接受一个包含数据的对象。例如：

---
data:
  username: Oscar
text: "Hello {{ username }}"
---

<!-- 渲染字符串 -->
<div>{{ text |> vto(data) }}<div>

配置 VSCode

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