How to add a blog's category list in sidebar of theme Future

Support Themes & Styling
12

Please be aware that a few practices mentioned in this thread are considered bad practice and discouraged to use:

  • Using <table> for webpage layout:
    A <table> is designed for tabular data, not page layout.

    The use of <table> for page layout is a left over from the early days when there were no alternatives. The World Wide Web Consortium (W3C) declared the use of <table> as layout invalid in HTML4 and an ill practice since HTML5:

    Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout.

    And according W3C in their ‘Web Accessibility Tutorial’ on tables:

    Notes: This tutorial provides guidance for creating tables used to display data in a grid. This tutorial does not apply to tables used for layout. As a general rule, tables aren’t meant to be used for layout purposes. Instead, a best practice is to use Cascading Style Sheets (CSS) for visual presentation.)

  • Defining page layout in the content of a page:
    Markdown (*.md) is designed to create content, HTML is designed to create structure, and css is designed for presentation (color, fonts, layout).

    Ergo, don’t define the layout inside of Markdown (content).

    Keeping these concerns separate is considered good practice in any area of software design.

Regular pages and modular pages are often/mostly designed without a sidebar. Considering the above, this should not be ‘fixed’ by creating a layout using a <table> in the page’s content, but should be properly designed by changing the HTML in a Twig template.

This can be done by overriding the provided template ‘default.html.twig’ in an inherited theme. Using Bootstrap4 as an example, the blog item template could be used as an example to create a two-column layout for content and sidebar.

Also note, when {{ page.find('/sidebar').content | raw }} is used in Markup, the page will not get updated when the content of /modules/sitebar has changed, unless the caching of the page has been disabled, which defies one of the strengths of Grav: caching.
This trick should only be used when the included data is an integrate part of the content. Not when used in a sidebar.

When used in a template, the content does get updated.

1 Like