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

经验笔记
浏览 loading

先看一段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/ ）