Page layout

Site’s configuration file:
```
_config.yml
```
Set default values for both site and page-specific configuration variables.
Page preamble section of markdown files:
```
**/*.md
```
Set custom values for page-specific configuration variables. Page configuration variables defined in page preamble section of markdown files override page configuration variables defined in site’s configuration file.

Page layout components can use their own configuration files to serve their own needs. For example, that is the case of Bits, Copyright note, Navigation bar, Project, Shortcuts, and Social network components.

Page layout configuration files are organized in the following directory structure:

.
├── README.md
├── public/
└── src/
   ├── _data/
   ├── _includes/
   ├── _layouts/
   ├── _config.yml
   └── index.md

Path	Description
`./README.md`	File describing the site purpose.
`./public/`	Directory where the final site is published. This is the directory you expose to your audience.
`./src/_config.yml`	The site configuration file. Here is where you set your site global defaults.
`./src/_data/`	Directory to organize data structures files.
`./src/_includes/`	Directory to organize reusable HTML elements and documentation topics.
`./src/_layouts/`	Directory to organize site presentation layouts.
`./src/index.md`	The site home page.

Configuration variables

Page layout configuration variables are written in YAML format. The default values for page configuraiton variables are set in the site configuraiton file. You can customize page configuraiton variable default values in the page preamble.

For example, consider the page configuration variable named with_toc. Its default value is set to false in the site configuration file:

              defaults:
  - scope:
      path: "" # an empty string here means all files in the project.
    values:
      with_toc: false

            

Then, a customized value for a particular page can be set to true in that page preamble section:

              ---
with_toc: true
---

            

The following table describes available configuration variables you can use in the page preamble section:

Name	Description
`with_announcements`	The page layout switcher. Possible values are `true` or `false` (default). When the value is `true`, you need to provide the `with_announcements_data` variable with the announcements information you want to present.
`with_announcements_data`	The page layout configuration. This variable accepts a list of announcements you want to present. When more than one announcement is provided, they are presented in the same order they were entered in the list.
`with_highlight`	When it is not `false`, page layout includes the highlight.js library to highlight blocks of code using the value passed as theme name. By default, `stackoverflow-light` theme is used.
`with_project`	When set to `true`, render the project presentation template. By default, it is set to `false` and project presentation template is not rendered.
`with_project_data`	Custom data structure for project presentation template. When it is defined, it overrides all values set in component configuration file.
`with_manifestation`	When the value is an empty string (`""`), the manifestation is not rendered aside the logo. When the value is a `"string"`, that string is considered to be the manifestation name and is rendered aside the logo.
`with_breakingnews`	When the value is an empty list (`[]`), the breaking news section is not rendered. When the value is a non-empty list (`[{"title": "", "content":"", "url":""}]`), the breaking news is rendered, one for each item in the list. All breaking news properties in the dictionary are optional. However, you probably want to at least `title` to provide a meaningful message.
`with_breadcrumbs`	When the value is `true`, the page breadcrumbs are rendered. When the value is `false` the page breadcrumbs are not rendered.
`with_locales`	When the value is an empty list (`[]`), the language selector is not visible and jekyll-site-l10n does not extract nor create translated HTML files. When the value is a list of language codes (e.g., `["es", "fr", "it"]`) the language selector is visible and jekyll-site-l10n does extract and create translated HTML files.
`with_title`	When the value is `true`, the page title is rendered. When the value is `false` the page title is not rendered.
`with_toc`	When the value is `true`, the page table of content are rendered. When the value is `false` the page table of content is not rendered.
`with_artwork`	When the value is `"path/to/image.png"`, the page artwork is rendered. In this example, `path/to/image.png` must be relative to `/assets/img/` to display the image correctly. When the value is `false` the page artwork is not rendered.
`with_content`	When the value is `true`, the page content is rendered. When the value is `false` the page content is not rendered.
`with_logo`	Path to site’s logo image in SVG format. The path is relative to `{{ site.url }}{{ site.baseurl }}/assets/img/`.
`with_motif`	Path to site’s artistic motif in PNG format. The path is relative to `{{ site.url }}{{ site.baseurl }}/assets/img/`.
`with_preamble`	When the value is `true`, the page preamble is rendered. When the value is `false` the page preamble is not rendered.
`with_shortcuts`	When the value is `true`, the page shortcuts are rendered. When the value is `false` the page shortcuts are not rendered.
`with_social`	When the value is `true`, the page social media are rendered. When the value is `false` the page social media are not rendered.
`with_sponsors`	When the value is `true`, the page sponsors are rendered. When the value is `false` the page sponsors are not rendered.
`with_copyright`	When the value is `true`, the page copyright is rendered. When the value is `false` the page copyright is not rendered.
`with_finale`	When the value is `true`, the page finale (i.e., site title plus site description) is rendered. When the value is `false` the page finale is not rendered.
`with_datatables`	When the value is `true`, page layout includes the datatables.js library to allow searching inside tables. When the value is `false` (default), tables do not show searching features.
`with_content_width`	Set the content elements width using Bootstrap column breaks. By default, content elements are presented in a wide view (e.g., `col`). To reduce the content presentation width, set the `col col-lg-8` value, or any other column break definition that fits your needs.