登录 注册 VIP特权 提交收录
Search Engine Optimization,不撸代码不修BUG
主页 » 教程 » 正文

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

很多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标签。


您的大名:
万水千山总是情,给个打赏行不行。 打赏

标签: 幻灯片typecho插件引用
! 如链接失效请在下方留言。本站所发布的全部内容源于互联网搬运,仅限于小范围内传播学习和文献参考,请在下载后24小时内删除,如果有侵权之处请第一时间联系我们删除。敬请谅解! E-mail:49613651@qq.com
原创文章,作者:一宇A1xt,如若转载,请注明出处:https://www.a1xt.com/archives/66.html

相关推荐

Typecho简单清爽主题LOVE+

LOVE+主题是SEOGO和@许建华共同推出的,这款主题为LOVE主题的收费升级版,价格29块(没见过这么便宜的typecho主题吧)...

杀死单身狗 | Typecho秀恩爱专用主题 LOVE

主题介绍相爱100件事 这个网站前后经历了熊宝的asp版及木鱼的php版,也因版本原因关闭过一段时间。自本博客使用typecho之后,...

Typecho开启报错提示,方便调试错误

不管出现何种报错,直接在根目录config.inc.php中添加一句define('__TYPECHO_DEBUG__', true);

MbEditor一款Typecho模板编辑器插件

介绍能够让typecho模板编辑界面支持行号,代码高亮,匹配括号,还支持多种皮肤选择为什么要做它?我比较喜欢在typecho的后台直接...

StickyPlus-Typecho文章置顶插件增强版

基于willin kan的版本文章置顶插件拓展功能,因为群友需要在分类页面置顶文章,所以就试着弄了这个功能介绍支持分别在首页页面设置置...

UploadPlugin一款Typecho上传zip包安装删除插件/主题插件

启用后可在菜单“控制台”-“上传”面板内自动安装插件/主题压缩包,或直接删除禁用的插件/主题文件夹,省去FTP等操作。插件要求php支...

Posthelper标签图片批量插入Typecho插件

功能介绍支持一键插入附件中的所有图片支持一键插入所有非图片附件后台编辑文章时增加标签选择列表支持检测文章内容自动插入标签解决全屏状态下...

Titleshow高级版Typecho部分内容加密插件

Titleshow高级版这个高级版能够让文章的加密功能只加密部分文章内容,也是根据网友要求低价定制的,所以插件并不会免费放出,,故改为...


猜你喜欢

【超级简单】实现Typecho简体繁体切换功能

很多wordpress主题可以在文章中插入幻灯片,效果非常炫酷,在Typecho中好像还没看到有,下面SEOGO主要讲解在Typech...


上一篇
下一篇

发表评论