MIGO Web-Development - разработка и cоздание сайтов в Киеве, Украине

Создание сайтов, поисковое продвижение в Google. Сопровождение, тех.поддержка


звонить: +38 (093) 636 78 08
писать: web@migo.com.ua


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

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

Ряд сниппетов также доступны на официальном сайте Jekyll, но стили отличаются. Здесь будут размещены рабочие сниппеты, которые остается только скопировать на свой веб-сайт jekyll, и они будут работать.

Здесь - вместе с html и liquid кодом - также добавлено ряд стилей оформления. Возможно, при добавлении на сайт прийдется немного изменить некоторые значения, такие как ширина, цвет и т.д., исходя из общего стиля оформления сайта.

1. Пагинация 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>

2. Контактная форма Jekyll


<!-- 
     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>

3. Блок Содержание


<!-- 
     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>

4. Disqus Lazy Load

Имеет смысл загрузить виджет Disqus только тогда, когда пользователь прокручивается вниз. Этот код автоматически обнаружит прокрутку и загрузит Disqus, когда вы достигнете нижней части экрана.


<!-- 
     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>

5. Блок “Время чтения”


<!-- 
    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>

проспект И.Мазепы 5 07300 Украина, Киевская обл., г. Вышгород, +38 (093) 636 78 08
Рассказать друзьям:

comments powered by Disqus