PHPCMS 模板中實現 JavaScript 幻燈片資料動態綁定

在 PHPCMS 模板中直接嵌入 JavaScript 幻燈片代碼時，常面臨「JS 變數需特定格式」與「模板標籤輸出格式不符」的衝突。本文展示如何用 PHPCMS 模板標籤動態產生符合幻燈片插件要求的 JS 陣列字串。

目標格式分析

幻燈片插件要求三個 JS 變數，以 | 分隔：

var titles = '標題1|標題2|標題3|標題4';
var imgs   = '圖片路徑1|圖片路徑2|圖片路徑3|圖片路徑4';
var urls   = '連結1|連結2|連結3|連結4';

模板實作邏輯

1. 使用 {pc:content action="position" ...} 取得推薦位資料。
2. 在 {loop} 迴圈中，將標題、縮圖 (經 thumb() 處理)、連結分別存入 JS 陣列。
3. 迴圈結束後，用 JS for 迴圈將三個陣列 join('|') 成插件要求的字串格式。
4. 最後賦值給插件原始變數 titles、imgs、urls。

完整模板代碼

<script type="text/javascript">
var title = new Array();
var img   = new Array();
var url   = new Array();

{pc:content action="position" posid="1" order="listorder DESC" thumb="1" num="5"}
    {php $i = 1;}
    {loop $data $r}
        title[{$i}] = "{$r['title']}";
        img[{$i}]   = "{thumb($r['thumb'], 295, 225)}";
        url[{$i}]   = "{$r['url']}";
        {php $i++;}
    {/loop}
{/pc}

var titles = '', imgs = '', urls = '';
for (var i = 1; i < title.length; i++) {
    titles += (titles === '' ? '' : '|') + title[i];
    imgs   += (imgs   === '' ? '' : '|') + img[i];
    urls   += (urls   === '' ? '' : '|') + url[i];
}
// 供幻燈片插件使用的最終變數
var titles = titles;
var imgs   = imgs;
var urls   = urls;
</script>

關鍵點說明

• thumb($r['thumb'], 295, 225)：PHPCMS 內建縮圖函式，自動產生指定尺寸縮圖並回傳 URL。
• 陣列索引從 1 開始，配合 PHPCMS 循環計數器 {php $i=1;}，避免 0 索引干擾。
• JS 迴圈條件 i < title.length 而非 i <=，因陣列長度含空索引 0。
• 字串拼接用三元運算子處理首項無 |，後項加 |，輸出格式完全符合插件預期。

進階：封裝為模板片段 (include)

將上述代碼存為 templates/default/content/slider_js.html，在需要幻燈片的頁面直接引入：

{template "content", "slider_js"}

並在對應推薦位 (posid=1) 發布內容，即可自動生效，無需修改 JS 代碼。

常見問題排查

小結

核心思維是「模板層收集資料 → JS 層組裝格式」。利用 PHPCMS 標籤輸出 JS 陣列初始化，再用純 JS 組合成插件要求的分隔字串，既保持模板靈活性，又滿足前端插件嚴格格式需求。