Add tag filtered view to blog list
This commit is contained in:
parent
781870321e
commit
78660500a5
5 changed files with 49 additions and 7 deletions
|
@ -41,3 +41,14 @@ section.content {
|
||||||
max-width: calc(99% - ($column-gap * 2));
|
max-width: calc(99% - ($column-gap * 2));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blog-filter {
|
||||||
|
&,
|
||||||
|
.tag {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
font-family: $family-code;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -57,6 +57,12 @@ class BlogListPage(BaseContentMixin, BasePage): # type: ignore[misc]
|
||||||
.prefetch_related("tags")
|
.prefetch_related("tags")
|
||||||
.order_by("-date")
|
.order_by("-date")
|
||||||
)
|
)
|
||||||
|
if tag := request.GET.get("tag"):
|
||||||
|
tag = BlogPostTag.objects.filter(slug=tag).first()
|
||||||
|
if tag:
|
||||||
|
context["filtering_by_tag"] = tag
|
||||||
|
context["no_table_of_contents"] = True
|
||||||
|
context["child_pages"] = context["child_pages"].filter(tags=tag)
|
||||||
return context
|
return context
|
||||||
|
|
||||||
|
|
||||||
|
@ -69,6 +75,13 @@ class BlogPostTag(TagBase):
|
||||||
verbose_name = "blog tag"
|
verbose_name = "blog tag"
|
||||||
verbose_name_plural = "blog tags"
|
verbose_name_plural = "blog tags"
|
||||||
|
|
||||||
|
def get_absolute_url(self) -> str:
|
||||||
|
return (
|
||||||
|
BlogListPage.objects.live().defer_streamfields().first().get_url() # type: ignore[attr-defined]
|
||||||
|
+ "?tag="
|
||||||
|
+ self.slug
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
class TaggedBlog(ItemBase):
|
class TaggedBlog(ItemBase):
|
||||||
tag = models.ForeignKey(
|
tag = models.ForeignKey(
|
||||||
|
|
|
@ -1,16 +1,32 @@
|
||||||
{% extends "wagtail_base.html" %}
|
{% extends "wagtail_base.html" %}
|
||||||
|
|
||||||
|
{% load wagtailcore_tags %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
{% include "common/hero.html" %}
|
{% include "common/hero.html" %}
|
||||||
|
|
||||||
|
{% if filtering_by_tag %}
|
||||||
|
<section class="container blog-filter">
|
||||||
|
<p>
|
||||||
|
Showing only:
|
||||||
|
<span class="tag is-light is-medium">
|
||||||
|
#{{ filtering_by_tag.name }}
|
||||||
|
<a class="delete is-small" href="{% pageurl page %}"></a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<section class="container">
|
<section class="container">
|
||||||
{% for page in child_pages %}
|
{% for page in child_pages %}
|
||||||
|
{% if not filtering_by_tag %}
|
||||||
{% ifchanged %}
|
{% ifchanged %}
|
||||||
<time datetime="{{ page.date|date:'c' }}" title='{{ page.date|date:"F Y" }}'>
|
<time datetime="{{ page.date|date:'c' }}" title='{{ page.date|date:"F Y" }}'>
|
||||||
<h3 id="{{ page.date|date:'Y-m' }}" class="date-header">{{ page.date|date:"Y-m" }}</h3>
|
<h3 id="{{ page.date|date:'Y-m' }}" class="date-header">{{ page.date|date:"Y-m" }}</h3>
|
||||||
</time>
|
</time>
|
||||||
{% endifchanged %}
|
{% endifchanged %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% include "common/listing-item.html" %}
|
{% include "common/listing-item.html" %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
|
||||||
|
|
||||||
<div class="content-details field is-grouped is-grouped-multiline {{extra_classes}}">
|
<div class="content-details field is-grouped is-grouped-multiline {{extra_classes}}">
|
||||||
|
|
||||||
{% if page.date %}
|
{% if page.date %}
|
||||||
|
@ -23,7 +25,7 @@
|
||||||
<div class="tags has-addons">
|
<div class="tags has-addons">
|
||||||
<span class="tag is-dark"><i class="fas fa-tags"></i></span>
|
<span class="tag is-dark"><i class="fas fa-tags"></i></span>
|
||||||
{% for tag in page.tags.all %}
|
{% for tag in page.tags.all %}
|
||||||
<span class="tag is-white"><a title="{{ tag.name }}">#{{ tag.slug }}</a></span>
|
<span class="tag is-white"><a title="{{ tag.name }}" href="{{ tag.get_absolute_url }}">#{{ tag.slug }}</a></span>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
{% include "common/content-details.html" %}
|
{% include "common/content-details.html" %}
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
|
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
|
||||||
{% if page.table_of_contents %}
|
{% if not no_table_of_contents and page.table_of_contents %}
|
||||||
<div class="dropdown is-hoverable is-right" id="table-of-contents">
|
<div class="dropdown is-hoverable is-right" id="table-of-contents">
|
||||||
<div class="dropdown-trigger">
|
<div class="dropdown-trigger">
|
||||||
<button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu">
|
<button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu">
|
||||||
|
|
Loading…
Reference in a new issue