Tagsname as H2

Development

AI-generated summary

Tagsname as H2

fuchs is looking to insert an H2 heading in the tags area, with the H2 heading being the name of the tag. Since the tags banner component does not meet their requirements, they are seeking an alternative solution.

Lhc_fl provided a JavaScript code that achieves this, but initially only worked for the first tag clicked. fuchs reported this issue, and Lhc_fl made adjustments to the code to update the H2 heading when switching between tags.

The updated code uses the api.onPageChange method to update the h2_tag component property whenever the page changes.

1

Is it possible to insert an H2 heading in the tags area? The H2 heading should be the name of the tag.

I can’t use the tags banner component because the h2 is not on the side of the right sidebar, it’s above.

image
image907×288 16 KB

2

Write some code to achieve what you need. Here I have written a simple solution for you. Try it, it should do what you want

<script type="text/x-handlebars" data-template-name="/connectors/discovery-list-controls-above/tag-h2">
<h2>
    {{#if h2_tag}}
        {{h2_tag}}
    {{/if}}
</h2>
</script>

<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("discovery-list-controls-above", "tag-h2", {
  setupComponent(args, component) {
    if (window.location.pathname?.startsWith("/tag/"))
        component.set("h2_tag", /\/tag\/([^?]+)/.exec(decodeURI(window.location.pathname)).at(1));
  },
});
</script>
3

Oh thank you very much!! It’s working for the first tag I click on but if I change to another tag the h2 does not change.

4

Oh sorry this is my problem. I made some adjustments for this

<script type="text/x-handlebars" data-template-name="/connectors/discovery-list-controls-above/tag-h2">
<h2>
    {{#if h2_tag}}
        {{h2_tag}}
    {{/if}}
    {{log this}}
</h2>
</script>

<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("discovery-list-controls-above", "tag-h2", {
  setupComponent(args, component) {
    
    function getTagNameFromURL(url) {
        return /\/tag\/([^?]+)/.exec(decodeURI(url)).at(1)
    }  
    
    if (window.location.pathname?.startsWith("/tag/"))
        component.set("h2_tag", getTagNameFromURL(window.location.pathname));
    api.onPageChange(url => component.set("h2_tag", getTagNameFromURL(url)))
  },
});


</script>