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 is _layouts/default.html:
<script src="//cdn.jsdelivr.net/npm/@microlink/[email protected]/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 previews.
[](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 a data-* field.
[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview data-size="large"}
It's the equivalent to passing {size: 'large'} with the Vanilla integration.
If you want to customize the style, it can be done using CSS Classnames.

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 is _layouts/default.html:
<script src="//cdn.jsdelivr.net/npm/@microlink/[email protected]/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 previews.
[](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 a data-* field.
[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview data-size="large"}
It's the equivalent to passing {size: 'large'} with the Vanilla integration.
If you want to customize the style, it can be done using CSS Classnames.

By using this website you agree to ourprivacy.