EliseeAlex.me

Шаг 1

Сноски на полях для блогов

Смотрим на примеры сносок и фактоидов, вдохновляемся, создаём свои и добавляем их к себе на сайт

Впервые я увидел сноски в советах бюро Артёма Горбунова.

Они используют их для навигации между статьями: http://artgorbunov.ru/bb/soviet/20160519/

Для ссылок, привязанных к контексту: http://artgorbunov.ru/bb/soviet/20160510/

Для выводов и примеров: http://artgorbunov.ru/bb/soviet/20160509/

Приём пришёл из книжной типографики. Теперь я радуюсь, когда встречаю эти элементы в книгах. Я использовал этот приём на лекциях в универе и грущу, что не узнал о них ещё в школе.

Фактоиды позволяют разнообразить вёрстку текста: http://artgorbunov.ru/bb/soviet/20141117/

Отлично смотрятся фактоиды с большими цифрами: http://gosuslugi.rocketmind.ru/help.html

Или сноски-картинки, как в Тинькофф Журнале: http://journal.tinkoff.ru/dead/

Сноски-выводы — отличная идея (лучше смотреть на компьютере): http://journal.tinkoff.ru/icloud/

Реализация сносок

Когда я выбирал платформу для блогов, я хотел, чтобы добавление сносок было простым и не отвлекало от создания статьи. И markdown для этого подходит отлично, он не такой низкоуровневый, как html, но его синтаксис позволяет использовать код на html, если нужно. То есть, можно создать шаблон для фактоида и использовать его в процессе написания статьи.

Как это можно сделать:

  • Можно использовать для этого табличную вёрстку, как сделано в бюро. Так уже не делают, из-за неё возникают проблемы с адаптивностью.
  • Можно использовать колонки бутстрапа. В них можно настроить количество колонок в строке, в зависимости от ширины экрана. Это удобно, но не подходит для маркдауна. Если текст будет находиться в другой колонке, то придётся каждый раз открывать и закрывать теги, чтобы создать новую колонку.
  • Или можно завести для этого отдельный тег, как в Тинькофф Журнале и самостоятельно решить, как он будет выглядеть на разных экранах. Я выбрал этот вариант, потому что его удобнее всего использовать в markdown.

Сноски на широком экране выглядят так:

Пример сносок на широком экране

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

Пример сносок на узком экране

Из-за того, что я не хотел отвлекаться от написания текста на добавление сносок, я использовал для этого только один тег:

<div class="factoid">
  <a href="http://doc.akka.io/docs/akka/current/scala/actors.html">Больше примеров</a><br><br>
  <a href="http://docs.scala-lang.org/tutorials/tour/pattern-matching.html">О Pattern Matching</a>
</div>

Для этого мне понадобился один класс, который я изменяю на узких с помощью медиа-запроса:

.factoid {
   width: 180px;
   left: 100%;
   margin-left: 4em;
   position: absolute;
   font-size: 0.85em;
}

@media only screen and (max-width:992px) {
  .factoid {
    position:relative;
    width:auto;
    left:auto;
    margin-left:2em;
    font-size:1em
  }
}

Теперь я использую сноски для навигации, фактов и ссылок. Вверху я добавил ссылки на все шаги эксперимента, а внизу ссылку на следующие статьи по теме и по порядку, и на связанные статьи.

Автоматизация для Hugo

Сноски на html выглядят не очень красиво посреди статьи на markdown’е. Поэтому появилось желание автоматизировать дальше и использовать для этого шорткоды.

Для этого мне пришлось в папке layout/shortcodes в своей теме добавить файл factoid.html со следующим содержимым:

<div class="factoid">
  {{ .Inner }}
</div>

И теперь я могу вставлять фактоиды в текст с помощью пары строчек:

{{% factoid %}}

[Статья на гитхабе](https://github.com/eliseealex/lis.press.hugo/tree/master/content/eliseealex-1/1-factoids.md)

{{% /factoid %}}

Теперь можно добавить сниппет в alfred или любую другую программу для управления буфером обмена и пользоваться фактоидами без проблем.

Используйте боковые сноски, они делают чтение текста легче.

В следующей статье я расскажу о важных блоках.

Пока что, советую прочитать конспект вебинара о целях текста.