欢迎来到我的网上家园,谢谢关心和支持!

帝国模板制作笔记(仿phpabc.cn)首页图片轮播

2019-03-12 20:05:13 帝国CMS 帝国
对照打开的网页和源代码,我们可以看到phpabc的图片由一大二小,三幅图组成。图片不一样大,这可怎么办呢?其实帝国早就为我们做好了一切,不然,怎么能称为万能的cms呢?
在制作这图片轮播之前,可以先看看官方这个帖子:http://bbs.phome.net/ShowThread/?threadid=29391&forumid=35
只不过,我们要把它变成不规则图片。
我们还是来看源网站,在</header>下面是<section id="content">(主体开始)  <div id="main">(主列表开始)
<div class="focuson">
     <ul>
     <li class="large"><a href="http://www.phpabc.cn/simple-tux.html"><img src="http://www.phpabc.cn/uploads/2017/02/simpletux.jpg" style="display: inline;"><h4>自用博客主题 - Simlpe Tux</h4></a></li>
     <li><a href="http://www.phpabc.cn/zai-php-li-qrcode-de-can-shu-xiang-jie.html"><img src="http://www.phpabc.cn/uploads/2017/02/qrcode.jpg" style="display: inline;"><h4>PHP里QRcode的参数详解</h4></a></li>
     <li><a href="https://s.click.taobao.com/t?e=m%3D2%26s%3DNdvWRixNfpwcQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67qPABQyTNFjRVNjKoH%2FaCQPeHsjsifp2%2FAqwFQKzunVTqJfr0OcFy0CW%2BHNj9rkTdFaTBTBC3%2FwplrfKbc84rlenqNLfi9p0kpwGdCPWv7e5&pvid=10_115.236.28.234_650_1487151626485"><img src="http://www.phpabc.cn/uploads/2017/02/php-mysql.jpg" style="display: inline;"><h4>PHP和MySQL Web开发(原书第4版)</h4></a></li>
     </ul>
     </div>
这就是它的图片代码,我们可以对应页面看它们的具体位置和大小,现在我们把它复制到写字板,进行加工。同样,我们要新建一个标签模板,同作调用时作模板。
我把名称定为:“图片+标题首页图”
页面模板内容:
<div class="focuson">
     <ul>
[!--empirenews.listtemp--]
 <li class="large"><!--list.var1--> </li>
 <li> <!--list.var2--> </li>
 <li> <!--list.var3--> </li>

[!--empirenews.listtemp--]
 </ul>
     </div>
红色部分即为三张图片的位置,可以看三张图片可以使用三个不同的风格,每个里面放一个<!--list.var*--> 把*号换成相应的数字即可。
列表内容模板(list.var) (*):
<a href="[!--titleurl--]"><img src="[!--titlepic--]"  alt="[!--oldtitle--]" style="display: inline;"><h4>[!--title--]</h4></a>
这部分就是三张图片共同的部分,链接、图片和标题。
然后,我们就可以用自动生成标签工具,选取有图片的信息,选择我们刚才新建的标签模板就可以实现调用了。注意调用数量只能有3个
我用的是万能标签进行调用的:[ecmsinfo]0,3,32,0,13,14,0[/ecmsinfo],调用的是头条信息,通过这种方式,我们可以在添加信息时选择为头条,达到精准推送的目的。

当然,上面只是其中一个思路,还可以有其他思路,把它的三个位置分别放三个标签,通过sql条件选项,实现更加精准的推送。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表