唯品会顺丰快递面单模板

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 2016, 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

由于该项目在2016年发布了版本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 2018), it’s still the default in Express for backward compatibility reasons.

尽管Jade的最新版本已经3年了(在撰写本文时，2018年夏季)，但出于向后兼容的原因，它仍然是Express中的默认版本。

In any new project, you should use Pug or another engine of your choice. The official site of Pug is https://pugjs.org/.

在任何新项目中，都应使用Pug或您选择的其他引擎。 Pug的官方网站是https://pugjs.org/ 。

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 .pug files.

现在，我们可以开始在.pug文件中编写模板了。

Create an about view:

创建一个关于视图：

app.get('/about', (req, res) => {res.render('about')
})

and the template in views/about.pug:

和views/about.pug的模板：

p Hello from Flavio

This template will create a p tag with the content Hello 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: https://jsonformatter.org/html-to-jade

如果习惯于使用HTML和内插变量的模板引擎，例如Handlebars(如下所述)，则可能会遇到问题，尤其是当您需要将现有HTML转换为Pug时。 这个从HTML到Jade的在线转换器(非常相似，但与Pug稍有不同)将提供很大的帮助： https : //jsonformatter.org/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 using npm install hbs.

您可以使用npm install hbs进行npm install hbs 。

Put an about.hbs template file in the views/ 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 also render a React application server-side, using the express-react-views package.

您还可以使用express-react-views包在服务器端渲染React应用程序。

Start with npm 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 requiring hbs we require express-react-views and use that as the engine, using jsx files:

现在，我们不再需要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 an about.jsx file in views/, and calling /about should present you an “Hello from Flavio” string:

只需将一个about.jsx文件放在views/ ，然后调用/about您显示“来自Flavio的Hello”字符串：

const React = require('react')class HelloMessage extends React.Component {render() {return <div>Hello from {this.props.name}</div>}
}module.exports = HelloMessage

翻译自: https://flaviocopes.com/express-templating/

唯品会顺丰快递面单模板