Сниппеты для сайта на Jekyll

<!-- 
     Before implementing this Jekyll snippet make sure
     1. "plugins: jekyll-paginate" is added in the _config.yml file.
     2. for loop has "paginator.post" instead of "site.posts".
-->

{% if paginator.total_pages > 1 %}
<div class="wj-pagination"> 
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
  {% else %}
    <span>&laquo; Prev</span>
  {% endif %}

  {% for page in (1..paginator.total_pages) %}
    {% if page == paginator.page %}
      <span class="active">{{ page }}</span>
    {% elsif page == 1 %}
      <a href="/">{{ page }}</a>
    {% else %}
      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
    {% endif %}
  {% endfor %}

  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
  {% else %}
    <span>Next &raquo;</span>
  {% endif %}
</div>
{% endif %}

<style>
.wj-pagination {
    text-align: center;
}
.wj-pagination a, .wj-pagination span {
    padding: 7px 18px;
    border: 1px solid #eee;
    margin-left: -2px;
    margin-right: -2px;
    background-color: #ffffff;
    display: inline-block;
}
.wj-pagination a:hover {    
    background-color: #f1f1f1;
    color: #333;
}
</style>

<!-- 
     After implementing this contact form make sure
     1. you have defined "email: youremail@email.com" in _config.yml file.
     2. you verify your form on formspree.io.
-->

<form class="wj-contact" action="https://formspree.io/{{site.email}}" method="POST">
    <input type="text" name="email" placeholder="Email Address">
    <textarea type="text" name="content" rows="10" placeholder="Message"></textarea>
    <input type="hidden" name="_next" value="<REDIRECTION LINK> ">
    <input type="hidden" name="_subject" value="New Contact Form Submission">
    <input type="text" name="_gotcha" style="display:none">
    <input type="submit" value="Submit">
</form>

<style>
form.wj-contact input[type="text"], form.wj-contact textarea[type="text"] {
    width: 100%;
    vertical-align: middle;
    margin-top: 0.25em;
    margin-bottom: 0.5em;
    padding: 0.75em;
    font-family: monospace, sans-serif;
    font-weight: lighter;
    border-style: solid;
    border-color: #444;
    outline-color: #2e83e6;
    border-width: 1px;
    border-radius: 3px;
    transition: box-shadow .2s ease;
}
form.wj-contact input[type="submit"] {
    outline: none;
    color: white;
    background-color: #2e83e6;
    border-radius: 3px;
    padding: 0.5em;
    margin: 0.25em 0 0 0;
    border: 1px solid transparent;
    height: auto;
}
</style>

<!-- 
     Before implementing this Jekyll snippet make sure
     1. you have defined "markdown: kramdown" in _config.yml.
-->


* Do not remove this line (it will not be displayed)
{:toc}


<style>
#markdown-toc::before {
    content: "Contents";
    font-weight: bold;
}
#markdown-toc ul {
    list-style: decimal;
}
#markdown-toc {
    border: 1px solid #aaa;
    padding: 1.5em;
    list-style: decimal;
    display: inline-block;
}
</style>

<!-- 
     Before you implement this Jekyll Snippet make sure
     1. to thank css-tricks.com
     2. define "disqus: DISQUS-SHORTNAME" in _config.yml file.
-->

<div class="disqus"></div>
<div class="disqus-loading">Loading comments&hellip;</div>
<style>
 .disqus-placeholder.is-hidden { display: none; }
</style>
<script>
/*
  disqusLoader.js v1.0
  A JavaScript plugin for lazy-loading Disqus comments widget.
  -
  By Osvaldas Valutis, www.osvaldas.info
  Available for use under the MIT License
*/
(function(b,f,l){var r=function(a){a=a.getBoundingClientRect();return{top:a.top+f.body.scrollTop,left:a.left+f.body.scrollLeft}},t=function(a,c){var d=f.createElement("script");d.src=a;d.async=!0;d.setAttribute("data-timestamp",+new Date);d.addEventListener("load",function(){"function"===typeof c&&c()});(f.head||f.body).appendChild(d)};l=function(a,c){var d,e;return function(){var g=this,f=arguments,b=+new Date;d&&b<d+a?(clearTimeout(e),e=setTimeout(function(){d=b;c.apply(g,f)},a)):(d=b,c.apply(g,
f))}};var m=!1,n=!1,p=!1,k=!1,h="unloaded",e=!1,q=function(){if(!e||!f.body.contains(e)||"loaded"==e.disqusLoaderStatus)return!0;var a=b.pageYOffset,c=r(e).top;if(c-a>b.innerHeight*n||0<a-c-e.offsetHeight-b.innerHeight*n)return!0;(a=f.getElementById("disqus_thread"))&&a.removeAttribute("id");e.setAttribute("id","disqus_thread");e.disqusLoaderStatus="loaded";"loaded"==h?DISQUS.reset({reload:!0,config:p}):(b.disqus_config=p,"unloaded"==h&&(h="loading",t(k,function(){h="loaded"})))};b.addEventListener("scroll",
l(m,q));b.addEventListener("resize",l(m,q));b.disqusLoader=function(a,c){var d={laziness:1,throttle:250,scriptUrl:!1,disqusConfig:!1},b=c,g,h={};for(g in d)Object.prototype.hasOwnProperty.call(d,g)&&(h[g]=d[g]);for(g in b)Object.prototype.hasOwnProperty.call(b,g)&&(h[g]=b[g]);c=h;n=c.laziness+1;m=c.throttle;p=c.disqusConfig;k=!1===k?c.scriptUrl:k;e="string"===typeof a?f.querySelector(a):"number"===typeof a.length?a[0]:a;e.disqusLoaderStatus="unloaded";q()}})(window,document,0); 
</script>
<script>
  disqusLoader( '.disqus',
  {
    scriptUrl:    '//{{site.disqus}}.disqus.com/embed.js',
    disqusConfig: function()
    {
      this.page.identifier  = 'disqus-lazyload-demo';
      this.page.url     = '{{page.url | prepend site.baseurl}}';
      this.page.title     = '{{page.title}}';
      this.callbacks.onReady  = [function()
      {
        var el = document.querySelector( '.disqus-loading' );
        if( el.classList )
          el.classList.add( 'is-hidden' );
        else
          el.className += ' ' + 'is-hidden';
      }];
    }
  });
</script>

<!-- 
    Before using this Jekyll Snippet make sure you
    1. don't care if your IDE shows tag errors
    2. may have to add the words "Reading Time". Currently it uses an icon from https://github.com/danklammer/bytesize-icons
-->

<span class="read-time" title="Estimated read time">
  <svg id="i-clock" viewBox="0 0 32 32" width="20" height="20" fill="none" stroke="currentcolor" stroke-linecap="round" 
  stroke-linejoin="round" stroke-width="2"><circle cx="16" cy="16" r="14" /><path d="M16 8 L16 16 20 20" /></svg>       

  {% assign words = content | number_of_words %}
  {% if words < 360 %}
    1 мин. чтения
  {% else %}
    {{ words | divided_by:180 }} мин. чтения
  {% endif %}
</span>
<style>
    svg#i-clock {vertical-align: middle;}
</style>