artemsheludko/jekyll-documentation

## jekyll-documentation
# Установка Jekyll
gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve

# Лимит вывода
{% for article in site.articles limit:3 %}

{% endfor  %}

# Условие if на примере выбора секции hero.html
if
{% if page.url == '/' %}
	{% include hero.html %}
{% else %}
 {% include hero2.html %}
{% endif %}

# Множественное условие
{% if page.url== '/' or page.url== '/about' or page.url== '/delivery' %}

{% endif %}

# Сортировка по дате или позиции пример на сайте - https://learn.siteleaf.com/content/drag-and-drop-position/
{% assign sorted_artists = site.artists | sort:"position" %}
{% for artist in sorted_artists %}
  <li>{{ artist.title }}</li>
{% endfor %}

# Также можно утсновить необязательный аргумен "last". Чтобы выводить последнии позиции.
{% assign sorted_artists = site.artists | sort:"position", "last" %}

# Навигация - автоматическое создание пунктов меню и исключение ненужных страниц с навигации ('404.md')
{% for page in site.pages %}
  {% unless page.name == '404.md' %}
    {% if page.title %}
      <li class='c-nav__item' role='presentation'>
        <a class='c-nav__link' href='{{ page.url | prepend: site.baseurl }}'>{{ page.title }}</a>
      </li>
    {% endif %}
  {% endunless %}
{% endfor %}

# Добавить к пункту меню класс active
<li class="nav-item {% if page.url== '/contacts.html' %} active {% endif %}">
	<a class="nav-link" href="/contacts.html">Contacts</a>
</li>

# Пример создания навигации, с автоматическим добавлением класса active к пунктам меню
=begin

1. Создать папку _data
2. В папке _data, создать файл navigation.yml

Пример структуры файла navigation.yml
  - name: Book
    link: /book
  - name: Documentation
    link: /docs
  - name: Showcase
    link: /showcase
  - name: Blog
    link: /blog
  - name: About
    link: /about

=end

# 3. Затем добавить в header, код для вывода элементов меню
<nav role='navigation'>
  <ul class='list site-nav'>
    {% for link in site.data.navigation %}
      {% assign class = nil %}
      {% if page.url contains link.link %}
        {% assign class = 'site-nav__link--active' %}
      {% endif %}
      <li class='site-nav__item'><a class='site-nav__link {{ class }}' href='{{ link.link }}'>{{ link.name }}</a></li>
    {% endfor %}
  </ul>
</nav>

# Сжатия и минификации SCSS файла. Код нужно вставить перед закрывающим тегом head (сам файл main.scss находится в папке _includes).
<style>
  {% capture include_to_scssify %}
    {% include main.scss %}
  {% endcapture %}
  {{ include_to_scssify | scssify }}
</style>

# Минификации HTML. Установить плагин с сайта https://github.com/penibelst/jekyll-compress-html

=begin
1. Извлечь файл compress.html
2. Копировать compress.html в папку _layouts
3. В файле расположенном по адресу _layouts/default.html. Установить следующие значения.

  ---
  layout: compress
  ---

  <html>
  {{ content }}
  </html>

=end
	# Установка Jekyll
	gem install bundler jekyll
	jekyll new my-awesome-site
	cd my-awesome-site
	bundle exec jekyll serve

	# Лимит вывода
	{% for article in site.articles limit:3 %}

	{% endfor %}

	# Условие if на примере выбора секции hero.html
	if
	{% if page.url == '/' %}
	{% include hero.html %}
	{% else %}
	{% include hero2.html %}
	{% endif %}

	# Множественное условие
	{% if page.url== '/' or page.url== '/about' or page.url== '/delivery' %}

	{% endif %}

	# Сортировка по дате или позиции пример на сайте - https://learn.siteleaf.com/content/drag-and-drop-position/
	{% assign sorted_artists = site.artists \| sort:"position" %}
	{% for artist in sorted_artists %}
	<li>{{ artist.title }}</li>
	{% endfor %}

	# Также можно утсновить необязательный аргумен "last". Чтобы выводить последнии позиции.
	{% assign sorted_artists = site.artists \| sort:"position", "last" %}

	# Навигация - автоматическое создание пунктов меню и исключение ненужных страниц с навигации ('404.md')
	{% for page in site.pages %}
	{% unless page.name == '404.md' %}
	{% if page.title %}
	<li class='c-nav__item' role='presentation'>
	<a class='c-nav__link' href='{{ page.url \| prepend: site.baseurl }}'>{{ page.title }}</a>
	</li>
	{% endif %}
	{% endunless %}
	{% endfor %}

	# Добавить к пункту меню класс active
	<li class="nav-item {% if page.url== '/contacts.html' %} active {% endif %}">
	<a class="nav-link" href="/contacts.html">Contacts</a>
	</li>

	# Пример создания навигации, с автоматическим добавлением класса active к пунктам меню
	=begin

	1. Создать папку _data
	2. В папке _data, создать файл navigation.yml

	Пример структуры файла navigation.yml
	- name: Book
	link: /book
	- name: Documentation
	link: /docs
	- name: Showcase
	link: /showcase
	- name: Blog
	link: /blog
	- name: About
	link: /about

	=end

	# 3. Затем добавить в header, код для вывода элементов меню
	<nav role='navigation'>
	<ul class='list site-nav'>
	{% for link in site.data.navigation %}
	{% assign class = nil %}
	{% if page.url contains link.link %}
	{% assign class = 'site-nav__link--active' %}
	{% endif %}
	<li class='site-nav__item'><a class='site-nav__link {{ class }}' href='{{ link.link }}'>{{ link.name }}</a></li>
	{% endfor %}
	</ul>
	</nav>

	# Сжатия и минификации SCSS файла. Код нужно вставить перед закрывающим тегом head (сам файл main.scss находится в папке _includes).
	<style>
	{% capture include_to_scssify %}
	{% include main.scss %}
	{% endcapture %}
	{{ include_to_scssify \| scssify }}
	</style>

	# Минификации HTML. Установить плагин с сайта https://github.com/penibelst/jekyll-compress-html

	=begin
	1. Извлечь файл compress.html
	2. Копировать compress.html в папку _layouts
	3. В файле расположенном по адресу _layouts/default.html. Установить следующие значения.

	---
	layout: compress
	---

	<html>
	{{ content }}
	</html>

	=end