Automatic update of article counter in page text

[Backspaze]

I want to dynamically update the post count in the example text below when I preview and/or build the site.

In the editor

This website currently has [articleCount] articles of this kind.

Published website

This website currently has 22 articles of this kind.

The solution should be able to count the articles with a specific tag, and inject that number on preview/build.

I've looked at the plugins below, but I'm not sure that either of them can do this, and I don't want to buy Publii's plugin unless I know that it can achieve what I want. Perhaps @bjazmoore can comment on his plugin?

https://github.com/bjazmoore/Key-Replacement
https://marketplace.getpublii.com/plugins/smart-replacer/

I've tried creating a custom helper, but that got me nowhere thus far. Right now, I'm looking at hard coding the whole thing by creating a custom template with all the text, but I'd really prefer to be able to edit all this within the application.

By default, Publii shows a counter in superscript text on tag pages (see example below), so the functionality is already there, but I've yet to figure out how to use it for this specific purpose.

Example taken from https://demo.getpublii.eu/themes/mono/tags/three-dimensional/.

[Backspaze]

As I mentioned in the original comment, I have, for now, figured out and used the workaround of using a custom template. In that template, I've hard coded the first paragraph as shown below. The rest of the text is produced in the Publii editor and contained in the {{{text}}} handlebar.

This is of course not optimal, as the text in the template is not shown in the editor, and it's much easier to edit the content in the editor. I'd very much prefer if I could just have a place holder text in the editor, which gets replaced with the current amount on build. I've tested Key-Replacement now as well, but that plugin could not solve this, as it just replaces text with text.

If someone knows if this is possible with the Smart Replacer or in some other way, please chime in.

<div class="content__entry">
 <p>This website currently has {{#getTag 6}}{{postsNumber}}{{/getTag}} articles of this kind... some more text etc </p>
{{{text}}}
</div>

[candidexmedia]

Rather than hardcoding the text, I would use the Post/Page Settings API so that your custom text can be entered per Post/page on the side:

This works if your text is meant to appear at the same place for every post, but with different text on each post. You could even add a setting to enable/disable it.

Otherwise, I'm not super familiar with them, but a custom helper might be useful. I'll drop some links here for further reading:

• https://forum.getpublii.com/topic/global-string-variable/#post-7535
• #each over an array entered in config #1423 (comment)
• https://getpublii.com/dev/tags/custom-helpers/

[Backspaze]

Thanks @candidexmedia, I'll take a look at that. I did a quick read, and if I understood it correctly, I could possibly add a similar solution as the copyright text. We'll see how it goes.

I already dabbled a bit with a custom helper, but I could not get it working for my purpose. After a quick glance on the links you provided, I might take another swing at it.

[candidexmedia]

Best of luck! Let us know what ends up working for you

[gpsblues]

Hello @Backspaze,

I confirm that you can't achieve this with plugins because they operate on the HTML output — that is, after Handlebars (hbs) has already done its job — and from the HTML output you cannot retrieve the number of posts associated with a specific tag.

The solution I recommend is the one proposed by @candidexmedia using the Post/Page Settings API.

Essentially, you need to create a custom post option in the config.json file:

    ...
    "postConfig": [
        {
            "name": "postCounter",
            "label": "Post Counter",
            "value": false,
            "note": "",
            "type": "select",
            "postTemplates": "yourname" <-- put your post template suffix if available,
            "options": [
                {
                    "label": "True",
                    "value": true
                },
                {
                    "label": "False",
                    "value": false
                }
            ]
        },
    ...
    

Then, in your custom post template (post.hbs or post-yourname.hbs), add:

...
{{#if @config.post.postCounter}}
<p>This website currently has {{#getTag 6}}{{postsNumber}}{{/getTag}} articles.</p>
{{/if}
{{{text}}}
...

[gpsblues]

If instead you want more freedom in writing the text and prefer the [postCount] placeholder, you need to provide this number to the HTML via JavaScript.

Modify post.hbs or post-yourname.hbs like this:

...
<script>const postCount = "{{#getTag 6}}{{postsNumber}}{{/getTag}}" //this declaration must precede {{{text}}}</script>
{{{text}}}
...

And using the Key-Replacement plugin:

Key: [postCount]
Replacement: <script>document.write(postCount)</script>

It's not the most elegant solution, but it works.

[candidexmedia]

Just a note: unless things have changed, you can't use the checkbox type for post and page settings, only theme settings (see docs for fields that are allowed).

To enable/disable, you have to set dropdown options similar to the display settings, IIRC.

[gpsblues]

Thankyou @candidexmedia,
I always forget that :)

[Backspaze]

@gpsblues thanks for clarifying that this can't be done with plugins, and thank you for the additional suggestions!

I took another look at this know, and have noted my findings in the details below. Based on this, I'll probably stick to the original workaround, as it achieves what I want with just a custom template, updates automatically on build, does not need to run scripts on the published site, and the only real downside is that the paragraph is not visible or editable in the editor.

Details

With the workaround I used, I achieve basically the same thing as in this suggestion, but without having to create a custom post option.

With the other option, It's possible to edit the text in the editor, which I want, but it leads to a script being run each time you go to that page, which I don't want. The post count only need to be updated when I build the site, to avoid running more scripts than necessary on the site. I also don't want to use document.write, as it's deprecated. There are alternatives to it, but it would still mean running a script for something that only changes when I create more content and build the site.

Thanks again for the help. I'll mark this discussion as resolved, but feel free to chime in if you have any more suggestions.

[gpsblues]

Hello,

Thinking about it, there is the option of using a custom helper, which essentially works like a mini plugin. You can insert the [postCount] placeholder in the editor. The placeholder will be replaced without executing any scripts.

1. Create (or modify) the helpers.js file in theme root:

// helpers.js
let themeHelpers = {
    replaceTagCount: function(postText, content) {
        // Specifies the ID of the tag you want to count
        const targetTagId = 6; 
        
        // Accesses the global tag collection via contentStructure
        const allTags = content.data.website.contentStructure.tags;
        
        // Searches for the specific tag in the array
        const tag = allTags.find(t => t.id === targetTagId);
        
        // If the tag exists, retrieves the number of posts, otherwise returns 0
        const count = tag ? tag.postsNumber : 0;

        // Searches for the [postCount] placeholder in the text and replaces it with the number
        // The 'g' flag ensures all occurrences are replaced
        return postText.replace(/\[postCount\]/g, count);
    }
};

module.exports = themeHelpers;

2. Modify post.hbs or post-yourname.hbs by replacing {{{text}}} with the new helper:

...
{{{replaceTagCount text}}}
...

I had a little help from Gemini, but it should work :)

[Backspaze]

Thanks again @gpsblues! This ticks practically all the boxes on my wishlist.

[bobmitro]

Hey,

I built a small plugin that adds shortcodes for displaying content counts on your Publii site - posts, pages, tags, authors.

What it does

Drop a shortcode like [pcc=posts] anywhere - in a post, a page, or directly in your theme's .hbs templates - and it gets replaced with the actual number during rendering.

Basic shortcodes:

• [pcc=posts] - number of published posts
• [pcc=pages] - number of published pages
• [pcc=total] - combined total (posts + pages)
• [pcc=featured] - number of featured posts

Tag & author shortcodes:

You can also count posts per tag or author. Use either the slug or the ID:

• [pcc=tag name=tutorials] - number of posts in a tag (by slug)
• [pcc=tag id=5] - same, but by tag ID
• [pcc=author name=olivia-reynolds] - number of posts by an author
• [pcc=author id=3] - same, but by author ID

Label - position controls the output order:

The position of label in the shortcode determines the output order:

• [pcc=tag label name=tutorials] → Tutorials: 5 (name first, with separator)
• [pcc=tag name=tutorials label] → 5 Tutorials (count first, no separator)
• [pcc=author label id=3] → Olivia Reynolds: 12
• [pcc=author id=3 label] → 12 Olivia Reynolds

Label before is good for headings and labels. Label after reads naturally in sentences:

This site has [pcc=tag name=tutorials label] available.
→ This site has 5 Tutorials available.

The separator for label-before (: by default) is configurable in the plugin settings - you can pick from a few presets or type your own.

Example in a Handlebars template:

<p>Browse our [pcc=tag label name=tutorials]</p>

Settings

By default, the plugin only counts visible (published) posts and pages. If you also want to include items marked as hidden in Publii, you can enable that in the plugin settings.

There's also an option to wrap the output in <span> tags with customizable CSS classes if you need to style the counters.

Shortcodes in <head> (meta tags, JSON-LD) are always replaced with plain numbers - no HTML markup leaking into your SEO tags.

You can grab the plugin here: contentCounter_1.2.0.zip
Feedback welcome. If you run into any issues, let me know.

[bobmitro]

Ok, I’ve updated the plugin (v.1.1.0). It now also supports tags and authors. You can provide the tag or author by ID or by name, and it will also display the label (the tag/author name). I’ve updated the instructions above.

[Backspaze]

Thanks for the quick update @bobmitro! The plugin now suits my use case, but I'll add another suggestion as well, as I think it would be really useful option.

It would be great if the plugin supported reversal of the label and number, or supported [pcc=label id=7].

With reversal, you could set the label separator option to none, and inject the text and number in a natural sentence, so This site has [pcc=tag id=5 label] becomes This site has 7 tutorials.

With support for [pcc=label id=7], you could have it only inject the tag name, or you could combine them, so This site has [pcc=tag id=5] [pcc=label id=5] becomes This site has 7 tutorials.

Another great benefit of this would be that if you ever change the name of the tag, e.g. from tutorials to lessons, it would propagate everywhere you've used the place holders.

Of the two options above, I'm leaning more towards the reversal option, because with the other option, you'd have to update the place holders in pairs, which could be easily missed, especially if they're spread out in the text. On the other hand, the other option gives more flexibility.

Anyway, if it's possible to add one or both of these options, it would be much appreciated!

[bobmitro]

Just shipped this in v1.2.0 - the position of label in the shortcode now controls the order:

• [pcc=tag label name=tutorials] → Tutorials: 5
• [pcc=tag name=tutorials label] → 5 Tutorials

So exactly what you were after with the reversal option.

Now please stop having good ideas; I'm officially out of features to add! 😄

[Backspaze]

Ok, I'll try and stop now. 😄

I think this plugin deserves a spot in the official list, so it doesn't get lost in the GitHub discussions.

Again, a big thank you for this!

[Backspaze]

And it's there: https://marketplace.getpublii.com/plugins/content-counter/