This post has no title specified in the YAML Front Matter. Jekyll should auto-generate a title from the filename.

Title should not overflow the content area

A few things to check for:

• Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
• Check the browser window / tab title.
• If you are a theme developer, check that this text does not break anything.

The following CSS properties will help you support non-breaking text.

-ms-word-wrap: break-word;
word-wrap: break-word;

Good highlighting:

str = ARGV.first
if str
  str = str.b[/\A_(.*)_\z/, 1]
  if str and Gem::Version.correct?(str)
    version = str
    ARGV.shift
  end
end

Good (but dumb) highlighting:

str = ARGV.first
if str
  str = str.b[/\A_(.*)_\z/, 1]
  if str and Gem::Version.correct?(str)
    version = str
    ARGV.shift
  end
end

Bad highlighting:

str = ARGV.first
if str
  str = str.b[/\A_(.*)_\z/, 1]
  if str and Gem::Version.correct?(str)
    version = str
    ARGV.shift
  end
end

This post has many categories.

This post has many tags.

Nested and mixed lists are an interesting beast. It’s a corner case to make sure that

• Lists within lists do not break the ordered list numbering order
• Your list styles go deep enough.

Ordered – Unordered – Ordered

1. ordered item
2. ordered item
   • unordered
   • unordered
     1. ordered item
     2. ordered item
3. ordered item
4. ordered item

Ordered – Unordered – Unordered

1. ordered item
2. ordered item
   • unordered
   • unordered
     • unordered item
     • unordered item
3. ordered item
4. ordered item

Unordered – Ordered – Unordered

• unordered item
• unordered item
  1. ordered
  2. ordered
     • unordered item
     • unordered item
• unordered item
• unordered item

Unordered – Unordered – Ordered

• unordered item
• unordered item
  • unordered
  • unordered
    1. ordered item
    2. ordered item
• unordered item
• unordered item

Task Lists

• Finish my changes
• Push my commits to GitHub
• Open a pull request

This post should display a header image, if the theme supports it.

Featured image is an external asset and should load.

This post should display a header image, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests a horizontal header image.

This post should display a header image, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests a vertical header image.

This post should display a header with an overlay image, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests overlay header images.

Overlay filter

You can use it by specifying the opacity (between 0 and 1) of a black overlay like so:


excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "More Info"
      url: "https://unsplash.com"

Or if you want to do more fancy things, go full rgba:

This post should display a header with an overlay image and custom tagline, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests overlay header images with custom page.tagline.

tagline: "This is a custom tagline content which overrides the default page excerpt."
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"

This post should display a header with a solid background color, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests overlay headers.

This post has a header image with an OpenGraph override.

header:
  image: /assets/images/page-header-image.png
  og_image: /assets/images/page-header-og-image.png

This post has a header image with an OpenGraph override.

header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  og_image: /assets/images/page-header-og-image.png
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Learn more"
      url: "https://unsplash.com"

This post has a teaser image with an OpenGraph override.

header:
  teaser: /assets/images/page-header-teaser.png
  og_image: /assets/images/page-header-og-image.png

Check for long titles and how they might break a template.