Layouts

This page is under construction. An updated version will be available soon.

Layouts are construction templates for HTML pages, each describing a specific step of processing. The resulting HTML code is created by applying several layouts in a specific order: inheritance.

Layouts

Jekyll applies a strategy of inheriting content along a line of inheritance to layouts. The unique content is created via the layout of the respective page type. For example, page for regular content pages or post for blog posts. Content shared across all pages is described using the default layout. As a very simple picture of processing pages with Jekyll can be the following (inheritance) succession are understood:

Inheritance of Layouts

  HTML-Code < Jekyll < layout-default < layout-page < Source code (Asciidoc)

The Jekyll builder engine first reads the source code of a webpage, the page about_site for example. The source of this page is connected with the layout page. This construction template processes only the specific parts of a page: the content portion. The layout page is associated with layout default to add all the general components, like CSS- and Javascript files, needed for a full webpage.

The construction step via the default layout complements all general components of a website. It connects (inherits) the results from the (base) layout page with the results of processing from the (general) layout default to the final resulting HTML code.

Layouts describe which programs are called and in which order. These programs are associated with configuration data that describes the details of the work step in question. All Configuration data is in the project directory _data. In this data directory, you will find a folder layouts containing control files with the same name for all available layouts.

Table 1. Base Layouts
Layout	Configuration	Description
`default`	`_data/layouts/default.yml`	All general components of a website are generated via the `default` layout. General components include all resources (assets) such as CSS and Javascript data responsible for the design and the dynamics of a website.
`home`	`_data/layouts/home.yml`	All individual components of the homepage (landing page index.html) are generated via the details specified in the layout `home`. The content is adjustable individually via the frontmatter of the source code. The adjustable components include the (J1) modules used and HTML metadata such as e.g. `description` and `keywords`.
`page`	`_data/layouts/page.yml`	All individual components of a website of type page are generated via the `page` layout. The content is adjustable individually via the frontmatter of the source code. The adjustable components include the (J1) modules used and HTML metadata such as e.g. `description` and `keywords`.
`post`	`_data/layouts/post.yml`	All individual components of a website of type post are generated via the `post` layout. The content is adjustable individually via the frontmatter of the source code. The adjustable components include the (J1) modules used and HTML metadata such as e.g. `description` and `keywords`.
`raw`	`_data/layouts/raw.yml`	Layout used for content of type raw (rendered content). This layout can be used for all pages, the content is already rendered as HTML.