В этом репозитории находится Jekyller - генератор слайдов в корпоративном стиле Яндекса для Shower из разметки на языке Markdown.
Jekyll Shower работает в GitHub Pages и для его использования не нужно ничего устанавливать на свой компьютер.
Слайды на GitHub Pages будут доступны без какой-либо авторизации — любой, у кого есть доступ к внутренней сети, сможет их увидеть.
Обратите внимание, генерация слайдов запускается при выполнении операции Push – это значит, что в первый раз слайды будут сгенерированы при первой операции Push, а не при создании форка репозитория.
Для создания презентации с помощью Jekyller вам потребуется изменить два файла в этом репозитории: указать информацию о презентации в файле _config.yml и добавить свой контент в файл index.md.
Откройте _config.yml
Здесь вы можете изменить основной шаблон презентации: название и авторов презентации, соотношение сторон для слайдов — default_ratio (доступны варианты 4x3
, 16x9
, 16x10
) и язык для логотипа Яндекса — presentation:lang (ru
, en
).
Для работы со слайдами откройте файл index.md
. На основе этого файла и будут сгенерированы слайды. По умолчанию в файле находится контент-заглушка с оформлением слайдов разных типов, используйте его в качестве примера. Также обращайте внимание на пояснения в комментариях.
Чтобы добавить в презентацию новый слайд, начните редактировать файл index.md
.
Выберите место для нового слайда и вставьте заголовок второго уровня с помощью символов ##:
## Название слайда
Текст заголовка будет использоваться как название слайда.
Вы можете назначать элементам презентации произвольные CSS-классы. Для этого укажите название класса на следующей строке после элемента:
<!-- картинка справа-->
![](themes/yandex2/images/image-right.svg)
{:.image-right}
Вы также можете указать несколько классов через пробел:
## Название слайда
{:.images .two}
В текущей теме презентации уже определено несколько классов, которые можно использовать для оформления слайдов. Примеры таких классов можно увидеть в файле index.md
.
Описать новые CSS-классы можно в верхней части файла index.md
.
Чтобы создать слайд с изображениеми, выберите один из примеров в файле index.md
. При этом старайтесь, чтобы размеры изображений соответствовали размерам, указанным на изображениях-заглушках.
Вы можете использовать пиктограммы (небольшие схематические изображения размером 240x200 пикселей) — есть несколько примеров слайдов с классом icons
. Сами пиктограммы можно брать из библиотеки пиктограмм Яндекса.
Также вы можете выбрать фотографии из библиотеки изображений Яндекса или на фотостоке istockphoto.com. Чтобы получить изображение с фотостока, пришлите нам ссылку на presentation@ — и мы купим его для вас.
Если вы хотите, чтобы элементы слайда (например, строки списка) появлялись по очереди, используйте CSS-класс next
. Отмеченные им элементы будут появляться по очереди, в том же порядке, в котором они расположены в файле index.md.
Пример разметки для последовательности картинок:
![](image-1.svg)
{:.next}
![](image-2.svg)
{:.next}
![](image-3.svg)
{:.next}
Пример разметки для последовательности строк списка:
1. {:.next}Нумерованный список
2. {:.next}Нумерованный список
3. {:.next}Нумерованный список
Если необходимо задать размеры для элементов, указывайте значения в пикселях. При масштабировании слайдов элементы будут масштабироваться автоматически. Ширина слайда по умолчанию равна 1920px.
Если нужно разместить элемент в нестандартном месте (например, прижать к правому или нижнему краю слайда), используйте абсолютное позиционирование.
По умолчанию стили для слайдов написаны так, чтобы контент был выровнен по сетке с шагом 30px. При выборе размеров и положения элементов старайтесь, чтобы они тоже соответствовали сетке.
Чтобы включить отображение сетки на слайде, добавьте для него css класс grid
:
## Название слайда
{:.grid}
Чтобы получить презентацию в формате PDF, используйте любой браузер на основе Chromium. Откройте страницу для просмотра слайдов в режиме списка слайдов (не в режиме просмотра отдельного слайда) и выведите её на печать. В качестве принтера выберите Сохранить как PDF.
Иногда презентацию нужно показывать с компьютера, не подключенного к внутренней сети Яндекса. Вы можете перенести презентацию на внешний GitHub и она будет доступна с любого компьютера, на котором есть интернет.
--bare
git clone https://github.yandex-team.ru/[owner]/[repo-name].git --bare
cd [repo-name].git
git remote add public https://github.com/[owner]/[repo-name].git
--mirror
git push public --mirror
Полная библиотека материалов для презентаций от лица Яндекса — примеры оформления слайдов с графиками, диаграммами, таблицами, картами, схемами, гаджетами, пиктограммы, иллюстрации и фотографии — находится по адресу patterns.yandex-team.ru/presentations.
Если у вас возникли вопросы, напишите нам на рассылку presentation@.
Если вы хотите, чтобы мы проверили вашу презентацию, отправьте её на prescheck@.