Jade To Pug過程當中的一個小問題

最近在使用jade+express+typescript搭建一個博客項目,在使用jade-bootstrap項目時出現了一個問題
在使用其中的carousel時,發現其中的變量並無轉義html

+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:"#"}}
            ])

結果是git

<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中看見了一個好久的issuegithub

固然最後是在看pug的英文文檔發現了錯誤,該庫的源碼在jade更新到pug後因爲api的改變已經不能正確使用,須要進行修改。typescript

jade to pug 遷移的文檔express

另外一個相關的issuebootstrap

唉,偷懶看中文文檔確實無法保證時效性啊。修改了其中模版的代碼後能夠正確使用。api

相關文章
相關標籤/搜索