Published 2020-10-03.
Last modified 2023-05-18.
Time to read: 1 minutes.
jekyll_plugins
collection, categorized under Jekyll.
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
-
Add the following to
Gemfile
:
Shellgroup :jekyll_plugins do
gem 'jekyll_draft'
end -
From your Jekyll site's top-level directory, type:
Shell$ bundle
- 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
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.
-
To run the demo freely from the command line, type:
Shell$ demo/_bin/debug -r
- View the generated website at
localhost:4444
.