-
-
Notifications
You must be signed in to change notification settings - Fork 1
Layouts Directory
The _layouts
directory in a Jekyll website contains the template files used to define the structure and layout of different types of pages on the site. Layouts are a core feature of Jekyll, providing a way to wrap content in a consistent, reusable HTML structure. Each layout file is a template that can be applied to multiple pages or posts.
-
default.html
: The base layout applied to most pages. It includes the basic HTML structure, header, footer, and placeholders for including additional content. All other layouts typically extend this layout. -
post.html
: A specialized layout for individual blog posts. It typically includes styling and structure specific to blog content, like post metadata (date, author, tags), a comment section, and navigation to other posts. -
page.html
: Used for standard pages such as 'About Us', 'Contact', and other similar pages. This layout is simpler compared topost.html
, focusing more on static content. -
home.html
: The layout for the site’s homepage. It often includes elements like a hero section, featured content, latest posts, or other dynamic sections specific to the homepage. -
archive.html
: A layout for archive pages that list posts by date, category, or tag. It's typically a list or grid view of posts with links to individual posts. -
category.html
andtag.html
: These are similar toarchive.html
but specifically for listing posts by categories or tags. -
custom.html
: An example of a custom layout for specific needs or unique page designs that don't fit into other standard layouts.
- To apply a layout to a page or a post, specify the layout in the front matter. For example,
layout: post
will apply thepost.html
layout to a page. - Layouts can inherit from each other. For example, most layouts will include the same header and footer by inheriting from the
default.html
layout.
- Consistency: Ensure a consistent look and feel across the site by using layouts effectively.
-
DRY Principle: Avoid repetition. Common elements like headers, footers, and navigation should be included in the
default.html
layout to be shared across all layouts. - Comments: Use comments within the layout files to explain sections and any specific logic or conditions.
- Semantic HTML: Use semantic HTML tags for better readability, SEO, and accessibility.
- When making changes to common elements like the header or footer, update the
default.html
layout so that the changes reflect across all pages using this layout. - Test layout changes across different page types to ensure there are no unintended side effects.
- Regularly review and refactor the layouts to improve performance, maintainability, and compliance with web standards.