qk主题文章顶部概览
效果如下：
- 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: "";
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结束*/
以上一些细节自行修改。
