Author : MD TAREQ HASSAN

About jekyll

http://jekyllbootstrap.com/lessons/jekyll-introduction.html

Jekyll commands

Start jekyll site

bundle exec jekyll serve

bundle exec jekyll serve --livereload

bundle exec jekyll serve --watch --incremental

bundle exec jekyll serve --watch --incremental --livereload

Liquid

https://shopify.github.io/liquid/

Front matter

---
layout: 
title: 
description:
author: HASSAN MD TAREQ
topic: 
topicSlug: 
topicSlugId: 
pageDataKey: 
isTopicIndex: 
toc: 
---

Example

---
layout: topic
title: Jekyll
description:
author: HASSAN MD TAREQ
topic: Cheatsheet
topicSlug: cheatsheet
topicSlugId: ""
pageDataKey: jekyll
isTopicIndex: false
toc: true
order: 2
---

Data

Rendering images from data file

_data/foo.yml

bar:
  stepScreenshots:
      baz:
        imageMeta: BAZ image
        imageLinks:
          - https://place-hold.it/300x500?text=HOVERMIND&fontsize=23
          - https://place-hold.it/300x500?text=HASSAN&fontsize=23

_includes/stepSreenshots.html


{% assign topicData = site.data[include.dataFileName] %}

{% assign pageDataDict = topicData[include.pageDataKey] %}

{% assign screenshotDataDict = pageDataDict[site.screenshotDataKey] %}

{% assign sectionDataDict = screenshotDataDict[include.sectionDataKey] %}

{% assign imageAltPrefix =  sectionDataDict[site.imageMetaKey] %}

{% if sectionDataDict[site.imageLinksKey] %}

{% assign imageLinks = sectionDataDict[site.imageLinksKey] %}

{% for imageLink in imageLinks %}

{% capture imageAlt %}{{ imageAltPrefix }} Step {{ forloop.index }}{% endcapture %}

**Step-{{ forloop.index }}**

<img src ="{{ imageLink }}" alt ="{{ imageAlt }}"  width = "98%"/>

{% endfor %}

{% endif %}

Usage in bar.md

---
layout: topic
title: Bar
description:
author: HASSAN MD TAREQ
topic: Foo
topic-slug: foo
topicSlugId: ""
pageDataKey: bar
isTopicIndex: false
toc: true
---

Rendering 'Bar' images

 {% include stepScreenshots.html dataFileName=page.topicSlug pageDataKey=page.pageDataKey sectionDataKey="baz" %}

Page order

Based on: https://stackoverflow.com/a/33983971/4802664

Add order page variable in front matter

---

// ... ... ...

order: 7
---

Use order to sort site.pages


{% assign sortedPages = site.pages | sort:"order" %}

{% for p in sortedPages %}     

	<li>
		<a href="{{p.url | replace:'.html'}}">{{ p.title }}</a>
	</li>

{% endfor %}

Filter

Filtering and sorting


{% assign categories = site.pages | where_exp: "item", "item.category != nil" | group_by: "category" %}

{% assign sortedCategories = categories | sort: "name" %}

{% for c in sortedCategories %}

{% endfor %}

Generate main menu automatically

Use ‘category’ in front-matter of all index pages (index pages only)


---
layout: abc
title: Foo
description: Foo bar bazz
author: HASSAN MD TAREQ
category: foo-bar
... : ...
---

_includes/top-menu.html


<div class="collapse navbar-collapse" id="navbarSupportedContent">

	<button id="sidebarToggle" class="sidebarToggle btn mx-0 rounded-0 shadow-none position-fixed bg-dark text-white" style="height: auto; width: max-content;">⇋<span id="smallDeviceDetector"></span></button>&nbsp;

	<ul class="nav navbar-nav ml-auto">
	
		<li class="nav-item">&nbsp;</li>
	
		<li class="nav-item">
			<a class="nav-link" href="{{ site.url }}"><i class="fa fa-home"></i></a>
		</li>
		
		{% assign categories = site.pages | where_exp: "item", "item.category != nil" | group_by: "category" %}
		
		{% assign sortedCategories = categories | sort: "name" %}

		{% for c in sortedCategories %}
			
			<li class="dropdown nav-item">
			
				{% assign words = c.name | split: '-' %}
				
				{% capture menuTitle %}
				
					{% for word in words %}
					
						{{ word | capitalize }}
					
					{% endfor %}
					
				{% endcapture %}
				
				<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ menuTitle }} <span class="caret"></span></a>
				
				<ul class="dropdown-menu">
					
					{% assign sortedPages = c.items | sort: "topic" %}
				
					{% for indexPage in sortedPages %}
						<li class="border"><a href="/{{ indexPage.topicSlugId }}" class="nav-link text-dark">{{ indexPage.topic }}</a></li>
					{% endfor %}
				</ul>
			<li>

		{% endfor %}
		
		<!-- permanent pages links here -->
		
	</ul>
</div>

Now use top menu in layout

Sentence to slug


{% assign slug = sentence | slugify %}

<a href="/{{ slug }}">{{ sentence }}</a>

Slug to sentence


{% assign words = fooUrl | split: '-' %}

{% capture allCapsWordsSentence %}

	{% for word in words %}
	
		{{ word | capitalize }}
	
	{% endfor %}
	
{% endcapture %}

{{ allCapsWordsSentence }}

Add Google AdSense to Netlify site

Example of AdSense code

<!-- START: Google AdSense -->
<script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- END: Google AdSense -->

Downloading PDF from one drive

link

https://onedrive.live.com/redir?resid=xxxxxxxxx&authkey=yyyyyyyyy&page=Download

Ternary operator hack

<div class="{% if product.available %}available{% else %}unavaialble{% endif %}">

   ... content ...
   
</div>

Details: https://github.com/Shopify/liquid/issues/236

Include markdown code from _include folder

Use: {{ ... | markdownify }}

footer.md


[hovermind.com](https://hovermind.com/)
&mdash;
[Github Repository Link](https://github.com/hovermind)
&mdash;
This site is for "Learn how to learn and be productive"

foo-page.md


<div id="footer" class="section text-white">

	<div class="container">

		{% capture foottext %} {% include footer.md %} {% endcapture %}
		
		{{ foottext | markdownify }}

	</div>
  
</div>

Loop index

https://shopify.dev/docs/themes/liquid/reference/objects/for-loops#forloop-index

Modulo remailder


{% for x in items %}

**Index: {{ forloop.index }}**

{% assign remainder = forloop.index | modulo: 2 %}
{% if remainder == 0 %}
   do something for even index
{% endif %}

{% endfor %}

Links:

Plugin

Plugin in Gemfile:

Custom plugin with “.rb” file:

Step-1: Gemfile

source "https://rubygems.org"

# gem "github-pages", group: :jekyll_plugins
gem "jekyll", group: :jekyll_plugins

group :jekyll_plugins do

  gem "kramdown-parser-gfm"
end

# ... ... ...

Install gem (kramdown-parser-gfm)

bundle install

Step-2: _config.yml

# ... ... ...

plugins:
  - jekyll-feed
  - jekyll-seo-tag
  - jekyll-toc
  - jekyll-sitemap

# Enable safe mode
safe: false

# ... ... ...

Step-3: put .rb file (i.e. download file_exists.rb in _plugin folder

Now, use custom tag (“file_exists” from file_exists.rb)


{% capture snippet-exists %}{% file_exists _includes/{{code-snippet-file | strip}} %}{% endcapture %}

{% if snippet-exists == 'true' %}

{% include {{ code-snippet-file | strip }} %}

{% endif %}