[Typecho]文章插入图片幻灯片
很多wordpress主题可以在文章中插入幻灯片，效果非常炫酷，在Typecho中好像还没看到有，下面SEOGO主要讲解在Typecho文章中插入幻灯片的简单实现方法。Typecho幻灯片应用场景很多，例如用于相册展示、产品展示~
引用swiper插件
Swiper(Swiper master)是目前应用较广泛的网页触摸内容滑动js插件（幻灯片插件）。
1、在header.php 中引用CSS（加在前面）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
2、在footer.php 中引用js（加在前面）
<p><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script></p><p><script> </p><p>var mySwiper = new Swiper ('.swiper-container', {</p><p> pagination: {</p><p> el: '.swiper-pagination',</p><p> },</p><p> navigation: {</p><p> nextEl: '.swiper-button-next',</p><p> prevEl: '.swiper-button-prev',</p><p> },</p><p>}) </p><p></script></p>
3、改造post.php
找到
<?php $this->content(); ?>
替换成
<p><!-- 这部分是过滤文章中的图片，输出全文本 --></p><p><?php</p><p>$content = preg_replace('/\<img.*?src\=\"(.*?)\"[^>]*>/i', '', $this->content);</p><p>$content = preg_replace('/\<br>/i', '', $content);</p><p>echo $content;</p><p>?></p><p><!-- 幻灯片配置，提取文章中的所有图片文件，然后循环输出 --></p><p><div class="swiper-container"></p><p><div class="swiper-wrapper"></p><p> <?php</p><p> $fullcontent = $this->content;</p><p> $reg = '/(http:|https:)(.*?)(.jpg|.png|.gif|.jpeg)/i';</p><p> $matches = array();</p><p> preg_match_all($reg, $fullcontent, $matches);</p><p> $countPostImg = count($matches);</p><p> for ($k=0; $k < $countPostImg; $k++) { </p><p> echo ' <div class="swiper-slide"><img itemprop="screenshot" src="'.$matches[$k].'" alt="'.$this->title.'"/></div>';}</p><p> ?></p><p> </div></p><p> <div class="swiper-pagination"></div></p><p> <div class="swiper-button-prev"></div></p><p> <div class="swiper-button-next"></div></p><p> </div> </p>
4、你可能想要给幻灯片定义一个大小，当然不要也行
<p>.swiper-container {</p><p> width: 600px;</p><p> height: 300px;</p><p>} </p>
注意事项
请把图片放在文章最后面，防止提取a标签。
页:
[1]