一宇博客致力创造一个高质量网络资源教程的综合分享平台
广告位 后台主题配置管理

网站首页 Typecho 教程 正文

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

一宇A1xt 2020-09-02 教程 117 ℃ 0 评论百度已收录

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

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

引用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标签。

Tags:幻灯片typecho插件引用

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
  • 特大暴雪预报已经出现,南方是否会雪灾?两省或有极端化趋势
  • 男童扔鞭炮炸飞5个井盖,母亲受伤送医
  • 打工人返乡过年破防瞬间:孩子夜幕中打着手电筒狂奔迎接
  • 什么是盲盒交友,日入十万是真的吗?
  • Win11怎样强制开启毛玻璃横向排列
  • H5漂流瓶交友源码 社交漂流瓶H5源码 附安装教程
  • 2021美国奇幻冒险《超能敢死队》HD1080P.中英双字
  • 关于goto在线解密源码问题
  • 全新防黑运营版在线客服系统源码 自助注册客服系统/im即时通讯聊天/多商户机器人
  • 学法减分小程序2021最新可用可运营源码附带安装教程
  • 标签列表
  • hide (50)
  • 微信 (8)
  • 模板 (21)
  • 代码 (36)
  • typecho (131)
  • 样式 (11)
  • 页面 (24)
  • 图片 (25)
  • wordpress (10)
  • 文章 (36)
  • 目录 (12)
  • 后台 (12)
  • 浏览器 (9)
  • 链接 (10)
  • 分类 (12)
  • 归档 (14)
  • pjax (11)
  • 设置 (10)
  • 支持 (9)
  • 缩略图 (9)
  • 特性 (10)
  • 主题 (32)
  • 全站 (7)
  • 评论 (11)
  • typecho插件 (21)
  • 最新留言
    站点信息
    • 文章总数:933
    • 页面总数:11
    • 分类总数:28
    • 标签总数:927
    • 评论总数:182
    • 浏览总数:102473
    请先 登录 再评论,若不是会员请先 注册