zoukankan      html  css  js  c++  java
  • 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

    唉,偷懒看中文文档确实没法保证时效性啊。修改了其中模版的代码后可以正确使用。

  • 相关阅读:
    【.Net Micro Framework PortingKit 07】NVIC中断处理
    【.Net Micro Framework PortingKit 02】STM3210E平台构建
    【.Net Micro Framework PortingKit 06】设置芯片时钟
    【.Net Micro Framework PortingKit 03】调试初步:点亮LED灯
    【.Net Micro Framework PortingKit 01】移植初步:环境搭建
    开源System.Windows.Forms库,让.Net Micro Framework界面开发和上位机一样简单
    RVDS和MDK嵌入式开发工具调试脚本编写
    JQuery移除事件 简单
    Visual C++ 2008入门经典 第十六章 创建文档和改进视图 简单
    Visual C++ 2008入门经典 第十五章 在窗口中绘图 简单
  • 原文地址:https://www.cnblogs.com/lynsyklate/p/8148492.html
Copyright © 2011-2022 走看看