解決PHPCMS更換JavaScript幻燈片代碼調用圖片問題

問題背景

在 PHPCMS 二次開發中，經常需要將現成的 JavaScript 幻燈片組件（如 Slide.js、Swiper 等）整合進模板。這類組件通常要求數據格式為「標題|圖片|鏈接」以「|」分隔的字符串，例如：

var titles = '標題1|標題2|標題3';
var imgs   = '/path/img1.jpg|/path/img2.jpg|/path/img3.jpg';
var urls   = 'https://a.com|https://b.com|https://c.com';

但 PHPCMS 標籤 {pc:content} 循環輸出的是數組結構，無法直接生成上述格式。本文提供一種通用的「模板標籤循環 + JS 字符串拼接」方案，無需修改核心代碼即可實現無縫對接。

解決方案核心思路

1. 在模板中使用 {pc:content} 調取推薦位數據（含標題、縮略圖、鏈接）。
2. 利用 PHP 內嵌語法 {php ...} 聲明 JS 數組並賦值。
3. 循環結束後，用 JavaScript for 迴圈將三個數組拼接為「|」分隔字符串。
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 $a = 1;}
{loop $data $r}
title[{$a}] = "{$r['title']}";
img[{$a}]   = "{thumb($r['thumb'], 295, 225)}";
url[{$a}]   = "{$r['url']}";
{php $a++;}
{/loop}
{/pc}

var files = "", links = "", texts = "";
for (var i = 1; i < img.length; i++) {
    if (files === "") files = img[i];
    else files += "|" + img[i];
}
for (var i = 1; i < url.length; i++) {
    if (links === "") links = url[i];
    else links += "|" + url[i];
}
for (var i = 1; i < title.length; i++) {
    if (texts === "") texts = title[i];
    else texts += "|" + title[i];
}

var titles = texts;
var imgs   = files;
var urls   = links;
// 此處可直接初始化幻燈片組件，如 new Slide({titles, imgs, urls});
</script>

關鍵點解析

• posid="1"：對應後台「推薦位管理」中創建的幻燈片推薦位 ID。
• thumb="1"：必須開啟，否則 $r['thumb'] 為空。
• thumb($r['thumb'], 295, 225)：PHPCMS 內置縮略圖函數，自動生成指定尺寸圖片並返回 URL。
• 數組下標從 1 開始：配合 {php $a=1} 避免 JS 數組索引 0 為空導致拼接出現前導「|」。
• 編碼一致性：模板文件需保存為 UTF-8 無 BOM，防止中文標題輸出亂碼。

進階優化建議

1. 輸出 JSON 而非字符串：現代組件多支援 JSON 配置，可在 PHP 中直接 json_encode 輸出，避免手工拼接錯誤。
2. 分離數據與視圖：將數據獲取邏輯封裝為模型方法，模板僅負責渲染，提高可維護性。
3. 圖片延遲加載：拼接時輸出 data-src，配合 IntersectionObserver 實現懶加載。
4. 容錯處理：檢查 $r['thumb'] 是否為空，提供預設佔位圖。

常見報錯與排查

總結

通過「PHPCMS 標籤循環 + JS 字符串拼接」的輕量級方案，可快速將任意 JavaScript 幻燈片組件接入 PHPCMS，無需修改核心代碼，適配性強、維護成本低。新專案建議採用 JSON 數據接口 + 前端框架（Vue/React）渲染，進一步提升開發體驗與性能。