update layout

config.toml

@@ -2,8 +2,10 @@ baseURL = "https://news.aimedium.org/"
 languageCode = "en-us"
 title = "算力傳媒"
 theme = "hugo-bootstrap-5"
-paginate = 10
+# paginate = 10
 publishDir = "/tmp/news_aimedium_org"
 [taxonomies]
   tag = 'tags'
-  category = 'categories'
+  category = 'categories'
+[pagination]
+  pagerSize = 10

content/news/nvidia-digital-twin-ai-technology-and-applications.md

@@ -8,7 +8,7 @@ date: 2024-07-23T00:39:24+08:00
 descrption: "NVIDIA 數位雙生 + AI技術與應用 | 集仕多 ChoozMo"
 draft: false
 display: true
-type: "post"
+type: "main"
 ---
 
  目前全球AI產值以AI運算設備硬體為主，2024年預估占比高達95％，AI的應用與服務市場規模，預估在未來5年會有爆炸性的成長。隨著copilot、聊天機器人等生成式AI逐漸被接受與使用，其應用程式發展日漸複雜，通常要用到有不同功能的多個模型來生成文字、圖片、影片、語音等內容。這個部署過程原先需要耗費數週的時間，現在已經能夠簡單將生成式 AI 加入應用程式，在雲端、資料中心、工作站或個人電腦上在數分鐘裡輕鬆構建完成，顯著提高開發人員的工作效率。

content/news/what-is-gpt-4o-mini.md

@@ -8,7 +8,7 @@ date: 2024-07-23T00:50:04+08:00
 descrption: "什麼是 GPT-4o mini？"
 draft: false
 display: true
-type: "focus"
+type: "main"
 ---
 
  OpenAI 於週四推出了其最新的小型人工智慧模型 GPT-4o mini。該公司表示，[GPT-4o mini](https://openai.com/index/gpt-4o-mini-advancing-cost-efficient-intelligence/)比 OpenAI 目前的尖端人工智慧模型更便宜、更快，從今天開始將向開發人員發布，並透過 ChatGPT 網路和行動應用程式向消費者發布。企業用戶將於下週獲得存取權限。

news_templates/static/css/style.css

@@ -261,6 +261,49 @@ body {
   height: 100%;
   overflow: hidden;
 }
+.news-main a {
+  text-decoration: none;
+}
+.news-main .title-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding: 1rem;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
+}
+.news-main .title-info a,
+.news-main .title-info h2,
+.news-main .title-info small {
+  color: #fff;
+  letter-spacing: 1px;
+}
+.news-main .title-info h2 {
+  line-height: 1.5;
+}
+.news-main .title-info h2 a {
+  font-weight: 500;
+  font-size: 1.5rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+@media (max-width: 991px) {
+  .news-main .title-info h2 a {
+    font-size: 1.25rem;
+  }
+}
+.news-main .title-info .badge-link {
+  display: inline-block;
+  padding: 1px 20px;
+  margin-bottom: 10px;
+  background-color: var(--sub-color);
+  font-weight: 500;
+}
 .news-main .post-title a {
   font-size: 34px;
 }
@@ -269,6 +312,11 @@ body {
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 991px) {
+  .news-main .main-img {
+    height: 50vw;
+  }
+}
 .news-main .news-info a {
   font-size: 16px;
 }

news_templates/static/css/style.scss

@@ -51,15 +51,18 @@ body {
 
 .navbar {
   background-color: var(--main-color) !important;
+
   .navbar-collapse {
     flex-grow: 0;
   }
+
   .navbar-brand {
     font-size: 50px;
     font-weight: 500;
     font-family: "Roboto Slab", serif !important;
     color: var(--sub-color);
     transition: all 0.3s;
+
     &:hover {
       opacity: 0.9;
       color: var(--sub-color);
@@ -70,6 +73,7 @@ body {
 .blog-post-tags {
   .badge {
     background-color: var(--main-color);
+
     &:hover {
       color: var(--main-color);
       background-color: #fff;
@@ -80,6 +84,7 @@ body {
 
 .blog-post-title {
   margin: 10px 0 20px;
+
   a {
     font-size: 50px;
     font-weight: 600;
@@ -88,9 +93,11 @@ body {
 
 .pagination {
   justify-content: center;
+
   .page-link {
     color: var(--main-color);
   }
+
   .page-item.active .page-link {
     z-index: 3;
     color: #fff;
@@ -112,6 +119,7 @@ body {
   margin-bottom: 20px;
   position: relative;
   font-size: 22px;
+
   &::after {
     position: absolute;
     z-index: -10;
@@ -123,6 +131,7 @@ body {
     border-bottom: 1px solid #929292;
     bottom: 5px;
   }
+
   span {
     font-weight: 500;
     background: #fff;
@@ -132,16 +141,19 @@ body {
 .news-info {
   margin-top: 10px;
   line-height: 20px;
+
   a {
     font-size: 14px;
     font-weight: 500;
     color: var(--gray-color);
     text-decoration: none;
     transition: all 0.3s;
+
     &:hover {
       opacity: 0.8;
     }
   }
+
   small {
     color: var(--gray-color);
   }
@@ -171,6 +183,7 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 26px;
+
   a {
     color: #7a7a7a;
     text-decoration: none;
@@ -184,6 +197,7 @@ body {
   z-index: 10;
   opacity: 0; // scrollTop = 0
   transition: all .5s;
+
   button {
     border: none;
     background: var(--sub-color);
@@ -195,13 +209,14 @@ body {
 
 .show {
   opacity: 1; // scrollTop > 100
-} 
+}
 
 /* sidebar.html Start */
 
 .news-sidebar {
   position: sticky;
   top: 15px;
+
   .news-featured {
     position: unset;
   }
@@ -209,11 +224,14 @@ body {
 
 .search-btn {
   border: 1px solid var(--main-color) !important;
+
   svg {
     color: var(--main-color);
   }
+
   &:hover {
     background-color: var(--main-color) !important;
+
     svg {
       color: #fff;
     }
@@ -227,6 +245,7 @@ body {
   font-weight: 400 !important;
   color: var(--main-color) !important;
   border: 1px solid var(--main-color) !important;
+
   &:hover {
     color: #fff !important;
     background-color: var(--main-color);
@@ -242,23 +261,27 @@ body {
     font-size: 16px;
     font-weight: 300;
     line-height: 32px;
+
     a {
       padding: 5px 8px;
       margin-right: 3px;
       border: 1px solid #000;
       border-radius: 5px;
       font-size: 14px;
+
       &:hover {
         color: #fff !important;
       }
     }
   }
+
   .back-link {
     color: #000;
     display: block;
     text-align: center;
     text-decoration: none;
     transition: all 0.3s;
+
     &:hover {
       opacity: 0.7;
     }
@@ -272,6 +295,56 @@ body {
 .news-main {
   height: 100%;
   overflow: hidden;
+
+  a {
+    text-decoration: none;
+  }
+
+  .title-info {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    padding: 1rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
+
+
+    a,
+    h2,
+    small {
+      color: #fff;
+      letter-spacing: 1px;
+    }
+
+    h2 {
+      line-height: 1.5;
+
+      a {
+        font-weight: 500;
+        font-size: 1.5rem;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2; // 顯示兩行
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+
+        @media (max-width: 991px) {
+          font-size: 1.25rem;
+        }
+      }
+    }
+
+    .badge-link {
+      display: inline-block;
+      padding: 1px 20px;
+      margin-bottom: 10px;
+      background-color: var(--sub-color);
+      font-weight: 500;
+    }
+  }
+
   .post-title {
     a {
       font-size: 34px;
@@ -283,6 +356,12 @@ body {
     object-fit: cover;
   }
 
+  .main-img {
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
+  }
+
   .news-info {
     a {
       font-size: 16px;
@@ -290,6 +369,27 @@ body {
   }
 }
 
+// .news-main {
+//   height: 100%;
+//   overflow: hidden;
+//   .post-title {
+//     a {
+//       font-size: 34px;
+//     }
+//   }
+
+//   img {
+//     height: 100%;
+//     object-fit: cover;
+//   }
+
+//   .news-info {
+//     a {
+//       font-size: 16px;
+//     }
+//   }
+// }
+
 /* content.html End */
 
 /* focus.html Start */
@@ -306,20 +406,25 @@ body {
 .recent-content {
   .news-list {
     margin: 0;
+
     li {
       margin: 15px 0;
+
       img {
         width: 140px;
         height: 105px;
         object-fit: cover;
       }
+
       small {
         display: block;
       }
+
       .news-info {
         margin-top: 0px;
       }
     }
+
     li:last-child {
       margin: 0;
     }
@@ -335,8 +440,9 @@ body {
     color: var(--main-color);
     font-weight: 500;
   }
+
   .nav-pills .nav-link.active,
-  .nav-pills .show > .nav-link {
+  .nav-pills .show>.nav-link {
     color: var(--sub-color);
     background-color: var(--main-color);
   }
@@ -351,15 +457,18 @@ body {
     background-size: cover;
     background-position: center center;
     cursor: pointer;
+
     section {
       padding: 10px 25px;
       position: absolute;
       bottom: 0;
       color: #fff;
+
       a {
         color: #fff;
         text-decoration: none;
       }
+
       small {
         font-size: 12px;
       }
@@ -374,22 +483,27 @@ body {
 .news-all {
   .post-title {
     margin: 5px auto;
+
     a {
       font-size: 36px;
     }
   }
+
   .news-info {
     a {
       font-size: 18px;
     }
   }
+
   hr {
     margin: 1.5rem 0;
   }
+
   .first-img {
     height: 50vh;
     object-fit: cover;
   }
+
   .line {
     padding: 0 12px;
   }
@@ -404,4 +518,4 @@ body {
   top: 20px;
 }
 
-/* news-featured.html End */
+/* news-featured.html End */

news_templates/themes/hugo-bootstrap-5/layouts/_default/list.html

@@ -20,7 +20,7 @@
     <div class="row mt-5 pt-5" id="news-block">
         <div class="col-12 col-lg-9">
             <h3 class="post-block-title">
-                <span>更多新聞</span>
+                <span>More News</span>
             </h3>
 
             <div class="row news-all">

news_templates/themes/hugo-bootstrap-5/layouts/partials/news-all.html

@@ -1,5 +1,5 @@
 <h3 class="post-block-title">
-  <span>更多新聞</span>
+  <span>More News</span>
 </h3>
 <div class="row news-all">
   {{ range $index, $element := (where site.RegularPages "Type" "post") | first 10 }}

news_templates/themes/hugo-bootstrap-5/layouts/partials/news-tab.html

@@ -6,7 +6,7 @@
 <div class="d-flex align-items-center position-relative tab-category mt-5 pt-5 pb-3">
   <section class="w-100">
     <h3 class="post-block-title">
-      <span>推薦主題</span>
+      <span>Topics</span>
     </h3>
   </section>
 

static/css/style.css

@@ -111,24 +111,26 @@ body {
 }
 
 .post-block-title {
-  margin-bottom: 20px;
+  margin-bottom: 25px;
   position: relative;
-  font-size: 22px;
+  font-size: 20px;
 }
 .post-block-title::after {
   position: absolute;
   z-index: -10;
-  top: 15px;
+  top: 30px;
   left: 0;
   width: 100%;
   height: 0px;
   content: "";
-  border-bottom: 1px solid #929292;
+  border-bottom: 1px solid var(--sub-color);
   bottom: 5px;
 }
 .post-block-title span {
-  font-weight: 500;
-  background: #fff;
+  padding: 5px 20px;
+  color: #fff;
+  font-weight: 300;
+  background: var(--sub-color);
 }
 
 .news-info {
@@ -277,19 +279,62 @@ body {
   height: 100%;
   overflow: hidden;
 }
-.news-main .post-title a {
-  font-size: 34px;
+.news-main a {
+  text-decoration: none;
+}
+.news-main .title-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding: 1rem;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
+}
+.news-main .title-info a,
+.news-main .title-info h2,
+.news-main .title-info small {
+  color: #fff;
+  letter-spacing: 1px;
+}
+.news-main .title-info h2 {
+  line-height: 1.5;
+}
+.news-main .title-info h2 a {
+  font-weight: 500;
+  font-size: 1.5rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 }
 @media (max-width: 991px) {
-  .news-main .post-title a {
-    font-size: 22px;
+  .news-main .title-info h2 a {
+    font-size: 1.25rem;
   }
 }
+.news-main .title-info .badge-link {
+  display: inline-block;
+  padding: 1px 20px;
+  margin-bottom: 10px;
+  background-color: var(--sub-color);
+  font-weight: 500;
+}
+.news-main .post-title a {
+  font-size: 34px;
+}
 .news-main img {
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 991px) {
+  .news-main .main-img {
+    height: 50vw;
+  }
+}
 .news-main .news-info a {
   font-size: 16px;
 }
@@ -303,14 +348,14 @@ body {
 
 .focus-content img,
 .news-featured img {
-  height: 175px;
+  height: 5vw;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @media (max-width: 991px) {
   .focus-content img,
   .news-featured img {
-    height: 50vw;
+    height: 15vw;
   }
 }
 .focus-content .post-title,
@@ -321,6 +366,7 @@ body {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   line-break: after-white-space;
+  font-size: 1.125rem;
 }
 
 /* focus.html End */
@@ -395,28 +441,13 @@ body {
   margin: 5px auto;
 }
 .news-all .post-title a {
-  font-size: 36px;
-  line-height: 1.5;
+  font-size: 1.5rem;
   display: -webkit-box;
-  -webkit-line-clamp: 2; /* 限制最多兩行 */
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
-  transition: all 0.3s;
-}
-@media (max-width: 575px) {
-  .news-all .post-title a {
-    font-size: 30px;
-  }
-}
-.news-all .post-description a {
-  color: #727272;
-  text-decoration: none;
-  transition: all 0.3s;
-}
-.news-all .post-description a:hover {
-  opacity: 0.7;
 }
 .news-all .news-info a {
   font-size: 18px;
@@ -424,30 +455,24 @@ body {
 .news-all hr {
   margin: 1.5rem 0;
 }
-.news-all .first-img {
-  height: 50vh;
+.news-all img {
+  height: 12vw;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @media (max-width: 991px) {
-  .news-all .first-img {
-    height: 50vw;
+  .news-all img {
+    height: 20vw;
   }
 }
-.news-all .line {
-  padding: 0 12px;
-}
-.news-all .cover-img {
-  width: 100%;
-  height: 220px;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
 @media (max-width: 575px) {
-  .news-all .cover-img {
+  .news-all img {
     height: 50vw;
   }
 }
+.news-all .line {
+  padding: 0 12px;
+}
 
 /* news-all.html End */
 /* news-featured.html Start */

static/css/style.scss

@@ -121,25 +121,28 @@ body {
 }
 
 .post-block-title {
-  margin-bottom: 20px;
+  margin-bottom: 25px;
   position: relative;
-  font-size: 22px;
+  font-size: 20px;
 
   &::after {
     position: absolute;
     z-index: -10;
-    top: 15px;
+    top: 30px;
     left: 0;
     width: 100%;
     height: 0px;
     content: "";
-    border-bottom: 1px solid #929292;
+    border-bottom: 1px solid var(--sub-color);
     bottom: 5px;
   }
 
   span {
-    font-weight: 500;
-    background: #fff;
+    padding: 5px 20px;
+    // font-weight: 500;
+    color: #fff;
+    font-weight: 300;
+    background: var(--sub-color);
   }
 }
 
@@ -312,13 +315,58 @@ body {
   height: 100%;
   overflow: hidden;
 
+  a {
+    text-decoration: none;
+  }
+
+  .title-info {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    padding: 1rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
+
+
+    a,
+    h2,
+    small {
+      color: #fff;
+      letter-spacing: 1px;
+    }
+
+    h2 {
+      line-height: 1.5;
+
+      a {
+        font-weight: 500;
+        font-size: 1.5rem;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2; // 顯示兩行
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+
+        @media (max-width: 991px) {
+          font-size: 1.25rem;
+        }
+      }
+    }
+
+    .badge-link {
+      display: inline-block;
+      padding: 1px 20px;
+      margin-bottom: 10px;
+      background-color: var(--sub-color);
+      font-weight: 500;
+    }
+  }
+
   .post-title {
     a {
       font-size: 34px;
-
-      @media (max-width: 991px) {
-        font-size: 22px;
-      }
     }
   }
 
@@ -327,6 +375,12 @@ body {
     object-fit: cover;
   }
 
+  .main-img {
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
+  }
+
   .news-info {
     a {
       font-size: 16px;
@@ -334,6 +388,32 @@ body {
   }
 }
 
+// .news-main {
+//   height: 100%;
+//   overflow: hidden;
+
+//   .post-title {
+//     a {
+//       font-size: 34px;
+
+//       @media (max-width: 991px) {
+//         font-size: 22px;
+//       }
+//     }
+//   }
+
+//   img {
+//     height: 100%;
+//     object-fit: cover;
+//   }
+
+//   .news-info {
+//     a {
+//       font-size: 16px;
+//     }
+//   }
+// }
+
 /* content.html End */
 
 /* focus.html Start */
@@ -346,11 +426,11 @@ body {
 .focus-content,
 .news-featured {
   img {
-    height: 175px;
+    height: 5vw;
     object-fit: cover;
 
     @media (max-width: 991px) {
-      height: 50vw;
+      height: 15vw;
     }
   }
 
@@ -362,6 +442,7 @@ body {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     line-break: after-white-space;
+    font-size: 1.125rem;
   }
 }
 
@@ -461,31 +542,14 @@ body {
     margin: 5px auto;
 
     a {
-      font-size: 36px;
-      line-height: 1.5;
+      font-size: 1.5rem;
+
       display: -webkit-box;
-      -webkit-line-clamp: 2; /* 限制最多兩行 */
       -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2; // 顯示兩行
       overflow: hidden;
       text-overflow: ellipsis;
       word-break: break-word;
-      transition: all 0.3s;
-
-      @media (max-width: 575px) {
-        font-size: 30px;
-      }
-    }
-  }
-
-  .post-description {
-    a {
-      color: #727272;
-      text-decoration: none;
-      transition: all 0.3s;
-
-      &:hover {
-        opacity: 0.7;
-      }
     }
   }
 
@@ -499,11 +563,15 @@ body {
     margin: 1.5rem 0;
   }
 
-  .first-img {
-    height: 50vh;
+  img {
+    height: 12vw;
     object-fit: cover;
 
     @media (max-width: 991px) {
+      height: 20vw;
+    }
+
+    @media (max-width: 575px) {
       height: 50vw;
     }
   }
@@ -512,15 +580,10 @@ body {
     padding: 0 12px;
   }
 
-  .cover-img {
-    width: 100%;
-    height: 220px;
-    object-fit: cover;
-
-    @media (max-width: 575px) {
-      height: 50vw;
-    }
-  }
+  // .first-img {
+  //   height: 50vh;
+  //   object-fit: cover;
+  // }
 }
 
 /* news-all.html End */

themes/hugo-bootstrap-5/layouts/_default/list.html

@@ -20,7 +20,7 @@
     <div class="row mt-5 pt-5" id="news-block">
         <div class="col-12 col-lg-9">
             <h3 class="post-block-title">
-                <span>更多新聞</span>
+                <span>More News</span>
             </h3>
 
             <div class="row news-all">

themes/hugo-bootstrap-5/layouts/index.html

@@ -23,7 +23,8 @@
 
 <div class="container my-5 flex-grow-1">
   <div class="row justify-content-evenly">
-    <div class="col-12 col-lg-3">
+    {{ partial "news-main.html" . }}
+    <!-- <div class="col-12 col-lg-3">
       {{ partial "focus.html" . }}
     </div>
 
@@ -33,29 +34,30 @@
 
     <div class="col-12 col-lg-3 mt-5 pt-5 mt-lg-0 pt-lg-0">
       {{ partial "news-featured.html" . }}
-    </div>
-
+    </div> -->
   </div>
 
   {{ partial "news-tab.html" . }}
 
- <div class="row mt-5 pt-5">
-  <div class="col-12 col-lg-9">
-    {{ partial "news-all.html" . }}
-    {{ partial "paginator" . }}
-  </div>
-  <div class="col-12 col-lg-3 d-none d-lg-block">
-    {{ partial "news-featured.html" . }}
+  <div class="row mt-5 pt-5">
+    <div class="col-12 col-lg-9">
+      {{ partial "news-all.html" . }}
+      {{ partial "paginator" . }}
+    </div>
+    <div class="col-12 col-lg-3 d-none d-lg-block">
+      {{ partial "news-featured.html" . }}
+    </div>
   </div>
- </div>
 </div>
 
 <div class="top-btn">
-<button>
-  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-arrow-up-short" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"/>
-  </svg>
-</button>
+  <button>
+    <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-arrow-up-short"
+      viewBox="0 0 16 16">
+      <path fill-rule="evenodd"
+        d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z" />
+    </svg>
+  </button>
 </div>
 
 <!-- {{ partial "paginator" . }} -->

themes/hugo-bootstrap-5/layouts/partials/header.html

@@ -31,8 +31,8 @@
 
         </div>
         <div class="collapse navbar-collapse w-100 sticky-top justify-content-center" id="navbarMenu"
-            style="background:#dc3545;">
-            <ul class="navbar-nav ">
+            style="background:#e47140;">
+            <ul class="navbar-nav">
                 <li class="nav-item">
                     <a href="/tags/ai/" class="nav-link" style="color: white;">科技新聞</a>
                 </li>

themes/hugo-bootstrap-5/layouts/partials/news-all.html

@@ -1,5 +1,39 @@
 <h3 class="post-block-title">
-  <span>更多新聞</span>
+  <span>More News</span>
+</h3>
+<div class="row news-all">
+  {{ range $index, $element := (where site.RegularPages "Type" "post") | first 9 }}
+
+  <div class="col-12 col-sm-6 col-lg-4 mb-3">
+    <div class="row align-items-center">
+      <div class="col-12">
+        <a href="{{ .Permalink }}">
+          <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
+        </a>
+      </div>
+      <div class="col-12">
+        <article>
+          <section class="news-info">
+            {{ range (.GetTerms "categories") }}
+            <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+            {{ end }}
+            <small>{{ .Date | time.Format ":date_long" }}</small>
+          </section>
+          <h2 class="post-title">
+            <a href="{{ .Params.url }}">{{ .Params.title }}</a>
+          </h2>
+        </article>
+      </div>
+      <!-- <span class="line">
+        <hr>
+      </span> -->
+    </div>
+  </div>
+  {{ end }}
+</div>
+
+<!-- <h3 class="post-block-title">
+  <span>More News</span>
 </h3>
 <div class="row news-all">
   {{ range $index, $element := (where site.RegularPages "Type" "post") | first 10 }}
@@ -20,9 +54,6 @@
       <h2 class="post-title">
         <a href="{{ .Params.url }}">{{ .Params.title }}</a>
       </h2>
-      <!-- <p class="post-depiction">
-        <a href="{{ .Permalink }}">{{ .Summary }}</a>
-      </p> -->
       <hr>
     </article>
   </div>
@@ -47,9 +78,6 @@
           <h2 class="post-title">
             <a href="{{ .Params.url }}">{{ .Params.title }}</a>
           </h2>
-          <!-- <p class="post-description">
-            <a href="{{ .Permalink }}">{{ .Summary | plainify | truncate 100 }}</a>
-          </p> -->
         </article>
       </div>
       <span class="line">
@@ -59,4 +87,4 @@
   </div>
   {{ end }}
   {{ end }}
-</div>
+</div> -->

themes/hugo-bootstrap-5/layouts/partials/news-featured.html

@@ -1,4 +1,33 @@
 <div class="news-featured">
+  <h3 class="post-block-title">
+    <span>Featured News</span>
+  </h3>
+  {{ range first 5 (where .Site.Pages "Params.type" "featured") }}
+  <div class="row align-items-center mb-3">
+    <div class="col-4">
+      <a href="{{ .Permalink }}">
+        <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
+      </a>
+    </div>
+
+    <div class="col-8 ps-0">
+      <section class="mt-0 news-info">
+        {{ range (.GetTerms "categories") }}
+        <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+        {{ end }}
+        <small>{{ .Date | time.Format ":date_long" }}</small>
+      </section>
+      <h2 class="mt-1 post-title">
+        <a href="{{ .Params.url }}">{{ .Params.title }}</a>
+      </h2>
+    </div>
+
+  </div>
+
+  {{ end }}
+</div>
+
+<!-- <div class="news-featured">
   <h3 class="post-block-title">
     <span>影音新聞</span>
   </h3>
@@ -16,31 +45,5 @@
     <h2 class="post-title mb-3">
       <a href="{{ .Params.url }}">{{ .Params.title }}</a>
     </h2>
-    <!-- <div class="col-12 col-sm-6 col-md-4 col-xl-3">
-      <div class="card h-100">
-        <div class="card-header">
-          <a href="{{ .RelPermalink }}">
-            <h2 class="card-title text-center mb-0">
-              {{ .Title }}
-            </h2>
-          </a>
-        </div>
-        <a href="{{ .RelPermalink }}" class="h-100">
-          <div class="card-body h-100 d-flex flex-column justify-content-center">
-            <section class="d-flex">
-              <h4>電話：</h4>
-              <h4>{{ .Params.phone }}</h4>
-            </section>
-            <section class="d-flex">
-              <h4 class="m-0">地址：</h4>
-              <h4 class="m-0">{{ .Params.address }}</h4>
-            </section>
-            {{ range .Params.tags }}
-              <span class="badge bg-secondary">{{.}}</span>
-              {{ end }}
-          </div>
-        </a>
-      </div>
-    </div> -->
     {{ end }}
-  </div>
+  </div> -->

themes/hugo-bootstrap-5/layouts/partials/news-main.html

@@ -1,4 +1,87 @@
-<div class="news-main mt-3 mt-lg-0">
+<div class="news-main container">
+  <div class="row">
+    {{ $pages := first 4 (where .Site.Pages "Params.type" "main") }}
+
+    <!-- index 0 -->
+    <div class="col-lg-6">
+      {{ with index $pages 0 }}
+
+      <div class="border rounded overflow-hidden position-relative h-100">
+        <a href="{{ .Permalink }}">
+          <img src="{{ .Params.image | relURL }}" alt="{{ .Params.title }}" class="img-fluid main-img">
+        </a>
+        <div class="p-3 title-info">
+          {{ range (.GetTerms "categories") }}
+          <a href="{{ .Permalink }}" class="me-2 badge-link">{{ .Params.title }}</a>
+          {{ end }}
+
+          <h2>
+            <a href="{{ .Params.url }}">{{ .Params.title }}</a>
+          </h2>
+
+          <small class="d-block">{{ .Date | time.Format ":date_long" }}</small>
+        </div>
+
+      </div>
+      {{ end }}
+    </div>
+
+    <!-- 右側 -->
+    <div class="col-lg-6">
+      {{ range $index, $page := $pages }}
+      {{ if eq $index 1 }}
+      <!-- index 1 -->
+      <div class="d-flex mt-3 mt-lg-0 mb-3 border rounded overflow-hidden position-relative">
+        <a href="{{ $page.Permalink }}" class="w-100">
+          <img src="{{ $page.Params.image | relURL }}" alt="{{ $page.Params.title }}" class="img-fluid main-img">
+        </a>
+        <div class="p-3 title-info">
+          {{ range ($page.GetTerms "categories") }}
+          <a href="{{ .Permalink }}" class="me-2 badge-link">{{ .LinkTitle }}</a>
+          {{ end }}
+
+          <h2>
+            <a href="{{ $page.Params.url }}">{{ $page.Params.title }}</a>
+          </h2>
+
+          <small class="d-block">{{ $page.Date | time.Format ":date_long" }}</small>
+        </div>
+      </div>
+      {{ end }}
+
+      {{ if eq $index 2 }}
+      <!-- index 2 & 3 -->
+      <div class="row g-3">
+        {{ end }}
+
+        {{ if or (eq $index 2) (eq $index 3) }}
+        <div class="col-sm-6">
+          <div class="border rounded overflow-hidden position-relative h-100">
+            <a href="{{ $page.Permalink }}">
+              <img src="{{ $page.Params.image | relURL }}" alt="{{ $page.Params.title }}" class="img-fluid">
+            </a>
+            <div class="p-3 title-info">
+
+              <h2>
+                <a href="{{ $page.Params.url }}">{{ $page.Params.title }}</a>
+              </h2>
+
+              <small class="td-block">{{ $page.Date | time.Format ":date_long" }}</small>
+            </div>
+          </div>
+        </div>
+        {{ end }}
+
+        {{ if eq $index 3 }}
+      </div>
+
+      {{ end }}
+      {{ end }}
+    </div>
+  </div>
+</div>
+
+<!-- <div class="news-main mt-3 mt-lg-0">
   {{ range first 2 (where .Site.Pages "Params.type" "main") }}
   <div class="col-12 mb-3 d-flex flex-column-reverse flex-lg-column">
     <div>
@@ -17,48 +100,4 @@
     </a>
   </div>
   {{ end }}
-  <!-- {{ range first 1 (where .Site.Pages "Params.type" "main") }}
-  <div>
-    <section class="news-info">
-      {{ range (.GetTerms "categories") }}
-      <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
-      {{ end }}
-      <small>{{ .Date | time.Format ":date_long" }}</small>
-    </section>
-    <h2 class="post-title my-0 my-lg-3">
-      <a href="{{ .Params.url }}">{{ .Params.title }}</a>
-    </h2>
-  </div>
-  <a href="{{ .Permalink }}">
-    <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
-  </a> -->
-
-
-  <!-- <div class="col-12 col-sm-6 col-md-4 col-xl-3">
-      <div class="card h-100">
-        <div class="card-header">
-          <a href="{{ .RelPermalink }}">
-            <h2 class="card-title text-center mb-0">
-              {{ .Title }}
-            </h2>
-          </a>
-        </div>
-        <a href="{{ .RelPermalink }}" class="h-100">
-          <div class="card-body h-100 d-flex flex-column justify-content-center">
-            <section class="d-flex">
-              <h4>電話：</h4>
-              <h4>{{ .Params.phone }}</h4>
-            </section>
-            <section class="d-flex">
-              <h4 class="m-0">地址：</h4>
-              <h4 class="m-0">{{ .Params.address }}</h4>
-            </section>
-            {{ range .Params.tags }}
-              <span class="badge bg-secondary">{{.}}</span>
-              {{ end }}
-          </div>
-        </a>
-      </div>
-    </div> -->
-  <!-- {{ end }} -->
-</div>
+</div> -->

themes/hugo-bootstrap-5/layouts/partials/news-tab.html

@@ -6,7 +6,7 @@
 <div class="d-flex align-items-center position-relative tab-category mt-5 pt-5 pb-3">
   <section class="w-100">
     <h3 class="post-block-title">
-      <span>推薦主題</span>
+      <span>Topics</span>
     </h3>
   </section>