Scriptogram - обзор возможностей

Наиболее популярными движками для блогов являются WordPress и Blogger. Они подойдут почти для каждого в виду интуитивности интерфейсов и наличию настраиваемых элементов. Однако, растёт число людей, использующих простые генераторы статичных сайтов (например, Jekyll).

Здесь не будет рассуждений не тему того, кто всё же прав. Речь пойдёт о сервисе, который представляет собой нечто среднее между описанными выше движками.

Что такое Scriptogram?

На самом деле, scriptogr.am блогодвижком не является. Это скорее сервис, производящий онлайн-рендеринг Markdown файлов, хранящихся в отдельном Dropbox-каталоге. По сравнению с ближайшими конкурентами (calepin.co), Scriptogram имеет широкие возможности для кастомизации, что превращает его в лидера среди проектов данного назначения.

Регистрация

Как таковая регистрация в сервисе не требуется. Нужно всего лишь открыть главную страницу проекта и нажать "Connect". Далее произойдёт аутентификация в дропбоксе. Потом заполняется личные данные - всё, блогом можно пользоваться.

Публикация постов

Посты хранятся в Вашем Dropbox-аккаунте по адресу Apps/scriptogram/posts. Есть два основных способа для добавления материалов в блог.

Способ первый: вручную создавать .md-файлы в дропбоксе, а затем выполнять синхронизацию кнопкой "Synchronize" на странице scriptogr.am/dashboard/.

Способ второй: производить публикацию со страницы scriptogr.am/dashboard/#add - оформляете статью, жмёте "Publish", и в блоге на одну заметку станет больше. В данном варианте .md-файл создастся автоматически, что значительно упрощает жизнь и ускоряет процесс постинга.

Оформление файлов

Мало просто создать файл с именем, заканчивающимся на .md, его ещё нужно правильно оформить. Базовое оформление выглядит следующим образом:

В первой строке должно быть имя будущей публикации, написанное после "Title: ".

Во второй строке должна быть дата публикации, написанная после "Date: ". Формат следующий: "год-месяц-число часы:минуты". 

В последующих строках содержится сам текст поста, оформленный в Markdown.

Однако, есть и более продвинутые атрибуты. Все они пишутся в строках между датой и тестом поста. Вот некоторые из них:
"Slug: " задаёт будущий url публикации
"Tags: " задаёт метки статьи
"Type: " задаёт тип публикации

Пример исходного файла (firstpost.md):

Title: Мой первый пост
Date: 2012-12-23 02:47 

Привет, мир! Это мой первый пост!

----- 

* мой _основной_ блог:  [Записки линуксоида Vlsu](http://vlsu.blogspot.com)

* мой _дополнительный_ блог: [Vlsu's extended blog](http://scriptogr.am/vlsu)

Полученный результат:

Привет, мир! Это мой первый пост!

---

• мой основной блог: Записки линуксоида Vlsu
• мой дополнительный блог: Vlsu's extended blog

Архив тем

В комплекте идёт некоторое количество стандартных тем. Просмотреть их можно на этой странице: scriptogr.am/dashboard/themes/. Среди них Basic, Default, Readnik, Basil & Tomato, Code, Erik, Letters, Typographic, Citizen, Linearian. Наиболее привлекательной является Citizen - именно на её примере и будет основано последующее повествование.

Правка HTML-шаблона и CSS-стилей

В отличие от Blogger'а, Scriptogram использует не XML, а HTML шаблон. А это значительно упрощает его правку, так как кода меньше и он более лаконичен. Шаблон и стили можно править на соответствующих страницах: scriptogr.am/dashboard/html/ и scriptogr.am/dashboard/css/.

Ниже будут приведены примеры того, что можно сделать с помощью правки данных шаблонов.

Избавляемся от имени автора темы

Так как тема будет изменена, то нет смысла держать в "подвале" ссылку на имя автора. Гораздо полезнее разместить там ссылку на лицензию Creative Commons.
Ищем в HTML-шаблоне текст <!-- Footer --> и заменяем последующий код на этот, поменяв имя на своё:

<section id="foot">
<footer>
© <b>Ваше_имя</b>    —    <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_top">Creative Commons Attribution Non-Commercial Share Alike 3.0 Unported License</a><br />
</footer>
</section>  

Создаём ссылку на ленту новостей

Стандартная лента новостей имеет следующий адрес: http://scriptogr.am/имя_пользователя/feed. По неясным причинам в блоге ссылки на неё нет!
Итак, можно либо использовать этот адрес, либо прожечь его через Feedburner. В любом случае будет получена ссылка на фид.
Затем следует в HTML-шаблоне найти тег <nav> и добавить содержимое, выделенное жирным:

<nav>
<ul>
<li>
<a href="{{home_link}}">Home</a>
</li>
{{#pages}}
<li>
<a href="{{permalink}}">{{title}}</a>
</li>
<li>
<a href="адрес_фида">Subscribe</a>
</li>
{{/pages}}
</ul>
</nav>

Изменяем кнопку "вверх"

Кнопка "вверх" по умолчанию какая-то серая и незаметная. Лучше заменить её на текст.
В HTML-шаблоне ищем  <!-- Return To Top Button --> и меняем конструкцию ниже на эту:

<a id="return-button" href="#">
↑
</a>

В CSS-стилях ищем #return-button и приводим к следующему виду:

#return-button {
position: fixed;
bottom: 30px;
right: 10px;
border: none;
padding: 0px;
display: none;
text-decoration:none;
font-size: 20px;
}

Убираем плавность выделения элементов

Я всегда был противником плавной анимации при подведении курсора на сайтах. Нет, технология смотрится хорошо, но лишь с некоторыми цветами. Дефолтный переход из чёрного в светло-серый режет глаз и отнимает некоторое время. А если будет опубликован список из ссылок, и читатель поводит там мышкой, то мелькание в глазах будет 100%.
На вкус и цвет товарищей нет, но если Вам этот эффект тоже не нравится, то отключить его можно удалением из CSS всех строк, содержащих transition.

Исправляем баг социальных кнопок

Кнопки социальных сетей расположены после текста поста. Их внешний вид не впечатляет - три кнопки "расползлись" на две строки (по крайней мере в шаблоне Citizen). Всему виной принудительное значение ширины блока. Исправить это можно, найдя в CSS описание раздела #wrapper section article div.content #meta #social и удалив оттуда параметр width, либо увеличив его значение.

Добавляем ссылку на свою почту

Если не планируете подключать комментарии к блогу, то было бы целесообразно в конце каждого поста размещать ссылку на свою почту. Всё-таки обратная связь с читателем никогда лишней не будет. Реализуется это добавлением в HTML шаблон следующего кода перед <div id="social"> :

<br><a href="mailto:адрес_почты">Drop me a line!</a><br><br>

Финальная доработка

Если планируется использовать Scriptogram в роли второстепенного блога, то манипуляции с кодом почти закончены. Разве что при наличии желания поменять цвета или шрифты.

НО: Если будущий блог должен стать основным, то с ним стоит поработать ещё. Можно прикрутить комментарии, добавить кнопку переводчика, строку поиска, кнопки социальных сетей, рекламу... В общем, напичкать сайт сторонними скриптами. Инструкции здесь приводиться не будут, так как они отличаются для каждого сервиса. Для добавления элементов чётко следуйте инструкциям и у Вас всё обязательно получится. Помните, что от скриптов скорость загрузки значительно снизится, но, возможно, вырастет удобство использования. Хотя, как я считаю, и без сторонних скриптов полученный проект выглядит хорошо: минималистичное оформление, быстрота загрузки, удобство навигации...