Jade To Pug过程中的一个小问题
最近在使用jade+express+typescript搭建一个博客项目,在使用jade-bootstrap项目时出现了一个问题
在使用其中的carousel时,发现其中的变量并没有转义
+carousel("157",[
{image:"images/bgimage.jpg",h1:"Headline #1",p:"Carousel Caption #1",button:{caption:"Sign up today",url:"#"}},
{image:"images/bgimage.jpg",h1:"Headline #2",p:"Carousel Caption #2",button:{caption:"Sign up today",url:"#"}},
{image:"images/bgimage.jpg",h1:"Headline #3",p:"Carousel Caption #3",button:{caption:"Sign up today",url:"#"}},
{image:"images/bgimage.jpg",h1:"Headline #4",p:"Carousel Caption #4",button:{caption:"Sign up today",url:"#"}}
])
结果是
<div class="carousel slide" id="carousel-#{id}" data-ride="carousel">
<ol class="carousel-indicators">
<li class="" data-target="#carousel-#{id}" data-slide-to="#{index}"></li>
<li data-target="#carousel-#{id}" data-slide-to="#{index}" class=""></li>
<li data-target="#carousel-#{id}" data-slide-to="#{index}" class=""></li>
<li data-target="#carousel-#{id}" data-slide-to="#{index}" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item"><img src="#{item.image}">
<div class="carousel-caption">
<h1>Headline #1</h1>
<p>Carousel Caption #1</p>
<p><a class="btn btn-lg btn-primary" href="#{item.button.url}" role="button">Sign up today</a></p>
</div>
</div>
<div class="item">
<img src="#{item.image}">
<div class="carousel-caption">
<h1>Headline #2</h1>
<p>Carousel Caption #2</p>
<p><a class="btn btn-lg btn-primary" href="#{item.button.url}" role="button">Sign up today</a></p></div>
</div>
<div class="item">
<img src="#{item.image}"><div class="carousel-caption"><h1>Headline #3</h1><p>Carousel Caption #3</p><p>
<a class="btn btn-lg btn-primary" href="#{item.button.url}" role="button">Sign up today</a></p></div></div><div class="item active"><img src="#{item.image}"><div class="carousel-caption"><h1>Headline #4</h1><p>Carousel Caption #4</p><p>
<a class="btn btn-lg btn-primary" href="#{item.button.url}" role="button">Sign up today</a></p></div></div></div>
<a class="left carousel-control" href="#carousel-#{id}" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-#{id}" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
其中的a属性的#{item.image}原样输出,开启jade模版的debug也并没有报错。
pug其实就是jade的新版本,为了避免版权进行了修改,因此我一开始查阅的jade资料。
我在该库的issues中看见了一个很久的issue
当然最后是在看pug的英文文档发现了错误,该库的源码在jade更新到pug后由于api的改变已经不能正确使用,需要进行修改。
jade to pug 迁移的文档
另一个相关的issue
唉,偷懒看中文文档确实没法保证时效性啊。修改了其中模版的代码后可以正确使用。
Jade To Pug过程中的一个小问题的更多相关文章
- WPF中使用WindowChrome美化窗口过程中的一个小问题
WPF中使用WindowChrome美化窗口,在园子里有几篇不错的文章,我也是参考练习过程中发现的问题,并记录下来. 在看过几篇教程后,给出的窗口很多出现这样一个问题,如果设置了窗口标题栏的高度大于默 ...
- Q:记学习枚举过程中的一个小问题
在学习有关java枚举的时候,我们知道了所有的枚举类型均是继承自java.lang.Enum类的,且所有的枚举常量均是该枚举类型的一个对象,且对象名即为该枚举常量的名称.例子如下:源码: public ...
- ACM 做题过程中的一些小技巧。
ACM做题过程中的一些小技巧. 1.一般用C语言节约空间,要用C++库函数或STL时才用C++; cout.cin和printf.scanf最好不要混用. 2.有时候int型不够用,可以用long l ...
- 使用Mac的过程中的一些小操作
前言:使用Mac的过程中的一些小操作 查看Mac系统是32位还是64位: 方法1: 点击左上角的苹果按钮->关于本机->概览->系统报告->软件->偏好设置面板:右侧有提 ...
- Jenkins. 安装过程中出现一个错误: No such plugin: cloudbees-folder
安装过程中出现一个错误: No such plugin: cloudbees-folder 安装插件,有时候会报类似的错误:An error occurred during installation: ...
- 简明Python中的一个小错误
最近在学Python,先看的是<Python基础教程>,后来经别人推荐,感觉网络上的<简明Python教程>也挺好的,在里面发现一个小错误. 网址如下:http://sebug ...
- python开启httpserver服务在自动化测试中的一个小运用
httpserver可以在本机启动一个python实现的web服务器,在自动化测试中,可以将生成测试报告的目录开放给项目组同事. 先安装python 自动化测试框架,生成报告的目录D:\Automat ...
- C# JSON使用过程中开发的小工具
我在用JSON的过程中,经常要去看一下JSON的结构,而JSON串大不部分时候都是未格式化的数据,一次我不得不用一些网页上的在线解析和格式化工具来进行格式化查看,但是这些网页有时候并不好用:因此就结合 ...
- ACE调试中的一个小问题——ace_main_i无法链接
初学ace没多久,今天遇到了一个小问题. 具体是:我在写完代码之后,编译老是出现一个错误. 提示: ACE_TEST1.obj : error LNK2019: 无法解析的外部符号 "int ...
随机推荐
- go mac 交叉编译 linux
CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -ldflags '-w' -o server ./server.go
- Linux学习-MySQL的高可用性集群Galera Cluste
一.Galera Cluste简介 1.Galera Cluster 集成了Galera插件的MySQL集群,是一种新型的,数据不共享的,高度冗余的高可用方案,目前Galera Cluster有两个版 ...
- 简单的DOS攻击之死亡之ping详解
DOS攻击之死亡之ping详解,dos攻击,俗称拒绝服务攻击,通过发送大量的无用请求数据包给服务器,耗尽服务器资源,从而无法通过正常的访问服务器资源,导致服务器崩溃. 如果多个ip通过发起对一个服务器 ...
- POJ 2253 Frogger ( 最短路变形 || 最小生成树 )
题意 : 给出二维平面上 N 个点,前两个点为起点和终点,问你从起点到终点的所有路径中拥有最短两点间距是多少. 分析 : ① 考虑最小生成树中 Kruskal 算法,在建树的过程中贪心的从最小的边一个 ...
- TreeView拖动并存入数据库(可判断拖动)
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- HDU4336 Card Collector (概率dp+状压dp)
http://acm.hdu.edu.cn/showproblem.php?pid=4336 题意:有n种卡片,一个包里会包含至多一张卡片,第i种卡片在某个包中出现的次数为pi,问将所有种类的卡片集齐 ...
- ruby的DIR.pwd
在ruby 中,以下代码可以获得当前脚本的绝对路径: require 'pathname' puts Pathname.new(__FILE__).realpath 将以上代码保存在test1.rb中 ...
- JS-关闭当前窗口
不提示直接关闭 默认有提示,若希望不提示直接关闭则需要使用(并非兼容全部浏览器) window.opener=null; window.open('','_self'); window.close() ...
- jmeter3.0+ant1.10+jenkins实现接口自动化并发送邮件
有很多关于接口自动化的文章,此篇仅用于记录自己的学习用.使用jmeter3.0+ant1.10+jenkins2.实现接口自动化并发送邮件,本篇是用的编写build文件来实现发送邮件,也可以用jenk ...
- python实现堆栈与队列的方法
python实现堆栈与队列的方法 本文实例讲述了python实现堆栈与队列的方法.分享给大家供大家参考.具体分析如下: 1.python实现堆栈,可先将Stack类写入文件stack.py,在其它程序 ...