Typecho在文章中插入幻灯片的方法

寻梦xunm| 713| 收集

3年前

超过1103天温馨提示

本文最后更新于2021年09月13日，已超过1103天没有更新，若内容或图片失效，请留言反馈。

很多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（加在前面）

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })        
</script>

3、改造post.php
找到

<?php $this->content(); ?>

替换成

<!-- 这部分是过滤文章中的图片，输出全文本 -->
<?php
$content = preg_replace('/\<img.*?src\=\"(.*?)\"[^>]*>/i', '', $this->content);
$content = preg_replace('/\<br>/i', '', $content);
echo $content;
?>
<!-- 幻灯片配置，提取文章中的所有图片文件，然后循环输出 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
   <?php
   $fullcontent = $this->content;
   $reg = '/(http:|https:)(.*?)(.jpg|.png|.gif|.jpeg)/i';
   $matches = array();
   preg_match_all($reg, $fullcontent, $matches);
   $countPostImg = count($matches[0]);
   for ($k=0; $k < $countPostImg; $k++) { 
   echo ' <div class="swiper-slide"><img itemprop="screenshot" src="'.$matches[0][$k].'" alt="'.$this->title.'"/></div>';}
   ?>
 </div>  
 <div class="swiper-pagination"></div>
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
 </div>

4、你可能想要给幻灯片定义一个大小，当然不要也行

.swiper-container {
    width: 600px;
    height: 300px;
}

注意事项
请把图片放在文章最后面，防止提取a标签。

typecho 教程幻灯片

本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。

0 赞 or 打赏

喜欢就打赏一点

Typecho 导航子类多层分类

Typecho文章图片添加灯箱效果

往往免费的还不如收费的

124人气2天前

走失两天的狗子终于找到它的家了

107人气3天前

顶着三十几度的天气去钓鱼了

187人气10天前

"微博客"一款自己开发自己用的垃圾源码（慢慢更新中）

276人气16天前

往往免费的还不如收费的

走失两天的狗子终于找到它的家了

顶着三十几度的天气去钓鱼了

"微博客"一款自己开发自己用的垃圾源码（慢慢更新中）

我的音乐