Работа с сайтом и GitHub

Технический пост содержащий информацию об управлении Jekyll и размещении сайта на GitHub

Июнь 15, 2019 - 2 мин. -
jekyll github

Установка и размещение в репозитории

Подробная иструкция по установке шаблона находится по ссылке.

Инструменты для разметки статей

Подсветка синтаксиса кода:

<!-- Комментарий к коду  -->
<div class="grid">
  <h1>Пример кода</h1>
</div>

Заголовки

В шаблоне имеется 3 типа заголовков:

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

## Заголовок первого уровня
### Заголовок второго уровня
#### Заголовок третьего уровня

Списки

Неупорядоченный список:

  • Пример 1
  • Пример 2
  • Пример 3
  • Пример 4

Упорядоченный список:

  1. Пример
  2. Пример
  3. Пример
  4. Пример
* Пример 1
* Пример 2

1. Пример
2. Пример

Поддержка Emoji :star:

Emoji’s могу использоваться в любом месте текста написанного на :cat2: markdown! Здесь находится полный список Emoji для markdown :hushed:.

Цитаты

Цитаты выглядят так:

Многие люди склонны преувеличивать отношение к себе других — почему-то им кажется, что они у каждого вызывают сложную гамму симпатий и антипатий.

> Многие люди склонны преувеличивать отношение к себе других — почему-то им кажется, что они у каждого вызывают сложную гамму симпатий и антипатий.

Медиа

Изображения

Изображения могут быть добавлены с тегом <img>.

Пример обычного изображения

Если вы хотите чтобы изображение могло быть увеличино кликом по нему используйте include image.html тэг. Необходимо использовать три переменные:

  • path: Для показа изображения в блоге.
  • path-detail: Для показа увеличенного изображения.
  • alt: Краткое описание изображения.

Не забудьте добавить thumb_image если используются локальные изображения.

Пример изображения с увеличением

{% include image.html path="documentation/sample-image.jpg"
                      path-detail="documentation/sample-image@2x.jpg"
                      alt="Краткое описание изображения" %}

Видео

Видео могут быть добавлены обычным способом и соответствуют стандартным размерам (4x3 по умолчению, 16x9 с расширенной настройкой div class).

<div class="embed-responsive embed-responsive-16by9">
  <iframe src="url-to-video" ...></iframe>
</div>

Подскасты

Аудиозаписи SoundCloud добавляются обычным встраеванием кода. При необходимости поменять теги width и height.