Sunny1.0开源Typecho主题增加首页轮播图展示（思路版）

    
<?php if($this->is('index')): ?>
<div class="postdisplayblock">
	<div class="left">
		<div class="swiper swiper_index_left">
			<div class="swiper-wrapper">

				这里写一个while，想输出几篇就写几次，函数可以自己写，我写的是使用了widget类获取的，你也可以自己定义
				<a class="swiper-slide" href="<?php $posts->permalink(); ?>" data-pjax-state="">
					<span class="left_img">
						<img src="<?php echo $firstImage; ?>" alt="<?php $posts->title(); ?>">
					</span>
					<span class="left_title"><?php $posts->title(); ?></span>
				</a>
				这里加一个<?php endwhile; ?>结束判断
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<span class="postdisplayblock_tip">最新</span>
	</div>
	<div class="right">
		<div class="item">
			<a href="你可以通过不同方法或自定义函数来获取你想要的链接" data-pjax-state="">
				<span class="right_img">
					<img src="你可以通过不同方法或自定义函数来获取你想要的图片" alt="test12">
				</span>
				<span class="postdisplayblock_tip">自定义标签</span>
				<span class="right_title_out">
					<span class="right_title"> 自定义 </span>
				</span>
			</a>
		</div>
		<div class="item">
		    <?php \Widget\Post\Hot::alloc('pageSize=1')->to($hot); ?>
		    <?php while ($hot->next()): ?>
			<a href="<?php $hot->permalink(); ?>" data-pjax-state="">
				<span class="right_img">
					<img src="你可以通过不同方法或自定义函数来获取你想要的图片" alt="<?php $hot->title(); ?>">
				</span>
				<span class="postdisplayblock_tip">热评</span>
				<span class="right_title_out">
					<span class="right_title"> <?php $hot->title(); ?> </span>
				</span>
			</a>
			<?php endwhile; ?>
		</div>
	</div>
</div>
<?php endif; ?>

<main class="main_body">
                    <?php $this->need('components/title.php'); ?>
                    <?php $this->need('components/postdisplay.php'); ?>
                    <?php $this->need('components/article.php'); ?>
					---在上面加上一条，引用---
                    <div class="comment_part">
                        <?php if($this->is('single')): ?>
                            <?php $this->need('components/comment.php'); ?>
                        <?php endif; ?>
                    </div>
                </main>

<link rel="stylesheet" href="https://unpkg.com/swiper@8.4.7/swiper-bundle.css">
<script src="https://unpkg.com/swiper@8.4.7/swiper-bundle.js"> </script>

function loadpostdisplayblock(){
    var swiper = new Swiper(".swiper", {
              // 设置选项参数
        slidesPerView: 1,
        loop: true,
        autoHeight: true,
        // 自动轮播
        autoplay: {
            delay: 3000, // 5 秒
            disableOnInteraction: false,
        },
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    });
}

$(document).on('pjax:complete', function() {

    loadpostdisplayblock();

});