update

layouts/blog/list.html

@@ -92,18 +92,24 @@
       // 取得 apiData
       let contentsData = [];
       let category = localStorage.getItem('category');
+      // 取得網址參數
+      let getUrlString = location.href;
+      let url = new URL(getUrlString);
+      let tagsVal = url.searchParams.get('tags');
 
-      if (category !== null) {
+      // 麵包屑
+      if (tagsVal !== null) {
+        document.getElementById('category_name').textContent = tagsVal;
+      } else if (category !== null) {
         document.getElementById('category_name').textContent = category;
-
       } else {
         document.getElementById('category_name').style.display = 'none';
       }
 
       (function getContentsData() {
-        // 線上版網址 http://192.53.174.202:9001/api/
+        // 線上版網址 https://bhouse3.ptt.cx:9002/api/
         // 本地端網址 http://localhost:9001/api/
-        fetch('https://bhouse2.ptt.cx:9002/api/contents?url=/blog').then(res => res.json()).then(list => {
+        fetch('https://bhouse3.ptt.cx:9002/api/contents?url=/blog').then(res => res.json()).then(list => {
           contentsData = list;
           // contentsData.shift();
           filterCategory();
@@ -117,11 +123,39 @@
 
       // 分類篩選
       function filterCategory() {
-        contentsData.map(item => {
-          if (category !== null) {
-            if (item.categories) {
-              if (item.categories.includes(category)) {
+        // 網址有參數
+        if (tagsVal !== null) {
+          contentsData.map(item => {
+            console.log('item', item);
+            console.log('item', item.blog_tag);
+            if (item.blog_tag) {
+              if (item.blog_tag.includes(tagsVal)) {
+                console.log('符合');
                 matchContent += `
+                <div class="article-item">
+                  <a href="${item.url}?tags=${tagsVal}">
+                    <img src="${item.image}" alt="">
+                  </a>
+                  <div class="d-flex flex-column">
+                    <a href="${item.url}?tags=${tagsVal}">
+                      <h4>${item.title}</h4>
+                    </a>
+                    <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
+                    <a href="${item.url}?tags=${tagsVal}" class="description">
+                      <p style="letter-spacing: 1px;">${item.description}</p>
+                    </a>
+                  </div>
+                </div>`
+              }
+            }
+          })
+        } else {
+          console.log('網址沒參數');
+          contentsData.map(item => {
+            if (category !== null) {
+              if (item.categories) {
+                if (item.categories.includes(category)) {
+                  matchContent += `
             <div class="article-item">
               <a href="${item.url}">
                 <img src="${item.image}" alt="">
@@ -136,10 +170,10 @@
                 </a>
               </div>
             </div>`
+                }
               }
-            }
-          } else {
-            matchContent += `
+            } else {
+              matchContent += `
             <div class="article-item">
               <a href="${item.url}">
                 <img src="${item.image}" alt="">
@@ -154,8 +188,49 @@
                 </a>
               </div>
             </div>`
-          }
-        })
+            }
+          })
+        }
+
+        // contentsData.map(item => {
+        //   if (category !== null) {
+        //     if (item.categories) {
+        //       if (item.categories.includes(category)) {
+        //         matchContent += `
+        //     <div class="article-item">
+        //       <a href="${item.url}">
+        //         <img src="${item.image}" alt="">
+        //       </a>
+        //       <div class="d-flex flex-column">
+        //         <a href="${item.url}">
+        //           <h4>${item.title}</h4>
+        //         </a>
+        //         <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
+        //         <a href="${item.url}" class="description">
+        //           <p style="letter-spacing: 1px;">${item.description}</p>
+        //         </a>
+        //       </div>
+        //     </div>`
+        //       }
+        //     }
+        //   } else {
+        //     matchContent += `
+        //     <div class="article-item">
+        //       <a href="${item.url}">
+        //         <img src="${item.image}" alt="">
+        //       </a>
+        //       <div class="d-flex flex-column">
+        //         <a href="${item.url}">
+        //           <h4>${item.title}</h4>
+        //         </a>
+        //         <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
+        //         <a href="${item.url}" class="description">
+        //           <p style="letter-spacing: 1px;">${item.description}</p>
+        //         </a>
+        //       </div>
+        //     </div>`
+        //   }
+        // })
         $('#blog-loading').addClass("blog_loading");
         document.getElementById("articleList").innerHTML = matchContent;
 
@@ -204,7 +279,7 @@
               falseItem.push(item);
             }
 
-            if (falseItem.length === contentsData.length-1) {
+            if (falseItem.length === contentsData.length - 1) {
               matchContent = `
             <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: 0 auto 25px;justify-content: center;">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">

layouts/collection/list.html

@@ -193,7 +193,7 @@
       (function getContentsData() {
         // 線上版網址 http://192.53.174.202:9001/api/
         // 本地端網址 http://localhost:9001/api/
-        fetch('https://bhouse2.ptt.cx:9002/api/contents?url=/collection').then(res => res.json()).then(list => {
+        fetch('https://bhouse3.ptt.cx:9002/api/contents?url=/collection').then(res => res.json()).then(list => {
           contentsData = list;
           console.log('contentsData', contentsData);
           // filterCategory();

themes/hugo-universal-theme-master/layouts/partials/carousel.html

@@ -35,9 +35,13 @@
 {{ end }}
 {{ end }} -->
 <div class="container-fluid p-0">
+  {{ $t := $.Site.GetPage "/news" }}
+  {{ range $index, $element := first 1 ( where $t.Pages "Params.display" true) }}
   <div class="news-link">
-    <a href="/news/little_treasure_home_announcement_on_peace_of_mind_and_epidemic_prevention">【最新消息】小寶優居｜門市安心防疫公告＞</a>
+    <a href="{{ .Params.url }}">{{ .Params.title }} ＞</a>
+    <!-- <a href="/news/little_treasure_home_announcement_on_peace_of_mind_and_epidemic_prevention">【最新消息】小寶優居｜門市安心防疫公告＞</a> -->
   </div>
+  {{ end }}
   <div class="slider responsive">
     <div class="slider-item">
       <img src="./img/head1.webp" alt="" class="img-fluid">
@@ -52,7 +56,7 @@
       </a>
     </div>
     <div class="slider-item">
-      <a  style="text-decoration: none;"  href="/collection/boutique_hotel_slightly_drunk_chill_house">
+      <a style="text-decoration: none;" href="/collection/boutique_hotel_slightly_drunk_chill_house">
         <img src="./img//home/collection2.webp" alt="" class="img-fluid">
         <div>
           <p>「回家，就是度假！還有比我家，更適合度假的地方嗎？」</p>

themes/hugo-universal-theme-master/static/css/style.bhouse.css

@@ -1324,6 +1324,9 @@ input[type=search]::-webkit-search-cancel-button {
   background-image: url(/img/home/X-1-05.png);
 }
 
+.icon-box {
+  display: flex;
+}
 .icon-box img {
   margin-top: 0px;
   width: 35px;
@@ -4203,7 +4206,7 @@ input[type=search]::-webkit-search-cancel-button {
   color: #000;
   background-color: #fff;
   padding: 10px 15px;
-  margin: 10px 5px;
+  margin: 10px 3px;
   border-radius: 100px;
   transition: all 0.3s;
 }
@@ -4419,15 +4422,21 @@ input[type=search]::-webkit-search-cancel-button {
 .blog_article .link-box .link-list {
   width: 100%;
 }
+@media (max-width: 575px) {
+  .blog_article .link-box .link-list {
+    width: 300px;
+  }
+}
 
 .blog_article .link-box .link-list a {
-  text-decoration: none;
+  display: inline-block;
+  margin: 3px;
   padding: 7px 10px;
   background: #808e4c;
   color: #fff;
   transition: 0.3s;
+  text-decoration: none;
   border: 1px solid #808e4c;
-  font-weight: bold;
 }
 
 .blog_article .link-box .link-list a:hover {

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -1430,9 +1430,12 @@ input[type="search"]::-webkit-search-cancel-button {
     background-image: url(/img/home/X-1-05.png);
   }
 }
-.icon-box img {
-  margin-top: 0px;
-  width: 35px;
+.icon-box {
+  display: flex;
+  img {
+    margin-top: 0px;
+    width: 35px;
+  }
 }
 .style_house_ads {
   padding: 15px;
@@ -4035,7 +4038,7 @@ input[type="search"]::-webkit-search-cancel-button {
             color: #000;
             background-color: #fff;
             padding: 10px 15px;
-            margin: 10px 5px;
+            margin: 10px 3px;
             border-radius: 100px;
             transition: all 0.3s;
             &:hover {
@@ -4298,17 +4301,21 @@ input[type="search"]::-webkit-search-cancel-button {
 
 .blog_article .link-box .link-list {
   width: 100%;
+  @media (max-width: 575px) {
+    width: 300px;
+  }
 }
 
 .blog_article .link-box .link-list a {
-  text-decoration: none;
+  display: inline-block;
+  margin: 3px;
   padding: 7px 10px;
   background: #808e4c;
   color: #fff;
   -webkit-transition: 0.3s;
   transition: 0.3s;
+  text-decoration: none;
   border: 1px solid #808e4c;
-  font-weight: bold;
 }
 
 .blog_article .link-box .link-list a:hover {

themes/hugo-universal-theme-master/static/js/bhouse.js

@@ -273,4 +273,38 @@ $("*").each(function (index, element) {
       }, parseInt(duration));
     }
   });
-});
+});
+
+let tagList = [];
+
+(function getContentsData() {
+  // 線上版網址 https://bhouse3.ptt.cx:9002/api/contents?url=/blog
+  // 本地端網址 http://localhost:9001/api/
+  fetch('http://localhost:9001/api/contents?url=/blog').then(res => res.json()).then(list => {
+    console.log('list', list);
+    list.map(({ blog_tag }) => {
+      console.log(blog_tag);
+      if (blog_tag) {
+        let tagText = blog_tag.replace("[", "").replace("]", "");
+        let tagArr = tagText.split(',');
+        tagArr.map(e => {
+          tagList.push(e);
+        })
+        // 移除重複字串
+        tagList = tagList.filter((item, index) => tagList.indexOf(item) === index);
+
+        const dom = document.querySelector('.blog-tags');
+        let tagTemplate = [];
+
+        for (let i = 0; i < tagList.length; i++) {
+          const element = tagList[i];
+          let content = `<a href="/blog?tags=${element}">${element}</a>`;
+          tagTemplate.push(content);
+        }
+        // 移除陣列逗號
+        dom.innerHTML = tagTemplate.join("");
+      }
+
+    })
+  })
+})();