B2 PRO主题仿优设网首页幻灯片样式改版

会长君

发布于 2023-04-26 17:09:05

1K0

发布于 2023-04-26 17:09:05

最近在做7B2模板的改造工程，参照优设网的设计把首页的幻灯片样式做了新一版的样式更新。原计划是将整个顶部模块基于原有设计幻灯片+小工具来实现，后来发现如果修改了这个结构会导致整个页面结构错乱所以就作罢了，仅用了全屏幻灯片铺满整个Header，并删除多余的文章标题分类等元素,化繁为简让页面看起来更舒服。

设计思路

首先是要确定幻灯片组件的文件位置去处不必要的元素。然后是调整出来幻灯片的Pagedot，最后再使用自定义HTML模块写一个四分的分类链接出来。示意图

重构过程

首先是需要后台首页创建幻灯片模块。建议作图时，选择的幻灯片图片内容显示在中心位置，且给背景添加上颜色。

原本是还加了一个幻灯片底部的多格栏目，这里我把他去掉了

CSS部分

首先声明，作者的CSS是基于rem做的设置，如使用可以将rem换成自己需要设置的px值。左右按钮的位置也是基于我个人的模板调整的位置，如果采用请自定更换位置大小。且为了全站的颜色统一吗，还用到了CSS的var函数，不太懂的小伙伴可以试着学习一下相当的好用。

/*幻灯片*/
.module-sliders .slider-1 .flickity-page-dots {
    bottom: 67px;
    top: auto;
    padding: 0 12px;
    top: auto;
    display: block;
    height: 30px;
    border-radius: .3rem;
    right: 10vw;
}
 
.module-sliders .slider-1 .flickity-page-dots li {
    margin-top: 13px;
    border-radius: 10px;
}
 
.module-sliders:hover .flickity-page-dots {
    background-color: rgba(51, 51, 51, 0.3)
}
 
.module-sliders .slider-1 .flickity-page-dots li.is-selected {
    width: .2rem;
}
 
.module-sliders .slider-1 .flickity-prev-next-button.previous,
.module-sliders .slider-1 .flickity-prev-next-button.next {
    bottom: 60px;
    top: auto;
    left: auto;
}
 
.module-sliders .slider-1 .flickity-prev-next-button.previous {
    right: calc(10vw + 145px);
}
 
.module-sliders .slider-1 .flickity-prev-next-button.next {
    right: calc(10vw + 110px);
}
 
.module-sliders .slider-1 .flickity-button {
    width: 28px;
}

PHP文件修改部分

一样郑重声明，该制作并不适合版本升级和子主题（春哥子主题未开放这个文件的修改），仅基于当前版本修改，后续升级可收到到影响，如果觉得当前版本满足你的使用，或者技术技术功底不错可以尝试使用。php文件为/b2/Modules/Templates/Modules/Sliders.php ，24行开始

/**
     * 幻灯模块1
     *
     * @param array $data 设置项参数
     *
     * @return string 幻灯的html
     * @author Li Ruchun <lemolee@163.com>
     * @version 1.0.0
     * @since 2018
     */
    public static function slider_1($data,$i){
 
        $i = isset($data['key']) ? $data['key'] : 'ls'.round(100,999);
        
        $post_data = self::slider_data($data);
 
        if(!$post_data) return;
 
        $html = '';
 
        foreach ($post_data as $k => $v) {
            $thumb = b2_get_thumb(array(
                'thumb'=>$v['thumb'],
                'width'=>$data['width'],
                'height'=>$data['slider_height'],
                'ratio'=>1.4
            ));
 
            $cat = self::get_cat_info($v);
 
            $html .= '<div class="slider-1-carousel slider-height" style="'.($data['slider_width'] === '0' ? 'width:100%' : 'width:'.$data['width'].'px').';max-width:100%;">
                    <div class="slider-in slider-info b2-radius" style="height:0;padding-top:'.round($data['slider_height']/$data['width']*100,6).'%;max-width:100%"> 
                        <a class="link-block" '.(!$data['slider_new_window'] ? 'target="_blank"' : '').'  href="'.($v['link'] ? $v['link'] : 'javascript:void(0)').'">
                        '.b2_get_img(array('src'=>$thumb,'class'=>array('slider-img','b2-radius'))).'
                        </a> 
                    </div>
            </div>';
        }
 
        //幻灯的设置项
        $settings = apply_filters('b2_slider_1_settings',array(
            'wrapAround'=>true,
            'fullscreen'=>true,
            'autoPlay'=> (int)$data['slider_speed'],
            "imagesLoaded"=> true,
            "freeScroll"=>false,
            "prevNextButtons"=>$data['slider_width'] === '1' ? false : true,
            'pageDots'=>  true,
            //'groupCells'=> true,
            //'groupCells'=> 4
        ));
 
        $settings = json_encode($settings,true);
 
        $slider_setting = "data-flickity='".$settings."'";
 
        return '<div class="slider-1 carousel slider-height box b2-radius '.($data['slider_width'] === '0' ? 'slider-type-width' : '').' '.($data['slider_show_title'] ? 'slider-show-title' : 'show-title-none').'" '.$slider_setting.' style="'.((int)$data['slider_width'] == 1 || $data['show_widget'] ? 'width:'.$data['width'].'px' : 'width:100%').';max-width:100%">
            '.$html.'
        </div>';
    }

移动端样式修复

移动端的幻灯片可能略低一些，再加上默认有12px的左右间隔。所以更改了原主题的css的幻灯片尺寸。如果你使用的是子主题则可以直接写在style.css里面。如果未使用则写在原主题样式最底部。

### 代码中的headerslider为你的幻灯片模块key
@media screen and (max-width: 768px) {
    /*去处页面两边的padding值*/
    #home-row-headerslider{
        margin: 0 -6px;
    }
    /*设置幻灯片全宽*/
    #home-row-headerslider .slider-1 .slider-1-carousel{
        width: 100% !important;
    }
   /*调整幻灯片高度ID换成自己的模块ID*/
    #home-row-headerslider .slider-1 .slider-1-carousel .slider-img,
    #home-row-headerslider .slider-1,
    #home-row-headerslider .flickity-viewport{
            height: 240px !important;
    }
    /*调整分页器的位置*/
    .module-sliders .slider-1 .flickity-page-dots{
        bottom: 0;
        right: calc(50% - 48px);
    }
    .module-sliders .slider-1 .flickity-page-dots li.is-selected{
        width: 24px;
    } 
    /*调整分类列表样式*/ 
    #home-row-category-ul{
        margin:0 -6px;
        background: #fff;
    }
}

作者结语

再三强调，修改文件之前备份源文件。php文件修改了原有的幻灯片输出结构，新增参数’pageDots’=> true, 是将pageDots放出。并删除了多余的输出内，样式部分做优化。CSS注释部分的ID是你创建自定义模块的ID，剩余部分则是对四个DIV结构的样式。

博主总结

这个优化需要自己适配，不懂代码的小白不要轻易尝试，同时原作者还配上了菜单栏透明和幻灯片上移重叠效果，这是本文代码所没有的，需要自己调试。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：zbxhhzj@qq.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。转载本站文章请保留原文链接，如文章内说明不允许转载该文章，请不要转载该文章，谢谢合作。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

data