Themes Files

    A theme file is composed of the following directories:

    • assets/: Contains static assets that layouts and partials reference during rendering. Includes CSS, JS, font, and image files.
    • layouts/: Contains HTML page templates that content references via the layout attribute in headmatter
    • partials/: Contains HTML partials that are referenced by layouts.
    • theme.conf.yaml: Sets the color and font defaults that are available to templates as CSS variables. It also determines which options are available on the Kong Manager appearance page.

    Path

    • format: theme/*/assets/**/*

    Description

    The asset directory contains CSS, JavaScript, fonts, and images for your templates to reference.

    • format: theme/*/layouts/**/*
    • file extensions: .html

    Description

    Layouts act as the HTML skeleton of the page you want to render. Each file in the layouts directory must have an html file type. They can exist as vanilla html or reference partials and parent layouts via the portals templating syntax. Layouts also have access to the headmatter and body attributes set in content.

    To learn more about the templating syntax used in this example, see the template guide.

    Path

    • format: theme/*/partials/**/*
    • file extensions: .html

    Partials are very similar to layouts: they share the same syntax, can call other partials within themselves, and have access to the same data/helpers during rendering. Partials are differentiated from layouts in that layouts call on partials to build the page, but partials cannot call on layouts.

    1.   <div class="row">
    2.     <div class="column">
    3.       <img src="{{page.logo}}">      <- can access the same page data the parent layout
    4.     </div>
    5.     <div class="column">
    6.       {(partials/header_nav.html)}   <- partials can call other partials
    7.     </div>
    8.   </div>
    9. </header>

    Path

    • format: theme/*/theme.conf.yaml
    • file extensions: .yaml

    Description

    The theme configuration file determines color, font, and image values that a theme makes available to templates and CSS during rendering. It is required in the root of every theme. There can only be one theme configuration file. It must be named theme.conf.yaml and it must be a direct child of the themes root directory.