101591 Views
79842 Views
45596 Views
44332 Views
40991 Views
33419 Views
Raspberry Pi Time machine
Now Ad-Free
Guiding Light
Sync Files on your Pis, with Syncthing
NextCloud
Buddy Jr.
Introduction to FreeCAD for Beginners
Building a Robot Arm with Raspberry Pi and PCA9685
Building User Authentication for Static Sites with FastAPI
Mastering Pydantic for Robust Data Validation
Mastering Markdown for Documentation with Jekyll
Introduction to Rust
KevsRobots Learning Platform
50% Percent Complete
By Kevin McAleer, 3 Minutes
Jekyll’s layouts and includes are powerful tools that allow you to abstract common website elements and reuse them across your site. This not only makes your site more consistent but also significantly speeds up development and maintenance.
Layouts are templates that wrap around your content. They’re used to define a common structure for your pages or posts.
_layouts
default.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ page.title }}</title> </head> <body> {{ content }} </body> </html>
In this example, {{ page.title }} dynamically inserts the title of the page or post using it, and {{ content }} is where Jekyll inserts the content from your Markdown file.
{{ page.title }}
{{ content }}
In your Markdown file’s front matter, specify the layout you want to use:
--- layout: default title: My First Post ---
Includes allow you to insert snippets of code into your layouts or content. They’re perfect for reusable components like headers, footers, and navigation bars.
_includes
header.html
<header> <nav> <ul> <li><a href="{{ site.baseurl }}/about">About</a></li> <li><a href="{{ site.baseurl }}/contact">Contact</a></li> </ul> </nav> </header>
To use an include in a layout or another include, use the include tag:
include
{% include header.html %}
default
footer.html
header
footer
< Previous Next >