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 ...
随机推荐
- powerdesign 显示comment,生成excel
一.显示 Comment 1. 在弹窗的Table描述里面显Comment 效果图 实现方式: 2. 在最外层显示Comment 效果图 现实方式: 2.1. Tools > Display P ...
- java通配符写法
有时候我们会遇到这样的需求,需要把一个报文里的某些参数项通过通配符的形式配置成我们需要的结果值插入回报文中. String filetext = "<cn>#用户身份ID(主账号 ...
- hud 4347 The Closest M Points(KD-Tree)
传送门 解题思路 \(KD-Tree\)模板题,\(KD-Tree\)解决的是多维问题,它是一个可以储存\(K\)维数据的二叉树,每一层都被一维所分割.它的插入删除复杂度为\(log^2 n\),它查 ...
- 服务器在没有request请求时是什么状态
服务器,例如web服务器,在没有接受到request请求时,它是一种什么状态? 是监听状态,就像电灯泡在没通电的时候,没法光,灯泡不会不停的问电线有电吗?有电吗?而是电来了,状态就发生了改变! 服务器 ...
- zhanghao
账号:wx8b9ddd1c943ce95f 密码:fa72de9a1721849edc7f41f8a81019e5
- jacoco + ant远程统计(tomcat/spring boot)服务的代码覆盖率
什么是Jacoco? Jacoco(java code coverage)是一个开源的Java代码覆盖率工具,Jacoco可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件, ...
- CentOS-7.4(1708)release notes发行注记
Red Hat Enterprise Linux 当前的最新版本是 7.3. Red Hat Enterprise Linux 7 当前仅支持 64 位CPU:64-bit AMD.64-bit In ...
- MySQL 查询性能优化 - EXPLAIN 命令
查询优化的官方文档在 这里. EXPLAIN 的输出格式 译文 1. MySQL 架构 1.1 MySQL 的简化架构 MySQL 可以简单的分为三层:连接层.服务层.存储引擎层.其中服务层包含了 M ...
- canvas绘制小人开口和闭口
css: <style> body{ text-align: center; } canvas{ background: #ddd; } </style>canvas标签:&l ...
- centos 6.x 配置 mail 发送外部邮件详解和 sendmail 使用简介
一.mail基本配置 1.配置:vim /etc/mail.rc 在文件末尾追加以下内容: set from=@.com # 别名<123456789@163.com> set smtp= ...