In this article, I will show you how to create a Tag list page using the Casper theme.

Create a file in the theme folder

• Create a custom-tags.hbs file with the following content

{{!< default}}
{{!-- The tags above means: insert everything in this file
into the {body} tag of the default.hbs template --}}

{{#post}}
{{!-- Everything inside the #post block pulls data from the post --}}

<main id="site-main" class="site-main outer">
    <div class="inner article posts tags">
        <h1 class="article-title">{{title}}</h1>

        <div class="tags-title-description">
            {{content}}
        </div>
        
       <div class="post-feed">
            {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
                {{#foreach tags}}
                        
                    {{> "tag-card"}}
                    
                {{/foreach}}
            {{/get}}
        </div>
    </div>
</main>

{{/post}}

• Create file partials/tag-card.hbs

{{!-- This is a partial file used to generate a tag "card"
which templates loop over to generate a list of tags. --}}

<article class="post-card tag-card">

    {{#if feature_image}}
    <a class="post-card-image-link" href="{{url}}">
        {{!-- This is a responsive image, it loads different sizes depending on device
        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
        <img class="post-card-image"
            {{!-- srcset="{{img_url feature_image size="s"}} 300w,
                    {{img_url feature_image size="m"}} 600w,
                    {{img_url feature_image size="l"}} 1000w,
                    {{img_url feature_image size="xl"}} 2000w" --}}
            sizes="(max-width: 1000px) 400px, 800px"
            src="{{img_url feature_image size="m"}}"
            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
            loading="lazy"
        />
    </a>
    {{/if}}

    <a class="tag tag-card-content" href="{{url}}">
        <div class="post-card-content">
            <header class="post-card-header">
                <div class="tag-card-content-post-count">{{ count.posts }} POST</div>
                <h2 class="post-card-title tag-card-content-title">{{name}}</h2>
            </header>
        </div>{{!--/.post-card-content--}}
    </a>

</article>

Create static page tags

• URL should be tags
• Select the new theme created in the above step
• Publish page

Achievement

I wish you make the tag list page as desired!!!