Adding permalink to your Jekyll site

Permalink provides us easy way of sharing specific part of our blogs to the rest of the world. However, vanilla Jekyll only support permalinks to each posts, not sections, images, or paragraphs.

In this site, I’ll only add permalink to the headings. In html terms: permalinks will be added to h1, h2, h3, h4, h5, h6.

Others html elements like paragraphs p or images p > img can also be permalinked, however they need more java scripting. For more details as how to permalink them, see this blog post by Brian Drupieski.

How to …

To add permalinks, we need to add the following to _layouts/post.html:

<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>

<script>
 $(function() {
         anchors.options.visible = 'always';
   <!--  anchors.options.icon = '¶'; -->
         anchors.add('.post-content > h1, h2, h3, h4, h5, h6');
 });
</script>

I’ve decided to use a CDN to add anchor.js to our site, this means we need to have internet connection to use it. Another way is to embed them directly to our site. First, we need to download anchor.min.js and jquery-3.6.0.min.js and put them in assets/global/. Then change:

<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   

to:

<script src="https://chengcheng-xiao.github.io/assets/global/jquery-3.6.0.min.js"></script>
<script src="https://chengcheng-xiao.github.io/assets/global/anchor.min.js"></script>

That’s it! You are all done! Enjoy sharing your knowledge to the world.

My sites uses a paragraph (‘p’ in html) to display logo. This means it will also be permalinked.

To overcome this I need to change the following in _includes/header.html:

<p class="logo"><a href="/">Lost Electron</a></p>

to:

<div class="logo"><a href="/">Lost Electron</a></div>