大家好，我是雄雄，歡迎關注微信公眾號：👉雄雄的小課堂👈。

💁?♂?前言

前幾天，分享了一篇關于publiccms的教程，在這里：【最全最詳細】publiccms使用教程，不過這篇只是籠統的介紹了下publiccms的使用方式，適應比較老點兒的門戶網站，如果遇到比較主流點兒的網站就不太適應了。

比如這種的：

? 圖片來源于：php中文網

? 圖片來源于：php中文網

為了避免以后遇到之后忘記怎么做（網上相關資料太少太少了，官網上所有的內容都統一放在一起，按照自己的需求找的時候很費勁，實話。我也是邊學習邊做，反反復復花費了許多精力），所以準備最近這幾天正好有空，整理一份給適合自己的教程吧。

本系列文章以該靜態頁面為主，有需要的可以留言獲取。

今天，整理的是在publiccms中如何實現首頁動態可維護的輪播圖。

👨?🏫從0到1

從0開始配置publiccms，實現首頁的制作，我這邊簡單錄了個視頻，大家可以跟著視頻操作。

👨?💻思路

將輪播圖放在頁面片段中，通過管理頁面片段的方式，實現管理輪播 （該頁面輪播圖處有三張圖片）。

🔨實現

點擊開發–>頁面片段模板–》創建頁面片段–》起個別名就行，路徑可以默認即可；因為首頁輪播是三張圖，所以我們把數據條數改成3就行，然后下面把封面勾選上，作為首頁的輪播圖展示，最后點擊保存

點擊左側的推薦位：首頁輪播圖，即可編寫代碼。此處代碼的作用就是遍歷后臺手動添加的輪播圖（后面在說怎么添加輪播圖）

關鍵代碼如下：

<#list page.list><#items as a><li> <a class="pic" href="${a.url!}"><img src="${a.cover!}" /></a></li></#items></#list>

• ${a.url!}：輪播的鏈接
• ${a.cover!}：輪播圖

注意，在實際開發中，樣式之間的嵌套千萬不要錯，比如以現在的靜態頁面距離，下面這段是源代碼輪播實現：

那我們就得遍歷<div data-src="${site.sitePath}publiccms教程/publiccms教程/images/slider/slide1.jpg">的div，最后的實現代碼如下：

<!--slider--><div id="main_slider"><div class="camera_wrap" id="camera_wrap_1"><!-- 輪播圖開始 --><#list page.list><#items as a><div data-src="${a.cover!}"><div class="camera_caption fadeIn"><div class="slide_descr">${a.title} </div></div></div><!-- 輪播圖結束 --></#items> </#list></div><!-- #camera_wrap_1 --><div class="clear"></div> </div><!--//slider-->

將改好的代碼直接放在頁面片段中，然后點擊保存。

點擊左側的模板文件菜單，打開index.html模板文件，把原來靜態輪播的代碼刪掉，注意和頁面片段中的代碼對應起來，不要多寫，也不要少寫，兩邊結合起來應該是正好的。

點擊上面的頁面片段。

選中需要引入的頁面片段。（這個思路和我們的ifream框架一樣，通過引入的方式來實現共用頁面【輪播可能在別的頁面也用】）

最后就可以看到是這樣的，然后記得點擊保存。

👨?🏫動態維護輪播圖

點擊頁面–》頁面片段管理–》推薦位：首頁輪播圖。

點擊添加頁面片段數據，即可添加輪播圖的信息。

隨便找三張輪播圖放上去就可以。

點擊保存，第二張和第三張添加輪播的方式也是一模一樣的。最后可以看到是這樣的。

刷新首頁，即可看到動態輪播已經加載過來了。

好了，這就是今天分享的使用publiccms實現動態維護的輪播展示圖，下期我們看看如何使用publiccms實現動態分類，不光一級，還有二級分類。

mg-3wj7LFM5-1629554801834)]

[外鏈圖片轉存中…(img-xmWA47f0-1629554801834)]

好了，這就是今天分享的使用publiccms實現動態維護的輪播展示圖，下期我們看看如何使用publiccms實現動態分類，不光一級，還有二級分類。

總結

以上是生活随笔為你收集整理的【最全最详细】使用publiccms实现动态可维护的首页轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。