镇江网站建设dmooo,广告投放费用,wordpress投票插件,wordpress 微信 插件大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;#x1f449;雄雄的小课堂#x1f448;。 #x1f481;♂️前言
前几天#xff0c;分享了一篇关于publiccms的教程#xff0c;在这里#xff1a;【最全最详细】publiccms使用教程#xff0c;不… 大家好我是雄雄欢迎关注微信公众号雄雄的小课堂。 ♂️前言
前几天分享了一篇关于publiccms的教程在这里【最全最详细】publiccms使用教程不过这篇只是笼统的介绍了下publiccms的使用方式适应比较老点儿的门户网站如果遇到比较主流点儿的网站就不太适应了。
比如这种的 图片来源于php中文网 图片来源于php中文网
为了避免以后遇到之后忘记怎么做网上相关资料太少太少了官网上所有的内容都统一放在一起按照自己的需求找的时候很费劲实话。我也是边学习边做反反复复花费了许多精力所以准备最近这几天正好有空整理一份给适合自己的教程吧。
本系列文章以该静态页面为主有需要的可以留言获取。 今天整理的是在publiccms中如何实现首页动态可维护的轮播图。
从0到1
从0开始配置publiccms实现首页的制作我这边简单录了个视频大家可以跟着视频操作。
思路
将轮播图放在页面片段中通过管理页面片段的方式实现管理轮播 该页面轮播图处有三张图片。
实现
点击开发–页面片段模板–》创建页面片段–》起个别名就行路径可以默认即可因为首页轮播是三张图所以我们把数据条数改成3就行然后下面把封面勾选上作为首页的轮播图展示最后点击保存 点击左侧的推荐位首页轮播图即可编写代码。此处代码的作用就是遍历后台手动添加的轮播图后面在说怎么添加轮播图 关键代码如下 #list page.list#items as ali a classpic 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 idmain_sliderdiv classcamera_wrap idcamera_wrap_1!-- 轮播图开始 --#list page.list#items as adiv data-src${a.cover!}div classcamera_caption fadeIndiv classslide_descr${a.title} /div/div/div!-- 轮播图结束 --/#items /#list/div!-- #camera_wrap_1 --div classclear/div /div!--//slider--将改好的代码直接放在页面片段中然后点击保存。 点击左侧的模板文件菜单打开index.html模板文件把原来静态轮播的代码删掉注意和页面片段中的代码对应起来不要多写也不要少写两边结合起来应该是正好的。点击上面的页面片段。 选中需要引入的页面片段。这个思路和我们的ifream框架一样通过引入的方式来实现共用页面【轮播可能在别的页面也用】 最后就可以看到是这样的然后记得点击保存。 动态维护轮播图
点击页面–》页面片段管理–》推荐位首页轮播图。 点击添加页面片段数据即可添加轮播图的信息。 随便找三张轮播图放上去就可以。 点击保存第二张和第三张添加轮播的方式也是一模一样的。最后可以看到是这样的。 刷新首页即可看到动态轮播已经加载过来了。 好了这就是今天分享的使用publiccms实现动态维护的轮播展示图下期我们看看如何使用publiccms实现动态分类不光一级还有二级分类。
mg-3wj7LFM5-1629554801834)]
[外链图片转存中…(img-xmWA47f0-1629554801834)]
好了这就是今天分享的使用publiccms实现动态维护的轮播展示图下期我们看看如何使用publiccms实现动态分类不光一级还有二级分类。
