Conditional Resource Inclusion for Jekyll
Not every Jekyll post needs to load every javascript library.
Use a header template containing liquid control flow tags,
along with front-matter variables, to control the inclusions of things
like .js
and .css
page resources.
Suppose you want to enlarge and magnify an image on-click, also darkening the rest of the page in the process (a lighthouse effect). To accomplish this, you might include a library such as lightbox2 in your page and add a data-lightbox
attribute to your image’s href tag.
(The following examples were implemented in the PreferenceFragmentCompat post)
<a data-lightbox="screenshot_1" href="https://sineausr931.github.io/SamplePreferences/doc/Screenshot_1614285898.png">
<img src="https://sineausr931.github.io/SamplePreferences/doc/Screenshot_1614285898.png"/>
</a>
Three steps are required to make the above HTML sample work. First, place the code and images used by lightbox somewhere under
your site’s assets
directory. The contents of that directory will be copied to _site
when the site is next built.
root
├── _includes/
│ └── head.html
└── assets/
└── lightbox/
├── images/
│ ├── close.png
│ ├── loading.gif
│ ├── next.png
│ └── prev.png
├── lightbox-plus-jquery.js
└── lightbox.css
Next, modify head.html
to conditionally include the <link>
and <script>
tags for lightbox libraries
only when header variable page.load_lightbox == true
. Since lighbox requires jquery, I was lazy and
used the lightbox-plus-jquery version.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{%- seo -%}
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
{%- feed_meta -%}
{%- if jekyll.environment == 'production' and site.google_analytics -%}
{%- include google-analytics.html -%}
{%- endif -%}
{%- if page.load_lightbox == true -%}
<link href="/assets/lightbox/lightbox.css" rel="stylesheet" />
<script src="/assets/lightbox/lightbox-plus-jquery.js"></script>
{%- endif -%}
</head>
Last, add load_lightbox: true
to Jekyll’s header variables at the top of each post where you wish to use lightbox.
---
layout: post
title: "PreferenceFragmentCompat"
date: 2021-02-17 00:00:00 -0800
tags: Android PreferenceFragmentCompat PreferenceManager
load_lightbox: true
---
Reference