Nodejs Koa模板引擎koa-swig的使用

Nodejs Koa模板引擎koa-swig的使用
koa-swig 是一个为 Koa 框架设计的模板引擎，它基于 swig 库。下面是一个简单的示例，展示如何在 Koa 项目中使用 koa-swig。

安装依赖

首先，你需要安装 koa, koa-swig 和其他可能需要的库（例如 koa-router）：

npm install koa koa-swig koa-router

配置模板引擎

接下来，配置 koa-swig 作为你的模板引擎。这通常在你的应用启动文件（如 index.js 或 app.js）中完成。

const Koa = require('koa');
const swig = require('koa-swig');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

// 设置模板引擎
app.use(swig({
    root: __dirname + '/views', // 视图文件夹路径
    autoescape: true,
    cache: false, // 开发阶段关闭缓存
    ext: 'html',
    writeBody: false
}));

// 路由定义
router.get('/', async (ctx) => {
    await ctx.render('index', { title: 'Hello Swig' });
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

创建视图文件

确保你有一个名为 views 的目录，并在其中创建一个 index.html 文件。这是你的模板文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
</body>
</html>

运行应用

现在你可以运行你的应用了：

node index.js

访问 http://localhost:3000，你应该能看到一个标题为 “Hello Swig” 的网页。

更多配置选项

koa-swig 提供了一些额外的配置选项，如：

  • defaults: 默认的上下文数据。
  • filters: 自定义过滤器。
  • locals: 本地化变量。

这些都可以通过 app.use(swig({...})) 来设置。

以上就是如何在 Koa 中使用 koa-swig 模板引擎的基本步骤。希望这对您有所帮助！


3 回复

当然，没问题！首先，你需要安装koa-swig和必要的依赖。打开你的终端，运行以下命令：

npm install koa koa-router koa-swig --save

然后，在你的Koa应用中设置koa-swig作为模板引擎。这里有个简单的例子：

const Koa = require('koa');
const swig = require('koa-swig');
const path = require('path');

const app = new Koa();

// 设置模板引擎
app.use(swig({
  root: path.join(__dirname, 'views'), // 模板文件夹路径
  autoescape: true,
  cache: false, // 开发时关闭缓存
  ext: 'html',
  filters: {}
}));

app.use(async ctx => {
  await ctx.render('index', { title: 'Hello Swig', message: 'Welcome to Koa-Swig!' });
});

app.listen(3000);

确保你的views文件夹里有一个index.html文件，这样就可以看到效果啦！

希望这能帮到你，如果还有其他问题，随时问哦！


koa-swig 是一个为 Koa 框架设计的模板引擎，基于 Swig 库。它允许你在 Koa 项目中使用 Swig 模板语言来渲染视图。下面我将详细介绍如何在 Koa 项目中安装和配置 koa-swig。

1. 安装必要的依赖

首先你需要安装 koa, koa-views, 和 koa-swig：

npm install koa koa-views koa-swig --save

2. 创建基本的 Koa 应用

创建一个基本的 Koa 应用，并配置 koa-views 使用 koa-swig 渲染模板。

const Koa = require('koa');
const views = require('koa-views');
const path = require('path');

const app = new Koa();

// 配置 koa-views 使用 swig
app.use(views(path.join(__dirname, 'views'), {
    extension: 'swig',
    map: {
        swig: 'swig'
    }
}));

app.use(async ctx => {
    // 渲染 'index.swig' 模板，并传递一些数据
    ctx.body = await ctx.render('index', { title: 'Hello World!' });
});

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

在这个例子中，我们告诉 koa-views 到 ./views 目录查找 .swig 文件，并使用 koa-swig 来渲染它们。

3. 创建模板文件

在 ./views 目录下创建一个 index.swig 文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
</body>
</html>

这段代码展示了如何在模板中使用变量（例如 {{ title }}）。

4. 运行应用

运行你的 Koa 应用，打开浏览器访问 http://localhost:3000，你应该能看到渲染后的页面显示 “Hello World!”。

这就是在 Koa 中使用 koa-swig 的基础步骤。你可以根据需要调整配置和模板内容。希望这对你有所帮助！

koa-swig 是一个适用于 Koa 框架的 Swig 模板引擎。首先安装依赖：npm install koa @koa/router koa-swig --save。

在Koa应用中配置：

const Koa = require('koa');
const swig = require('koa-swig');

const app = new Koa();

app.use(swig({
  root: './views', // 模板文件所在目录
  autoescape: true,
  cache: false, // 生产环境建议设为true，并配置缓存
  ext: 'html',
  filters: {}
}));

app.use(async ctx => {
  await ctx.render('index', { title: 'Hello', content: 'Welcome!' });
});

app.listen(3000);

其中，./views/index.html 是模板文件路径。模板中可以使用 {{ title }} 这样的变量。

回到顶部