fix content and json

css/slick-theme.css

@@ -0,0 +1,204 @@
+@charset 'UTF-8';
+/* Slider */
+.slick-loading .slick-list
+{
+    background: #fff url('./ajax-loader.gif') center center no-repeat;
+}
+
+/* Icons */
+@font-face
+{
+    font-family: 'slick';
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('./fonts/slick.eot');
+    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
+}
+/* Arrows */
+.slick-prev,
+.slick-next
+{
+    font-size: 0;
+    line-height: 0;
+
+    position: absolute;
+    top: 50%;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+
+    cursor: pointer;
+
+    color: transparent;
+    border: none;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus
+{
+    color: transparent;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before
+{
+    opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before
+{
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before
+{
+    font-family: 'slick';
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: .75;
+    color: white;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev
+{
+    left: -25px;
+}
+[dir='rtl'] .slick-prev
+{
+    right: -25px;
+    left: auto;
+}
+.slick-prev:before
+{
+    content: '←';
+}
+[dir='rtl'] .slick-prev:before
+{
+    content: '→';
+}
+
+.slick-next
+{
+    right: -25px;
+}
+[dir='rtl'] .slick-next
+{
+    right: auto;
+    left: -25px;
+}
+.slick-next:before
+{
+    content: '→';
+}
+[dir='rtl'] .slick-next:before
+{
+    content: '←';
+}
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-family: 'slick';
+    font-size: 6px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}

css/slick.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

css/style.css

@@ -789,7 +789,7 @@ body {
   width: 100%;
   height: 34vh;
   background-position: center center;
-  background-size: center center;
+  background-size: cover;
   background-repeat: no-repeat;
 }
 
@@ -1004,6 +1004,10 @@ body {
   font-size: 1rem;
 }
 
+.sec-08__card p {
+  font-size: .9rem;
+}
+
 .sec-08__card__play {
   position: absolute;
   left: 50%;

css/style.scss

@@ -657,7 +657,7 @@ body {
             width: 100%;
             height: 34vh;
             background-position: center center;
-            background-size: center center;
+            background-size: cover;
             background-repeat: no-repeat;
             @media (max-width: 1100px) {
                 height: 25vh;
@@ -825,6 +825,9 @@ body {
         h5 {
             font-size: 1rem;
         }
+        p {
+            font-size: .9rem;
+        }
     }
     &__card__play {
         position: absolute;

index.html

@@ -33,10 +33,10 @@
         rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
         crossorigin="anonymous">
         
-    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+      <link rel="stylesheet" href="css/jquery-ui.css">
+      <link rel="stylesheet" type="text/css" href="css/slick.css" />
+      <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
+
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <link rel="stylesheet" href="css/style.css">
 </head>
@@ -1646,7 +1646,6 @@
         integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     
     <script async defer src="js/index.js"></script>

js/index.js

@@ -24,7 +24,8 @@ let result;
             dots: false,
             speed: 800,
             autoplay: true,
-            autoplaySpeed: 5000
+            autoplaySpeed: 5000,
+            arrows: false,
         });
     }
 
@@ -66,7 +67,7 @@ let result;
                 str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
                     <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');"></div>
                     <h5 class="mb-2 me-2">${sub[j]['description']}</h5>
-                    <p class="mt-2">${sub[j]['description']}</p>
+                    <p class="mt-2">${sub[j]['txt']}</p>
                 </div>`;
               }
               $('#pills-hot-tab .tabpar').html(str);
@@ -78,7 +79,7 @@ let result;
                 str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
                 <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');"><img src="images/Play-Button.png" alt="" class="tabpar__card__play"></div>
                 <h5 class="mb-2  me-2">${sub[j]['description']}</h5>
-                <p class="mt-2">${sub[j]['description']}</p>
+                <p class="mt-2">${sub[j]['txt']}</p>
             </div>`;
               }
               $('#pills-video-tab .tabpar').html(str);
@@ -90,7 +91,7 @@ let result;
                 str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
                 <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');"></div>
                 <h5 class="mb-2  me-2">${sub[j]['description']}</h5>
-                <p class="mt-2">${sub[j]['description']}</p>
+                <p class="mt-2">${sub[j]['txt']}</p>
             </div>`;
               }
               $('#pills-blog-tab .tabpar').html(str);
@@ -138,13 +139,13 @@ let result;
             if(temp[i].video == 'true'){
                 str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
                     <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-06__card__play" src="images/Play-Button.png"></div></div>
-                    <h5 class="mb-2">${temp[i]['title']}</h5>
+                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
                     <p class="mt-2">${temp[i]['description']}</p>
                     </div>`;
             } else {
                 str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
                     <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div></div>
-                    <h5 class="mb-2">${temp[i]['title']}</h5>
+                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
                     <p class="mt-2">${temp[i]['description']}</p>
                     </div>`;
             }
@@ -194,13 +195,13 @@ let result;
                 str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
                         <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-08__card__play" src="images/Play-Button.png"></div>
                         <h5 class="mb-2 me-2">${temp[i]['description']}</h5>
-                        
+                        <p class="mb-2 me-2">${temp[i]['txt']}</p>
                     </div>`;
             } else {
                 str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
                         <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
                         <h5 class="mb-2 me-2">${temp[i]['description']}</h5>
-                        
+                        <p class="mb-2 me-2">${temp[i]['txt']}</p>
                     </div>`;
             }
         }
@@ -215,11 +216,11 @@ let result;
           prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
             nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
       });
-      const cardText = document.querySelectorAll('.sec-08__cardtxt');
+      const cardText = document.querySelectorAll('.sec-08__card p');
         cardText.forEach((item, i) => {
           let len = item.textContent.length;
           if(len > 20) {
-            let str = item.textContent.substring(0, 25) + '...';
+            let str = item.textContent.substring(0, 20) + '...';
             item.textContent = str;
           }
         })
@@ -259,18 +260,26 @@ let result;
                 str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
                         <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');"><img class="${sec}__card__play" src="images/Play-Button.png"></div>
                         <h5 class="me-2">${data[i]['description']}</h5>
-                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                        <p class="${sec}__cardtxt me-2">${data[i]['txt']}</p>
                     </div>`
             } else {
                 str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
                         <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');"></div>
                         <h5 class="me-2">${data[i]['description']}</h5>
-                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                        <p class="${sec}__cardtxt me-2">${data[i]['txt']}</p>
                     </div>`
             }
             
         }
         $(`.${sec} .row`).html(str);
+        const cardText = document.querySelectorAll(`.${sec}__card p`);
+        cardText.forEach((item, i) => {
+          let len = item.textContent.length;
+          if(len > 20) {
+            let str = item.textContent.substring(0, 20) + '...';
+            item.textContent = str;
+          }
+        })
     }
 
     function renderVideo(data) {

json/realtime.json

@@ -176,7 +176,7 @@
         ]
     },
     {
-        "_comment": "tab區塊-最夯設計, 影音實錄, 專欄文章",
+        "_comment": "tab區塊-最夯設計, 影音實錄, 專欄文章,(txt為部分內容段落)",
         "id": 2,
         "block": "sec03",
         "data": [
@@ -184,39 +184,45 @@
                 "tab": "最夯設計",
                 "data": [
                     {
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13781_20210924112526.jpg",
-                        "link": "https://www.hhh.com.tw/cases/detail/13781/",
-                        "description": "春日絮語｜北歐風｜13坪"
+                        "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13782_20210924174250.jpg",
+                        "link": "https://www.hhh.com.tw/cases/detail/13782/",
+                        "description": "行雲行木 Running cloud and wood｜日式無印風｜32坪",
+                        "txt": ""
                     },
                     {
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13780_20210924102617.jpg",
-                        "link": "https://www.hhh.com.tw/cases/detail/13780/",
-                        "description": "以美學描繪生活輪廓 闡述精彩故事情節｜現代風｜111坪"
+                        "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13781_20210924112526.jpg",
+                        "link": "https://www.hhh.com.tw/cases/detail/13781/",
+                        "description": "春日絮語｜北歐風｜13坪",
+                        "txt": "從事餐飲業的年輕屋主剛迎來嬌嫩生命，希望能給予孩子簡約、乾淨、明亮的舒適空間，也希望在有限的小坪數空間中擁有2房2廳的格局。為了讓空間保有自由度，我們規劃了多功能和室，並搭配活動家具，讓空間保有變化，也設置了一間儲藏室升級收納容積，亦善用地面架高部分植入完整收納機能，方便整理小朋友的玩具及生活必需品。劃分場域的隔間使用玻璃材質，讓視野更加開闊，也攬入豐沛採光烘暖全室！"
                     },
                     {
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13779_20210924100901.jpg",
-                        "link": "https://www.hhh.com.tw/cases/detail/13779/",
-                        "description": "HC Design｜中璞邨建案設計｜現代風"
+                        "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13780_20210924102617.jpg",
+                        "link": "https://www.hhh.com.tw/cases/detail/13780/",
+                        "description": "以美學描繪生活輪廓 闡述精彩故事情節｜現代風｜111坪",
+                        "txt": "☆Your Home Style\r\n☆Your Life Style \r\n細數那些空間裡的漫時光\r\n透過居家美學描繪生活的輪廓\r\n\r\n每一個空間\r\n都闡述著一段段的故事情節\r\n道出每一個與設計美學相遇的日常"
                     }
                 ]
             },
             {
                 "tab": "影音實錄",
                 "data": [
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/PrWdfscthiI/hqdefault.jpg",
+                        "link": "https://www.hhh.com.tw/video-post.php?id=4188",
+                        "description": "豐聚室內設計 WEB FINAL (1)",
+                        "txt": "轉動鑰匙打開家的期待 雙設計師詮釋景觀新豪奢"
+                    },
                     {
                         "imgUrl": "https://img.youtube.com/vi/2YzswkcIeq8/hqdefault.jpg",
                         "link": "https://www.hhh.com.tw/video-post.php?id=4187",
-                        "description": "挑戰自我的設計 量身訂做專屬高訂宅"
+                        "description": "高訂宅_采品V11",
+                        "txt": "挑戰自我的設計 量身訂做專屬高訂宅"
                     },
                     {
                         "imgUrl": "https://img.youtube.com/vi/AqGKRujUuL0/hqdefault.jpg",
                         "link": "https://www.hhh.com.tw/video-post.php?id=4186",
-                        "description": "離塵不離城 獨享一座森林的幸福適意"
-                    },
-                    {
-                        "imgUrl": "https://img.youtube.com/vi/5oH-huLBq1k/hqdefault.jpg",
-                        "link": "https://www.hhh.com.tw/video-post.php?id=4185",
-                        "description": "設計以人為本 裝修從「心」考量"
+                        "description": "離塵不離城 獨享一座森林的幸福適意",
+                        "txt": "離塵不離城 獨享一座森林的幸福適意"
                     }
                 ]
             },
@@ -224,26 +230,29 @@
                 "tab": "專欄文章",
                 "data": [
                     {
-                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_286_01.jpg",
-                        "link": "https://www.hhh.com.tw/column/detail/6093/",
-                        "description": "廳中的沙發椅座美學 生活乍現的一抹微笑"
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index04_480.jpg",
+                        "link": "https://www.hhh.com.tw/column/detail/6095/",
+                        "description": "【風水特輯】財位不能擺開運小物？簡單一步驟就能好運招財！",
+                        "txt": "關於風水上很多似是而非的說法，我在這裡繼續說明。這篇一開始，我就要來解答最多人問的：「財位應該如何布置？」除此之外，我也會在文章最後談談對開運商品的想法，有興趣的人就趕緊一起看下去吧！"
                     },
                     {
-                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_479_01.jpg",
-                        "link": "https://www.hhh.com.tw/column/detail/6092/",
-                        "description": "【風水特輯】擺錯飾品反招衰運！4款用了就後悔的NG居家風水擺設"
+                        "imgUrl": "https://cloud.hhh.com.tw/upload/_hcolumn/clogo_6094_20210924141801.JPG",
+                        "link": "https://www.hhh.com.tw/column/detail/6094/",
+                        "description": "受夠房東了，想自己買房嗎？請務必做好4項評估",
+                        "txt": "無殼蝸牛最大的悲哀，不是房價高不可攀，而是房租連連漲，根據內政部所發布的資訊顯示，全國租金指數已經連續121個月呈現上揚走勢，讓不少租屋族不禁興起轉租為買的念頭，無殼一族想轉租為買該如何務實的評估呢？"
                     },
                     {
-                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index04_478.jpg",
-                        "link": "https://www.hhh.com.tw/column/detail/6091/",
-                        "description": "東西總是沒處擺，是不是櫃子做越多越好？室內設計師告訴你正解！"
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_286_01.jpg",
+                        "link": "https://www.hhh.com.tw/column/detail/6093/",
+                        "description": "廳中的沙發椅座美學 生活乍現的一抹微笑",
+                        "txt": "以完美比例散發著高雅氛圍的義大利品牌Living Divani，善於運用簡約的線條框設出舒適的居家產品，現代主義揉合古典藝術，折衷出簡潔調性下獨有的微奢華感。由義大利極簡主義大師 Piero Lissoni所設計的沙發「Sumo」以細膩的量體輪廓及精緻的面料質地，將低調奢華的氣息盡數展現，宛如走進居家美學的藝術殿堂。"
                     }
                 ]
             }
         ]
     },
     {
-        "_comment": "主題企劃區",
+        "_comment": "主題企劃區,(title為主題標題，description為部分內容段落)",
         "id": 3,
         "block": "sec06",
         "data": [
@@ -251,24 +260,27 @@
                 "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_402_20210730172236.jpg",
                 "link": "https://www.hhh.com.tw/topic/detail/402/",
                 "video": "false",
-                "description": "透過聰明巧思，小坪數房子也能溫馨又好用！除了而熟能詳的「樓中樓」設計，究竟設計師們還能運用那些手法讓小宅擁有豪邸的生活品質呢？一起從配色、家具挑選、風格等不同角度著手，讓你家也有魔術大視覺！（圖片提供／知域設計×一己空間制作）"
+                "description": "透過聰明巧思，小坪數房子也能溫馨又好用！除了而熟能詳的「樓中樓」設計，究竟設計師們還能運用那些手法讓小宅擁有豪邸的生活品質呢？一起從配色、家具挑選、風格等不同角度著手，讓你家也有魔術大視覺！（圖片提供／知域設計×一己空間制作）",
+                "title": "解壓縮小宅！享受豪宅級空間感"
             },
             {
                 "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_401_20210709222636.jpg",
                 "link": "https://www.hhh.com.tw/topic/detail/401/",
                 "video": "false",
-                "description": "雖然現代社會多為小資家庭，在都會中獨立門戶，但仍有許多家庭是採三代同堂的模式為主要居住習慣。面對上有老、下有小的居宅空間，設計師該如何因應家庭成員眾多的生活需求，打造出讓彼此生活舒適自在的好空間呢？"
+                "description": "雖然現代社會多為小資家庭，在都會中獨立門戶，但仍有許多家庭是採三代同堂的模式為主要居住習慣。面對上有老、下有小的居宅空間，設計師該如何因應家庭成員眾多的生活需求，打造出讓彼此生活舒適自在的好空間呢？",
+                "title": "混齡共居時代！老屋翻新生活提案"
             },
             {
                 "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_400_20210527165623.jpg",
                 "link": "https://www.hhh.com.tw/topic/detail/400/",
                 "video": "false",
-                "description": "揮揮手、拍拍手或連上手機APP就能操控空調、大門、窗簾及燈光等物件，想做什麼都不用起身，也不用聲控任何人就能做到！可以盡情讓人發懶得智慧宅，已經不僅僅只存在電影場景中啦！快看看設計師如何將這些尖端科技隱匿於室內設計中，創造美好未來生活。（圖片提供／優尼客空間設計有限公司）"
+                "description": "揮揮手、拍拍手或連上手機APP就能操控空調、大門、窗簾及燈光等物件，想做什麼都不用起身，也不用聲控任何人就能做到！可以盡情讓人發懶得智慧宅，已經不僅僅只存在電影場景中啦！快看看設計師如何將這些尖端科技隱匿於室內設計中，創造美好未來生活。（圖片提供／優尼客空間設計有限公司）",
+                "title": "人性化智慧E宅 擺平生活大小事"
             }
         ]
     },
     {
-        "_comment": "編輯精選",
+        "_comment": "編輯精選,(txt為部分內容段落)",
         "id": 4,
         "block": "sec07",
         "data": [
@@ -276,19 +288,22 @@
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_256_02.jpg",
                 "link": "https://www.hhh.com.tw/columns/detail/5700/",
                 "description": "蔬果開外掛！超強冰箱凍齡術延緩食材保鮮期",
-                "video": "false"
+                "video": "false",
+                "txt": "陪我們走過一年四季的廚房家電，就屬冰箱莫屬！它是家中最深刻的記憶，進行著保存食材新鮮度的重要工作，隨著時代變遷與生活品質的提升，澳洲第一大品牌Fisher＆Paykel試著將科技智慧融入冰箱。"
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcolumn/clogo_4839_20200902104602.jpg",
                 "link": "https://www.hhh.com.tw/columns/detail/4839/",
                 "description": "轉開即飲 立刻滿足您對水溫的需求",
-                "video": "false"
+                "video": "false",
+                "txt": "半夜想吃泡麵，必須耗費時間煮沸開水才能煮好，睡眠時間變得更短；餐具想以高溫熱水消毒，卻發現熱水瓶用到一半沒水了，還得花時間重新煮水；煮完芋園、湯圓等甜點，必須從冷凍庫倒一大堆冰塊製造冰水，才能有效冰鎮，造就Ｑ彈口感………以上情境你我幾乎都遭遇過，每每發生總希望一轉開水龍頭就有所需溫度的水，一次性省去所有麻煩，而這個願望，揚古實業古忠明總經理幫大家完成了！"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_285_01.jpg",
                 "link": "https://www.hhh.com.tw/columns/detail/6086/",
                 "description": "改善門窗玻璃外觀，你適合什麼款式的「居家建築膜」呢？",
-                "video": "false"
+                "video": "false",
+                "txt": "住家的裝修建材種類繁多，若想改善門窗玻璃外觀，不少人會選擇裝貼建築隔熱膜，FSK居家建築膜的類型大致可以分為以下四種：透明防爆安全膜、金屬反射膜、高透明反射膜、彩藝紙，每一種都有它的特點，今天我們來介紹到底什麼樣的類型才適合你呢？"
             }
         ]
     },
@@ -367,7 +382,7 @@
         ]
     },
     {
-        "_comment": "本週推薦",
+        "_comment": "本週推薦,(txt為部分內容段落)",
         "id": 7,
         "block": "sec10",
         "data": [
@@ -375,60 +390,69 @@
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer369_03_02.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/4182/",
                 "description": "蘊納 生活情懷",
-                "video": "false"
+                "video": "false",
+                "txt": "在現代風格中講求動線流暢以及空間開闊，是尚宇設計與屋主溝通時的初步共識。"
             },
             {
-                "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13774_20210922163501.jpg",
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13774_20210922163501.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13774/",
                 "description": "轉動鑰匙打開家的期待 雙設計師詮釋景觀新豪奢│現代風│46坪",
-                "video": "false"
+                "video": "false",
+                "txt": ""
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13629_20210827182951.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13629/",
                 "description": "歲月．新醅│老屋翻新",
-                "video": "false"
+                "video": "false",
+                "txt": "本案為屋齡偏高的電梯華廈改造案，屋主一家三個世代，但因屋況漸趨老舊，加上早年建築局部施作瑕疵，多處滲漏水導致室內潮濕及霉味、牆壁龜裂，還有地面不平、室內通風採光不佳等等狀況，嚴重影響居家健康指數和舒適度，因此整體改造第一步也是最關鍵，便要從紮實基礎更新著手，重新建構現代居宅應有的強固體質！"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer102_66_05.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13153/",
                 "description": "老屋翻新達人出手 缺點變優勢",
-                "video": "false"
+                "video": "false",
+                "txt": "屋主5年前賣掉舊家，匆促搬入現今的房屋，沒想到卻是惡夢的開始！老舊的空間除了存在漏水、滲水、蟲害、噪音、漏風等問題，格局上亦過於狹長，加上配置不良，使得採光、通風不良，動線也不流暢。為了改善居住品質，屋主找上擅長老屋翻新的理揚室內設計吳函霖設計師，除了著手進行防水、防蟲的基礎補強外，更大膽將公、私領域佈局完全調換，使側面與後方的充足日光得以恣意穿梭，家的每個角落都沐浴於光影之中。"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer357_07_07.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/3986/",
                 "description": "宛如電影場景的美式鄉村風",
-                "video": "false"
+                "video": "false",
+                "txt": "「簡約清爽的美式純白，細細品味生活中的原味純粹。」"
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13026_20210209111017.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13026/",
                 "description": "品味質男看過來 清爽簡約日系宅",
-                "video": "false"
+                "video": "false",
+                "txt": "空間通透明亮、尺度開闊，鋪上輕柔色彩，圍塑出無壓、舒適的居家環境。京彩室內設計團隊經由取消書房隔牆，打造出與客廳結合的寬敞公領域，揉以屋主喜愛的日系風、無印風精髓，構築出清爽、簡歛具質感的生活日常。"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer104_51_01.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/4839/",
                 "description": "360度環景視野 構築不凡層峰生活",
-                "video": "false"
+                "video": "false",
+                "txt": "「聚落，泛指眾多居住房屋構成的集合或人口集中分布的區域」，落戶於豪宅聚落的全新建案，從120坪起跳的超大坪數，緊鄰公園綠地與機能商圈，並擁有360度環景視野，超脫過往豪宅標準，成為頂尖建築的全新指標。比沙列室內裝修有限公司取捨傳統隔牆手法，依循回字形動線配置機能格局，在開放流暢的行進動線間，構築層峰生活的開闊視野。"
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13739_20210915135840.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13739/",
                 "description": "把小木屋的閒適氛圍帶回家！｜混搭風｜3房、2廳、2衛",
-                "video": "false"
+                "video": "false",
+                "txt": ""
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13601_20210820181028.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13601/",
                 "description": "琢白│新古典│100坪",
-                "video": "false"
+                "video": "false",
+                "txt": "置身繁華城市與自然共舞，平時日照翠綠，夜晚則燈火霓虹，大方延續窗外景色，融入各空間，並聚焦於感官體驗，注重從建築至室內的整體性，強調視覺的通透感與空間尺度。"
             }
         ]
     },
     {
-        "_comment": "粉絲推薦",
+        "_comment": "粉絲推薦,(txt為部分內容段落)",
         "id": 8,
         "block": "sec11",
         "data": [
@@ -436,37 +460,43 @@
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13604_20210823152753.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13604/",
                 "description": "27坪小資宅，清新空間粉衛浴｜北歐風｜3房、2廳、2衛",
-                "video": "false"
+                "video": "false",
+                "txt": ""
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13731_20210914105623.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13731/",
                 "description": "快意生活。Joyful Living│現代風│22坪",
-                "video": "false"
+                "video": "false",
+                "txt": ""
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13227_20210429115139.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13227/",
                 "description": "透亮清新家景 續寫精彩幸福故事｜休閒多元｜68坪｜4房、2廳、3衛",
-                "video": "false"
+                "video": "false",
+                "txt": "年輕夫妻即將迎接寶寶的誕生，因而委請奧立佛x竺居聯合設計擘劃新居。於是，鍾鼎設計師以溫柔筆觸描繪空間輪廓，並揉入充沛天光、嬌嫩粉綠及古樸元素，構築透亮清新的純淨家景，翻開一家三口的幸福新篇章。"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer96_68_02.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13387/",
                 "description": "音樂藝術展覽廳 滿足居家五感體驗｜高雄都廳苑｜92坪",
-                "video": "false"
+                "video": "false",
+                "txt": "流淌於室的淡雅清香、素雅地毯的輕柔觸感、藝術品釋放的雅緻氣韻與兀自律動的光影，共同醞釀出深邃清寧謐境，帶來澹然無憂的平靜。尚藝室內裝修以感官設計強化人與空間的連結、昇華生活體驗，令居者自然而然卸除所有牽掛，徹底休憩放鬆。"
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13729_20210913170252.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13729/",
                 "description": "漾。初春│北歐風│29坪",
-                "video": "false"
+                "video": "false",
+                "txt": "梳理屋主對於居住空間機能的訴求，為屋主配置影音設備（音響、遊戲機器設備），並將廚房、廁所的動線做了整合。29坪的空間，在至文室內裝修擘劃下，以北歐風鋪敘空間底蘊，電視牆勾勒一抹綠色油漆弧形，藉此對應著室內弧形，使整體空間較活潑，就像繪本空間。"
             },
             {
-                "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13772_20210922155613.jpg",
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13772_20210922155613.jpg",
                 "link": "https://www.hhh.com.tw/cases/detail/13772/",
                 "description": "春日。The Spring｜混搭風｜17坪",
-                "video": "false"
+                "video": "false",
+                "txt": ""
             }
         ]
     },
@@ -474,13 +504,23 @@
         "_comment": "video最新影音區",
         "id": 9,
         "block": "video",
-        "title": "挑戰自我的設計 量身訂做專屬高訂宅",
-        "yt": "2YzswkcIeq8"
+        "title": "轉動鑰匙打開家的期待 雙設計師詮釋景觀新豪奢",
+        "yt": "PrWdfscthiI"
     },
     {
         "_comment": "熱搜關鍵字",
         "id": 10,
         "block": "trending",
-        "data": ["小坪數", "收納", "軟裝佈置", "幸福經紀人", "承炫設計", "風水", "北歐風", "周石設計"]
+        "data": [
+            "客變",
+            "小坪數",
+            "老屋翻新",
+            "收納",
+            "軟裝佈置",
+            "新手裝修",
+            "承炫設計",
+            "風水",
+            "北歐風"
+        ]
     }
 ]