【Joe】『教程』在文章内添加滚动广告
侧边栏壁纸
  • 累计撰写 75 篇文章
  • 累计收到 21 条评论

【Joe】『教程』在文章内添加滚动广告

逍遥博客
2021-11-11 / 1 评论 / 30 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年09月22日,已超过248天没有更新,若内容或图片失效,请留言反馈。
一、添加后台

打开 functions.php 添加以下代码:

$JADPost = new Typecho_Widget_Helper_Form_Element_Textarea(
        'JADPost',
        NULL,
        NULL,
        '文章页顶部广告',
        '介绍:用于设置文章页顶部广告 一行一个,一行代表一个轮播广告图<br />
         格式:广告图片 || 跳转链接 (中间使用两个竖杠分隔)<br />
         注意:如果您只想显示图片不想跳转,可填写:广告图片 || javascript:void(0)  <br />
         其他:作者:ZMR博客,ZMR666.COM'
    );
    $JADPost->setAttribute('class', 'joe_content joe_post');
    $form->addInput($JADPost);
二、添加滚动广告栏

文章页直接在主题的 post.php 文件内合适的地方加入以下代码

<div class="joe_post__ad">
                        <?php
                            $JADPost = [];
                            $JADPost_text = $this->options->JADPost;
                            if ($JADPost_text) {
                            $JADPost_arr = explode("\r\n", $JADPost_text);
                            if (count($JADPost_arr) > 0) {
                                for ($i = 0; $i < count($JADPost_arr); $i++) {
                                    $img = explode("||", $JADPost_arr[$i])[0];
                                    $url = explode("||", $JADPost_arr[$i])[1];
                                    $JADPost[] = array("img" => trim($img), "url" => trim($url));
                                };
                            }
                            }
                        ?>
                        <?php if (sizeof($JADPost) > 0) : ?>
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <?php foreach ($JADPost as $item) : ?>
                                    <div class="swiper-slide">
                                        <a class="item" href="<?php echo $item['url'] ?>" target="_blank" rel="noopener noreferrer nofollow">
                                            <img width="100%" class="image lazyload" src="<?php _getLazyload() ?>" data-src="<?php echo $item['img'] ?>" ?>" />
                                        </a>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                                <div class="swiper-pagination"></div>
                                <span class="icon">广告</span>
                            </div>
                        <?php endif; ?>
                    </div>
                    

Test

三、修改广告栏样式

直接在 Joe/assets/css 打开 joe.post.min.css 然后在最后添加以下代码

.joe_post__ad .swiper-container{height: 180px!important;margin-top:15px;border-radius: var(--radius-inner);}.joe_post__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_post__ad .swiper-container{height: 120px!important}.joe_post__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}

四、添加滚动效果

首先在主题的 post.php 文件内 header标签内加入以下代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/swiper.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/swiper.min.js"></script>

然后再在 Joe/assets/js 打开 joe.post_page.min.js 然后在这里添加以下代码

if(0!==$(".joe_post__ad .swiper-container").length){let e="vertical";new Swiper(".swiper-container",{keyboard:!1,direction:e,loop:!0,autoplay:!0,mousewheel:!0,pagination:{el:".swiper-pagination"},})}

Test

0

评论 (1)

取消
  1. 头像
    kjnoob.com
    Windows 10 · Google Chrome

    有群吗。求指导

    回复
Blog逍遥阁博客