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

帝国模板制作笔记(仿phpabc.cn)首页列表

2019-03-13 10:36:26 帝国CMS 帝国
 我们再年phpabc的首页,查看源文件,发现它的列表有两种情况,一种是有图片的,一种是没有图片的,两种混在一起,没有规律,用不规则新闻的方法已经是不行了。得另想他法。
我们可以想一下这个思路:先判断信息有没有标题图片,如果,就调用有图片的模板,如果没有就调用没有图片的模板,按照这个思路,是需要写php程序的。不过帝国论坛的高人们已经给了现成的代码来解决这个问题:
$titlepic='';(读取标题图片)
if($r[titlepic])(如果不为空)
{
$titlepic=' <a class="pic" href="[!--titleurl--]" title="[!--title--]"><img src="[!--titlepic--]" alt="[!--title--]" width="140px" height="86px" /></a>'; (图片部分模板)
}
$listtemp=' <li>
<div class="name"><a class="meiwen" href="[!--titleurl--]" title="[!--title--]" target="_blank">[!--title--]</a></div>
<div class="read">[!--onclick--]</div>
<div class="date">[!--newstime--]</div>
</li><p>'.
$titlepic.' [!--smalltext--]...<a class="text" href="[!--titleurl--]" target="_blank">[浏览全文]</a></p> '; (这句中红色部分就是图片模板,如果有的话它就带着模板加入,如果没有标题图片,那么这个变量就是空的,将不会对模板产生影响)

所以我们要做的就是找出目标网站上的这些代码进行修改。
我们先来解决图片部分的代码,先将它从源网站复制下来:
 <div class="thumbnail"><a href="http://www.phpabc.cn/net-framework-4-7-2-an-zhuang-shi-bai.html" title=".Net Framework 4.7.2安装失败"> <img width="220" height="107" src="http://www.phpabc.cn/uploads/2019/03/NET_Framework-220x107.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://www.phpabc.cn/uploads/2019/03/NET_Framework-220x107.jpg 220w, http://www.phpabc.cn/uploads/2019/03/NET_Framework.jpg 545w" sizes="(max-width: 220px) 100vw, 220px" /></a></div> 
发现它竟然用了三个图片来外理不同分辨率的问题,帝国可没有这样的功能,那我们只用一个,其它的删除掉。
  <div class="thumbnail"> <a href="[!--titleurl--]" title="[!--oldtitle--]"> <img src="[!--titlepic--]" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="[!--oldtitle--]" /></a> </div> 
用这段代码代替紫色的部分,注意,要留下两端的单引号。
 

<header><h2><a href="http://www.phpabc.cn/net-framework-4-7-2-an-zhuang-shi-bai.html" title=".Net Framework 4.7.2安装失败">.Net Framework 4.7.2安装失败</a></h2> </header>   
    <div class="excerpt">
     <div class="meta">
        <span class="meat_span"><i class="iconfont">&#xe629;</i>PHPABC</span>
     <span class="meat_span"><i class="iconfont">&#xe625;</i><a href="http://www.phpabc.cn/topics/windows-tips" rel="category tag">Windows Tips</a></span>
     <time class="meat_span"><i class="iconfont">&#xe62a;</i>2019-03-06</time>
     <span class="meat_span"><i class="iconfont">&#xe61f;</i> 54 次浏览</span>     
                    <span class="meat_span meat_max"><i class="iconfont">&#xe62e;</i><a href="http://www.phpabc.cn/tag/net-framework" rel="tag">.Net Framework</a>, <a href="http://www.phpabc.cn/tag/zhi-ding-de-xin-ren-ti-gong-cheng-xu-bu-ren-shi-huo-bu-zhi-chi-shi-yong-zhe-de-zhi-ding-ge-shi" rel="tag">指定的信任提供程序不认识或不支持使用者的指定格式</a></span>
                 </div> 
                 <div class="content_text" onmouseover="this.style.cursor='pointer'" onclick="document.location='http://www.phpabc.cn/net-framework-4-7-2-an-zhuang-shi-bai.html';">昨天安装Framework4.7.2时死活无法安装,系统提示“尚未安装.net Framework4.7.2,原因是:指定的信任提供程序不认识或不支持使用者的指定格式”

查看安装日志,具体错误信息如下:

OS Version = 6.1.7601, SP ...</div>
    </div>


这段代码是每篇都有的,所有放在蓝色代码部分,当然也得改造一下:
<header><h2><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a></h2> </header>   
    <div class="excerpt">
     <div class="meta">
        <span class="meat_span"><i class="iconfont">&#xe629;</i>[!--writer--]</span>
     <span class="meat_span"><i class="iconfont">&#xe625;</i><a href="[!--this.classlink--]" rel="category tag">[!--this.classname--]</a></span>
     <time class="meat_span"><i class="iconfont">&#xe62a;</i>[!--newstime--]</time>
     <span class="meat_span"><i class="iconfont">&#xe61f;</i> [!--onclick--] 次浏览</span>   
                 </div> 
                
    </div>
因为源网站图片前没有其它内容,所以灰色部分删去。

onmouseover="this.style.cursor='pointer'" onclick="document.location='http://www.phpabc.cn/net-framework-4-7-2-an-zhuang-shi-bai.html'
这段代码里因为有单引号,直接加入会导致程序无法运行,所以删去了。
当然,你也可以留下它,但得想办法解决无法运行的问题。我的解决办法是给简介也加是链接,也可以达到同样的效果。
这时新建一个标签模板,
页面模板内容(*)[!--empirenews.listtemp--]<article class="post_list">
<!--list.var1--></article>
[!--empirenews.listtemp--]

列表内容模板(list.var) (*)
$titlepic='';
if($r[titlepic])
{
$titlepic=' <div class="thumbnail"> <a class="attachment-post-thumbnail size-post-thumbnail wp-post-image"  href="[!--titleurl--]" title="[!--title--]"><img src="[!--titlepic--]" alt="[!--title--]" /></a></div>';
}
$listtemp=$titlepic.' <header><h2><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a></h2> </header>   
    <div class="excerpt">
     <div class="meta">
        <span class="meat_span"><i class="iconfont">&#xe629;</i>[!--username--]</span>
     <span class="meat_span"><i class="iconfont">&#xe625;</i><a href="[!--this.classlink--]" rel="category tag">[!--this.classname--]</a></span>
     <time class="meat_span"><i class="iconfont">&#xe62a;</i>[!--newstime--]</time>
     <span class="meat_span"><i class="iconfont">&#xe61f;</i> [!--onclick--] 次浏览</span>   
                 </div> 
                 <div class="content_text">[!--smalltext--]...</div>
    </div> ';


然后,这个标签模板还有两点要特别注意:
一、列表内容模板(list.var) (*)最右边的“使用程序代码要勾选”
二、
简介截取字数这一项要多设点,我设的是200字。

保存之后再到首页模板用万能标签使用这个模板调用推荐信息,放在<div id="posts">
</div>之中(<div id="posts">
[ecmsinfo]0,10,60,0,5,15,0[/ecmsinfo]
</div>)

至此,网站首页主体左边部分制作完成。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表