- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
为了轻松创建常见 UI 组件的引用目录,我想从一系列标记片段(每个组件一个)生成静态页面:
h2 List Group
p as provided by Bootstrap
+component("list_group")
h2 Panel
p also provided by Bootstrap
+component("panel")
这应该扩展到包括三个版本的所述 Jade 文件:原始、转义 HTML 和未转义 HTML。
h3 Markup (HTML)
pre.lang-html
include:escaped components/list_group
h3 Markup (Jade)
pre.lang-jade
include:verbatim components/list_group
h3 Output
include components/list_group
<h3>Markup (HTML)</h3>
<pre class="lang-html">
<ul class="list-group">
<li class="list-group-item">foo</li>
<li class="list-group-item">bar</li>
</ul>
</pre>
<h3>Markup (Jade)</h3>
<pre class="lang-jade">
ul.list-group
li.list-group-item foo
li.list-group-item bar
</pre>
<h3>Output</h3>
<ul class="list-group">
<li class="list-group-item">foo</li>
<li class="list-group-item">bar</li>
</ul>
但是,据我所知,Jade 不支持动态/参数化包含*,因此它并不像预期的那么简单。
我可以(ab)使用自定义过滤器吗? (看起来我无论如何都必须编写 escaped
过滤器。)任何提示将不胜感激。
最佳答案
你可以使用类似的东西
main.jade
- var condition=false
if condition
include ./sub.jade
else
include ./sub2.jade
子 Jade
p Hello World
sub2.jade
p 42
条件=true
kluth@pc:~/$ jade main.jade && cat main.html
rendered main.html
<p>Hello World</p>
条件=假
kluth@pc:~/$ jade main.jade && cat main.html
rendered main.html
<p>42</p>
使用jade 1.11.0进行测试
关于pug - 嵌入 Jade 包括变体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35115435/
将对象从 app.js 传递给 Pug router.get('/', getMenuList, function (req, res, next) { res.render('menu_it
我们如何在 Jade/Pug 中跨多行写入长属性值? SVG 路径往往很长。我们希望将属性值写在多行上以提高可读性。例如,Mozilla 的 tutorial用 HTML 编写很容易阅读。 有什么方法
我很难找到一个好的解决方案。问题是我想要在我的导航项目上动态更新事件类,但是我不知道如何去做。任何人都可以帮助我解决自动为当前页面对应的导航项目提供某个类的解决方案吗? 这是我的 layout.pug
如果我想引用文字 !{a}在代码中。我该怎么办? - var a = '5' // I have to use the variable name "a" script. var str = "!
我正在尝试向 Jade 模板添加动态类。像这样: - var obj = {a: 1, b: 2, c: 3}; - var len = Object.keys(obj).length; .abc-#
如何在 Pug 模板引擎中阻止注释掉代码? 我知道如何注释掉一行: //-doesn't show 但我不想像这样写完整的 html 评论: 最佳答案 //- Just indent the
我想要这样的东西: html head style(type="text/css") table { width: 100% } body
我正在 keystone 中使用哈巴狗,在添加侧面导航时出现这样的错误。 > 6| a(href="#")About --------------------^ 7| a(href="#")Servi
这是我要完成的事情的简化版本: mixin foo(bar) = bar + ".html" a(href= +foo("baz")) test 我想将 anchor 标记编译为 test ,
Jade 不再被称为“ Jade ”。它现在被称为“帕格”。为了将旧的 jade 项目转换为新的 pug 格式,您需要将所有旧的 .jade 文件重命名为 .pug 文件。 手工制作既痛苦又乏味,肯定
我已经安装 https://github.com/pug-php/pug使用 composer,现在我的项目中有一个子目录 vendor/pug-php/pug,但我不知道如何使用它。 如果我尝试 $
我正在尝试编写一个简单的应用程序,例如待办事项列表,当我按下按钮时,我需要动态创建(在div中使用增量id),并向HTML输入输入一些文本。例如: 问题是,当我尝试获取 var data 时,
是否可以在父 pug 文件中为 includeed pug 文件传递参数。例如,如果我有一个子模板 example.pug: p #{name}'s Pug source code! 还有一个父级
我需要在 pug 文件中插入一个包含一些 pug 格式代码的字符串。 我测试过的内容: - var text = "i.home.icon" div= text div !{text} div #{t
我有以下代码(Chart.js 片段): datasets: [{ label: 'Hashes/s', data: numbe
我有一个带有数组的 pug 模板,我想将其传递给用于填充某些 schema.org (json) 标记的 mixin。 代码如下: 配置文件.pug include ../components/bio
我正在尝试从服务器加载数据到我的哈巴狗模板中。 我的路线如下所示: app.get('/serverdata', async(req, res) => { const chartData = []
我正在使用 Node.js、Express 和 Pug 创建一个简单的 Web 服务器。 包.json: { "name": "testing", "version": "0.0.7",
我的 src/ 目录如下: src/ ---about/ ------history.pug ------mission.pug ---contact/ ------email.pug ---inde
我在 Symfony 2.8 中安装 pug-php/pug-symfony 时遇到问题。我从全新的 symfony 安装开始并执行 composer require pug-php/pug-symf
我是一名优秀的程序员,十分优秀!