Folder Structure

A static site generator theme folder is an integral part of any website, dictating the visual presentation and layout of the site.

The folder structure of a SuCoS theme encompasses different directories, each serving a specific purpose. The primary directories typically found in a SuCoS theme are _default and partials. Let's explore each of these directories in detail:

├── _default
│   ├── baseof.liquid
│   ├── index.liquid
│   ├── list.liquid
│   └── single.liquid
└── partials
    └── header.liquid

_default Directory

The _default directory contains essential liquid templates that serve as the foundation for the theme. These templates are responsible for defining the structure and layout of various types of content within the website.

  1. baseof.liquid

The baseof.liquid template acts as the base template for all other templates within the theme. It establishes the common structure, including the header, footer, and any other elements that should appear consistently across the entire site. Other templates inherit from this base template and extend or override its content.

  1. index.liquid

The index.liquid template determines the layout and structure of the homepage or the list of posts displayed on the root page. It defines how the list of posts should be presented, including the order, formatting, and any additional elements to be included.

  1. list.liquid

The list.liquid template governs the structure and presentation of the list of posts within a specific section of the website. For example, if the website has different sections such as "blog," "news," or "portfolio," this template would determine how the posts within each section are displayed.

  1. single.liquid

The single.liquid template controls the layout and design of individual content pages, such as blog posts or portfolio items. It dictates the structure and appearance of a single page, including the content itself, metadata, comments section, and any other relevant elements.

Partials Directory

The partials directory contains reusable liquid templates that are meant to be included within other templates. These partial templates allow for modularization and code reusability, reducing redundancy and making theme development more efficient.

  1. header.liquid

The header.liquid template defines the layout and content of the header section of the website. It typically contains the site title, navigation menu, logo, and any other elements that should appear consistently at the top of each page.