From 4256a2c8e1007dd1a3b43f0daa27db337301a419 Mon Sep 17 00:00:00 2001 From: Seaton Jiang Date: Fri, 20 Aug 2021 10:45:35 +0800 Subject: [PATCH] refactor: optimize carousel function --- inc/theme-article.php | 72 ++++++++++++------------- inc/theme-options.php | 122 ++++++++++++++---------------------------- style.css | 65 +++++++++++++--------- 3 files changed, 112 insertions(+), 147 deletions(-) diff --git a/inc/theme-article.php b/inc/theme-article.php index 309b125..3c7dec0 100644 --- a/inc/theme-article.php +++ b/inc/theme-article.php @@ -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 = '
    '; + + if (!empty(kratos_option('carousel_group'))) { + + foreach (kratos_option('carousel_group') as $group_item) { + $active = null; + if ($slide == 0) { + $active = 'class="active"'; + } + $output .= '
  1. '; + $slide++; } - } - if (is_array($carousel_img)) { - $count = count($carousel_img); - } else { - $count = '0'; + + $output .= '
'; + + foreach (kratos_option('carousel_group') as $group_item) { + $active = null; + if ($item == 0) { + $active = 'active'; + } + $output .= ' +
+ +
+
' . $group_item['c_title'] . '
+

' . $group_item['c_subtitle'] . '

+
+
'; + $item++; + } + + $output .= '
'; } - $output = '
    '; - - for ($i = 0; $i < $count; $i++) { - $output .= '
  1. '; - } else { - $output .= ''; - } - $output .= "
"; - }; - - $output .= ''; - $output .= ''; - } - if (is_array($carousel_img)) { echo $output; } } diff --git a/inc/theme-options.php b/inc/theme-options.php index 56ce069..f6645ae 100644 --- a/inc/theme-options.php +++ b/inc/theme-options.php @@ -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', ), ), ), diff --git a/style.css b/style.css index 3feb83e..50ac5a5 100644 --- a/style.css +++ b/style.css @@ -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 {