2015-07-03 41 views
0

我正在修改一個wordpress插件(由SiteOrigin 2.0.7頁面生成器),並且在一個php文件中有一些變量(tpl/js-templates.php)在我不認識的表示法中。變量看起來像這樣:{{%= foo %}}它們總是出現在html中。這是什麼類型的變量是在PHP中:{{%= description%}}

下面是一些HTML的例子:

<div class="so-buttons"> 
    {{%= buttons %}} 
</div> 
<div class="so-content panel-dialog"> 
    <img src="{{%= url %}}"> 
    {{%= content %}} 
</div> 

這是什麼?這是刀片模板符號嗎?

如何在條件中使用此變量?例如,我想測試{{%= url %}}是否爲jpg網址。

+0

我不是100%肯定,但它看起來像把手它基本上是一個JavaScript庫查找它可能是 – Innervisions

+0

哪個插件和哪個版本?請提供您擁有的所有詳細信息。 –

+0

我剛剛添加了該信息。它是SiteOrigin 2.0.7的[Page Builder](https://siteorigin.com/page-builder/),文件是tpl/js-templates.php。 – msb

回答

1

這是一個有點新的給我,所以我可能是錯在這裏,但讓通過插件遵循代碼向後..

{{%出現在tpl\js-templates.php 36倍和js\siteorigin-panels.js(和.min版)一次。 %}}只出現在同一個php文件中的34次,仍然在js文件中。

在js文件,他們出現在14+線,在這裏:

String.prototype.panelsProcessTemplate = function(){ 
    var s = this; 
    s = s.replace(/{{%/g, '<%'); 
    s = s.replace(/%}}/g, '%>'); 
    s = s.trim(); 
    return s; 
}; 

所以他們使用{{%作爲一個佔位符,並使用JS用<%來取代它。關閉%}}(現在的%>)也是如此。

它也顯示爲<script>的一種簡寫形式?

{{% if(count > 1) { %}} <span class="count">({{%= count %}})</span>{{% } %} 

考慮看看這個文件對他們做任何評論的頂部,我們可以看到Convert template into something compatible with Underscore.js templates,所以我們知道我們應該拉起Underscore.js documentation以供將來參考。

那麼,panelsProcessTemplate()字符串原型怎麼用?在提到的js文件中有好幾次,例如在行211:

panels.view.widget = Backbone.View.extend({ 
    template: _.template($('#siteorigin-panels-builder-widget').html().panelsProcessTemplate()) 

這是Backbone.View的擴展中,這樣的Backbone documentation也可能是好的,開拓..

首先,讓我們看看我們的功能是直接加工 - #siteorigin-panels-builder-widget是在線文件93+:

<script type="text/template" id="siteorigin-panels-builder-widget"> 
<div class="so-widget ui-draggable"> 
<div class="so-widget-wrapper"> 
    <div class="title"> 
     <h4>{{%= title %}}</h4> 
     <span class="actions"> 
      <a href="#" class="widget-edit"><?php _e('Edit', 'siteorigin-panels') ?></a> 
      <a href="#" class="widget-duplicate"><?php _e('Duplicate', 'siteorigin-panels') ?></a> 
      <a href="#" class="widget-delete"><?php _e('Delete', 'siteorigin-panels') ?></a> 
     </span> 
    </div> 
    <small class="description">{{%= description %}}</small> 
</div> 
</div> 
</script> 

text/template is a browser-ignored template client-side code can use。因此它將替換{{%<%%}}%>在此模板中,運行它通過template()函數,並在此視圖中將它全部設置爲template變量。

什麼是template()在做什麼?它沒有在這個文件中定義,但它在Underscore.js documentation under the template section。顯然它實際上是整個_.template(),而不僅僅是template()。以下是概述:

將JavaScript模板編譯爲可進行渲染評估的函數。用於從JSON數據源渲染複雜的HTML數據。模板函數既可以使用<%= ...%>插值,也可以使用<%...%>執行任意JavaScript代碼。 [...]

所以,我們知道現在就像我們上面看到的是Underscore.js使用<%%>作爲模板的數據標識符,無論是變量和任意JavaScript。

我們知道{{% .. %}}

{{%= description %}}在這種情況下更多或更少的話說<script> document.write(description); </script>。它將description參數輸出到模板HTML中。

如果我是一個博彩人,我敢打賭你可以通過WordPress/Page Builder Admin更改小部件的標題和描述。

至於檢查變量是什麼,您可能最適合在頁面上呈現所有內容後進行檢查。

$(document).ready(function() { 
    if ($("#id .so-content img").prop("src").endsWith(".jpg")) { 
    ... 

endsWith是一個custom String prototype defined here