Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
43 lines (27 sloc) 1.47 KB
title
Jekyll

The Jekyll integration is pretty similar to the Vanilla approach.

Just you need to be sure to load the script. A good place to put it in _layouts/default.html:

<script src="//cdn.jsdelivr.net/npm/@microlink/vanilla@latest/umd/microlink.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    microlink('.card-preview')
  });
</script>

In the code above, we are associating microlink cards with the class name card-preview.

So now, when we write a new jekyll post, we are going to associate card-preview class name with the links we want to convert into beauty preview

[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview}

Then the link will be rendered as

You can pass any API Parameter as data-* field

[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview data-size="large"}

It is equivalent to pass {size: 'large'} with the Vanilla integration

In case you want to customize the style, it should be done using CSS Classnames.

You can’t perform that action at this time.