freeCodeCamp/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5895f700f9fc0f352b528e63	设置模板引擎	2	301564	set-up-a-template-engine

--description--

请注意，本项目在 这个 Repl.it 项目 的基础上进行开发。你也可以从 GitHub 上克隆。

你可以在应用的模版引擎中使用静态模板文件（如那些写在 Pug 里的）。在运行时，模版引擎会用服务端的真实数据替换掉模版文件中的变量，然后将模版转译成发送给客户端的 HTML 静态文件。这样可以轻松地构造 HTML 页面，允许在页面直接显示变量内容而不需要发送 API 请求。

为了在项目中使用 Pug，你需要在 package.json 中添加依赖 "pug": "^0.1.0"。注意，依赖的名称和版本号都要添加。

为了在 Express 中使用 pug 作为模版引擎，你需要在 express 中将 app 的 "view-engine" 设置为 "pug"，就像这样：app.set('view engine', 'pug')。

如果没有正确的 render 'views/pug' 路径下的 index 文件，页面将不会被加载。

最后, 你需要修改 res.render() 方法，设置 / 的响应。res.render() 方法接收一个文件路径作为参数，这个路径既可以是相对路径（相对于 views），也可以是绝对路径。而且，我们不需要给它添加文件扩展名（文件后缀名）。

如果一切顺利，刷新一下应用的主页就不会看到 "Pug template is not defined." 的报错了，而是会看到 Pug 成功加载的提示。

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

--hints--

项目中应使用 Pug 作为依赖。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/package.json').then(
    (data) => {
      var packJson = JSON.parse(data);
      assert.property(
        packJson.dependencies,
        'pug',
        'Your project should list "pug" as a dependency'
      );
    },
    (xhr) => {
      throw new Error(xhr.statusText);
    }
  );

项目中应使用 Pug 作为模版引擎。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/server.js').then(
    (data) => {
      assert.match(
        data,
        /('|")view engine('|"),( |)('|")pug('|")/gi,
        'Your project should set Pug as a view engine'
      );
    },
    (xhr) => {
      throw new Error(xhr.statusText);
    }
  );

在 Response 里使用正确的 ExpressJS 方法渲染主页面。

(getUserInput) =>
  $.get(getUserInput('url') + '/').then(
    (data) => {
      assert.match(
        data,
        /FCC Advanced Node and Express/gi,
        'You successfully rendered the Pug template!'
      );
    },
    (xhr) => {
      throw new Error(xhr.statusText);
    }
  );

Pug 应该生效。

(getUserInput) =>
  $.get(getUserInput('url') + '/').then(
    (data) => {
      assert.match(
        data,
        /pug-success-message/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.
*/