Nodejs Koa模板引擎插件koa-pug的使用

Nodejs Koa模板引擎插件koa-pug的使用
koa-pug 是一个用于 Koa 框架的 Pug 模板引擎插件。Pug（以前称为 Jade）是一种简洁的、功能强大的模板引擎，非常适合用来生成 HTML。以下是如何在 Koa 应用中使用 koa-pug 的步骤。

安装依赖

首先，你需要安装 koa, koa-router 和 koa-pug 以及 pug：

npm install koa koa-router koa-pug pug

配置 Koa 应用

接下来，配置你的 Koa 应用以使用 koa-pug 插件：

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

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

// 初始化 Pug
new Pug({
    viewPath: __dirname + '/views', // 设置 Pug 模板文件的位置
    app: app,
}).compile(); // 编译模板

router.get('/', async ctx => {
    await ctx.render('index', { title: 'Hello World' });
});

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

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

创建 Pug 模板

在你的项目目录下创建一个名为 views 的文件夹，并在这个文件夹里创建一个名为 index.pug 的文件。你可以添加一些基本的 Pug 语法来测试这个设置：

doctype html
html
  head
    title= title
  body
    h1 Hello World!
    p Welcome to the Pug template engine with Koa.

运行应用

现在你可以运行你的 Koa 应用并访问 http://localhost:3000 来查看效果了。

node app.js

通过这种方式，你就可以在 Koa 应用中使用 Pug 模板引擎了。你可以根据需要修改和扩展你的模板文件和路由逻辑。


3 回复

当然可以！koa-pug 是一个用于 Koa 框架的 Pug 模板引擎插件。首先确保你已经安装了 koa-pug 和 pug：

npm install koa-pug pug

接下来，在你的 Koa 应用中配置并使用它：

const Koa = require('koa');
const Pug = require('koa-pug');

const app = new Koa();

// 初始化 Pug 中间件
new Pug({
    viewPath: './views', // 设置你的视图文件夹路径
    app: app,
}).install(app);

app.use(async ctx => {
    ctx.render('index.pug', {
        title: 'Hello Pug!',
        message: 'Welcome to the world of templates!'
    });
});

app.listen(3000, () => console.log('Server is running on port 3000'));

这样，当你访问应用时，它会渲染位于 ./views/index.pug 的页面，并传递 title 和 message 变量给模板。

记得创建 views/index.pug 文件来测试这个设置：

h1 #{title}
p #{message}

现在启动你的服务器，访问 http://localhost:3000，看看效果吧！


koa-pug 是一个用于 Koa 框架的 Pug 模板引擎插件。Pug（以前称为 Jade）是一种简洁的 HTML 模板引擎。下面是如何在 Koa 应用中使用 koa-pug 的步骤和示例代码。

安装依赖

首先，你需要安装必要的依赖包：

npm install koa koa-router koa-pug pug

基本设置

创建一个基本的 Koa 应用，并设置 koa-pug 作为模板引擎：

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

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

// 初始化 pug
pug({
  viewPath: 'views', // 视图文件夹路径
  basedir: 'views',  // 可选，如果需要在模板中使用相对路径
  noCache: true,     // 开发时禁用缓存，生产环境建议设置为 false
  locals: {          // 全局变量
    title: 'My App',
  },
}).install(app);

// 路由
router.get('/', async (ctx) => {
  ctx.body = await ctx.render('index', {
    message: 'Hello World',
  });
});

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

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

创建视图文件

在项目根目录下创建一个 views 文件夹，并在其中创建一个 index.pug 文件：

doctype html
html
  head
    title #{title}
  body
    h1= message

运行应用

运行你的 Koa 应用：

node your-app-file.js

访问 http://localhost:3000/，你应该会看到一个标题为 “My App” 的页面，显示 “Hello World”。

高级配置

  • 布局文件：你可以设置一个默认的布局文件，比如 layout.pug。
  • 过滤器和函数：可以在 koa-pug 中添加自定义过滤器或函数，以增强模板的功能。

这只是一个基础示例，koa-pug 还提供了更多的功能和配置选项，可以根据需要进行探索和使用。

koa-pug 是一个用于 Koa 框架的 Pug 模板引擎插件。首先安装必要的包：

npm install koa koa-router pug-koajs

然后设置 Koa 应用以使用 koa-pug：

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

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

app.context.render = pug.callback();

router.get('/', async ctx => {
  await ctx.render('index.pug', { title: 'Hello', message: 'Welcome' });
});

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

确保你的 Pug 文件存放在 views 目录中。这样就可以在路由中通过 ctx.render 渲染 Pug 模板了。

回到顶部