Mike Slinn
Mike Slinn

jekyll_draft

Published 2020-10-03. Last modified 2023-05-18.
Time to read: 1 minutes.

This page is part of the jekyll_plugins collection, categorized under Jekyll.
jekyll_download_link Version
GitHub project for jekyll_download_link

This Jekyll plugin provides two Liquid filters: is_draft and draft_html.

Jekyll has various ways of specifying that a page or document is visible when the website is published in production mode. The Jekyll documentation is scattered and incomplete regarding this topic. This plugin’s filters provide a simple means for marking draft pages in development mode.

Installation

  1. Add the following to Gemfile:
    Gemfile
    group :jekyll_plugins do
      gem 'jekyll_draft'
    end
  2. From your Jekyll site's top-level directory, type:
    Shell
    $ bundle
  3. Restart Jekyll.

Usage

is_draft

This filter detects if a page is invisible when published in production mode, and either returns true or false. 

{% assign isDraft = page | is_draft %}

{% if isDraft %}
  <div class="bg_yellow draftPost">— Draft —</div>
{% endif %}

draft_html

This filter generates HTML to display if a page is invisible when published in production mode. If the page is not a draft then the empty string is returned. The generated HTML for draft pages is:
" <i class='jekyll_draft'>Draft</i>"

Here is a code snippet that shows the filter in use: 

{% assign docs = site.myCollection | sort: "order" %}
<ol id="articleTitles">
  {% for doc in docs %}
    {% assign draft = doc | draft_html %}
    <li><a href="{{doc.url}}" class="articleTitle">{{doc.title}}{{draft}}</li>
  {% endfor %}
</ol>

CSS

You can modify the definitions of these CSS classes to suit. 

.bg_yellow {
  background-color: yellow;
}

.draftPost {
  text-align: center;
  font-style: italic;
  width: 15ch;
  position: absolute;
  top: 7px;
  left: 0;
}

.jekyll_draft {
  background-color: #fefeab;
  padding-bottom: 2px;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 2px;
}

Invoking From Another Jekyll Plugin

Ruby
require 'jekyll_draft'

puts 'Found a draft' if Jekyll::Draft.is_draft post

draft = Jekyll::Draft.draft_html post

Demo

A demo / test website is provided in the demo/ directory. It can be used to debug the plugin or to run freely. Please examine the HTML files in the demo to see how the plugin works.

  1. To run the demo freely from the command line, type:
    Shell
    $ demo/_bin/debug -r
  2. View the generated website at localhost:4444.