Layouts in Jekyll define the structure and appearance of pages, allowing for consistent design across your site while accommodating different content types. Below, you’ll find examples of each layout, along with configuration details and usage instructions.
This layout is ideal for documentation, and follows the document style on github docs
_config.yml
collections:
docs:
output: true
sort_by: order
defaults:
- scope:
path: "" # an empty string here means all files in the project
type: "docs"
values:
layout: "docs"
image: /assets/img/default.png # The default image used for social and posts.
permalink: /docs/:path
toc: true
markdown front matter
---
title: Documentation
layout: docs
---
This layout includes site.nav data, your repo card
_config.yml
repo_info: true # Show the information for the source of this project
user_metadata: true # Show the metadata associated with the user
profile_link: true # Show a link to the github profile for the user
####################
# Navigation links
nav:
- name: Topbar
url: /topbar.html
- name: Appbar
url: /appbar.html
- name: Sidebar
url: /sidebar.html
- name: Stacked
url: /stacked.html
markdown front matter
---
layout: landing
---
This layout provides a linktree-like view for your webpage.
_config.yml
####################
# List of links for link cards
links:
- name: Example page with topbar
url: /page/topbar
thumbnail: /media/topbar-icon.png
- name: Example page with appbar
url: /page/appbar
thumbnail: /media/appbar-icon.png
- name: Example page with sidebar
url: /page/sidebar
thumbnail: /media/sidebar-icon.png
- name: Example page with header stacked
url: /page/stacked
thumbnail: /media/stacked-icon.png
- name: Example custom background
url: /background
thumbnail: /media/icon-bg.png
- name: Example Linktree page
url: /linktree
thumbnail: /media/links.png
- name: Example Profile page
url: /profile
thumbnail: /media/user-image.jpg
- name: Example Reposotiries page
url: /repositories
thumbnail: /media/repositories.png
markdown front matter
---
layout: linktree
title: Linktree
links:
- name: Example page with topbar
url: /page/topbar
thumbnail: /media/topbar-icon.png
- name: Example page with appbar
url: /page/appbar
thumbnail: /media/appbar-icon.png
- name: Example page with sidebar
url: /page/sidebar
thumbnail: /media/sidebar-icon.png
- name: Example page with header stacked
url: /page/stacked
thumbnail: /media/stacked-icon.png
- name: Example custom background
url: /background
thumbnail: /media/icon-bg.png
- name: Example Linktree page
url: /linktree
thumbnail: /media/links.png
- name: Example Profile page
url: /profile
thumbnail: /media/user-image.jpg
- name: Example Reposotiries page
url: /repositories
thumbnail: /media/repositories.png
A profile page similar to the one on github
_config.yml
# The user/project avatar. If not set the avatar of the project owner will be used.
user_image: /media/user-image.jpg
repo_info: true # Show the information for the source of this project
user_metadata: true # Show the metadata associated with the user
profile_link: true # Show a link to the github profile for the user
markdown page
---
layout: profile
---
A view of all of your repositories
_config.yml
###################
# Repositories to show on home page
repositories:
sort_by: stars
# sort_by options:
# - pushed
# - stars
limit: 24
exclude:
archived: true
forks: true
repositories:
# - list of respositories to exclude
markdown page
---
layout: repositories
title: My Repositories
---
An index view of all of your tags
_config.yml
# jekyll-tagging settings
# Include `gem jekyll-tagging` in your gemfile
tag_page_layout: tags
tag_page_dir: tags
# related
related_by: "tags or categories"
markdown page
---
title: Tags
layout: tag_index
---
An index view of all of your categories
_config.yml
# jekyll-category-pages settings
category_path: category
category_layout: category_layout.html
markdown page
---
title: Category
layout: category_index
---