给typecho加上类似CMS焦点图轮播幻灯片功能效果(代码调用非插件)

先看一段html效果演示:长师青年在线,有人叫她幻灯片也有人叫焦点图还有叫轮换、轮播,当然你可以叫她动画片,如果我们要给自己Typecho加上一个焦点图轮播可能瓶颈主要在图片,因为其它地方和我们调用的列表没有任何区别。(其实可以不要看这段代码。。。)

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="focus mb-b">
<div id="pic"><ul>
<li><a href="http://xtw.cssf.cn/show/649.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpNg0MbL/medish.jpg" alt="校运会第一天——飞扬吧!青春" /><strong>校运会第一天——飞扬吧!青春</strong></a></li>
<li><a href="http://xtw.cssf.cn/show/640.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpEQ47jA/medish.jpg" alt="“飞扬的青春,跳动的热情”长沙师范秋季阳光体育运动会团体操" /><strong>“飞扬的青春,跳动的热情”长沙师范秋季阳光体育运动会团体操</strong></a></li>
<li><a href="http://xtw.cssf.cn/show/639.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpCHqkiW/medish.jpg" alt="“阳光体育,健康人生”我校运动会于今日正式开幕" /><strong>“阳光体育,健康人生”我校运动会于今日正式开幕</strong></a></li>
<li><a href="http://xtw.cssf.cn/show/652.html" target="_blank"><img src="https://pic.yupoo.com/cssf/Cq0KlY5Z/medish.jpg" alt="习近平当选中共中央总书记" /><strong>习近平当选中共中央总书记</strong></a></li>
<li><a href="http://xtw.cssf.cn/show/629.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpxAABbV/medish.jpg" alt="我校第八期团学干部培训班开班典礼隆重开幕" /><strong>我校第八期团学干部培训班开班典礼隆重开幕</strong></a></li>
<li><a href="http://xtw.cssf.cn/show/625.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpxV2EuM/medish.jpg" alt="在创业中实现价值,在挑战中历练本领" /><strong>在创业中实现价值,在挑战中历练本领</strong></a></li>
</ul></div>
<div class="tip-bg"></div>
<div id="tip"><ul></ul></div>
<div class="btn"><ul><li class="prev" id="focus_btn_left"></li><li class="next" id="focus_btn_right"></li></ul></div>
</div>

让typecho可以调文章中的第一张图或者附件图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function img_postthumb($cid) {
$db = Typecho_Db::get();
$rs = $db->fetchRow($db->select('table.contents.text')
->from('table.contents')
->where('table.contents.cid=?', $cid)
->order('table.contents.cid', Typecho_Db::SORT_ASC)
->limit(1));

preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $rs['text'], $thumbUrl); //通过正则式获取图片地址
$img_src = $thumbUrl[1][0]; //将赋值给img_src
$img_counter = count($thumbUrl[0]); //一个src地址的计数器

switch ($img_counter > 0) {
case $allPics = 1:
echo $img_src; //当找到一个src地址的时候,输出缩略图
break;
default:
echo "http://baidu.com/404"; //没找到(默认情况下),不输出任何内容
};
}

请添加到你模版文件夹中的【functions.php】文件中,直接往文件后面空白处插,,,

让typecho单独调用一个分类或者标签的文章列表

1
2
3
4
5
<ul>
<?php $this->widget('Widget_Archive@indexfocus', 'pageSize=6&type=tag', 'slug=focus')->to($indexfocus); ?><?php while($indexfocus->next()): ?>
<li><a href="<?php $indexfocus->permalink(); ?>" target="_blank"><img src="<?php echo img_postthumb($indexfocus->cid,4); ?>" alt="<?php $indexfocus->title() ?>" /><strong><?php $indexfocus->title() ?></strong></a></li>
<?php endwhile; ?>
</ul>

这里用到的是标签,如果弄个幻灯片还创建个分类杀鸡焉能用牛刀。
重考方法:typecho后台标签中添加一个标签【名称】可以是幻灯片也可以是焦点图,【缩略名】必须填focus(当然也可以填其它的但是要记得修改上面代码slug的值),然后编辑需要在博客展示焦点图轮播的文章【标签】写上刚才设置的标签名称。

参数解读:@indexfocus 作为标记可以随意修改,pageSize=6 其中6代表显示6张图也就是调最新的6个,type=tag 调用标签里的内容,slug=focus 标签中缩略名为focus的内容(也可以是cid=123 其中123代表标签的id,但是这样不科学),$indexfocus 代码片段有6个也是作为标记可以随意修改但是六个都要改到 而且不要和其它片段重复。

后台标签添加好,function.php文件修改好,(调用片段修改好,如果按要求这步可省略),然后代码片段放到你模板里焦点图轮换位置即可。

本文中的代码堃埜参考了多位大神的和自己小改,部分代码片段来源不详,请作者前来认领。。。

效果演示:长师青年在线

关于焦点图轮播、幻灯片效果可以去懒人图库找自己喜欢的。。。

Relay Tips: 一极乐https://yijile.com/log/365/