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

id, title, challengeType, forumTopicId, localeTitle

id	title	challengeType	forumTopicId	localeTitle
5895f70bf9fc0f352b528e64	Use a Template Engine's Powers	2	301567	使用模板引擎

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'});

刷新页面，如果页面中数据显示正确，你就可以提交你的页面了。

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

Instructions

Tests

tests:
  - text: Pug 应正确地展示变量。
    testString: 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); })

Challenge Seed

Solution

/**
  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.
*/