很多wordpress主题可以在文章中插入幻灯片，效果非常炫酷，在Typecho中好像还没看到有，下面SEOGO主要讲解在Typecho文章中插入幻灯片的简单实现方法。

Typecho幻灯片应用场景很多，例如用于相册展示、产品展示~

先看看效果

演示1：https://www.fuckdede.com/themes/64.html

演示2：https://www.seogo.me/gallery/319.html

下面开始教程。

引用swiper插件

Swiper(Swiper master)是目前应用较广泛的网页触摸内容滑动js插件（幻灯片插件）。

1、在header.php 中引用CSS（加在</head>前面）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">

2、在footer.php 中引用js（加在</body>前面）

<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在文章中插入幻灯片的方法】，均来自于网络，贫小子仅作分享