How to add a variable with code injection in tag pages to use in theme?

Developer help
1

Hi Community,

I write about software and want to improve my tag-pages by adding an additional link.
Example: I collect all my articles about Ghost CMS on my tag page /tag/ghost-cms . On this page, in addition to a logo and a description, I would like to add a button or link directing to Ghost (dot) org. This is what my Ghost-Tag-Page looks at the moment. (If you`re wondering about the URL, I use the routes.yaml to shorten it and to use a separate template).

Since there is no link-field available on tag pages, my plan is to use code injection to create the link variable.

In a second step, I would like to use this variable as text or button in my theme.

Can anyone help me accomplish that?

A second idea to use this, is to add additional content for SEO purposes (in a different area than the description content).

2

Hey Christian!

You could add a JavaScript object like this in the global code injection:

<script>
  const tagLinks = {
    "ghost-cms": "https://ghost.org",
    "other-tool-slug": "https://example.org",
    "third-tool-slug": "https://example.org"
  }
</script>

In the tag template you could then fetch this object tagLinks and see if the slug of the tag matches one of the keys:

Add this where you want the tag link to show up:

...
<div id="tagLinkPlaceholder"></div>
...

Then add this JavaScript at the bottom of the tag template:

<script>
    const tagName = "{{tag.name}}";
    const tagSlug = "{{tag.slug}}";

    document.addEventListener("DOMContentLoaded", function() {
        const link = tagLinks[tagSlug];
        if (link) {
            const placeholder = document.getElementById('tagLinkPlaceholder');
            if (placeholder) {
                placeholder.innerHTML = `<a href="${link}">Learn more about ${tagName}</a>`;
            }
        }
    });
</script>

This script uses the tag slug to check if the slug exists in the object we created in the code injection. If it finds a match, it replaces the placeholder from above with the HTML defined here.

And to quickly touch upon your idea for additional SEO content: you could extend the JavaScript object in the code injection with additional properties and then add them similarly to the template.

Example:

<script>
  const tagLinks = {
    "ghost-cms": {
        link: "https://ghost.org",
        version: "v5.82.3",
        "text": "Some text to add somewhere"
    }
    ....
</script>
1 Like
3

Awesome @jannis . Will test this soon. Thank you so much.

1 Like