Plain page
This example shows a plain page. The layout and header type are set as
defaults in _config.yml:
Chulapa demos
All demos in one place
Choose a starter example to see a blog, technical blog, portfolio or project configuration. Each starter demo shows its YAML header.
This is an example of how to create an index for a specific collection, in this
case demo.
The following front matter selects the demo collection, orders it by file
name ascending so the numbered demos appear first, and raises the default
limit of 10 cards to 100:
---
layout: indexcategory
title: "Demos"
subtitle: All demos in one place
permalink: /demo
include_collection: demo
index_sort: path
index_sort_asc: true
index_items: 100
og_image: /assets/img/site/banner-demos.png
---
Plain page with image
Expanding the layout
This example shows a plain page with an image.
Post header
This page shows the post header with the default author set on your
_config.yml file. It also shows the date on top of the content.
Use MathJax
Project page with a hero header
This page shows a hero header with project buttons, MathJax and a modified
date.
Landing page
First impression is the last impression
This page shows the hero header with an image with the landingpage layout.
A guest author
And with a new project
This page shows how a contributor could be added to your blog. In this case
Octocat is telling us about its plans for the next few months…
Guest author
But no location or image
This page shows how a contributor could be added to your blog, but without an
avatar or location. Octocat is shy today.
Layout minimal
A blank canvas for you
Use the minimal layout with HTML to unleash your creativity
Image on header
Transparencies work better
This page shows the image header. It is recommended to use a .png file with
a transparent background to blend into the header. Choose dimensions suitable
for the displayed image; transparency is optional.
Plain page with no tags
Corner case
This page enables tag and category badges but supplies neither tags nor
categories. No badges are rendered.
Related
This page enables the related cards with show_related: true. Related
documents appear at the bottom, selected by shared tags and collection.
See the layout options.
Related and Random
This page enables both related and random cards. You can use either or both.
Mermaid diagrams
Flowcharts and sequence diagrams from Markdown
Mermaid support is available in the development version after v2.1.0.
Follow Add a Mermaid diagram to enable diagrams on your
page. See the Mermaid reference for browser
requirements, security restrictions and fallback behavior. The diagrams below
show a publishing workflow and how rendering works in the browser.
PhotoSwipe image galleries
Open, zoom and explore images
PhotoSwipe support is available in the development version after v2.1.0.
Follow Enable PhotoSwipe on a gallery to add the viewer
to an existing gallery or
carousel. No page YAML setting is needed. Each
gallery opens its own sequence; images remain ordinary links when JavaScript is disabled or the library cannot load.
My journal starter
Stories, places and everyday discoveries
This annotated example shows home-page source and sample content from
personal-blog.
It runs inside the documentation site, using this site’s skin and configuration;
it is not the standalone example’s home page. The full folder includes its own
Gemfile and _config.yml, with no publishing workflow.
My portfolio starter
Selected projects and the work behind them
This annotated example shows home-page source and sample content from
portfolio.
It runs inside the documentation site, using this site’s skin and configuration;
it is not the standalone example’s home page. The full folder includes its own
Gemfile and _config.yml, with no publishing workflow.
My project starter
An open source project with a clear starting point
This annotated example shows home-page source and sample content from
project.
It runs inside the documentation site, using this site’s skin and configuration;
it is not the standalone example’s home page. The full folder includes its own
Gemfile and _config.yml, with no publishing workflow.
Engineering notes starter
Code examples, diagrams and practical tutorials
This annotated example shows home-page source and sample content from
technical-blog.
It runs inside the documentation site, using this site’s skin and configuration;
it is not the standalone example’s home page. The full folder includes its own
Gemfile and _config.yml, with no publishing workflow.