我放入哈巴狗模板的 json 数据是将“<”放在字符串的开头，将“>”放在字符串的末尾。为什么？我该如何摆脱它？

Question

所以我有一个带有 json 数组的 json 文件

    {
    "LunchItems": [
    {
        "name":" The Strange Brew",
        "price":"~6~",
        "description":" A Classic Irish Style Beer Cheese Soup Garnished with Red Pepper and Toasted Baguette"
    },
    {
        "name":" The Killer Tomato",
        "price":"~6~",
        "description":" A Roma Tomato and Roasted Red Pepper Bisque Garnished with Spiced Creme Fraiche"
    },
    {
        "name":" House Salad",
        "price":" ~7~",
        "description":" Spring Mix, Carrot, Red Onion, Roma Tomato, Mushroom and Red Peppers"
    },
    {
        "name":" Mediterranean Salad",
        "price":"~8~",
        "description":" Spring Mix, Red Onion, Kalamata Olives, Roma Tomato, Capers and Feta Cheese"
    },
    {
        "name":" Side Salad & Cup Of Soup",
        "price":"~6~",
        "description":" "
    },
    {
        "name":" The Ollie",
        "price":"~8~",
        "description":" A Quarter Pound Version of Our Signature Stout Burger Served on a Pretzel Roll with Spring Mix, Roma Tomato, Red Onion & Colby Jack Cheese - With Choice Of Side"
    },
    {
        "name":" The Neuben",
        "price":"~8~",
        "description":" Grilled Corned Beef Topped with Sauerkraut, Grilled Onions, Swiss Cheese and Stout Mustard Served on a Toasted Pretzel Roll - With Your Choice Of One Side"
    },
    {
        "name":" The Three Little Birds",
        "price":"~8~",
        "description":" House Made Chicken Salad Served On 3 Pretzel Rolls with Swiss Cheese and Roma Tomato - With Choice Of Side"
    },
    {
        "name":" The Fresh Prince",
        "price":" ~8~",
        "description":" Chopped Filet, Onion, Red Pepper & Swiss Served On a Toasted Sausage Roll with Au Jus & Garlic Aioli - With Choice Of Side"
    },
    {
        "name":" The Nine Iron",
        "price":"~8~",
        "description":" Corned Beef, Smoked Turkey, Benton's© Bacon, Swiss, Spring Mix, Red Onion, Tomato, & Garlic Aioli - With Choice Of Side"
    },
    {
        "name":" The Fish 'n' Chips",
        "price":"~8~",
        "description":" Two Beer Battered Cod Filets Served with House Made Tartare Sauce and Malt Vinegar Aioli - With Choice Of Side"
    },
    {
        "name":" The Big Cheese",
        "price":"~6~",
        "description":" A Classic Colby Jack & Sourdough Grilled Cheese Sandwich - With Choice Of Side"
    },
    {
        "name":" The Chicken Gyro",
        "price":"~9~",
        "description":" Grilled chicken breast with spring mix, roma tomato, red onion and feta cheese wrapped in toasted pita bread and served with house made tzatziki sauce - with choice of one side."
    },
    {
        "name":" Deluxe Quesadilla",
        "price":"~8~",
        "description":" Colby Jack, Roasted Corn, Red Peppers, Black Beans & Red Onion Served with House Salsa & Spiced Creme Fraiche"
    },
    {
        "name":" Cheese Quesadilla",
        "price":"~5~",
        "description":" Cheese quesadilla served with house salsa & spiced creme fraiche"
    }
]
}

我正在使用 express 渲染 pug 文件

    const express = require('express');
const app = express();
const lunches = require('./public/json/lunch.json');
app.set('view engine', 'pug');
app.use(express.static(__dirname + '/public'));

const server = app.listen(7000, () => {
    console.log(`Express running → PORT ${server.address().port}`);
  });

  app.get('/', (req, res) => {
    res.render('index',{
      lunches: lunches.LunchItems
    });
  });

    doctype html
html
  head
    title #{title}
    link(rel='stylesheet', href='/css/Index.css')
    meta(name="viewport" content="width=device-width, initial-scale=1")
    style. 
        body { 
            background-image: url("/images/wood.jpg"); 
            background-size: auto;
        }
  body
    div.menuContainer
        each item in lunches
            div.menuItem 
                #{item.name} <br/>
                #{item.price} <br/>
                #{item.description}

输出是： <奇怪的酿造>

<~6~>

<经典爱尔兰啤酒奶酪汤配以红辣椒和烤法式面包>

<杀手番茄>

<~6~>

< 罗马番茄和烤红辣椒浓汤配以五香鲜奶油>...

那为什么会有“<>”？我该如何去掉它们？

Answer 1

当您使用 #{variable} 开始一个新行时，Pug 认为您想要使用块级标记插值：

Tag Interpolation

Pug:
- let myTag = 'h1';
#{myTag} Heading
HTML:
<h1>Heading</h1>

如果你只想在多个新行上呈现文本，你可以使用 piped (|) text syntax, the block text syntax (with a . after the tag), or inline tag interpolation 作为换行符：

管道文本示例

div.menuItem 
  | #{item.name}
  br
  | #{item.price}
  br
  | #{item.description}

块文本示例

div.menuItem. // note the trailing dot
  #{item.name}<br/>
  #{item.price}<br/>
  #{item.description}

内联标记插值示例

div.menuItem #{item.name} #[br] #{item.price} #[br] #{item.description}

这些都应该产生相同的预期结果。

或者，更语义化的解决方案可能是使用 description list (dl) element 来标记此信息。

替代示例

article.menuItem
  h1 #{item.name}
  dl
    dt Price
    dd #{item.price}
    dt Description
    dd #{item.description}

我放入哈巴狗模板的 json 数据是将“<”放在字符串的开头，将“>”放在字符串的末尾。为什么？我该如何摆脱它？

The json data i am putting into a pug template is putting '<' at the beginning of a string and '>' at the end. why? how do i get rid of it?

json

node.js

express

pug