github
/
kratos
mirror of https://github.com/vtrois/kratos
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: optimize carousel function

pull/409/head^2
Seaton Jiang 2021-08-20 10:45:35 +08:00
parent 56cafe1ea0
commit 4256a2c8e1
No known key found for this signature in database
GPG Key ID: 0E05070D261ACFEA
3 changed files with 112 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
inc/theme-article.php
View File

@ -483,49 +483,43 @@ add_action('save_post', 'wpdocs_save_meta_box');
// 主页轮播
function kratos_carousel()
{
$output = '';
$carousel_img = null;
$carousel_url = null;
if (kratos_option('g_carousel', false)) {
for ($i = 1; $i < 6; $i++) {
$carousel_img_[$i] = kratos_option("c_i_{$i}") ?: null;
$carousel_url_[$i] = kratos_option("c_u_{$i}") ?: null;
if ($carousel_img_[$i]) {
$carousel_img[] = $carousel_img_[$i];
$carousel_url[] = $carousel_url_[$i];
$slide = 0;
$item = 0;
$output = '<div id="indexCarousel" class="carousel article-carousel slide" data-ride="carousel"> <ol class="carousel-indicators">';
if (!empty(kratos_option('carousel_group'))) {
foreach (kratos_option('carousel_group') as $group_item) {
$active = null;
if ($slide == 0) {
$active = 'class="active"';
}
$output .= '<li data-target="#indexCarousel" data-slide-to="' . $slide . '" ' . $active . '></li>';
$slide++;
}
}
if (is_array($carousel_img)) {
$count = count($carousel_img);
} else {
$count = '0';
$output .= '</ol><div class="carousel-inner">';
foreach (kratos_option('carousel_group') as $group_item) {
$active = null;
if ($item == 0) {
$active = 'active';
}
$output .= '
<div class="carousel-item ' . $active . '">
<a href="' . $group_item['c_url'] . '"><img src="' . $group_item['c_img'] . '" class="d-block w-100"></a>
<div class="carousel-caption d-none d-md-block">
<h5 style="color:' . $group_item['c_color'] . '">' . $group_item['c_title'] . '</h5>
<p style="color:' . $group_item['c_color'] . '">' . $group_item['c_subtitle'] . '</p>
</div>
</div>';
$item++;
}
$output .= '</div> <a class="carousel-control-prev" href="#indexCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#indexCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div>';
}
$output = '<div class="carousel article-carousel slide" id="carouselControls" data-ride="carousel"><ol class="carousel-indicators">';
for ($i = 0; $i < $count; $i++) {
$output .= '<li data-target="#carouselControls" data-slide-to="' . $i . '"';
if ($i == 0) $output .= 'class="active"';
$output .= '></li>';
};
$output .= '</ol><div class="carousel-inner">';
for ($i = 0; $i < $count; $i++) {
$output .= '<div class="carousel-item';
if ($i == 0) $output .= ' active';
$output .= '">';
if (!empty($carousel_url[$i])) {
$output .= '<a href="' . $carousel_url[$i] . '" target="_blank"><img src="' . $carousel_img[$i] . '" class="d-block w-100"></a>';
} else {
$output .= '<img src="' . $carousel_img[$i] . '" class="d-block w-100">';
}
$output .= "</div>";
};
$output .= '</div><a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span></a>';
$output .= '<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span></a></div>';
}
if (is_array($carousel_img)) {
echo $output;
}
}

122
inc/theme-options.php
View File

@ -238,7 +238,7 @@ CSF::createSection($prefix, array(
),
'default' => array(
'g_wechat' => false,
'g_wechat_url' => get_template_directory_uri() . '/assets/img/wechat.png',
'g_wechat_url' => get_template_directory_uri() . '/assets/img/200.png',
),
),
),
@ -325,100 +325,58 @@ CSF::createSection($prefix, array(
array(
'id' => 'g_carousel',
'type' => 'switcher',
'title' => __('首页轮播', 'kratos'),
'title' => __('功能开关', 'kratos'),
'subtitle' => __('开启/关闭首页轮播功能', 'kratos'),
'text_on' => __('开启', 'kratos'),
'text_off' => __('关闭', 'kratos'),
'default' => false,
),
array(
'id' => 'carousel_tabbed',
'type' => 'tabbed',
'tabs' => array(
'id' => 'carousel_group',
'type' => 'group',
'title' => '首页轮播',
'subtitle' => '点击添加轮播内容，最多添加 7 个轮播内容',
'min' => 1,
'max' => 7,
'fields' => array(
array(
'title' => '轮播一',
'fields' => array(
array(
'id' => 'c_i_1',
'type' => 'upload',
'title' => __('轮播图片', 'kratos'),
'library' => 'image',
'preview' => true,
),
array(
'id' => 'c_u_1',
'type' => 'text',
'title' => __('网址链接', 'kratos'),
),
),
'id' => 'c_id',
'type' => 'text',
'title' => __('唯一标识', 'kratos'),
'subtitle' => __('仅用于轮播标识，可以作为备注使用', 'kratos'),
),
array(
'title' => '轮播二',
'fields' => array(
array(
'id' => 'c_i_2',
'type' => 'upload',
'title' => __('轮播图片', 'kratos'),
'library' => 'image',
'preview' => true,
),
array(
'id' => 'c_u_2',
'type' => 'text',
'title' => __('网址链接', 'kratos'),
),
),
'id' => 'c_img',
'type' => 'upload',
'title' => __('轮播图片', 'kratos'),
'subtitle' => __('可以直接填写图片链接，也可以上传图片', 'kratos'),
'library' => 'image',
'preview' => true,
),
array(
'title' => '轮播三',
'fields' => array(
array(
'id' => 'c_i_3',
'type' => 'upload',
'title' => __('轮播图片', 'kratos'),
'library' => 'image',
'preview' => true,
),
array(
'id' => 'c_u_3',
'type' => 'text',
'title' => __('网址链接', 'kratos'),
),
),
'id' => 'c_url',
'type' => 'text',
'title' => __('网址链接', 'kratos'),
'subtitle' => __('需要填写完整的链接地址，包含协议头', 'kratos'),
),
array(
'title' => '轮播四',
'fields' => array(
array(
'id' => 'c_i_4',
'type' => 'upload',
'title' => __('轮播图片', 'kratos'),
'library' => 'image',
'preview' => true,
),
array(
'id' => 'c_u_4',
'type' => 'text',
'title' => __('网址链接', 'kratos'),
),
),
'id' => 'c_title',
'type' => 'text',
'title' => __('轮播标题', 'kratos'),
'subtitle' => __('选填项目，如果不填则不显示', 'kratos'),
),
array(
'title' => '轮播五',
'fields' => array(
array(
'id' => 'c_i_5',
'type' => 'upload',
'title' => __('轮播图片', 'kratos'),
'library' => 'image',
'preview' => true,
),
array(
'id' => 'c_u_5',
'type' => 'text',
'title' => __('网址链接', 'kratos'),
),
),
'id' => 'c_subtitle',
'type' => 'textarea',
'title' => __('轮播简介', 'kratos'),
'subtitle' => __('选填项目，如果不填则不显示', 'kratos'),
),
array(
'id' => 'c_color',
'type' => 'color',
'default' => '#000',
'title' => __('文字颜色', 'kratos'),
'subtitle' => __('轮播标题和简介的颜色', 'kratos'),
),
),
),
@ -752,8 +710,8 @@ CSF::createSection($prefix, array(
),
'default' => array(
'g_donate' => false,
'g_donate_wechat' => get_template_directory_uri() . '/assets/img/donate.png',
'g_donate_alipay' => get_template_directory_uri() . '/assets/img/donate.png',
'g_donate_wechat' => get_template_directory_uri() . '/assets/img/200.png',
'g_donate_alipay' => get_template_directory_uri() . '/assets/img/200.png',
),
),
),

65
style.css
View File

@ -21,14 +21,15 @@ License URI: https://github.com/vtrois/kratos/blob/main/LICENSE
1. 全局
2. 导航
3. Banner
4. 分页按钮
5. 文章列表
6. 文章正文
7. 内容工具区
8. 文章评论
9. 小工具
10. 404
11. 页脚
4. 首页轮播
5. 分页按钮
6. 文章列表
7. 文章正文
8. 内容工具区
9. 文章评论
10. 小工具
11. 404
12. 页脚
--------------------------------------------------------------*/
@ -510,7 +511,29 @@ button:focus {
}
/*--------------------------------------------------------------
4. 分页按钮
4. 首页轮播
--------------------------------------------------------------*/
.k-main .board .article-carousel {
margin: 0 0 23px;
}
.k-main .board .article-carousel li {
margin-bottom: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.k-main .board .article-carousel .carousel-caption h5 {
margin: 0 0 5px 0;
}
.k-main .board .article-carousel .carousel-caption p {
margin-bottom: 5px;
}
/*--------------------------------------------------------------
5. 分页按钮
--------------------------------------------------------------*/
.k-main .board .paginations > * {
@ -586,19 +609,9 @@ ol {
}
/*--------------------------------------------------------------
5. 文章列表
6. 文章列表
--------------------------------------------------------------*/
.k-main .board .article-carousel {
margin: 0 0 23px;
}
.k-main .board .article-carousel li {
margin-bottom: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.k-main .board .article-panel {
position: relative;
margin: 0 0 23px;
@ -843,7 +856,7 @@ ol {
}
/*--------------------------------------------------------------
6. 文章正文
7. 文章正文
--------------------------------------------------------------*/
.k-main .details .article {
@ -1348,7 +1361,7 @@ ol {
}
/*--------------------------------------------------------------
7. 内容工具区
8. 内容工具区
--------------------------------------------------------------*/
.k-main .details .toolbar {
@ -1543,7 +1556,7 @@ ol {
}
/*--------------------------------------------------------------
8. 文章评论
9. 文章评论
--------------------------------------------------------------*/
.k-main .details .comments {
@ -1789,7 +1802,7 @@ ol {
}
/*--------------------------------------------------------------
9. 小工具
10. 小工具
--------------------------------------------------------------*/
.k-main .sidebar img {
@ -2229,7 +2242,7 @@ ol {
}
/*--------------------------------------------------------------
10. 404
11. 404
--------------------------------------------------------------*/
.k-main .page404 {
@ -2346,7 +2359,7 @@ ol {
}
/*--------------------------------------------------------------
11. 页脚
12. 页脚
--------------------------------------------------------------*/
.k-footer {