模板引擎很棘手

Question

在学习 html css 和 js 之后，我转向节点，发现我需要学习如何使用 pug 模板引擎，这比普通的 html 代码难得多是否有任何包或任何东西可以直接将我的 html 代码转换为模板引擎

        main
            .grid
                each product in prods
                    article.card.product-item
                        header.card__header
                            h1.product__title Great Book
                        .card__image
                        .card__content
                            img(src="images/book.jpeg", class="image" alt="")
                            h2.product__price .99
                            p.product__description A very interesting book
                        .card__actions
                            button.btn Add to Cart

Answer 1

一旦你熟悉了它的语法，Pug 就没有那么难了。用于将 HTML 代码转换为哈巴狗 1.) 安装 npm 包 html2pug Link-https://www.npmjs.com/package/html2pug

2.) 您可以使用 Internet 上可用的各种转换器，只需输入 html 即可找到 Google 上的 pug 转换器。Example- https://html-to-pug.com/

3.)但是如果你使用 Vs code 有一些扩展，其中一个易于使用的是：- 通过 ditto 将 HTML 转换为 Pug，您可以通过在 vs 代码扩展市场中搜索找到它。

Link -https://marketplace.visualstudio.com/items?itemName=ditto.convert-html-to-pug

模板引擎很棘手

template engines are tricky

template-engine

pug