Architecture

Theme Architecture

Themes are structured and organized in folders with each folder containing specific related files and resources that are compactible with the Taojaa theme engine.

.
├── assets
├── components
├── configs
├── layouts
├── locales
├── sections
└── templates
    └── customers

Folder structure and supported files

Taojaa theme engine supports HTML, CSS, JS, and others asset types for content rendering and JSON for theme settings, data access and page configurations. These files are located inside their respective folders below which are their supported locations.

  1. Layouts - consist HTML files that are used as page layouts for the templates and they mostly includes the header and footer sections, while using the {{{ content }}} helper to add each page's template.

  2. Components and Sections - consist HTML files used in rendering page contents, sections are used to render sections using the theme settings JSON and the components are used to render tiny parts of a section which can be reused and updated after an action.

  3. Templates and Configs - consist JSON files that are used in building pages and configuring your themes. The templates JSON files are used in setting up how contents is rendered on the page, while the JSON files located in the configs are used to set global configurations which can be accessed across your theme.

  4. Assets - this is where all your static files such as CSS, JavaScript, images files and others should be placed and will be accessible in your project using the file name with the {{ asset_url }} helper as shown below.

    <link rel="stylesheet" type="text/css" href="{{asset_url}}/main.css">
<script type="text/javascript" src="{{asset_url}}/main.js"></script>

  5. Locales - this folder consist JSON configurations files for localization settings including language translations.

<- Customize Existing Theme
Layouts ->
ON THIS PAGE

Theme Architecture

Folder structure and supported files