唯品会顺丰快递面单模板
Express is capable of handling server-side template engines.
Express能够处理服务器端模板引擎。
Template engines allow us to add data to a view, and generate HTML dynamically.
模板引擎允许我们向视图添加数据，并动态生成HTML。
Express uses Jade as the default. Jade is the old version of Pug, specifically Pug 1.0.
Express使用Jade作为默认设置。 Jade是Pug的旧版本，特别是Pug 1.0。
The name was changed from Jade to Pug due to a trademark issue in , when the project released version 2. You can still use Jade, aka Pug 1.0, but going forward, it’s best to use Pug 2.0
由于该项目在发布了版本2，由于商标问题，名称从Jade更改为Pug。您仍然可以使用Jade，又名Pug 1.0，但今后最好使用Pug 2.0
Although the last version of Jade is 3 years old (at the time of writing, summer ), it’s still the default in Express for backward compatibility reasons.
尽管Jade的最新版本已经3年了(在撰写本文时，夏季)，但出于向后兼容的原因，它仍然是Express中的默认版本。
In any new project, you should use Pug or another engine of your choice. The official site of Pug is /.
在任何新项目中，都应使用Pug或您选择的其他引擎。 Pug的官方网站是/ 。
You can use many different template engines, including Pug, Handlebars, Mustache, EJS and more.
您可以使用许多不同的模板引擎，包括Pug，车把，Mustache，EJS等。
使用哈巴狗 (Using Pug)
To use Pug we must first install it:
要使用Pug，我们必须首先安装它：
npm install pug
and when initializing the Express app, we need to set it:
在初始化Express应用时，我们需要对其进行设置：
const express = require('express')const app = express()app.set('view engine', 'pug')
We can now start writing our templates in.pugfiles.
现在，我们可以开始在.pug文件中编写模板了。
Create an about view:
创建一个关于视图：
app.get('/about', (req, res) => {res.render('about')})
and the template inviews/about.pug:
和views/about.pug的模板：
p Hello from Flavio
This template will create aptag with the contentHello from Flavio.
该模板将创建一个p标签，其内容Hello from Flavio。
You can interpolate a variable using
您可以使用
app.get('/about', (req, res) => {res.render('about', { name: 'Flavio' })})
p Hello from #{name}
This is a very short introduction to Pug, in the context of using it with Express. Look at the Pug guide for more information on how to use Pug.
与Express一起使用时，这是对Pug的简短介绍。 有关如何使用帕格的更多信息，请参阅帕格指南 。
If you are used to template engines that use HTML and interpolate variables, like Handlebars (described next), you might run into issues, especially when you need to convert existing HTML to Pug. This online converter from HTML to Jade (which is very similar, but a little different than Pug) will be a great help: /html-to-jade
如果习惯于使用HTML和内插变量的模板引擎，例如Handlebars(如下所述)，则可能会遇到问题，尤其是当您需要将现有HTML转换为Pug时。 这个从HTML到Jade的在线转换器(非常相似，但与Pug稍有不同)将提供很大的帮助： https : ///html-to-jade
Also see the differences between Jade and Pug
另请参阅Jade和Pug之间的区别
使用车把 (Using Handlebars)
Let’s try and use Handlebars instead of Pug.
让我们尝试使用把手代替帕格。
You can install it usingnpm install hbs.
您可以使用npm install hbs进行npm install hbs。
Put anabout.hbstemplate file in theviews/folder:
将about.hbs模板文件放在views/文件夹中：
Hello from {{name}}
and then use this Express configuration to serve it on/about:
然后使用此Express配置在/about上投放：
const express = require('express')const app = express()const hbs = require('hbs')app.set('view engine', 'hbs')app.set('views', path.join(__dirname, 'views'))app.get('/about', (req, res) => {res.render('about', { name: 'Flavio' })})app.listen(3000, () => console.log('Server ready'))
You can alsorender a React application server-side, using theexpress-react-viewspackage.
您还可以使用express-react-views包在服务器端渲染React应用程序。
Start withnpm install express-react-views react react-dom.
从npm install express-react-views react react-dom开始，npm install express-react-views react react-dom。
Now instead of requiringhbswe requireexpress-react-viewsand use that as the engine, usingjsxfiles:
现在，我们不再需要hbs而是需要express-react-views并使用jsx文件将其用作引擎：
const express = require('express')const app = express()app.set('view engine', 'jsx')app.engine('jsx', require('express-react-views').createEngine())app.get('/about', (req, res) => {res.render('about', { name: 'Flavio' })})app.listen(3000, () => console.log('Server ready'))
Just put anabout.jsxfile inviews/, and calling/aboutshould present you an “Hello from Flavio” string:
只需将一个about.jsx文件放在views/，然后调用/about您显示“来自Flavio的Hello”字符串：
const React = require('react')class HelloMessage extends ponent {render() {return <div>Hello from {this.props.name}</div>}}module.exports = HelloMessage
翻译自: /express-templating/
唯品会顺丰快递面单模板
