qk主题文章顶部概览

博主：书房管理员
发布时间：2024 年 06 月 19 日
336 次浏览
暂无评论
13589字数
分类：建站分享

效果如下：

1.主题functions下添加：

function display_product_container($title, $describe, $coverImg,$downloadHtml) {
    // 生成1到10之间的随机整数
    $random_m = rand(1, 10);
    
    echo '<div class="product-container" style="opacity: 0;">
        <div class="product-box relative" >
            <div class="product-background absolute"  style="
            height: 100%;
            width: 100%;
            background-image: url(' . $coverImg . ');
            z-index: -1;
            content: &quot;&quot;;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            filter: blur(20px);
            position: absolute;
            "></div>
            <div class="product-row relative">
                <div class="payrow-6 payrow-left">
                    <div class="relative zib-slider">
                        <div>
                            <div  aria-live="polite" style="transition-duration: 0ms;">
                                <div class="imgfront"  data-swiper-slide-index="0" style="width: 100%;" role="group" aria-label="1 / 3">
                                    <span>
                                        <img  src="' . esc_url($coverImg) . '" >
                                    </span>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="payrow-6 payrow-right">
                    <div class="pay-content">
                        <div class="product-header">' . esc_html($title) . '</div>
                        <div class="product-doc">PPT介绍： ' . esc_html($describe) . '</div>
                    </div>
                    <div class="more-but text-center">
    <a target="_self" class="but hollow c-white" href="mailto:upptx@hotmail.com" data-original-title="发邮件" data-toggle="tooltip">联系作者</a>
    <a target="_self" class="but hollow c-white" href="mailto:upptx@hotmail.com" data-original-title="发邮件" data-toggle="tooltip">侵权投诉</a>
    <a target="_self" class="but hollow c-white" href="#" data-original-title="广告" data-toggle="tooltip">为爱发电</a>
</div>
               '. $downloadHtml .'
                </div>
                                    
            </div>
        </div>
    </div>';
}
add_action('qk_product_container', 'display_product_container', 10, 4);

然后找到qkua\qkua\Modules\Templates\Single.php

搜索get_breadcrumbs()

替换这个function为：

  //获取文章内面包屑导航
    public static function get_breadcrumbs(){
        
        if(!qk_get_option('single_breadcrumb_open')) return;
        
        $categorys = get_the_category();
        $html = '';
        
        if ($categorys) {
            $category = $categorys[0];
            $html      .= '
            <ul class="breadcrumb wrapper">
                <li><a href="' . get_bloginfo('url') . '">首页</a></li>
                <li>' . get_category_parents($category->term_id, true,'</li><li>').'正文</li>
             </ul>';
        }
        $post_id = get_the_id();
        $thumb = Post::get_post_thumb($post_id);
        $title1 = get_the_title(); // 获取当前文章标题

        // 找到第一个 '-' 的位置
        $pos = strpos($title1, '-');

        if ($pos !== false) {
        // 获取第一个 '-' 前面的部分
        $title = substr($title1, 0, $pos);
        } else {
        // 如果没有找到 '-', 保持原始标题
        $title = $title1;
        }
        
        $describe = $title1."，是为各类学术和专业展示而设计的，旨在提供一个结构清晰、视觉效果出色且易于使用的展示工具。无论您是进行论文答辩、课程讲解、项目汇报，还是参与学术会议，这款PPT模板都能满足您的需求。";
        $coverImg =$thumb;
        
        
        $post_id = get_the_ID();
        
        $download_open = get_post_meta($post_id,'qk_single_post_download_open',true);
        //是否开启文章下载功能
        if(!$download_open) return;
        
        $download_data = get_post_meta($post_id,'qk_single_post_download_group',true);
        $download_data = is_array($download_data) ? $download_data : array();
        $download_data = apply_filters('filter_download_data',$download_data,$post_id);

        if(empty($download_data) || !is_array($download_data)) return;
        
        $tabs = '';
        
        if(count($download_data) > 1) {
            $tabs .= '<div class="scroll-tabs-wrapper" ref="scrollTab">
                        <ul class="tabs-content">';
            foreach ($download_data as $key => $value) {
                
                $title = isset($value['title']) ? $value['title'] : get_the_title($post_id);
                
                $tabs .= '<li class="tab-item" :class="[{\'active\':'.$key.' === index}]" @click="changeTab('.$key.')">
                                <div class="thumb">'.(isset($value['thumb']) && $value['thumb'] ? '<img src="'.qk_get_thumb(array('url'=>$value['thumb'],'width'=>40,'height'=>40)).'" />' : '<b>'.($key + 1).'</b>').'</div>
                                <span class="text-ellipsis">'.$title.'</span>
                            </li>';
            }
            
            $tabs .= '</ul>
                    </div>';
        }
        
        $downloadHtml= '
            <div class="post_download mg-a"   style="margin:30px 0px 20px 0px"  >
                <div id="download-box" class="download-box box qk-radius" style="background-color:revert; " ref="downloadBox">
                    '.$tabs.'
                    <div class="download-list"  style="color: white"  v-if="data" v-cloak>
                        <div class="download-list-item">
                            <div class="attrs-list" v-if="data.attrs.length">
                                <div class="attr-item" v-for="(item,index) in data.attrs">
                                    <span>{{item.key}}：</span>
                                    <span>{{item.value}}</span>
                                </div>
                            </div>
                            <div class="rights"   style="background-color:revert;padding:0px; " >
                                <div @click="show = !show" :class="[{open:show}]">
                                    <div class="current-user"  v-if="!data.current_user.can.allow">
                                        <span v-if="data.current_user.can.type == \'money\'">需支付 <span style=" color: var(--color-primary); ">¥</span> <span style=" font-size: 20px; color: var(--color-primary); " v-text="data.current_user.can.value">28</span>
                                        </span>
                                        <span v-if="data.current_user.can.type == \'credit\'">需支付 <span style=" font-size: 20px; color: var(--color-primary); " v-text="data.current_user.can.value"></span><span style=" color: var(--color-primary); "> 积分</span>
                                        </span>
                                        <span v-if="data.current_user.can.type == \'free\'">免费下载</span>
                                        <span v-if="data.current_user.can.type == \'comment\'">评论后下载</span>
                                        <span v-if="data.current_user.can.type == \'login\'">登录后下载</span>
                                        <span v-if="data.current_user.can.type == \'password\'">输入密码下载</span>
                                        <span v-if="data.current_user.can.type == \'none\'">当前为指定权限用户下载</span>
                                        <i class="ri-arrow-right-s-line"></i>
                                    </div>
                                    <div class="current-user" v-else>
                                        <span v-if="data.current_user.can.free_count">今日免费下载剩余 <span style=" font-size: 20px; color: var(--color-primary); ">{{data.current_user.can.free_count}}</span> 次 </span>
                                        <span v-else>已获得下载权限</span>
                                    </div>
                                    <div class="download-btn">
                                        <button style=" padding: 6px 16px; " @click.stop="go()">
                                            <i class="ri-download-fill"></i>下载
                                        </button>
                                    </div>
                                </div>
                                <ul class="list" v-if="show">
                                    <li class="item" v-for="(item,index) in data.rights" :class="item.lv == data.current_user.lv.lv.lv || item.lv == data.current_user.lv.vip.lv ? \'current\' : \'\'">
                                        <div>
                                            <span>{{item.name}}</span>
                                        </div>
                                        <div>
                                            <span v-if="item.type == \'money\'">￥<span v-text="item.value"></span></span>
                                            <span v-if="item.type == \'credit\'"><span v-text="item.value"></span> 积分</span>
                                            <span v-if="item.type == \'free\'">免费下载</span>
                                            <span v-if="item.type == \'comment\'">评论后下载</span>
                                            <span v-if="item.type == \'login\'">登录后下载</span>
                                            <span v-if="item.type == \'password\'">输入密码下载</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!--<div class="qk-flex" style="
    margin: 12px;
    width: 100%;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 12px;
"><i class="ri-error-warning-line" style="
    font-size: 14px;
    margin-right: 2px;
"></i>尊贵的VIP用户您每日免费下载资源次数，剩余 <span class="font-number" style="
    color: var(--color-primary);
">19</span> 次                        </div>-->
                        </div>
                    </div>
                </div>
            </div>
            <!--#资源下载-->
        ';
        echo do_action('qk_product_container', $title, $describe, $coverImg,$downloadHtml).$html;
    }

添加css

 /*文章页面顶部css开始*/
 
:root {
    --linear-bg-1: radial-gradient(#ba6187 40%, rgb(144 224 255 / 0%) 60%) -620px -180px no-repeat, radial-gradient(#743fc3d6 33%, rgb(255 203 87 / 0%) 67%) -120px -24px no-repeat, radial-gradient(#b4684e 40%, rgb(144 224 255 / 0%) 70%) -470px 150px no-repeat, #9e4fa9;
    --linear-bg-2: radial-gradient(#24868994 20%, rgb(134 217 249 / 0%) 60%) -120px -180px no-repeat, radial-gradient(#454faa 33%, rgb(255 203 87 / 0%) 67%) -10px -4px no-repeat, radial-gradient(#7238ae 40%, rgb(144 224 255 / 0%) 70%) -470px 150px no-repeat, #4147b8;
    --linear-bg-3: radial-gradient(#bb552975 23%, rgb(247 197 86 / 0%) 67% 100%) 385px -24px, radial-gradient(#984cbe 30%, rgb(179 105 248 / 0%) 67% 100%) 122px -120px, radial-gradient(#661cac 15%, rgb(134 219 252 / 0%) 50% 100%) -620px 0, radial-gradient(#383d9ff5 25%, rgb(132 215 247 / 0%) 50% 100%) 520px -250px, #6841c0;
    --linear-bg-4: radial-gradient(#3a7ebe 20%, rgb(134 217 249 / 0%) 60%) -100px -300px no-repeat, radial-gradient(#405ed6 13%, rgb(255 203 87 / 0%) 50%) 300px -124px no-repeat, radial-gradient(#684ec8 40%, rgb(144 224 255 / 0%) 70%) 40px 18px no-repeat, #246d79;
    --linear-bg-5: radial-gradient(#865cc2 40%, rgb(144 224 255 / 0%) 60%) -620px -180px no-repeat, radial-gradient(#4956c6 33%, rgb(255 203 87 / 0%) 67%) -120px -24px no-repeat, radial-gradient(#3e77ab 40%, rgb(144 224 255 / 0%) 64%) 100px 150px no-repeat, #1f5b98;
    --linear-bg-6: radial-gradient(#277367 20%, rgb(134 217 249 / 0%) 60%) -120px -180px no-repeat, radial-gradient(#434ead 33%, rgb(255 203 87 / 0%) 67%) -120px -24px no-repeat, radial-gradient(#5b46a8 40%, rgb(144 224 255 / 0%) 70%) -470px 150px no-repeat, #1b4d89;
    --linear-bg-7: radial-gradient(#29843fba 23%, rgb(247 197 86 / 0%) 67% 100%) -285px -24px, radial-gradient(#365692 0, rgb(251 63 72 / 0%) 60% 100%) -40px 290px, #29727b;
    --linear-bg-8: radial-gradient(#c75c6e 23%, rgb(247 197 86 / 0%) 67% 100%) -285px -24px, radial-gradient(#bf7830 25%, rgb(132 215 247 / 0%) 50% 100%) 520px -250px, #b4663d;
    --linear-bg-9: radial-gradient(#4776c3 40%, rgb(144 224 255 / 0%) 60%) -235px -380px no-repeat, radial-gradient(#6e4cac 40%, rgb(144 224 255 / 0%) 70%) 100px 250px no-repeat, #5c5bdf;
    --linear-bg-10: radial-gradient(#b06553 23%, rgb(247 197 86 / 0%) 67% 100%) -285px -24px, radial-gradient(#9e4353 0, rgb(251 63 72 / 0%) 60% 100%) -540px 90px, radial-gradient(#8e43b6 30%, rgb(179 105 248 / 0%) 67% 100%) -122px -120px, #a75375;

    --linear-bg-1m: linear-gradient(135deg, #2ea2aa 0%, #5038c8 100%);
    --linear-bg-2m: linear-gradient(135deg, #3f41a7 0%, #27acd1 100%);
    --linear-bg-3m: linear-gradient(135deg, #9971d3 0%, #4538c8 100%);
    --linear-bg-4m: linear-gradient(110deg, #6936b3 0%, #228382 100%);
    --linear-bg-5m: linear-gradient(117deg, #e987f2 0%, #6f2d94 100%);
    --linear-bg-6m: linear-gradient(117deg, #845eea 0%, #cd3e6f 100%);
    --linear-bg-7m: linear-gradient(117deg, #e29a78 0%, #ce5656 100%);
    --linear-bg-8m: linear-gradient(117deg, #77ad5e 0%, #20778f 100%);
    --linear-bg-9m: linear-gradient(117deg, #51a364 0%, #166e9e 100%);
    --linear-bg-10m: linear-gradient(117deg, #dc3576 0%, #1b80b7 100%);
}

.product-container {
    opacity: 1 !important;
    transition: opacity .5s;
}

.pay-content {
    max-width: 390px;
}

.post_download.mg-a {
    max-width: 390px;
}

.download-list-item .attrs-list .attr-item {
    width: revert;
    font-size: 14px;
}

.product-box {
    padding: 40px 0 40px 0;
    color: #fff;
    position: sticky;
}


.product-box .product-row {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.product-row .payrow-6 {
    display: inline-block;
    vertical-align: middle;
    width: calc(50%);
    display: revert;
    align-self: center;
}

.payrow-6.payrow-left img{
     height: 565px;
     width: 400px;
    }

.product-header {
    font-size: 50px;
    font-family:'zti' !important;
    letter-spacing: .1em;
}

.product-doc{
    margin-top: 10px ;
}

.more-but {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    max-width: 390px;
}

.more-but .but.hollow {
    padding: .5em 1.5em;
}

.more-but .but.hollow:hover {
    color: #555;
}

.but{
    border-radius: 4px;
    display: inline-block;
    border-radius: 4px;
    transition: .15s;
    border: 1px solid var(--color-text-secondary);
}
.article-report {
    display: none;
}

.post_download.mg-b {
    display: none;
}
.payrow-6.payrow-right{
color: #fff; /* 白色字体 */
text-shadow: 1px 1px 2px #000; /* 黑色阴影 */

}
.download-list-item .attrs-list .attr-item span:first-of-type {
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.download-list-item {
    border: 1px solid var(--color-text-secondary);
    border-radius: var(--radius);
    overflow: hidden;
    color: #fff; /* 白色字体 */
    text-shadow: 1px 1px 2px #000; /* 黑色阴影 */
}
@media (max-width:768px) {
.product-box {
    padding: 0px;
}
    .payrow-6.payrow-left img{
     margin-top: 0 !important;
    }

    .product-box .product-row {
        padding: 0;
    }

  
    .product-box .product-row {
    text-align: center;
    margin: auto;
    display: revert;
    }
    
    


    .product-row .payrow-6 {
        padding: 10px;
        width: 100%;
    }

    .payrow-6.payrow-left {
        margin-bottom: 20px;
        padding: 0;
    }

    .payrow-6.payrow-left .radius8 {
        border-radius: 0;
    }
 .more-but {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
.payrow-6.payrow-left img {
    vertical-align: top;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: auto;
}

.imgfront{
    margin-right: 15px;
    height: 630px;
    overflow: hidden;
    position: relative;
}
.product-header {
    font-size: 33px;
    letter-spacing: .1em;
    margin-bottom: 20px;
    margin-top: -70px;
}
.product-container {
    margin-top: -16px;
}
}
  
 /*文章页面顶部css结束*/

以上一些细节自行修改。

最后修改：2024 年 06 月 20 日