Is there a way to create a secondary view for pages, specifically the taxonomy list template?

[Akaishen]

I’m building a simple book directory that has a Genres taxonomy. There are two ways I’d like to display the content of the taxonomy list template page: book covers and as a list in a table.

Example, I have books with the taxonomy Genres set to “fantasy.” Going to /genres/fantasy/ will read my list.html taxonomy template page and display all available books by their cover. I’d love to give the end user the option to view the information as a list by going to another page (as an example) /genres/fantasy/list/.

Is this possible? Thanks for your help!

[jmooring]

In this case I’d consider using JS, appending a query string to the url.

http://localhost:1313/genres/fantasy/
http://localhost:1313/genres/fantasy/?format=list

layouts/genres/term.html

<div id="covers">
  {{ range .Pages }}
    ...
  {{ end }}
</div>

<div id="list" style="display: none">
  {{ range .Pages }}
    ...
  {{ end }}
</div>

<script>
  const params = new URLSearchParams(location.search);
  if (params.get('format') == 'list') {
    document.getElementById('covers').style.display = 'none';
    document.getElementById('list').style.display = 'initial';
  } else {
    document.getElementById('covers').style.display = 'initial';
    document.getElementById('list').style.display = 'none';
  }
</script>

This will break if you try to paginate.

[Akaishen]

Thanks so much!

I was hoping for a non-JS way to do this, but I think this will work well enough for this project.

I modified the code in order to make it work with pagination. Essentially, if ?format=list is in the URL, I append it to the pagination URLs.

    <script>
        const params = new URLSearchParams(location.search);

        if (params.get('format') == 'list') {
            document.getElementById('covers').style.display = 'none';
            document.getElementById('list').style.display = 'initial';

            let paginators = document.querySelectorAll('[data-paginator]');

            for (let i = 0; i < paginators.length; i++) {
                paginators[i].href = paginators[i].href + '?format=list';
            }
        } else {
            document.getElementById('covers').style.display = 'initial';
            document.getElementById('list').style.display = 'none';
        }
    </script>

Let me know if you see a problem with that. Thanks again for your help!