So, i decided to modify blog template (which leaves all the benefits, like Blog Config tab, pagination, breadcrumbs controls). Anyway you will get the idea.
- copy from Quark
blog.html.twig
file (quark/templates/blog.html.twig) and put it in your inherited theme in templates folder. - rename the file (if you want to create your own rather than override a blog template). let’s say
posts.html.twig
(in this case the same for theblog.yaml
file (quark/blueprints/blog.yaml) copy/paste/rename to the blueprints folder) - open
posts.html.twig
file and:
a. after the last set{% set show_pagination %}
add this code
{% set page_title = page.title %}
{% if (uri.param('category') is defined and uri.param('category') is not empty) and (uri.param('tag') is defined and uri.param('tag') is not empty) %}
{% set page_title = 'Category' ~ ': ' ~ uri.param('category')|capitalize ~ ' with ' ~ 'Tag' ~ ': '~ uri.param('tag')|capitalize %}
{% elseif uri.param('tag') is defined and uri.param('tag') is not empty %}
{% set page_title = 'Tag' ~ ': '~ uri.param('tag')|capitalize %}
{% elseif uri.param('category') is defined and uri.param('category') is not empty %}
{% set page_title = 'Category' ~ ': '~ uri.param('category')|capitalize %}
{% endif %}
b. then replace the {% block hero %}
code with:
{% block hero %}
{% set content %}
<h1>{{ page_title|e }}</h1>
{% endset %}
{% if blog_image %}
{% include 'partials/hero.html.twig' with {id: 'blog-hero', hero_image: blog_image} %}
{% else %}
{% include 'partials/hero.html.twig' with {id: 'blog-hero'} %}
{% endif %}
{% endblock %}
-
you can also modify blueprint, but just manually change
Blog Route
in admin to(/posts)
-
it’s not the best solution for Google (you’ll need more complex code), but you can also put the results in the
<title>
tag by overriding{% block head %}
.
add the code after thepage_title set
(3.a)
{% block head deferred %}
<meta charset="utf-8" />
<title>{% if page_title %}{{ page_title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% include 'partials/metadata.html.twig' %}
<link rel="icon" type="image/png" href="{{ url('theme://images/favicon.png') }}" />
<link rel="canonical" href="{{ page.url(true, true) }}" />
{% endblock head %}