无法在html中嵌套backlint(')

实际上，我正在使用nodemailer在node js中发送html模板代码，但我面临的问题是我无法在其中嵌套backlint:-

我的代码:

let mailDetails={
from: 'def@gmail.com',
to: 'abc@gmail.com',
subject: 'Order Confirmation Mail',
html: `<html>  //outer backlint start from here
<body>
<p id="s"></p>
<script>
const dataElement = document.querySelector('s');

const data = [
{url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
{url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
];
data.map(item => {
dataElement.insertAdjacentHTML('beforebegin', `<p>${item.name}</p>`)});//inner backlints
</script>
</body>
</body>
</html>
`, //outer backlint end
};

Ps:-忽略javascript插入的内容，因为它们是虚拟数据。只是想展示我想要的嵌套类型。如果我使用'，那么item.name将变得未定义，即使使用${}也会发生。

您需要用转义反号。这将是结果:

<html>  //outer backlint start from here
<body>
<p id="s"></p>
<script>
const dataElement = document.querySelector('s');

const data = [
{url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
{url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
];
data.map(item => {
dataElement.insertAdjacentHTML('beforebegin', `<p>${item.name}</p>`)});//inner backlints
</script>
</body>
</body>
</html>

同时，您应该删除第二个</body>

使用ejs https://www.npmjs.com/package/ejs将使这样的模板非常快速。我正在使用ejs。

example.js


let mailDetails = {
from: 'def@gmail.com',
to: 'abc@gmail.com',
subject: 'Order Confirmation Mail',
html: ejs.render("<path_to_ejs_template/template.ejs>"), //<-- replace this line with correct path to template.ejs
};

template.ejs

<html>
<body>
<p id="s"></p>
<script>
const dataElement = document.querySelector("s");
const data = [
{
url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60",
name: "Nathan",
price: "Rs. 250",
description: "IRAN",
},
{
url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60",
name: "Nathan",
price: "Rs. 250",
description: "IRAN",
},
];
data.map((item) => {
dataElement.insertAdjacentHTML("beforebegin", `<p>${item.name}</p>`);
});
</script>
</body>
</html>

相关内容

最新更新

热门标签：