feat: Refactor article and news templates for improved layout and styling
This commit is contained in:
Warren Chen
parent
5048f865f2
commit
ccb675f4bc
@ -204,9 +204,9 @@ class LatestPage(Page, CategoryMixin, BreadcrumbMixin):
|
||||
def get_context(self, request):
|
||||
context = super().get_context(request)
|
||||
context["category_sections"] = [self.get_latest_articles(request)]
|
||||
breadcrumbs, site_root = self.build_breadcrumbs()
|
||||
context["breadcrumbs"] = breadcrumbs
|
||||
context["breadcrumb_root"] = site_root
|
||||
# breadcrumbs, site_root = self.build_breadcrumbs()
|
||||
# context["breadcrumbs"] = breadcrumbs
|
||||
# context["breadcrumb_root"] = site_root
|
||||
return context
|
||||
|
||||
|
||||
@ -216,9 +216,9 @@ class TrendingPage(Page, CategoryMixin, BreadcrumbMixin):
|
||||
def get_context(self, request):
|
||||
context = super().get_context(request)
|
||||
context["category_sections"] = [self.get_trending_articles(request)]
|
||||
breadcrumbs, site_root = self.build_breadcrumbs()
|
||||
context["breadcrumbs"] = breadcrumbs
|
||||
context["breadcrumb_root"] = site_root
|
||||
# breadcrumbs, site_root = self.build_breadcrumbs()
|
||||
# context["breadcrumbs"] = breadcrumbs
|
||||
# context["breadcrumb_root"] = site_root
|
||||
return context
|
||||
|
||||
|
||||
@ -311,8 +311,8 @@ class ArticlePage(Page, BreadcrumbMixin):
|
||||
context = super().get_context(request)
|
||||
|
||||
breadcrumbs, site_root = self.build_breadcrumbs()
|
||||
context["breadcrumbs"] = breadcrumbs
|
||||
context["breadcrumb_root"] = site_root
|
||||
# context["breadcrumbs"] = breadcrumbs
|
||||
# context["breadcrumb_root"] = site_root
|
||||
category_crumbs = [
|
||||
crumb
|
||||
for crumb in breadcrumbs
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.page-article-list{
|
||||
/* .page-article-list{
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
} */
|
||||
|
||||
.first-article {
|
||||
display: grid;
|
||||
@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
.first-article .first-article-title {
|
||||
font-size: 40px;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
color: #f4a41c;
|
||||
margin: 0;
|
||||
@ -123,7 +123,7 @@
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 40px;
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
@ -199,6 +199,10 @@
|
||||
grid-template-columns: 318px 1fr;
|
||||
}
|
||||
|
||||
.first-article .first-article-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.first-article .first-article-image {
|
||||
width: 318px;
|
||||
}
|
||||
@ -208,6 +212,14 @@
|
||||
height: 290px;
|
||||
}
|
||||
|
||||
.first-article .first-article-intro {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.first-article .first-article-body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.article-list-item {
|
||||
grid-template-columns: 318px 1fr;
|
||||
}
|
||||
@ -219,6 +231,10 @@
|
||||
.article-thumb img{
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@ -235,10 +251,18 @@
|
||||
"image"
|
||||
"content";
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 575px) and (max-width: 767px) {
|
||||
.first-article .first-article-image {
|
||||
.first-article .first-article-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.first-article .first-article-image {
|
||||
width: 426px;
|
||||
}
|
||||
|
||||
@ -247,6 +271,14 @@
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.first-article .first-article-intro {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.first-article .first-article-body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.article-thumb {
|
||||
width: 426px;
|
||||
}
|
||||
@ -258,6 +290,10 @@
|
||||
}
|
||||
|
||||
@media (max-width: 574px) {
|
||||
.first-article .first-article-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.first-article .first-article-image {
|
||||
width: 300px;
|
||||
}
|
||||
@ -267,6 +303,18 @@
|
||||
height: 218px;
|
||||
}
|
||||
|
||||
.first-article .first-article-date {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.first-article .first-article-intro {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.first-article .first-article-body {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.article-thumb {
|
||||
width: 300px;
|
||||
}
|
||||
@ -275,4 +323,8 @@
|
||||
width: 300px;
|
||||
height: 218px;
|
||||
}
|
||||
|
||||
.article-date {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,6 +58,7 @@
|
||||
|
||||
.article-content p {
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.article-content .intro {
|
||||
@ -319,6 +320,10 @@
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
}
|
||||
@ -337,6 +342,10 @@
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.article-content .intro {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"image content";
|
||||
gap: 16px 40px;
|
||||
align-items: start;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-image {
|
||||
@ -41,9 +42,10 @@
|
||||
}
|
||||
|
||||
.block-first-article .first-article-title {
|
||||
font-size: 40px;
|
||||
font-size: 36px;
|
||||
line-height: 1.25;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
color: #0e1b42;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
@ -97,7 +99,15 @@
|
||||
}
|
||||
|
||||
.block-first-article .first-article-title {
|
||||
font-size: 36px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-intro {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-body {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,9 +131,20 @@
|
||||
}
|
||||
|
||||
.block-first-article .first-article-title {
|
||||
font-size: 36px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-intro {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-body {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 574px) {
|
||||
@ -137,10 +158,18 @@
|
||||
}
|
||||
|
||||
.block-first-article .first-article-title {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-date {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-intro {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.block-first-article .first-article-body {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,6 +42,7 @@
|
||||
|
||||
.block-list-items .article-title {
|
||||
font-size: 20px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.block-list-items .article-date {
|
||||
@ -58,6 +59,7 @@
|
||||
align-self: stretch;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.block-list-more-article a {
|
||||
@ -119,6 +121,10 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.block-list-items .article-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.block-list-more-article {
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -143,7 +149,7 @@
|
||||
}
|
||||
|
||||
.block-list-items .article-date {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.block-list-more-article span {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
.list-title {
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.block-title-divider {
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-b .horizontal-list-thumb::after {
|
||||
/* .section-b .horizontal-list-thumb::after {
|
||||
background: url("../img/picfrm_b194.png") no-repeat left bottom / cover;
|
||||
background-size: 194px 25px;
|
||||
}
|
||||
@ -98,7 +98,7 @@
|
||||
.section-o .horizontal-list-thumb::after {
|
||||
background: url("../img/picfrm_o194.png") no-repeat left bottom / cover;
|
||||
background-size: 194px 25px;
|
||||
}
|
||||
} */
|
||||
|
||||
.horizontal-list li img {
|
||||
display: block;
|
||||
@ -124,6 +124,7 @@
|
||||
}
|
||||
|
||||
.horizontal-list .article-intro {
|
||||
min-height: 45px;
|
||||
}
|
||||
|
||||
.horizontal-list .article-date {
|
||||
|
||||
@ -3,14 +3,16 @@
|
||||
grid-template-columns: 480px 1fr;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"head head"
|
||||
"image content";
|
||||
padding: 40px 0;
|
||||
gap: 16px 40px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.news-hero .news-hero-header {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
/* display: flex; */
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
@ -24,13 +26,13 @@
|
||||
|
||||
.news-hero .fist-news-title {
|
||||
grid-area: head;
|
||||
max-width: 580px;
|
||||
font-size: 40px;
|
||||
/* max-width: 580px; */
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
color: #eb9f13;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -43,7 +45,7 @@
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.news-hero .first-news-image::after {
|
||||
/* .news-hero .first-news-image::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -53,7 +55,7 @@
|
||||
background: url("../img/picfrm_b480.png") no-repeat left bottom / cover;
|
||||
background-size: 480px 25px;
|
||||
pointer-events: none;
|
||||
}
|
||||
} */
|
||||
|
||||
.news-hero .first-news-image img {
|
||||
display: block;
|
||||
@ -64,14 +66,17 @@
|
||||
}
|
||||
|
||||
.news-hero .first-news-content {
|
||||
grid-area: content;
|
||||
height: 293px;
|
||||
max-height: 293px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-hero .first-news-content a {
|
||||
grid-area: content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.news-hero .fist-news-date,
|
||||
@ -94,6 +99,7 @@
|
||||
.news-hero .first-news-body {
|
||||
font-size: 13px;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@ -136,7 +142,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-list-thumb::after {
|
||||
/* .news-list-thumb::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -146,7 +152,7 @@
|
||||
background: url("../img/picfrm_o194.png") no-repeat left bottom / cover;
|
||||
background-size: 194px 25px;
|
||||
pointer-events: none;
|
||||
}
|
||||
} */
|
||||
|
||||
.news-list-thumb img {
|
||||
display: block;
|
||||
@ -166,6 +172,10 @@
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.news-list-items .article-intro {
|
||||
min-height: 45px;
|
||||
}
|
||||
|
||||
.news-list-items .article-date {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
@ -191,17 +201,17 @@
|
||||
grid-template-columns: 318px 1fr;
|
||||
}
|
||||
|
||||
.news-hero .fist-news-title {
|
||||
/* .news-hero .fist-news-title {
|
||||
max-width: 320px;
|
||||
}
|
||||
} */
|
||||
|
||||
.news-hero .first-news-image {
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
.news-hero .first-news-image::after {
|
||||
/* .news-hero .first-news-image::after {
|
||||
background-size: 318px 25px;
|
||||
}
|
||||
} */
|
||||
|
||||
.news-hero .first-news-image img {
|
||||
width: 318px;
|
||||
@ -219,7 +229,7 @@
|
||||
|
||||
@media (min-width: 575px) and (max-width: 1023px) {
|
||||
.news-hero .fist-news-title {
|
||||
font-size: 36px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.more-news {
|
||||
@ -302,6 +312,11 @@
|
||||
height:260px;
|
||||
}
|
||||
|
||||
.news-hero .first-news-content {
|
||||
height: 260px;
|
||||
max-height: 260px;
|
||||
}
|
||||
|
||||
.news-list-items a > div:nth-of-type(1) {
|
||||
grid-row: 1 / span 3;
|
||||
}
|
||||
@ -364,6 +379,21 @@
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.news-hero .first-news-content {
|
||||
height: 220px;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.news-hero .first-news-body::after {
|
||||
height: 90px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(14, 27, 66, 0) 0%,
|
||||
rgba(14, 27, 66, 0.42) 62%,
|
||||
#0e1b42 92%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
.news-hero .fist-news-title {
|
||||
font-size: 24px;
|
||||
@ -386,10 +416,10 @@
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.news-list-thumb::after {
|
||||
/* .news-list-thumb::after {
|
||||
background: url("../img/picfrm_o139.png") no-repeat left bottom / cover;
|
||||
background-size: 139px 25px;
|
||||
}
|
||||
} */
|
||||
|
||||
.news-list-items a > div:nth-of-type(3) {
|
||||
display: none;
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
{% load wagtailcore_tags %}
|
||||
{% block content %}
|
||||
<nav class="breadcrumbs" aria-label="breadcrumb">
|
||||
<ol>
|
||||
<li>
|
||||
{% if site_root %}
|
||||
<a href="{{ site_root.url }}">首頁</a>
|
||||
{% else %}
|
||||
<a href="/">首頁</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li><span>標籤</span></li>
|
||||
<li><span>#{{ tag.name }}</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{% include "home/includes/page-article-list.html" with category=category_sections.0 %}
|
||||
{% load wagtailcore_tags static %}
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/category.css' %}">
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="site-hero-band full-bleed">
|
||||
<div class="site-container">
|
||||
<div class="block-title category-title"><span>#{{ tag.name }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "home/includes/page-article-list.html" with category=category_sections.0 show_hero=False empty_message="沒有符合條件的文章" %}
|
||||
{% endblock %}
|
||||
|
||||
@ -9,9 +9,10 @@
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="site-hero-band full-bleed">
|
||||
{% include "base/includes/home_banner.html" %}
|
||||
|
||||
<div class="site-container">
|
||||
<div class="home-hero">
|
||||
{% include "base/includes/home_banner.html" %}
|
||||
{% with top_section=sections.top_section %}
|
||||
{% for section in top_section %}
|
||||
{% include "home/includes/news_list.html" with section=section %}
|
||||
|
||||
@ -1,49 +1,77 @@
|
||||
{% load wagtailimages_tags static home_tags %}
|
||||
|
||||
<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 }}"/>
|
||||
{% if show_hero != False %}
|
||||
<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 %}
|
||||
{% random_default_cover as default_cover %}
|
||||
<img src="{{ default_cover }}" 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">{{ empty_message|default:"目前沒有文章" }}</span>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if show_hero != False %}
|
||||
{% if items|length > 2 %}
|
||||
<div class="article-list-lower">
|
||||
{% 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 %}
|
||||
{% random_default_cover as default_cover %}
|
||||
<img src="{{ default_cover }}" alt="{{ first_article.title }}"/>
|
||||
<img src="{{ default_cover }}" alt="{{ article.title }}"/>
|
||||
{% endif %}
|
||||
</a>
|
||||
</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>
|
||||
<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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if items|length %}
|
||||
<div class="article-list-lower">
|
||||
{% for article in items %}
|
||||
<a href="{{ article.url }}">
|
||||
<div class="article-list-item">
|
||||
<div class="article-thumb">
|
||||
@ -62,5 +90,8 @@
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<span class="empty">{{ empty_message|default:"沒有符合條件的文章" }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -12,18 +12,14 @@
|
||||
</span>
|
||||
<a href="{{ section.url }}"><span class="more-link">查看全部</span></a>
|
||||
</div>
|
||||
{% with first_article=section.items|first %}
|
||||
{% if first_article %}
|
||||
<div class="fist-news-title">
|
||||
<a href="{{ first_article.url }}">
|
||||
<span>{{ first_article.title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
{% with first_article=section.items|first %}
|
||||
{% if first_article %}
|
||||
<div class="fist-news-title">
|
||||
<a href="{{ first_article.url }}">
|
||||
<span>{{ first_article.title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="first-news-image">
|
||||
<a href="{{ first_article.url }}">
|
||||
{% if first_article.cover_image %}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
{% endblock %}
|
||||
|
||||
<div class="page-article-list">
|
||||
{% include "home/includes/article_list.html" with items=category.items %}
|
||||
{% include "home/includes/article_list.html" with items=category.items show_hero=show_hero empty_message=empty_message %}
|
||||
|
||||
{% if category.items.paginator.num_pages > 1 %}
|
||||
<div class="pagination">
|
||||
@ -17,6 +17,13 @@
|
||||
</button>
|
||||
<span>BACK</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<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>
|
||||
{% endif %}
|
||||
<div class="pagination-pages">
|
||||
{% for page_num in category.page_range %}
|
||||
|
||||
@ -4,7 +4,7 @@ from django.shortcuts import get_object_or_404, render
|
||||
from taggit.models import Tag
|
||||
from wagtail.models import Site
|
||||
|
||||
from .models import ArticlePage, PAGE_SIZE
|
||||
from .models import ArticlePage, CATEGORY_HOT_SIZE, PAGE_SIZE
|
||||
|
||||
|
||||
def hashtag_search(request, slug):
|
||||
@ -12,7 +12,7 @@ def hashtag_search(request, slug):
|
||||
articles = (
|
||||
ArticlePage.objects.live()
|
||||
.filter(tags__slug=slug)
|
||||
.order_by("-date")
|
||||
.order_by("-date", "-id")
|
||||
)
|
||||
|
||||
paginator = Paginator(articles, PAGE_SIZE)
|
||||
@ -38,6 +38,11 @@ def hashtag_search(request, slug):
|
||||
"page_range": paginator.get_elided_page_range(page_obj.number),
|
||||
}
|
||||
],
|
||||
"category_trending": (
|
||||
ArticlePage.objects.live()
|
||||
.filter(tags__slug=slug, trending=True)
|
||||
.order_by("-date", "-id")[:CATEGORY_HOT_SIZE]
|
||||
),
|
||||
"site_root": site_root,
|
||||
"page": site_root.specific if site_root else None,
|
||||
}
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
.contact-form-modal__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #0e1b42cc;
|
||||
}
|
||||
|
||||
.contact-form-modal__dialog {
|
||||
@ -26,6 +25,7 @@
|
||||
background: #0e1b42e6;
|
||||
color: #ffffff;
|
||||
overflow-y: auto;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.contact-form-modal__close {
|
||||
|
||||
@ -47,24 +47,25 @@
|
||||
height: 59px;
|
||||
padding: 0 10px 0 0;
|
||||
border-radius: 36px;
|
||||
background: #323232;
|
||||
background: #ffffff1a;
|
||||
border: 1px solid #ffffff80;
|
||||
transform: translateX(calc(100% - var(--fab-toggle-width)));
|
||||
transition: transform 0.25s ease, background-color 0.2s ease;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.subscribe-fab:hover .subscribe-fab__panel {
|
||||
background: #767676;
|
||||
background: #ffffff66;
|
||||
}
|
||||
|
||||
.subscribe-fab.is-open .subscribe-fab__panel {
|
||||
background: #767676;
|
||||
background: #ffffff66;
|
||||
transform: translateX(44px);
|
||||
}
|
||||
|
||||
.subscribe-fab:hover .subscribe-fab__toggle,
|
||||
.subscribe-fab.is-open .subscribe-fab__toggle {
|
||||
color: #0e1b42;;
|
||||
color: #0e1b42;
|
||||
}
|
||||
|
||||
.subscribe-fab__form {
|
||||
|
||||
@ -1,33 +1,29 @@
|
||||
{% extends "base.html" %}
|
||||
{% load wagtailcore_tags %}
|
||||
{% load wagtailcore_tags static %}
|
||||
|
||||
{% block body_class %}template-searchresults{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/category.css' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}
|
||||
{% if search_query %}搜尋：{{ search_query }}{% else %}搜尋{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<nav class="breadcrumbs" aria-label="breadcrumb">
|
||||
<ol>
|
||||
<li>
|
||||
{% if site_root %}
|
||||
<a href="{{ site_root.url }}">首頁</a>
|
||||
{% else %}
|
||||
<a href="/">首頁</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li><span>搜尋</span></li>
|
||||
{% if search_query %}
|
||||
<li><span>{{ search_query }}</span></li>
|
||||
{% endif %}
|
||||
</ol>
|
||||
</nav>
|
||||
{% if search_query %}
|
||||
<div class="site-hero-band full-bleed">
|
||||
<div class="site-container">
|
||||
<div class="block-title category-title"><span>{{ search_query }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<section class="search-results">
|
||||
{% if search_query %}
|
||||
{% if results_count %}
|
||||
{% include "home/includes/page-article-list.html" %}
|
||||
{% include "home/includes/page-article-list.html" with category=category_sections.0 show_hero=False empty_message="沒有符合條件的文章" %}
|
||||
{% else %}
|
||||
<p>找不到與「{{ search_query }}」相關的文章。</p>
|
||||
{% endif %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user