Aller au contenu principal
Version: 2.0.0

模板渲染

本组件用于在 midway 体系使用服务端渲染 ejs,nunjucks 模板。

使用 ejs

安装依赖

选择对应的模板安装依赖。

$ npm i @midwayjs/view-ejs@2 --save

引入组件

首先,引入组件,在 configuration.ts  中导入:

import { Configuration } from '@midwayjs/decorator';
import * as view from '@midwayjs/view-ejs';
import { join } from 'path';

@Configuration({
imports: [
view, // 导入 ejs 组件
],
importConfigs: [join(__dirname, 'config')],
})
export class ContainerLifeCycle {}

配置

// src/config/config.default.ts
export const view = {
defaultViewEngine: 'ejs',
mapping: {
'.ejs': 'ejs',
},
};

// ejs config
export const ejs = {};

使用

注意,默认的 view 目录为 ${appRoot}/view ,在其中创建一个 hello.ejs 文件。

目录结构如下:

➜  my_midway_app tree
.
├── src
│   └── controller ## Controller 目录
│      └── home.ts
├── view ## 模板目录
│   └── hello.ejs
├── test
├── package.json
└── tsconfig.json

我们在模板里写一些 ejs 格式的内容,比如:

// view/hello.ejs
hello <%= data %>

在 Controller 中渲染。

import { Inject, Provide } from '@midwayjs/decorator';
import { Context } from '@midwayjs/koa';

@Provide()
@Controller('/')
export class HomeController {
@Inject()
ctx: Context;

@Get('/')
async render() {
await this.ctx.render('hello.ejs', {
data: 'world',
});
}
}

使用 Nunjucks

和 ejs 类似,引入对应组件即可。

1、选择对应的模板安装依赖。

$ npm i @midwayjs/view-nunjucks --save

2、引入组件,在 configuration.ts  中导入:

import { Configuration } from '@midwayjs/decorator';
import * as view from '@midwayjs/view-nunjucks';
import { join } from 'path';

@Configuration({
imports: [
view, // 导入 nunjucks 组件
],
importConfigs: [join(__dirname, 'config')],
})
export class ContainerLifeCycle {}

3、增加 nunjucks 的配置,比如默认使用 nunjucks。

// src/config/config.default.ts
export const view = {
defaultViewEngine: 'nunjucks',
mapping: {
'.nj': 'nunjucks',
},
};

4、在 view 目录增加模板

// view/test.ejs
hi, {{ user }}

在 Controller 中渲染。

import { Inject, Provide } from '@midwayjs/decorator';
import { Context } from '@midwayjs/koa';

@Provide()
@Controller('/')
export class HomeController {
@Inject()
ctx: Context;

@Get('/')
async render() {
await ctx.render('test.nj', { user: 'midway' });
}
}

访问后会输出 hi, midway

如果有自定义 filter 的需求,可以在入口处增加,比如下面增加了一个名为 hello 的 filter。

import { App, Configuration, Inject } from '@midwayjs/decorator';
import * as view from '@midwayjs/view-nunjucks';
import { join } from 'path';

@Configuration({
imports: [view],
importConfigs: [join(__dirname, 'config')],
})
export class AutoConfiguration {
@App()
app;

@Inject()
env: view.NunjucksEnvironment;

async onReady() {
this.env.addFilter('hello', (str) => {
return 'hi, ' + str;
});
}
}

在模板里可以使用

{
{
name | hello;
}
}

然后渲染

// controller
// ...
await ctx.render('test.nj', { name: 'midway' });

也会输出 hi, midway

注意事项

如需在 egg(@midwayjs/web) 场景下使用,请在 plugint.ts 中关闭 view 和其相关插件。

import { EggPlugin } from 'egg';
export default {
// ...
view: false,
} as EggPlugin;

否则会出现下面类似的错误。

TypeError: Cannot set property view of #<EggApplication> which has only a getter