Nodejs模板引擎一枚:xview

Nodejs模板引擎一枚:xview

https://github.com/shinexs/xview

没有npm publish 直接download zip就行了

比较特别的地方: 异步include 模板有修改, 则编译缓存自动失效

这是初始版本

欢迎拍砖

2 回复

Nodejs模板引擎一枚: xview

今天我要介绍一个轻量级的Node.js模板引擎——xview。xview 是一个简洁而高效的模板引擎，它的主要特点包括异步包含（asynchronous include）和模板修改自动失效编译缓存。

项目地址

你可以从GitHub下载该项目：

由于该库还没有发布到npm，因此你需要手动下载zip文件并解压使用。

特点

  1. 异步include：支持异步加载模板片段，这对于大型应用来说非常有用。
  2. 自动编译缓存失效：当模板文件发生变化时，编译后的缓存会自动失效，确保每次请求都能获取最新的渲染结果。

使用示例

首先，你需要安装xview：

# 下载并解压xview
git clone https://github.com/shinexs/xview.git
cd xview

接下来，我们创建一个简单的Node.js应用来演示如何使用xview模板引擎。

创建一个基本的Express应用
const express = require('express');
const path = require('path');
const xview = require('./xview'); // 假设你已经将xview库放在项目目录下

const app = express();

// 设置视图引擎为xview
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'xv');

// 渲染一个简单的模板
app.get('/', (req, res) => {
    res.render('index', { title: 'Welcome to XView' });
});

app.listen(3000, () => {
    console.log('App is running on http://localhost:3000');
});
创建一个xview模板文件

在 views 文件夹中创建一个名为 index.xv 的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>Welcome to {{ title }}</h1>
    <!-- 异步包含另一个模板片段 -->
    {{ async include('header') }}
</body>
</html>
异步包含其他模板片段

为了实现异步包含，你需要在 views 文件夹中创建一个名为 header.xv 的文件：

<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

总结

xview 是一个功能强大且易于使用的Node.js模板引擎，尤其适合需要异步加载和自动缓存管理的应用场景。通过上述示例，你可以看到它如何简单地集成到一个Express应用中，并提供灵活的模板渲染能力。

希望这个简单的示例能帮助你快速上手xview！如果你有任何问题或建议，请随时提出。


根据你提供的信息，你希望了解关于Node.js模板引擎"xview"的信息。xview是一个轻量级的模板引擎，它支持异步包含（async include），并且具有自动更新编译缓存的功能，这使得模板文件的更改可以即时生效。

示例代码

首先，你需要从GitHub下载xview的ZIP包，并解压到你的项目目录中。由于它还没有发布到npm，所以不能通过npm来安装。

安装

# 下载xview
wget https://github.com/shinexs/xview/archive/refs/heads/master.zip
unzip master.zip

将解压后的文件夹移动到你的项目目录中。

使用示例

创建一个简单的HTML模板文件 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello, <%= name %></h1>
</body>
</html>

然后使用xview来渲染这个模板：

const xview = require('./path/to/xview');

// 设置模板路径
xview.config({
    root: './templates'
});

// 渲染模板
xview.render('index.html', { name: 'World' }, (err, html) => {
    if (err) throw err;
    console.log(html); // 输出渲染结果
});

关于异步包含

假设你有一个模板文件 header.html 和 footer.html，你可以使用异步包含的方式来组合它们：

<!-- header.html -->
<header>
    <nav>
        <!-- 异步包含 footer.html -->
        <%- await include('./footer.html') %>
    </nav>
</header>

<!-- footer.html -->
<footer>
    <p>版权所有 © 2023</p>
</footer>

渲染时，你可以这样使用：

xview.render('index.html', {}, (err, html) => {
    if (err) throw err;
    console.log(html);
});

注意：在实际使用时，需要确保你的模板引擎支持异步操作，或者你可能需要使用像async这样的库来处理异步逻辑。

希望这些信息对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。

回到顶部