如何在pug中添加新行？

在pug中添加新行可以通过使用换行符或者pug的特殊标记来实现。

使用换行符：在pug中，可以通过在每行的末尾添加一个换行符来创建新行。例如：

doctype html
html
  head
    title My Pug Page
  body
    h1 Hello, Pug!
    p This is a paragraph.
    p This is another paragraph.

使用pug的特殊标记：pug提供了一些特殊的标记来表示新行。例如：

doctype html
html
  head
    title My Pug Page
  body
    h1 Hello, Pug!
    p This is a paragraph.
    //- 使用|表示新行
    | 
    p This is another paragraph.

在上述示例中，使用了两种方法来在pug中添加新行。你可以根据自己的喜好和需求选择其中一种方法。

关于pug的更多信息和使用方法，你可以参考腾讯云的云开发文档中的相关内容：Pug模板引擎。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

a.link-button Link Link 易理解，同时极大的简约了我们的代码。 2 安装 2.1 下载 npm i -D pug pug-html-loader pug-plain-l

被裁员工回归，Meta重建元宇宙！发布逼真图像数据集，全球巡回组装AR眼镜

最近，Meta用虚幻引擎开发了全新的逼真合成数据集，希望拉近合成数据与真实世界数据的距离。

在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写

要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析,详细可查看官方文档

Butterfly主题的安装及更新

butterfiy主题官网有详尽的主题配置文档，点我进入。本系列文章仅记录本站配置过程及魔改日志。

sharelist美化教程+微改主题

Ab%2BExtOria8x20obgp%2FYU%3D&x-oss-signature-version=OSS2

那些最受欢迎的 Node.js 视图引擎[每日前端夜话0xA7]

Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是，视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外，它还可以从服务器端导入数据并渲染最终的 HTML。Node.js 项目中一些常见的视图引擎如下：

Nuxt.js 开发SSR(服务端渲染)Web应用

Nuxt.js 能够胜任 VuePress 的功能，但它专为构建应用程序而设计，而 VuePress 更适合构建以内容为中心的静态站点，如技术文档，博客等。

Hexo用wowjs给博客添加动画效果

本篇仅使用butterfly_v3.6.0 +的主题版本，如果是在这之前的版本，请移步下方教程链接。

Butterfly主题的PWA实现方案

PWA的全称是Progressive Web Apps，译为渐进式网络应用程序。装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。最终效果不尽相同，但是都可以实现原生应用体验和更新弹窗提示。其实还有个离线博客，但是视方案不同会有很多BUG，而且离线博客意义何在啊！

扩展 Vue 组件

你是否在开发基于 Vue 的 app 时使用过具有相同属性甚至具有相同的 template 结构的组件？

Hexo-Butterfly主题修改记录-2

添加跳动的心首先在博客引入这个开源css \themes\butterfly\layout\includes\footer.pug，找到此段代码：

butterfly文章页美化教程

在ROOT\themes\butterfly\source\css\page目录新建topimg.styl

Flutter必备语言Dart教程03 - 类，泛型

上篇中我们学习了Flutter必备语言Dart教程02 - 控制流，异常，现在我们继续学习Dart中的类和泛型。

Koa服务端渲染

1.基本使用新键文件 template/1.pug 这个文件存放html模板示例代码

NPM命令实用使用技巧总结

我们经常使用npm init来创建项目，并按照提示输入项目信息(项目名称、作者等)，但是，如果我们并不关心项目信息，并且保留默认值，那么我们对 npm 请求的每条数据按 Enter 键即可。事实上，我们只需要使用npm init -y,这个命令就可以达到直接使用默认值信息建一个项目。

Botui Talk Robot

botui.js 是一个简单的聊天机器人框架，使用它可以完成简易的脚本对话式交流。缺点是只能在自己设定的逻辑内进行有限问答，而不是像真正的 AI 那样智能会话。

【hexo】butterfly主题添加备案信息

由于新版butterfly主题删除了ICP配置，所以我们无法直接通过改_config.yml文件来设置备案信息显示。 1.按照路径找到footer.pug文件

NPM插件的开发

本文讨论的npm插件化，针对的是那种可以放在单独的页面魔改，或者代码可以剥离出来，通过某个特定的页面容器进行挂载的植入式魔改方案。

Express服务器开发

让我们来创建Express应用程序，Express是一个Node.js Web应用框架，它很强大，可以为用户创建各种Web应用和HTTP工具，使用Express框架可以搭建一个完整功能的网站。

Express 应用程序生成器/脚手架

Express官方提供 express-generator 可以快速创建一个Express应用的骨架。

Valine评论系统的设置

遵循Valine的指示，配置好LeanCloud应用,点击控制台->注册并登录账号->创建应用->随便取名字填入描述->设置->应用凭证，就能看到需要的信息重点关注其中的appId,appKey和Request域名。

Hexo在顶部增加天气小部件

去中国天气官网：https://cj.weather.com.cn/ 先注册一个账号，然后点击自定义插件

Hexo页脚养鱼效果

页脚养鱼效果我也是折腾了蛮久的，奈何自己太菜，出现了一些问题也不知道怎么解决，查询一些博客，相关的描述也很简单。这里参考了Ln大佬的博客，总算是搞定了。

Sidebar Card Clock

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。静态资源包内的index.pug为butterfly_v3.5.1版本。其他版本改法详见教程正文。

博客添加待办清单页

参考：博客添加待办清单页 1. 前言要做的事还有很多，想做的事源源不断，那就都记录在博客里吧，ToDoList。 2. 实现新建 [blogroot]\themes\butterfly\layout\includes\page\todolist.pug 添加以下代码 #todolist-box .page-top-card(style='background-image: url(/img/todo.webp);') .content-item-tips 想做清单

Hexo博客 | 动态分类标签条，自动获取全站分类与标签进行展示

本文是对Heo博主写的Butterfly魔改：动态分类条，可以根据页面变化而改变的分类列表展示方式文章的补充，增加了动态标签条，并且可以自动获取全站分类和标签名称。

Sidebar Artitalk

本项目是对冰卡诺老师写的教程：基于Butterfly主题的侧边栏说说进行重构，新增pjax适配和artitalk_v3.2.1及以上版本的适配。后续也会继续在本帖基础上继续开发。

MXNet Scala发布图像分类API|附使用教程

这次发布的 Scala，里面的推理应用程序致力于优化开发者体验。Scala 是一个通用目的程序语言，支持功能性编程和较强的静态类型系统，它被用于平台的高度分布式处理像 Apache Spark。

前端工作方式要换了？HTMX简介：无需JavaScript的动态HTML

HTMX允许你使用扩展的HTML语法代替 JavaScript 来实现交互性。HTMX 在标记中直接为你提供HTTP 交互，并支持许多其他交互需求，无需求助于 JavaScript。这是一个有趣的想法，可能最终会影响到web前端的工作方式。让我们看看如何使用HTMX以及它的吸引力。

使用Webpack快速配置编写HTML基础环境

前言由于项目需要构建个webpack打包坏境：目前用到技术栈：Pug + SASS + Webpack + browser JavaScript使用ES6编写编译ES5即可。 package.json直接写入： { "name": "My_Project", "version": "0.0.1", "scripts": { "serve": "webpack-dev-server", "build": "webpack --config webpack.config.prod

Butterfly布局调整———相关推荐版块侧栏卡片化

之前一直没有留意到，butterfly的原生相关推荐版块和其他布局比起来实在是太突兀了（主要是没有圆角），就那么突然的出现在文章和评论区之间，包括我和@贰猹都觉得有必要改动这个（不过贰猹是不要侧栏党），@洪哥的倒是和整个文本融合的不错（是配色效果吗？）。出于我守财的习惯，我通常不会直接删除主题已有的一些功能，那么要怎么处理这个那么大一块的推荐版块呢？我的做法就是，把它丢到可以自由控制显隐的侧栏里。还能顺便沿用我之前写的SAO UI和手机端侧栏fixed卡片样式。

Friend Link Card Beautify

Butterfly 的友链太过单调了。加上之前正好移植了 Volantis 的一堆外挂标签样式，突发奇想用 Site-card 来写友链，效果相当理想。

纯CSS实现侧栏卡片显隐

以前我有写过一篇基于Butterfly的手机端fixed定位侧栏布局魔改方案,抛开被洪哥忽悠而起的这么长的标题不谈，在这篇中是通过编写一个手机端fixed定位的样式，并通过js监测到对应的点击动作后，给相应的侧栏卡片添加上这个样式。同时也是通过js不断的进行样式初始化和class的增减。

运用 MXNet Scala API 接口进行图像分类（附代码）

随着 MXNet 1.2.0 版本的发布，新的 MXNet Scala API 接口也发布了。这次发布的 Scala，里面的推理应用程序致力于优化开发者体验。Scala 是一个通用目的程序语言，支持功能性编程和较强的静态类型系统，它被用于平台的高度分布式处理像 Apache Spark。

Vue笔记：VS Code 常用快捷键

1、Auto Rename Tag 修改 html 标签，自动帮你完成尾部闭合标签的同步修改，和 webstorm 一样。

vscode html注释快捷键_VSCode 的快捷键及常用插件总结

1、Auto Rename Tag 修改 html 标签，自动帮你完成尾部闭合标签的同步修改，和 webstorm 一样。

Hexo增添公告栏计时器小部件

找到主题配置文件_config.butterfly.yml，在inject的bottom处引入该js文件：

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在pug中添加新行？

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐