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


8 комментариев
Наиболее популярными движками для блогов являются 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)

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

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


Архив тем

В комплекте идёт некоторое количество стандартных тем. Просмотреть их можно на этой странице: 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 в роли второстепенного блога, то манипуляции с кодом почти закончены. Разве что при наличии желания поменять цвета или шрифты.

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

8 комментариев:


  1. Однако, у данных систем есть и противники, использующие, например, Jekyll.
    Позволь, причём здесь "противники"? Если мне нравится отвёртка Phillips, разве я противник отвёрток от других фирм?

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

    Scriptogram имеет широкие возможности для кастомизации, что превращает его в лидера среди проектов данного назначения.
    Как у этого пионерского сервиса с лицензией и переносимостью? Т.е., что будет, если сервис прикроют? Положим, Blogger'у это не грозит, а о Jekyll я сам могу позаботиться, но какая участь уготована здесь? Для меня это краеугольный вопрос в свете стоит блог затраченных усилий или нет.

    В отличие от Blogger'а, Scriptogram использует не XML, а HTML шаблон. А это значительно упрощает его правку, так как кода меньше и он более лаконичен.
    О чём и речь! Jekyll вдобавок систему контроля версий поддерживает.

    ОтветитьУдалить
    Ответы
    1. Позволь, причём здесь "противники"?
      Прошу прощения, что-то я перемудрил с этой фразой. Заменил на более нейтральное "растёт число людей, использующих простые генераторы статичных сайтов"

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

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

      что будет, если сервис прикроют?
      Пусть его сначала откроют - сейчас он в виде открытой беты)

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

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

      Удалить
  2. А чтоб тебя - утащил у меня пост! :-) Только материал начал собирать… но твой всё равно лучше, снимаю шляпу.

    Пост классный, почерпнул для себя много нового. Например, про правку CSS я не знал (хотя сам всё равно не умею этого делать). По теме:

    По неясным причинам в блоге ссылки на неё [RSS-ленту] нет!
    Вот-вот, я тоже нашёл её случайно гуглом: думаю, ну должна же она где-то быть! Кстати, её можно завернуть в FeedBuzz и публиковать у себя на блоге: у меня так Лунодром работает.

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

    что превращает его в лидера среди проектов данного назначения.
    Да там конкурентов-то с гулькин хвост:

    - skrivr.com пока только по инвайтам
    - godrop.it
    - markbox
    - любителям покрасноглазить - блогодвижок на питоне с маркдауном под названием autopilot

    ОтветитьУдалить
  3. Как у этого пионерского сервиса с лицензией и переносимостью?

    Ну да, скриптограм - пионерия, а джекил-то уж энтырпрайз, да :-)

    Отлично у него с переносимостью: в дропбоксе переходим в каталог Apps и жмём Download - все твои посты в архиве.

    О чём и речь! Jekyll вдобавок систему контроля версий поддерживает.
    Дропбокс тоже поддерживает версии. Кроме того, для блога это оверкилл: я редко правлю старые посты (кроме некоторых особо ценных), но там, где правлю, оно направлено на улучшение текста. VCS там особо не нужна.

    ОтветитьУдалить
  4. @Vlsu комментирует:
    любой блогодвижок могут закрыть или внезапно сделать платным
    На существующие версии это никак не влияет, это закон. А код вон на гитхабе, а движок Scriptogram не сегодня проприетарный.

    @virens троллит:
    Ну да, скриптограм - пионерия, а джекил-то уж энтырпрайз, да :-)
    Там у тебя уже есть еда :)

    Вот-вот, я тоже нашёл её случайно гуглом
    Я просто оставлю эту ссылку здесь.

    Отлично у него с переносимостью: в дропбоксе переходим в каталог Apps и жмём Download - все твои посты в архиве.
    Опять передергиваешь, цитирую для тебя: "Т.е., что будет, если сервис прикроют?". Движок проприетарный, не дай бог завтра scriptogr.am прикроют, и привет! А проблемы с потерей контента, на которые ты намекнул, только у пользователей Blogspot и WordPress. Про переносимость Jekyll читай у меня в блоге: здесь и здесь, вот-вот про установку на OpenShift закончу.

    для блога это оверкилл: я редко правлю старые посты
    Речь шла про правку шаблона, а ты передёрнул, как обычно. Захотел перетрясти дизайн - заводишь нужную ветку в гите и всё. Речь не про оверхед, а про выбор. Можешь использовать возможности гита, а не хочешь - никто не принуждает. А то с твоими "оверхед" и "ненужно" и до винды с макосью не далеко.

    ОтветитьУдалить
  5. Опять передергиваешь, цитирую для тебя: "Т.е., что будет, если сервис прикроют?". Движок проприетарный, не дай бог завтра scriptogr.am прикроют
    Я не передёргиваю, а просто не понял, что ты имеешь в виду.

    Скриптограм - не единственный и не уникальный сервис в своём роде. Выше в моих комменатриях приведены ссылки на аналоги. У Блоггера движок тоже проприетарный, ну и что с того?!


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

    Захотел перетрясти дизайн - заводишь нужную ветку в гите и всё.
    И зачем, когда можно сделать отдельный файл со старым дизайном, скопировав туда текущий, и развлекаться с новым? Ну, заведи репозиторий для постов и шаблона вручную - зачем всё это в блогодвижке?

    У меня есть HG-репо с моими постами, архивами и шаблонами.

    Речь не про оверхед, а про выбор.
    Это усложняет и без того мозголомную процедуру настройки блога. Без ощутимых бенефитов.

    А то с твоими "оверхед" и "ненужно" и до винды с макосью не далеко.
    В общем-то я уже начинаю подумывать о покупке Mac Book Pro, если честно. Мне уже начала надоедать вся эта красноглазая хреновина с КДЕ, Гномом и засовыванием в Дебиан тупо нерабочих пакетов (IceWM, KDE4.4, LAPACK с битым clapack). Мне хочется, чтобы в 21 веке что-то уже работало из коробки, вроде VLC вместо выкидыша под названием Mplayer.

    Возвращаясь к теме. Скриптограм хорош для хранения заметок, это не вполне блог. К нему можно прикрутить многое, но это раскидывание яиц по слишком большому числу корзинок. Отвалился ваш сервис картинок - труба, отвалился дискас - нет комментов. И так далее.

    Чего скриптограмме не хватает, так это двухпанельного редактора - честно, такая очевидная вещь почему-то не пришла авторам в голову. Preview оно, конечно, есть, но видеть результат как в markable очень хочется.

    ОтветитьУдалить
  6. Да, вот что ещё. Vlsu, по какой-то причине у меня не отображаются метки в постах на scriptogr.am - хотя они и на английском. То есть в файле они есть, а по жизни - нет

    И ещё: у них по ходу до сих пор нельзя сделать tag cloud. Можно этот косяк обойти как-нибудь?

    ОтветитьУдалить
    Ответы
    1. То есть в файле они есть, а по жизни - нет
      За "отрисовку" тегов отвечает следующая конструкция в HTML-шаблоне:

      {{#if_tags}}

      <!-- Tags -->

      <div id="info">

      <span>

      {{#tags}}<a href="{{base_url}}/tag/{{name}}">#{{name}}</a> {{/tags}}

      </span>

      </div>

      {{/if_tags}}

      Если её нет, то стоит добавить вышеуказанный код в шаблон

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

      Удалить


Лицензия:CC BY-NC-SA 3.0 Unported (c) : "Записки линуксоида Vlsu". 2011-2017 гг.
При копировании материалов сайта ссылка обязательна!Подробнее...

Полная версия | Мобильная версия | Динамический просмотр