feat: add carousel functions (#283)

seatonjiang · Sep 30, 2020 · b0ae3c9 · b0ae3c9
1 parent 9bd7059
commit b0ae3c9
Show file tree

Hide file tree

Showing 7 changed files with 308 additions and 110 deletions.
diff --git a/assets/css/kratos.css b/assets/css/kratos.css
@@ -532,6 +532,16 @@ button:focus {
 5. 文章列表
 --------------------------------------------------------------*/
 
+.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 {
   margin: 0 0 23px;
   border-radius: 0;

diff --git a/assets/css/kratos.min.css b/assets/css/kratos.min.css
diff --git a/inc/options-framework/js/options-custom.js b/inc/options-framework/js/options-custom.js
@@ -16,6 +16,21 @@ jQuery(document).ready(function ($) {
 		$('#section-' + id + '_links').show()
 	}
 
+	jQuery('#g_carousel').click(function () {
+		for (let i = 1; i < 6; i++) {
+			jQuery('#section-c_i_' + [i]).fadeToggle(400)
+			jQuery('#section-c_u_' + [i]).fadeToggle(400)
+		}
+	})
+
+	if (jQuery('#g_carousel:checked').val() !== undefined) {
+		for (let i = 1; i < 6; i++) {
+			console.log('#c_i_' + [i])
+			jQuery('#section-c_i_' + [i]).show()
+			jQuery('#section-c_u_' + [i]).show()
+		}
+	}
+
 	jQuery('#g_cos').click(function () {
 		jQuery('#section-g_cos_bucketname').fadeToggle(400)
 		jQuery('#section-g_cos_url').fadeToggle(400)

diff --git a/inc/theme-article.php b/inc/theme-article.php
@@ -438,4 +438,53 @@ function wpdocs_save_meta_box( $post_id ) {
         update_post_meta($post_id, $meta_box['name'].'_value', $data);
      }
 }
-add_action( 'save_post', 'wpdocs_save_meta_box' );
+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}") ? kratos_option("c_i_{$i}") : "";
+            $carousel_url_{$i} = kratos_option("c_u_{$i}") ? kratos_option("c_u_{$i}") : "";
+            if($carousel_img_{$i} ){
+                $carousel_img[] = $carousel_img_{$i};
+                $carousel_url[] = $carousel_url_{$i};
+            }
+        }
+        if(is_array($carousel_img)){
+            $count = count($carousel_img);
+        } else {
+            $count = '0';
+        }
+
+        $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;
+    }
+}
diff --git a/inc/theme-options.php b/inc/theme-options.php
@@ -192,7 +192,6 @@ function kratos_options()
         'std' => ASSET_PATH . '/assets/img/wechat.png',
         'type' => 'upload',
         'class' => 'hidden',
-        'type' => 'upload',
     );
 
     $options[] = array(
@@ -294,6 +293,83 @@ function kratos_options()
         'type' => 'upload',
     );
 
+    $options[] = array(
+        'name' => __('首页轮播', 'kratos'),
+        'desc' => __('开启站点首页轮播功能', 'kratos'),
+        'id' => 'g_carousel',
+        'type' => 'checkbox',
+    );
+
+    $options[] = array(
+        'name' => __('轮播一（图片）', 'kratos'),
+        'id' => 'c_i_1',
+        'class' => 'hidden',
+        'type' => 'upload',
+    );
+
+    $options[] = array(
+        'name' => __('轮播一（网址）', 'kratos'),
+        'id' => 'c_u_1',
+        'class' => 'hidden',
+        'type' => 'text',
+    );
+
+    $options[] = array(
+        'name' => __('轮播二（图片）', 'kratos'),
+        'id' => 'c_i_2',
+        'class' => 'hidden',
+        'type' => 'upload',
+    );
+
+    $options[] = array(
+        'name' => __('轮播二（网址）', 'kratos'),
+        'id' => 'c_u_2',
+        'class' => 'hidden',
+        'type' => 'text',
+    );
+
+    $options[] = array(
+        'name' => __('轮播三（图片）', 'kratos'),
+        'id' => 'c_i_3',
+        'class' => 'hidden',
+        'type' => 'upload',
+    );
+
+    $options[] = array(
+        'name' => __('轮播三（网址）', 'kratos'),
+        'id' => 'c_u_3',
+        'class' => 'hidden',
+        'type' => 'text',
+    );
+
+    $options[] = array(
+        'name' => __('轮播四（图片）', 'kratos'),
+        'id' => 'c_i_4',
+        'class' => 'hidden',
+        'type' => 'upload',
+    );
+
+    $options[] = array(
+        'name' => __('轮播四（网址）', 'kratos'),
+        'id' => 'c_u_4',
+        'class' => 'hidden',
+        'type' => 'text',
+    );
+
+    $options[] = array(
+        'name' => __('轮播五（图片）', 'kratos'),
+        'id' => 'c_i_5',
+        'class' => 'hidden',
+        'type' => 'upload',
+    );
+
+    $options[] = array(
+        'name' => __('轮播五（网址）', 'kratos'),
+        'id' => 'c_u_5',
+        'class' => 'hidden',
+        'type' => 'text',
+    );
+
     $options[] = array(
         'name' => __('文章配置', 'kratos'),
         'type' => 'heading',
@@ -335,7 +411,6 @@ function kratos_options()
         'std' => ASSET_PATH . '/assets/img/donate.png',
         'type' => 'upload',
         'class' => 'hidden',
-        'type' => 'upload',
     );
 
     $options[] = array(
@@ -344,7 +419,6 @@ function kratos_options()
         'std' => ASSET_PATH . '/assets/img/donate.png',
         'type' => 'upload',
         'class' => 'hidden',
-        'type' => 'upload',
     );
 
     $options[] = array(

diff --git a/index.php b/index.php
@@ -11,7 +11,9 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-8 board">
-                <?php if(is_search()){ ?>
+                <?php if(is_home() && kratos_option('g_carousel', false)){
+                  kratos_carousel();
+                } if(is_search()){ ?>
                     <div class="article-panel">
                         <div class="search-title"><?php _e('搜索内容：', 'kratos');the_search_query(); ?></div>
                     </div>