Вообще, sidebar (или боковая панель) и так есть в дефолтной теме Octopress. Но в некоторых темах она отсутствует. Я расскажу, как я добавлял боковую панель в теме Greyjoy, а также как вывести на ней список ссылок на избранные посты, “облако тегов” и информер Яндекс.Метрики.

Итак, у нас есть тема, в которой нет боковой панели - всё верстается в одну колонку. Это очень по-спартански, но хочется функциональности и какого-то оживления на странице. Кроме того, я хочу иметь возможность прикреплять где-то сверху ссылки на избранные посты, чтобы их не смывало в архив потоком новых и они были всегда на виду.

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

Приклеиваем боковую панель

Сначала надо создать стиль (CSS-файл), например такой: /source/stylesheets/style.css со следующим содержимым (с некоторыми изменениями взял из исходников блога вот этого чувака):

#sidebar {
    position: absolute;
    text-align: right;
    width: 300px;
    top: 0;
    left: -340px; /* эти значения подгоняйте самостоятельно */
    margin: 260px 0px 0px 0px; /* потому что мало ли как у вас */
}

#sidebar li {
    list-style: none;
    margin: 2px 0;
}

#sidebar a {
    border: none;
    font-size: 1.1em;
    padding: 2px 4px;
}

Теперь надо подключить его в /source/_includes/custom/head.html:

<link href="/stylesheets/style.css" rel="stylesheet" />

Если у вас уже есть свой файл стилей, то, разумеется, можно просто добавить в него.

Стиль описан, теперь можно его использовать. Я вносил правки прямо в /source/_layouts/default.html:

<div id="main">
    <!--начало -->
    <div id="sidebar">
        <!-- тут будет содержимое -->
    </div>
    <!-- конец -->
    <div id="content">
        {% raw %}{{ content | expand_urls: root_url }}{% endraw %}
    </div>
</div>

Закрепление ссылок на избранное

Это обычный заголовок и список:

<h3>Избранное</h3>
<ul>
  <li><a href="/blog/2014/07/30/first-post/">Создание блога на Octopress</a></li>
</ul>

Облако тегов

Воспользуемся мощью Liquid:

<h3>Теги</h3>
<ul>
  {% raw %}{% for category in site.categories %}
    <a href="/blog/categories/{{ category | first }}/">{{ category | first }} ({{ category | last | size }})</a>
  {% endfor %}{% endraw %}
</ul>

Тег <ul></ul> взят за встроенные отступы по вертикали.

Информер Яндекс.Метрики

Сначала получаем код счётчика. Теперь добавляем в _config.yml новую переменную (кстати, это, вроде бы, не обязательно делать):

# Yandex.Metrika
yandex_metrica_tracking_id: ВАШНОМЕРСЧЁТЧИКА

Теперь надо создать файл /source/_includes/yandex_metrica.html и сложить в него полученный код счётчика (не номер, а тот здоровый кусок текста).

И включить этот файл в нашем коде боковой панели:

<h3>Метрика</h3>
[% include yandex_metrica.html %]

Конечный вид

Полный код панели:

<div id="sidebar">{% raw %}
        
    <!-- избранное -->
    <h3>Избранное</h3>
    <ul>
      <li><a href="/blog/2014/07/30/first-post/">Создание блога на Octopress</a></li>
    </ul>
    
    <!-- теги -->
    <h3>Теги</h3>
    <ul>
      {% for category in site.categories %}
        <a href="/blog/categories/{{ category | first }}/">{{ category | first }} ({{ category | last | size }})</a>
      {% endfor %}
    </ul>
    
    <!-- Яндекс.Метрика -->
    <h3>Метрика</h3>
    {% include yandex_metrica.html %}{% endraw %}
    
</div>

Как это выглядит:

Правда, на экранах планшетов и телефонов вся панель либо отсутствует, либо торчит только краешком. Это потому что я пока не очень в CSS.