update

config.toml

@@ -8,4 +8,4 @@ publishDir = "/tmp/news_aimedium_org"
   tag = 'tags'
   category = 'categories'
 [pagination]
-  pagerSize = 10
+  pagerSize = 9

static/css/style.css

@@ -330,11 +330,6 @@ 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;
 }
@@ -481,4 +476,39 @@ body {
   top: 20px;
 }
 
-/* news-featured.html End *//*# sourceMappingURL=style.css.map */
+/* news-featured.html End */
+/* news-video.html Start */
+.news-video .post-block-title span {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+.news-video .post-title a {
+  font-size: 18px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.news-video .news-info a {
+  font-size: 14px;
+}
+
+/* news-video.html End */
+.news-main .left-content {
+  height: 45vh;
+}
+.news-main .right-content {
+  height: 55vh;
+}
+.news-main .bottom-content {
+  height: 35vh;
+}
+@media (max-width: 991px) {
+  .news-main .left-content,
+  .news-main .right-content,
+  .news-main .bottom-content {
+    height: 50vw;
+  }
+}/*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -375,11 +375,11 @@ body {
     object-fit: cover;
   }
 
-  .main-img {
-    @media (max-width: 991px) {
-      height: 50vw;
-    }
-  }
+  // .main-img {
+  //   @media (max-width: 991px) {
+  //     height: 50vw;
+  //   }
+  // }
 
   .news-info {
     a {
@@ -489,7 +489,7 @@ body {
   }
 
   .nav-pills .nav-link.active,
-  .nav-pills .show > .nav-link {
+  .nav-pills .show>.nav-link {
     color: var(--sub-color);
     background-color: var(--main-color);
   }
@@ -596,3 +596,73 @@ body {
 }
 
 /* news-featured.html End */
+
+/* news-video.html Start */
+
+.news-video {
+  .post-block-title {
+    span {
+      display: block;
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  .post-title {
+    a {
+      font-size: 18px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .news-info {
+    a {
+      font-size: 14px;
+    }
+  }
+}
+
+/* news-video.html End */
+
+.news-main {
+  .left-content {
+    height: 45vh;
+  }
+
+  .right-content {
+    height: 55vh;
+  }
+
+  .bottom-content {
+    height: 35vh;
+  }
+
+  .left-content,
+  .right-content,
+  .bottom-content {
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
+  }
+
+  // /* 限制輪播高度 */
+  // .video-swiper {
+  //   height: 650px;
+  //   /* 固定高度，讓 vertical 不會跑版 */
+  //   overflow: hidden;
+
+  //   /* 確保 slide 高度自適應 */
+  //   .swiper-slide {
+  //     height: auto !important;
+
+  //     .cover-img {
+  //       height: auto;
+
+  //     }
+  //   }
+  // }
+}

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

@@ -17,6 +17,9 @@
     integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
 
+  <!-- Swiper CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
   <link href='{{ "css/style.css" | relURL }}' rel="stylesheet">
 
   {{ range .AlternativeOutputFormats -}}
@@ -34,7 +37,7 @@
 
   {{ block "main" . }}
   {{ end }}
-  
+
   {{ end }}
 
   {{ block "footer" . }}
@@ -45,7 +48,10 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"
     integrity="sha512-pax4MlgXjHEPfCwcJLQhigY7+N8rt6bVvWLFyUMuxShv170X53TRzGPmPkZmGBhk+jikR8WBM4yl7A9WMHHqvg=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    
+
+  <!-- Swiper CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
   <script src="/js/main.js"></script>
 </body>
 

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

@@ -3,110 +3,121 @@
 {{ $truncate := default true .Site.Params.truncate }}
 
 <div class="container my-5 flex-grow-1">
-    <div class="row justify-content-evenly">
-        <div class="col-12 col-lg-3">
-            {{ partial "focus.html" . }}
-        </div>
-        <div class="col-12 col-lg-6">
-            {{ partial "news-main.html" . }}
-        </div>
-        <div class="col-12 col-lg-3 mt-5 pt-5 mt-lg-0 pt-lg-0">
-            {{ partial "news-featured.html" . }}
-        </div>
+  <div class="row justify-content-evenly">
+    {{ partial "news-main.html" . }}
+    <!-- <div class="col-12 col-lg-3">
+      {{ partial "focus.html" . }}
+    </div>
+    <div class="col-12 col-lg-6">
+      {{ partial "news-main.html" . }}
     </div>
+    <div class="col-12 col-lg-3 mt-5 pt-5 mt-lg-0 pt-lg-0">
+      {{ partial "news-featured.html" . }}
+    </div> -->
+  </div>
 
-    {{ partial "news-tab.html" . }}
+  {{ 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>
+  </div>
 
-    <div class="row mt-5 pt-5" id="news-block">
-        <div class="col-12 col-lg-9">
-            <h3 class="post-block-title">
-                <span>More News</span>
-            </h3>
+  <!-- <div class="row mt-5 pt-5" id="news-block">
+    <div class="col-12 col-lg-9">
+      <h3 class="post-block-title">
+        <span>More News</span>
+      </h3>
 
-            <div class="row news-all">
-                {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
-                {{ range $index, $element := $paginator.Pages }}
-                {{ if (eq $index 0) }}
+      <div class="row news-all">
+        {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
+        {{ range $index, $element := $paginator.Pages }}
+        {{ if (eq $index 0) }}
 
-                <div class="col-12">
-                    <article>
-                        <a href="{{ .Permalink }}">
-                            <img class="img-fluid first-img" src="{{ .Params.image | relURL }}" alt="" />
-                        </a>
-                        <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>
-                        <p class="post-depiction">
-                            <a href="{{ .Permalink }}">{{ .Summary }}</a>
-                        </p>
-                        <hr>
-                    </article>
-                </div>
+        <div class="col-12">
+          <article>
+            <a href="{{ .Permalink }}">
+              <img class="img-fluid first-img" src="{{ .Params.image | relURL }}" alt="" />
+            </a>
+            <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>
+            <p class="post-depiction">
+              <a href="{{ .Permalink }}">{{ .Summary }}</a>
+            </p>
+            <hr>
+          </article>
+        </div>
 
-                {{ else }}
+        {{ else }}
 
-                <div class="col-12">
-                    <div class="row align-items-center">
-                        <div class="col-12 col-sm-5">
-                            <a href="{{ .Permalink }}">
-                                <img class="img-fluid cover-img" src="{{ .Params.image | relURL }}" alt="" />
-                            </a>
-                        </div>
-                        <div class="col-12 col-sm-7">
-                            <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 }}
-                {{ end }}
+        <div class="col-12">
+          <div class="row align-items-center">
+            <div class="col-12 col-sm-5">
+              <a href="{{ .Permalink }}">
+                <img class="img-fluid cover-img" src="{{ .Params.image | relURL }}" alt="" />
+              </a>
             </div>
-
-            {{ partial "paginator" . }}
-        </div>
-        <div class="col-12 col-lg-3">
-            {{ partial "news-featured.html" . }}
+            <div class="col-12 col-sm-7">
+              <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 }}
+        {{ end }}
+      </div>
+
+      {{ partial "paginator" . }}
+    </div>
+    <div class="col-12 col-lg-3">
+      {{ partial "news-featured.html" . }}
     </div>
+  </div> -->
 </div>
 {{ if .Content }}
 <header>
-    <h1 class="blog-post-title">
-        <a class="text-dark text-decoration-none" href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
-    </h1>
-    <hr>
+  <h1 class="blog-post-title">
+    <a class="text-dark text-decoration-none" href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
+  </h1>
+  <hr>
 </header>
 <section class="blog-post">
-    {{ .Content }}
+  {{ .Content }}
 </section>
 {{ end }}
 
 <!-- {{ $paginator := .Paginate .Pages }}
 {{ range $paginator.Pages }}
 
-    {{ if $truncate }}
-        {{ .Render "summary" }}
-    {{ else }}
-        {{ .Render "content" }}
-    {{ end }}
+{{ if $truncate }}
+{{ .Render "summary" }}
+{{ else }}
+{{ .Render "content" }}
+{{ end }}
 
 {{ end }}
 

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

@@ -2,8 +2,11 @@
   <span>More News</span>
 </h3>
 <div class="row news-all">
-  {{ range $index, $element := (where site.RegularPages "Type" "post") | first 9 }}
+  {{/* 直接取得所有文章並分頁 */}}
+  {{ $allPosts := where site.RegularPages "Type" "post" }}
+  {{ $paginator := .Paginate $allPosts }}
 
+  {{ range $paginator.Pages }}
   <div class="col-12 col-sm-6 col-lg-4 mb-3">
     <div class="row align-items-center">
       <div class="col-12">
@@ -15,7 +18,7 @@
         <article>
           <section class="news-info">
             {{ range (.GetTerms "categories") }}
-            <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+              <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
             {{ end }}
             <small>{{ .Date | time.Format ":date_long" }}</small>
           </section>
@@ -24,9 +27,6 @@
           </h2>
         </article>
       </div>
-      <!-- <span class="line">
-        <hr>
-      </span> -->
     </div>
   </div>
   {{ end }}

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

@@ -1,37 +1,35 @@
 <div class="news-main container">
   <div class="row">
-    {{ $pages := first 4 (where .Site.Pages "Params.type" "main") }}
+    {{ $pages := first 5 (sort .Site.RegularPages "Date" "desc") }}
 
-    <!-- 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">
+    <!-- index 0 & 1 -->
+    <div class="col-lg-5">
+      {{ range $index, $page := first 2 $pages }}
+      <div class="border rounded overflow-hidden position-relative mb-3 left-content">
+        <a href="{{ $page.Permalink }}">
+          <img src="{{ $page.Params.image | relURL }}" alt="{{ $page.Params.title }}" class="img-fluid main-img">
         </a>
         <div class="p-3 title-info">
-          {{ range (.GetTerms "categories") }}
+          {{ range ($page.GetTerms "categories") }}
           <a href="{{ .Permalink }}" class="me-2 badge-link">{{ .Params.title }}</a>
           {{ end }}
 
           <h2>
-            <a href="{{ .Params.url }}">{{ .Params.title }}</a>
+            <a href="{{ $page.Permalink }}">{{ $page.Params.title }}</a>
           </h2>
 
-          <small class="d-block">{{ .Date | time.Format ":date_long" }}</small>
+          <small class="d-block">{{ $page.Date | time.Format ":date_long" }}</small>
         </div>
-
       </div>
       {{ end }}
     </div>
 
     <!-- 右側 -->
-    <div class="col-lg-6">
+    <div class="col-lg-5">
       {{ 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">
+      {{ if eq $index 2 }}
+      <!-- index 2 -->
+      <div class="d-flex mb-3 border rounded overflow-hidden position-relative right-content">
         <a href="{{ $page.Permalink }}" class="w-100">
           <img src="{{ $page.Params.image | relURL }}" alt="{{ $page.Params.title }}" class="img-fluid main-img">
         </a>
@@ -41,7 +39,7 @@
           {{ end }}
 
           <h2>
-            <a href="{{ $page.Params.url }}">{{ $page.Params.title }}</a>
+            <a href="{{ $page.Permalink }}">{{ $page.Params.title }}</a>
           </h2>
 
           <small class="d-block">{{ $page.Date | time.Format ":date_long" }}</small>
@@ -49,35 +47,111 @@
       </div>
       {{ end }}
 
-      {{ if eq $index 2 }}
-      <!-- index 2 & 3 -->
+      {{ if eq $index 3 }}
+      <!-- index 3 & 4 -->
       <div class="row g-3">
         {{ end }}
 
-        {{ if or (eq $index 2) (eq $index 3) }}
+        {{ if or (eq $index 3) (eq $index 4) }}
         <div class="col-sm-6">
-          <div class="border rounded overflow-hidden position-relative h-100">
+          <div class="border rounded overflow-hidden position-relative bottom-content">
             <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>
+                <a href="{{ $page.Permalink }}">{{ $page.Params.title }}</a>
               </h2>
-
               <small class="td-block">{{ $page.Date | time.Format ":date_long" }}</small>
             </div>
           </div>
         </div>
         {{ end }}
 
-        {{ if eq $index 3 }}
+        {{ if eq $index 4 }}
       </div>
-
       {{ end }}
       {{ end }}
     </div>
+
+    <!-- 影片 -->
+    <div class="col-lg-2 d-none d-lg-block">
+      <div class="news-video">
+        <h3 class="post-block-title">
+          <span>Video News</span>
+        </h3>
+        {{ range first 4 (sort (where .Site.RegularPages "Params.type" "video") "Date" "desc") }}
+        <div class="row align-items-center mb-2">
+          <div class="col-12">
+            <a href="{{ .Permalink }}">
+              <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
+            </a>
+
+            <h2 class="mt-2 mb-1 post-title">
+              <a href="{{ .Params.url }}">{{ .Params.title }}</a>
+            </h2>
+
+            <!-- <section class="mt-0 news-info">
+              {{ range (.GetTerms "categories") }}
+              <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+              {{ end }}
+              <br>
+              <small>{{ .Date | time.Format ":date_long" }}</small>
+            </section> -->
+          </div>
+
+          <!-- <div class="col-12 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>
+
+    <!-- 影片輪播 -->
+    <!-- <div class="col-lg-2">
+      <div class="news-video">
+        <h3 class="post-block-title">
+          <span>Video News</span>
+        </h3>
+
+        <div class="swiper video-swiper">
+          <div class="swiper-wrapper">
+            {{ range (where .Site.Pages "Params.type" "video") }}
+            <div class="swiper-slide">
+              <a href="{{ .Permalink }}">
+                <img class="img-fluid cover-img" src="{{ .Params.image | relURL }}" alt="" />
+              </a>
+
+              <h2 class="mt-2 mb-1 post-title">
+                <a href="{{ .Params.url }}">{{ .Params.title }}</a>
+              </h2>
+
+              <section class="mt-0 news-info">
+                {{ range (.GetTerms "categories") }}
+                <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+                {{ end }}
+                <br>
+                <small>{{ .Date | time.Format ":date_long" }}</small>
+              </section>
+            </div>
+            {{ end }}
+          </div>
+
+          <div class="swiper-button-next"></div>
+          <div class="swiper-button-prev"></div>
+        </div>
+      </div>
+    </div> -->
   </div>
 </div>