warrenchen/innovedus_cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete subcategory page

Browse Source
This commit is contained in:
Warren Chen 2026-01-27 13:59:34 +09:00
parent f00c77369f
commit 4d17999359
17 changed files with 641 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
innovedus_cms/home/models.py
View File

@ -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

277
innovedus_cms/home/static/css/article_list.css Normal file
View File

@ -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;
}
}

156
innovedus_cms/home/static/css/block_list.css
View File

@ -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;
}
}

163
innovedus_cms/home/static/css/block_list_lower.css Normal file
View File

@ -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;
}
}

8
innovedus_cms/home/static/css/home.css
View File

@ -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;

1
innovedus_cms/home/static/css/horizontal_list.css
View File

@ -69,7 +69,6 @@
display: flex;
flex-direction: column;
gap: 12px;
color: inherit;
text-decoration: none;
}

6
innovedus_cms/home/static/css/news_list.css
View File

@ -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,

19
innovedus_cms/home/templates/home/category_page.html
View File

@ -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 %}

2
innovedus_cms/home/templates/home/hashtag_page.html
View File

@ -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 %}

2
innovedus_cms/home/templates/home/home_page.html
View File

@ -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" %}

81
innovedus_cms/home/templates/home/includes/article_list.html
View File

@ -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>

59
innovedus_cms/home/templates/home/includes/block_list.html
View File

@ -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>

33
innovedus_cms/home/templates/home/includes/block_list_lower.html Normal file
View File

@ -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>

26
innovedus_cms/home/templates/home/includes/news_list.html
View File

@ -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>

38
innovedus_cms/home/templates/home/includes/page-article-list.html
View File

@ -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>

1
innovedus_cms/home/views.py
View File

@ -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,

11
innovedus_cms/mysite/static/css/mysite.css
View File

@ -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;