freeCodeCamp/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5895f70bf9fc0f352b528e64	使用模板引擎	2	301567	use-a-template-engines-powers

--description--

模版引擎最大的特点之一就是在 HTML 页面展示之前，可以从服务端传变量到模版文件。

在 Pug 文件中，你可以用变量名来调用变量，比如写成 #{variable_name} 来实现行内调用，或像 p=variable_name 把元素与变量直接写在一起，这表示 p 元素的内容等价于这个变量。

建议大家在 Pug 的 README 里看看它的语法和用法，这样你写出的代码会相对简练。 另外要注意，Pug 使用缩进来表示嵌套的代码块。

在 pug 的 'index.pug' 文件中，我们使用了 title 和 message 两个变量。

为了从服务器传递这些信息，你需要给 res.render 的第二个参数传入一个对象，其中包含变量对应的值。 比如，如果你想传递对象 {title: 'Hello', message: 'Please login'} 到你的主页，

看起来应该像这样：res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'});。现在刷新页面，你应该看到那些值就像在 index.pug 文件中一样被渲染在页面上正确的位置。

完成上述要求后，请提交你的页面链接。 如果你遇到了问题，可以参考 这里 的答案。

--hints--

Pug 应正确地展示变量。

(getUserInput) =>
  $.get(getUserInput('url') + '/').then(
    (data) => {
      assert.match(
        data,
        /pug-variable("|')>Please login/gi,
        'Your projects home page should now be rendered by pug with the projects .pug file unaltered'
      );
    },
    (xhr) => {
      throw new Error(xhr.statusText);
    }
  );

--solutions--

/**
  Backend challenges don't need solutions, 
  because they would need to be tested against a full working project. 
  Please check our contributing guidelines to learn more.
*/