From 4d17999359a29b96935ae55fedbe68a4d884dd22 Mon Sep 17 00:00:00 2001
From: Warren Chen <warrenchen@innovedus.com>
Date: Tue, 27 Jan 2026 13:59:34 +0900
Subject: [PATCH] Complete subcategory page

---
 innovedus_cms/home/models.py                  |  10 +
 .../home/static/css/article_list.css          | 277 ++++++++++++++++++
 innovedus_cms/home/static/css/block_list.css  | 156 ----------
 .../home/static/css/block_list_lower.css      | 163 +++++++++++
 innovedus_cms/home/static/css/home.css        |   8 +-
 .../home/static/css/horizontal_list.css       |   1 -
 innovedus_cms/home/static/css/news_list.css   |   6 +-
 .../home/templates/home/category_page.html    |  19 +-
 .../home/templates/home/hashtag_page.html     |   2 +-
 .../home/templates/home/home_page.html        |   2 +-
 .../templates/home/includes/article_list.html |  81 +++--
 .../templates/home/includes/block_list.html   |  59 +---
 .../home/includes/block_list_lower.html       |  33 +++
 .../templates/home/includes/news_list.html    |  26 +-
 .../home/includes/page-article-list.html      |  38 ++-
 innovedus_cms/home/views.py                   |   1 +
 innovedus_cms/mysite/static/css/mysite.css    |  11 +
 17 files changed, 641 insertions(+), 252 deletions(-)
 create mode 100644 innovedus_cms/home/static/css/article_list.css
 create mode 100644 innovedus_cms/home/static/css/block_list_lower.css
 create mode 100644 innovedus_cms/home/templates/home/includes/block_list_lower.html

diff --git a/innovedus_cms/home/models.py b/innovedus_cms/home/models.py
index ca613de..d62d0ba 100644
--- a/innovedus_cms/home/models.py
+++ b/innovedus_cms/home/models.py
@@ -22,6 +22,7 @@ NEWS_SIZE = _get_env_int("HOMEPAGE_NEWS_SIZE", 8) # Default to 8 articles in new
 BLOCK_SIZE = _get_env_int("HOMEPAGE_BLOCK_SIZE", 7) # Default to 7 articles in block layout
 HORIZON_SIZE = _get_env_int("HOMEPAGE_HORIZON_SIZE", 4) # Default to 4 articles in horizon layout
 PAGE_SIZE = _get_env_int("HOMEPAGE_PAGE_SIZE", 10) # Default to 10 articles per page for pagination
+CATEGORY_HOT_SIZE = _get_env_int("CATEGORY_HOT_SIZE", 6) # Default to 4 articles in category hot layout
 
 # Mixin for Category-related functionality
 class CategoryMixin:
@@ -64,6 +65,7 @@ class CategoryMixin:
                     "title": self.title,
                     "items": page_obj,
                     "url": self.url,
+                    "page_range": paginator.get_elided_page_range(page_obj.number),
                 }
             )
         return blocks
@@ -108,6 +110,7 @@ class CategoryMixin:
                 "title": self.title,
                 "items": page_obj,
                 "url": self.url,
+                "page_range": paginator.get_elided_page_range(page_obj.number),
             }
 
     def get_trending_articles(self, request=None, exclude_ids=None):
@@ -142,6 +145,7 @@ class CategoryMixin:
                 "title": self.title,
                 "items": page_obj,
                 "url": self.url,
+                "page_range": paginator.get_elided_page_range(page_obj.number),
             }
 
 
@@ -224,6 +228,12 @@ class CategoryPage(Page, CategoryMixin):
     def get_context(self, request):
         context = super().get_context(request)
         context["category_sections"] = self.build_category_blocks(request)
+        context["category_trending"] = (
+            ArticlePage.objects.descendant_of(self)
+            .live()
+            .filter(trending=True)
+            .order_by("-date", "-id")[:CATEGORY_HOT_SIZE]
+        )
         # breadcrumbs, site_root = self.build_breadcrumbs()
         # context["breadcrumbs"] = breadcrumbs
         # context["breadcrumb_root"] = site_root
diff --git a/innovedus_cms/home/static/css/article_list.css b/innovedus_cms/home/static/css/article_list.css
new file mode 100644
index 0000000..88b9ff1
--- /dev/null
+++ b/innovedus_cms/home/static/css/article_list.css
@@ -0,0 +1,277 @@
+.page-article-list{
+  padding-bottom: 40px;
+}
+
+.first-article {
+  display: grid;
+  grid-template-columns: 410px 1fr;
+  grid-template-areas:
+    "image content";
+  gap: 16px 40px;
+  align-items: start;
+  padding: 40px 0;
+}
+
+.first-article .first-article-image {
+  grid-area: image;
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  width: 410px;
+}
+
+.first-article .first-article-image img{
+  display: block;
+  width: 410px;
+  height: 293px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.first-article .first-article-content {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 293px;
+  overflow: hidden;
+  position: relative;
+}
+
+.first-article .first-article-title {
+  font-size: 40px;
+  font-weight: 400;
+  color: #f4a41c;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  flex: 0 0 auto;
+}
+
+.first-article .first-article-date {
+  color: #ffffff66;
+  flex: 0 0 auto;
+}
+
+.first-article .first-article-intro {
+  font-size: 20px;
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.first-article .first-article-body {
+  flex: 1 2 auto;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.first-article .first-article-content::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100px;
+  background: linear-gradient(to bottom, rgba(14, 27, 66, 0), #0e1b42);
+  pointer-events: none;
+}
+
+.article-list-lower {
+  margin: 40px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.article-list-item {
+  display: grid;
+  grid-template-columns: 410px 1fr;
+  grid-template-areas:
+    "image content";
+  gap: 16px 40px;
+  align-items: start;
+}
+
+.article-thumb {
+  grid-area: image;
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  width: 410px;
+}
+
+.article-thumb img{
+  display: block;
+  width: 410px;
+  height: 218px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.article-content {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.article-title {
+  font-size: 40px;
+  font-weight: 400;
+  color: #0e1b42;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.article-date {
+  color: #0e1b4266;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* vertical-align: middle; */
+  gap: 16px;
+  height: 44px;
+}
+
+.pagination a {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+}
+
+.pagination .prev-page span,
+.pagination .next-page span {
+  height: 44px;
+  line-height: 44px;
+}
+
+.pagination .left-arrow, 
+.pagination .right-arrow {
+  background: none;
+  width: 44px;
+  height: 44px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.pagination .left-arrow .left-arrow-icon,
+.pagination .right-arrow .right-arrow-icon {
+  width: 16px;
+  height: 32px;
+}
+
+.pagination .right-arrow .right-arrow-icon {
+  transform: rotate(180deg);
+}
+
+.pagination-pages {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.pagination-pages a,
+.pagination-current,
+.pagination-ellipsis {
+  color: #0e1b42;
+  line-height: 44px;
+}
+
+.pagination-current {
+  font-weight: 700;
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .first-article {
+    grid-template-columns: 318px 1fr;
+  } 
+
+  .first-article .first-article-image {
+    width: 318px;
+  }   
+
+  .first-article .first-article-image img{
+    width: 318px;
+    height: 290px;
+  }
+
+  .article-list-item {
+    grid-template-columns: 318px 1fr;
+  }
+
+  .article-thumb {
+    width: 318px;
+  }
+
+  .article-thumb img{
+    width: 318px;
+  }
+}
+
+@media (max-width: 767px) {
+  .first-article {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "image"
+      "content";
+  }
+
+  .article-list-item {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "image"
+      "content";
+  }
+}
+
+@media (min-width: 575px) and (max-width: 767px) {
+  .first-article .first-article-image {
+    width: 426px;
+  }   
+
+  .first-article .first-article-image img{
+    width: 426px;
+    height: 260px;
+  }
+
+  .article-thumb {
+    width: 426px;
+  }
+
+  .article-thumb img{
+    width: 426px;
+    height: 260px;
+  }
+}
+
+@media (max-width: 574px) {
+  .first-article .first-article-image {
+    width: 300px;
+  }   
+
+  .first-article .first-article-image img{
+    width: 300px;
+    height: 218px;
+  }
+
+  .article-thumb {
+    width: 300px;
+  }
+
+  .article-thumb img{
+    width: 300px;
+    height: 218px;
+  }
+}
diff --git a/innovedus_cms/home/static/css/block_list.css b/innovedus_cms/home/static/css/block_list.css
index c1f2a64..79efa72 100644
--- a/innovedus_cms/home/static/css/block_list.css
+++ b/innovedus_cms/home/static/css/block_list.css
@@ -79,98 +79,6 @@
   pointer-events: none;
 }
 
-.block-list-lower {
-  margin: 24px 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  gap: 28px;
-}
-
-.block-list-items {
-  display: contents;
-}
-
-.block-list-items a {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 200px;
-  text-decoration: none;
-}
-
-.block-list-thumb {
-  position: relative;
-  width: 194px;
-  height: 133px;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.block-list-thumb img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.block-list-items a span{
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.block-list-items .article-title {
-  font-size: 20px;
-}
-
-.block-list-items .article-date {
-  color: #0e1b4266;
-}
-
-.block-list-more-article {
-  max-width: 430px;
-  min-width: 200px;
-  flex: 1 1 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  margin-left: auto;
-  text-align: center;
-}
-
-.block-list-more-article a {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: center;
-}
-
-.block-list-more-article span {
-  font-size: 18px;
-  font-weight: 700;
-  color: #0e1b42;
-  text-decoration: underline;
-}
-
-.block-list-more-article .right-arrow {
-  background: none;
-  width: 52px;
-  height: 52px;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  box-shadow: #0e1b4266 1px 2px 1px 1px;
-}
-
-.block-list-more-article .right-arrow .right-arrow-icon {
-  width: 16px;
-  height: 32px;
-  transform: rotate(180deg);
-}
-
 @media (min-width: 768px) and (max-width: 1023px) {
   .block-first-article {
     grid-template-columns: 318px 1fr;
@@ -188,15 +96,6 @@
   .block-first-article .first-article-title {
     font-size: 36px;
   }  
-
-  .block-list-lower {
-    gap: 20px;
-  }
-
-  .block-list-more-article {
-    max-width: 200px;
-    flex: 1 1 200px;
-  }
 }
 
 @media (max-width: 767px) {
@@ -222,27 +121,6 @@
     font-size: 36px;
   }
 
-  .block-list-items a {
-    display: grid;
-    grid-template-columns: 194px 1fr;
-    column-gap: 16px;
-    row-gap: 8px;
-    width: 100%;
-  }
-
-  .block-list-items a > div:nth-of-type(1) {
-    grid-row: 1 / span 2;
-  }
-
-  .block-list-items a > div:nth-of-type(2),
-  .block-list-items a > div:nth-of-type(3) {
-    grid-column: 2;
-    min-width: 0;
-  }
-
-  .block-list-more-article {
-    max-width: 100%;
-  }
 }
 
 @media (max-width: 574px) {
@@ -263,38 +141,4 @@
     font-size: 16px;
   }
 
-  .block-list-lower {
-    gap: 16px;
-  }
-
-  .block-list-items a {
-    width: 142px;
-  }
-
-  .block-list-thumb {
-    width: 139px;
-    height: 110px;
-  }
-
-  .block-list-items .article-title {
-    font-size: 16px;
-  }
-
-  .block-list-items .article-date {
-    font-size: 12px;
-  }
-
-  .block-list-more-article span {
-    font-size: 16px;
-  }
-
-  .block-list-more-article .right-arrow {
-    width: 40px;
-    height: 40px;
-  }
-
-  .block-list-more-article .right-arrow .right-arrow-icon {
-    width: 12px;
-    height: 24px;
-  }
 }
diff --git a/innovedus_cms/home/static/css/block_list_lower.css b/innovedus_cms/home/static/css/block_list_lower.css
new file mode 100644
index 0000000..1b7ef44
--- /dev/null
+++ b/innovedus_cms/home/static/css/block_list_lower.css
@@ -0,0 +1,163 @@
+.block-list-lower {
+  margin: 24px 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 28px;
+}
+
+.block-list-items {
+  display: contents;
+}
+
+.block-list-items a {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 200px;
+  text-decoration: none;
+}
+
+.block-list-thumb {
+  position: relative;
+  width: 194px;
+  height: 133px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.block-list-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.block-list-items a span {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.block-list-items .article-title {
+  font-size: 20px;
+}
+
+.block-list-items .article-date {
+  color: #0e1b4266;
+}
+
+.block-list-more-article {
+  max-width: 430px;
+  min-width: 200px;
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  margin-left: auto;
+  text-align: center;
+}
+
+.block-list-more-article a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: center;
+}
+
+.block-list-more-article span {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0e1b42;
+  text-decoration: underline;
+}
+
+.block-list-more-article .right-arrow {
+  background: none;
+  width: 52px;
+  height: 52px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  box-shadow: #0e1b4266 1px 2px 1px 1px;
+}
+
+.block-list-more-article .right-arrow .right-arrow-icon {
+  width: 16px;
+  height: 32px;
+  transform: rotate(180deg);
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .block-list-lower {
+    gap: 20px;
+  }
+
+  .block-list-more-article {
+    max-width: 200px;
+    flex: 1 1 200px;
+  }
+}
+
+@media (min-width: 575px) and (max-width: 767px) {
+  .block-list-items a {
+    display: grid;
+    grid-template-columns: 194px 1fr;
+    column-gap: 16px;
+    row-gap: 8px;
+    width: 100%;
+  }
+
+  .block-list-items a > div:nth-of-type(1) {
+    grid-row: 1 / span 2;
+  }
+
+  .block-list-items a > div:nth-of-type(2),
+  .block-list-items a > div:nth-of-type(3) {
+    grid-column: 2;
+    min-width: 0;
+  }
+
+  .block-list-more-article {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 574px) {
+  .block-list-lower {
+    gap: 16px;
+  }
+
+  .block-list-items a {
+    width: 142px;
+  }
+
+  .block-list-thumb {
+    width: 139px;
+    height: 110px;
+  }
+
+  .block-list-items .article-title {
+    font-size: 16px;
+  }
+
+  .block-list-items .article-date {
+    font-size: 12px;
+  }
+
+  .block-list-more-article span {
+    font-size: 16px;
+  }
+
+  .block-list-more-article .right-arrow {
+    width: 40px;
+    height: 40px;
+  }
+
+  .block-list-more-article .right-arrow .right-arrow-icon {
+    width: 12px;
+    height: 24px;
+  }
+}
diff --git a/innovedus_cms/home/static/css/home.css b/innovedus_cms/home/static/css/home.css
index a982be3..5bf151b 100644
--- a/innovedus_cms/home/static/css/home.css
+++ b/innovedus_cms/home/static/css/home.css
@@ -1,13 +1,7 @@
-.home-hero-band {
-  background-color: #0e1b42;
-  color: #ffffff;
+.home-hero {
   padding-bottom: 86px;
 }
 
-.home-hero-band a {
-  color: #ffffff;
-}
-
 .home-banner img {
   width: 100%;
   height: auto;
diff --git a/innovedus_cms/home/static/css/horizontal_list.css b/innovedus_cms/home/static/css/horizontal_list.css
index 27cff22..38db4cf 100644
--- a/innovedus_cms/home/static/css/horizontal_list.css
+++ b/innovedus_cms/home/static/css/horizontal_list.css
@@ -69,7 +69,6 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  color: inherit;
   text-decoration: none;
 }
 
diff --git a/innovedus_cms/home/static/css/news_list.css b/innovedus_cms/home/static/css/news_list.css
index eeab0a1..c45fb41 100644
--- a/innovedus_cms/home/static/css/news_list.css
+++ b/innovedus_cms/home/static/css/news_list.css
@@ -1,8 +1,8 @@
-.news-title, .more-news-title {
+/* .news-title, .more-news-title {
   background-color: #ffffff;
   color: #0e1b42;
 }
-
+ */
 .news-hero {
   display: grid;
   grid-template-columns: 480px 1fr;
@@ -73,7 +73,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  max-height: 293px;
+  max-height: 293px;  
 }
 
 .news-hero .fist-news-date,
diff --git a/innovedus_cms/home/templates/home/category_page.html b/innovedus_cms/home/templates/home/category_page.html
index aa1361b..cb35545 100644
--- a/innovedus_cms/home/templates/home/category_page.html
+++ b/innovedus_cms/home/templates/home/category_page.html
@@ -3,6 +3,7 @@
 {% block extra_css %}
   <link rel="stylesheet" type="text/css" href="{% static 'css/category.css' %}">
 {% endblock %}
+{% block body_class %}{% if not page.has_subcategories %}template-darkbackground{% endif %}{% endblock %}
 {% block content %}
   {# Breadcrumbs navigation may not used anymore #}
   {% if breadcrumbs %}
@@ -25,13 +26,27 @@
       </ol>
     </nav>
   {% endif %}
-  <div class="block-title category-title"><span>{{ self.title}}</span></div>
+  <div class="site-hero-band full-bleed">
+    <div class="site-container">
+      <div class="block-title category-title"><span>{{ self.title}}</span></div>
+    </div>
+  </div>
   {% if page.has_subcategories %}
       {% for section in category_sections %}
-      <div class="subcategory-title"><span>{{ section.title }}</span></div>
+        <div class="subcategory-title">
+          <a href="{{ section.url }}">
+            <span>{{ section.title }}</span>
+          </a>
+        </div>
         {% include "home/includes/block_list.html" with items=section.items %}
       {% endfor %}
   {% else %}
     {% include "home/includes/page-article-list.html" with category=category_sections.0 %}
+    {% if category_trending %}
+        <div class="subcategory-title">
+          <span>熱門文章</span>
+        </div>
+        {% include "home/includes/block_list_lower.html" with items=category_trending %}
+    {% endif %}
   {% endif %}
 {% endblock %}
diff --git a/innovedus_cms/home/templates/home/hashtag_page.html b/innovedus_cms/home/templates/home/hashtag_page.html
index 287f677..6269d93 100644
--- a/innovedus_cms/home/templates/home/hashtag_page.html
+++ b/innovedus_cms/home/templates/home/hashtag_page.html
@@ -15,5 +15,5 @@
     </ol>
   </nav>
 
-  {% include "home/includes/page-article-list.html" %}
+  {% include "home/includes/page-article-list.html" with category=category_sections.0 %}
 {% endblock %}
diff --git a/innovedus_cms/home/templates/home/home_page.html b/innovedus_cms/home/templates/home/home_page.html
index 81dc3a1..76f64b5 100644
--- a/innovedus_cms/home/templates/home/home_page.html
+++ b/innovedus_cms/home/templates/home/home_page.html
@@ -8,7 +8,7 @@
   <link rel="stylesheet" type="text/css" href="{% static 'css/horizontal_list.css' %}">
 {% endblock %}
 {% block content %}
-  <div class="home-hero-band full-bleed">
+  <div class="site-hero-band full-bleed">
     <div class="site-container">
       <div class="home-hero">
         {% include "base/includes/home_banner.html" %}
diff --git a/innovedus_cms/home/templates/home/includes/article_list.html b/innovedus_cms/home/templates/home/includes/article_list.html
index 05b5675..f3ee6e0 100644
--- a/innovedus_cms/home/templates/home/includes/article_list.html
+++ b/innovedus_cms/home/templates/home/includes/article_list.html
@@ -1,21 +1,64 @@
 {% load wagtailimages_tags static %}
 
-<ul class="article-list">
-  {% for article in items %}
-    <li>
-      <article>
-        <a href="{{ article.url }}">
-          {% if article.cover_image %}
-            {% image article.cover_image max-200x200 as cover %}
-            <img src="{{ cover.url }}" alt="{{ article.title }}" height="200" width="200" style="width:200px;height:200px;object-fit:contain;display:block;"/>
-          {% else %}
-            <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}" height="200" width="200" style="width:200px;height:200px;object-fit:contain;display:block;"/>
-          {% endif %}
-          {{ article.title }}
-        </a>
-      </article>
-    </li>
-  {% empty %}
-    <li class="empty">目前沒有文章</li>
-  {% endfor %}
-</ul>
+<div class="site-hero-band full-bleed">
+  <div class="site-container">
+    {% with first_article=items|first %}
+      {% if first_article %}
+        <div class="first-article">
+          <div class="first-article-image">
+            <a href="{{ first_article.url }}">
+              {% if first_article.cover_image %}
+                {% image first_article.cover_image max-410x293 as cover %}
+                <img src="{{ cover.url }}" alt="{{ first_article.title }}"/>
+              {% else %}
+                <img src="{% static 'img/default_cover.jpg' %}" alt="{{ first_article.title }}"/>
+              {% endif %}
+            </a>
+          </div>
+          <div class="first-article-content">
+            <a href="{{ first_article.url }}">
+              <div class="first-article-title">
+                <span>{{ first_article.title }}</span>
+              </div>
+              <div class="first-article-date">
+                <span>{{ first_article.date|date:"Y.m.d" }}</span>
+              </div>
+              {% if first_article.intro %}
+                <div class="first-article-intro">
+                  <span>{{ first_article.intro }}</span>
+                </div>
+              {% endif %}
+              <div class="first-article-body">
+                <span>{{ first_article.body_search_text|truncatechars:200 }}</span>
+              </div>
+            </a>
+          </div>
+        </div>
+      {% else %}
+        <span class="empty">目前沒有文章</span>
+      {% endif %}
+    {% endwith %}
+  </div>
+</div>
+<div class="article-list-lower">
+  {% if items|length >= 2 %}
+    {% for article in items|slice:"1:" %}
+      <a href="{{ article.url }}">
+        <div class="article-list-item">
+          <div class="article-thumb">
+            {% if article.cover_image %}
+              {% image article.cover_image max-410x218 as cover %}
+              <img src="{{ cover.url }}" alt="{{ article.title }}"/>
+            {% else %}
+              <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}"/>
+            {% endif %}
+          </div>
+          <div class="article-content">
+            <div><span class="article-title">{{ article.title }}</span></div>
+            <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
+          </div>
+        </div>
+      </a>
+    {% endfor %}
+  {% endif %}
+</div>
\ No newline at end of file
diff --git a/innovedus_cms/home/templates/home/includes/block_list.html b/innovedus_cms/home/templates/home/includes/block_list.html
index 7c13c04..92d7080 100644
--- a/innovedus_cms/home/templates/home/includes/block_list.html
+++ b/innovedus_cms/home/templates/home/includes/block_list.html
@@ -18,20 +18,22 @@
           </a>
         </div>
         <div class="first-article-content">
-          <div class="first-article-title">
-            <span>{{ first_article.title }}</span>
-          </div>
-          <div class="first-article-date">
-            <span>{{ first_article.date|date:"Y.m.d" }}</span>
-          </div>
-          {% if first_article.intro %}
-            <div class="first-article-intro">
-              <span>{{ first_article.intro }}</span>
+          <a href="{{ first_article.url }}">
+            <div class="first-article-title">
+              <span>{{ first_article.title }}</span>
             </div>
-          {% endif %}
-          <div class="first-article-body">
-            <span>{{ first_article.body_search_text|truncatechars:200 }}</span>
-          </div>
+            <div class="first-article-date">
+              <span>{{ first_article.date|date:"Y.m.d" }}</span>
+            </div>
+            {% if first_article.intro %}
+              <div class="first-article-intro">
+                <span>{{ first_article.intro }}</span>
+              </div>
+            {% endif %}
+            <div class="first-article-body">
+              <span>{{ first_article.body_search_text|truncatechars:200 }}</span>
+            </div>
+          </a>
         </div>
       </div>
     {% else %}
@@ -40,35 +42,6 @@
   {% endwith %}
 
   {% if items|length >= 2 %}
-    <!-- <div class="list-title">
-      <span class="more-link"><a href="{{ items.0.get_parent.url }}">查看全部</a></span> -->
-    <div class="block-list-lower">
-      <div class="block-list-items">
-        {% for article in items|slice:"1:7" %}
-          <a href="{{ article.url }}">
-            <div class="block-list-thumb">
-              {% if article.cover_image %}
-                {% image article.cover_image max-194x133 as cover %}
-                <img src="{{ cover.url }}" alt="{{ article.title }}"/>
-              {% else %}
-                <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}"/>
-              {% endif %}
-            </div>
-            <div><span class="article-title">{{ article.title }}</span></div>
-            <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
-          </a>
-        {% endfor %}
-      </div>
-      <div class="block-list-more-article">
-        <a href="{{ items.0.get_parent.url }}">
-          <span>更多文章</span>
-            <button class="right-arrow" type="button" data-dir="right" aria-label="更多文章">
-              <svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
-                <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
-              </svg>
-            </button>
-        </a>
-      </div>
-    </div>
+    {% include "home/includes/block_list_lower.html" with items=items|slice:"1:7" %}
   {% endif %}
 </div>
diff --git a/innovedus_cms/home/templates/home/includes/block_list_lower.html b/innovedus_cms/home/templates/home/includes/block_list_lower.html
new file mode 100644
index 0000000..5435a84
--- /dev/null
+++ b/innovedus_cms/home/templates/home/includes/block_list_lower.html
@@ -0,0 +1,33 @@
+{% load wagtailimages_tags static %}
+{% block extra_css %}
+  <link rel="stylesheet" type="text/css" href="{% static 'css/block_list_lower.css' %}">
+{% endblock %}
+
+<div class="block-list-lower">
+  <div class="block-list-items">
+    {% for article in items %}
+      <a href="{{ article.url }}">
+        <div class="block-list-thumb">
+          {% if article.cover_image %}
+            {% image article.cover_image max-194x133 as cover %}
+            <img src="{{ cover.url }}" alt="{{ article.title }}"/>
+          {% else %}
+            <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}"/>
+          {% endif %}
+        </div>
+        <div><span class="article-title">{{ article.title }}</span></div>
+        <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
+      </a>
+    {% endfor %}
+  </div>
+  <div class="block-list-more-article">
+    <a href="{{ items.0.get_parent.url }}">
+      <span>更多文章</span>
+        <button class="right-arrow" type="button" data-dir="right" aria-label="更多文章">
+          <svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
+            <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
+          </svg>
+        </button>
+    </a>
+  </div>
+</div>
diff --git a/innovedus_cms/home/templates/home/includes/news_list.html b/innovedus_cms/home/templates/home/includes/news_list.html
index 428888d..132e1d4 100644
--- a/innovedus_cms/home/templates/home/includes/news_list.html
+++ b/innovedus_cms/home/templates/home/includes/news_list.html
@@ -15,7 +15,9 @@
         {% with first_article=section.items|first %}
           {% if first_article %}
             <div class="fist-news-title">
-              <span>{{ first_article.title }}</span>
+              <a href="{{ first_article.url }}">
+                <span>{{ first_article.title }}</span>
+              </a>
             </div>
           {% endif %}
         {% endwith %}
@@ -33,17 +35,19 @@
             </a>
           </div>
           <div class="first-news-content">
-            <div class="fist-news-date">
-              <span>{{ first_article.date|date:"Y.m.d" }}</span>
-            </div>
-            {% if first_article.intro %}
-              <div class="first-news-intro">
-                <span>{{ first_article.intro }}</span>
+            <a href="{{ first_article.url }}">
+              <div class="fist-news-date">
+                <span>{{ first_article.date|date:"Y.m.d" }}</span>
               </div>
-            {% endif %}
-            <div class="first-news-body">
-              <span>{{ first_article.body_search_text|truncatechars:320 }}</span>
-            </div>
+              {% if first_article.intro %}
+                <div class="first-news-intro">
+                  <span>{{ first_article.intro }}</span>
+                </div>
+              {% endif %}
+              <div class="first-news-body">
+                <span>{{ first_article.body_search_text|truncatechars:320 }}</span>
+              </div>
+            </a>
           </div>
         {% else %}
           <span class="empty">目前沒有文章</span>
diff --git a/innovedus_cms/home/templates/home/includes/page-article-list.html b/innovedus_cms/home/templates/home/includes/page-article-list.html
index 702f8b5..0c94744 100644
--- a/innovedus_cms/home/templates/home/includes/page-article-list.html
+++ b/innovedus_cms/home/templates/home/includes/page-article-list.html
@@ -1,22 +1,44 @@
 {% load wagtailimages_tags static %}
+{% block extra_css %}
+  <link rel="stylesheet" type="text/css" href="{% static 'css/article_list.css' %}">
+{% endblock %}
 
 <div class="page-article-list">
-  {% with category=category_sections.0 %}
-  <h2><a href="{{ category.url }}">{{ category.title }}</a></h2>
-
   {% include "home/includes/article_list.html" with items=category.items %}
 
   {% if category.items.paginator.num_pages > 1 %}
     <div class="pagination">
       {% if category.items.has_previous %}
-        <a href="?page={{ category.items.previous_page_number }}">上一頁</a>
+        <a class="prev-page" href="?page={{ category.items.previous_page_number }}">
+          <button class="left-arrow" type="button" data-dir="left" aria-label="更多文章">
+            <svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
+              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
+            </svg>
+          </button>
+          <span>BACK</span>
+        </a>
       {% endif %}
-      <span>第 {{ category.items.number }} / {{ category.items.paginator.num_pages }} 頁</span>
+      <div class="pagination-pages">
+        {% for page_num in category.page_range %}
+          {% if page_num == category.items.number %}
+            <span class="pagination-current">{{ page_num }}</span>
+          {% elif page_num == "…" %}
+            <span class="pagination-ellipsis">{{ page_num }}</span>
+          {% else %}
+            <a href="?page={{ page_num }}">{{ page_num }}</a>
+          {% endif %}
+        {% endfor %}
+      </div>
       {% if category.items.has_next %}
-        <a href="?page={{ category.items.next_page_number }}">下一頁</a>
+        <a class="next-page" href="?page={{ category.items.next_page_number }}">
+          <span>NEXT</span>
+          <button class="right-arrow" type="button" data-dir="right" aria-label="更多文章">
+            <svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
+              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
+            </svg>
+          </button>
+        </a>
       {% endif %}
     </div>
   {% endif %}
-
-  {% endwith %}
 </div>
diff --git a/innovedus_cms/home/views.py b/innovedus_cms/home/views.py
index 1dbfe37..81e966d 100644
--- a/innovedus_cms/home/views.py
+++ b/innovedus_cms/home/views.py
@@ -35,6 +35,7 @@ def hashtag_search(request, slug):
                 "title": f"#{tag.name}",
                 "items": page_obj,
                 "url": request.path,
+                "page_range": paginator.get_elided_page_range(page_obj.number),
             }
         ],
         "site_root": site_root,
diff --git a/innovedus_cms/mysite/static/css/mysite.css b/innovedus_cms/mysite/static/css/mysite.css
index a31a8a5..a307997 100644
--- a/innovedus_cms/mysite/static/css/mysite.css
+++ b/innovedus_cms/mysite/static/css/mysite.css
@@ -1,5 +1,6 @@
 a { 
   text-decoration: none; 
+  color: inherit;
 }
 
 .site-container {
@@ -13,6 +14,16 @@ a {
   margin-left: calc(50% - 50vw);
 }
 
+.template-darkbackground .site-hero-band {
+  background-color: #0e1b42;
+  color: #ffffff;
+}
+
+.template-darkbackground .site-hero-band .block-title {
+  background-color: #ffffff;
+  color: #0e1b42;
+}
+
 .site-header {
   position: relative;
   z-index: 10;