《pug的用法》｜新手也能秒懂的模板语言，写代码像写诗一样优雅
你是不是也曾在朋友圈看到别人发“用Pug写了个页面，一行代码搞定布局”？别急，今天我就用最细腻的方式，带你走进Pug的世界——不是冷冰冰的语法，而是有温度的代码艺术。
Q：Pug是什么？和HTML有什么区别？
A：Pug（原名Jade）是一种简洁、优雅的模板引擎，它用缩进代替标签闭合，让HTML结构一目了然。比如写一个带类的div，在HTML里要写：<div class="container"></div>，而在Pug里，只需：
pug.container你看，不用写尖括号，也不用担心忘记闭合标签——这就是Pug的魅力：干净、高效、易读。
Q：我不会前端，能用Pug吗？
A：当然可以！举个真实案例：我有个朋友是插画师，她想在小红书主页加个作品展示区。她不会写HTML，但会用Pug！她只说：“我要一个卡片式排版，每张图下面有标题。” 我帮她写了这样一段Pug代码：
pug.eachcard img(src="image1.jpg" alt="作品1") h3 《夏日花园》 p 插画师手绘，灵感来自午后阳光结果她直接复制粘贴到项目里，立刻生成了漂亮的卡片组件。她说：“原来写网页也可以这么像写日记。”
Q：Pug适合什么场景？
A：特别适合快速原型开发、博客系统、静态网站生成器（比如Hexo、Nuxt.js）。我去年用Pug写了一个个人博客主题，从设计到上线不到一天。为什么？因为Pug支持变量、条件判断、循环，就像你在写散文一样自然：
pug const posts = [{title: '第一篇', date: '20240501'}, {title: '第二篇', date: '20240502'}]each post in posts .postitem h2= post.title p= post.date这段代码自动渲染出两篇文章列表，逻辑清晰得像在讲故事。
结尾彩蛋：Pug不是炫技工具，而是让开发者更专注内容的伙伴
如果你还在为HTML标签太多而头疼，试试Pug吧。它不复杂，却足够聪明；它不花哨，却充满诗意。就像一位安静的助手，默默帮你把想法变成现实。
现在就打开你的编辑器，写下第一行Pug代码吧～✨
