Grav Quark: How to enable "Continue Reading" button for blog?

Hello,

I did notice the "Continue Reading" links aren't present in my home page (blog). I am using the Quark theme. I did find the feature in the version history on GitHub but I failed to figure out how to enable this feature.

My goal is to have a "Continue Reading" link or button after the excerpt, so a reader can click the button and read the blog post in full.

Thanks.

@bouke, I am pretty sure that 'Continue Reading' is not available in Quark.

It might have been in the past, because there are entries for 'CONTINUE_READING' in file /user/themes/quark/language.yaml of Quark, but it isn't referenced anywhere in the code.

Also. template /user/themes/quark/templates/partials/blog-list-item.html.twig does not provide the functionality.

@bouke:
My goal is to have a “Continue Reading” link or button after the excerpt, so a reader can click the button and read the blog post in full.

Is the title clickable? If so, you just need to add a button after the excerpt in the template that will direct to the same url.

Hi, Thanks. Yes, the title is clickable. What's the best way to add such a link or button?

If you look in partials/blog-list-item.html.twig you will see this line...

{% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}

So, look in partials/blog/title.html.twig and you will find this...

<a href="{{ page.header.link }}" class="u-url">{{ page.title }}</a>

which I'm assuming is the link to the page. So, go back to the list page and below the summary div add a new div with that link and maybe add class="button" as well.

I am guessing here because I haven't tried it, but play around and see what happens.

Thank you. Very much appreciated 👍 I will try to add the link when I am back from work.

The nice thing about Grav is that you can look into the code and it's fairly easy to see what's going on. Let us know how it goes.

<a href="{{ page.header.link }}" class="u-url">{{ page.title }}</a>
which I’m assuming is the link to the page

Not quite... page.header.link is a variable in the frontmatter of the page pointing to an external url. For internal pages, the url is page.url.

Ah... right, thanks. So @bouke the link we need is...
<a href="{{ page.url }}" class="u-url">{{ page.title }}</a>

Well, I did say I was guessing. 😉

Also keep in mind that any changes will be lost if the theme is updated, so you should look into setting up theme inheritance.

Excellent! There's your answer.

(From someone who isn't guessing 😁)

Thank you very much!!

Your help is very much appreciated. Everything works great now.

### file: ### nano blog-list-item.html.twig

<div class="card">
    {% set image = page.media.images|first %}
    {% if image %}
    <div class="card-image">
        <a href="{{ page.url }}">{{ image.cropZoom(800,400).html|raw }}</a>
    </div>
    {% endif %}
    <div class="card-header">
        <div class="card-subtitle text-gray">
            {% include 'partials/blog/date.html.twig' %}
    </div>
        <div class="card-title">
        {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
        </div>
    </div>
    <div class="card-body">
        {% if page.summary != page.content %}
            {{ page.summary|raw }}
        {% else %}
            {{ page.content|raw }}
        {% endif %}
        <div class="mmmore">        
           <a class="label label-rounded label-secondary p-category" href="{{ page.url }}"> 
           &#9863; {{ 'THEME_QUARK.BLOG.ITEM.CONTINUE_READING'|t }}
           </a>
        </div>
    </div>
    <div class="card-footer">
         {% include 'partials/blog/taxonomy.html.twig' %}
    </div>
</div>

### file: ### custom.css

div.mmmore {
 display: flex;
 flex-direction: row-reverse;
 float:right;
 width: auto;
 margin-top: -10px; 
 padding-right: 0px;
 padding-bottom: 2px;
 border: none;
}