Что я доработал в Octopress

May 15, 2013

Что я доработал в Octopress

Сразу запишу, какие изменения, и как я внес в настройки Octopress

  1. Внедрение ленты Twitter
  2. Размещение рекламы Google AdSense на сайдбаре
  3. Доработка движка для внедрениея Google AdSense в шаблон поста

Информации об этом достаточно в Интернете, но сюда я размещаю именно для своих нужд

Внедрение Twitter

Для начала нужно на сайте Twitter создать новый Виджет
После создания виджета вы получаете код для размещения этого виждета на странице. Весь код в принципе не нужен — нас интересует только значение data-widget-id — этот набор цифр переносим в файл _config.yml, добавляя новую строку вида twitter_widget_id: наш_набор_цифр (обязательно поставьте пробел после двоеточия).
Также не забываем вписать свой логин от twitter в строке twitter_user:

Следующий этап — создание файла twitter.html— расширения для размещения в боковой панели.
Файл размещаем в каталоге source/_includes/custom/asides/
Вот код этого файла
{% codeblock twitter.html %}
{% if site.twitteruser and site.twitterwidgetid %}

Latest Tweets

Tweets by @{{ site.twitter

{% endif %}

Заключительный этап - размещение ленты в боковой панели.

В файле `_config.yml` ищем строку `default_asides:` и дописываем в массив параметров через запятую новый элемент боковой панели `custom/asides/twitter.html`

Теперь генерим и деплоим сайт - и получаем ленту.

**Размещение рекламы Google AdSense**

Как я писал в предыдущем посте - идея размещения рекламы меня заинтересовала больше с технической стороны, чем для заработка.

Разместить рекламу я решил следующим образом:

* один рекламный блок будет находиться в боковой панели, с текстом и картинками, размером 300х250. Этот блок должен быть всегда на экране
* другой блок, размером 728х90, я буду включать в каждый пост, но прятать его под CUT, чтобы главная страница не была засорена рекламой

Итак, поехали.

Шаг первый - регистрируемся в программе Google AdSense. Пока не буду подробно расписывать, как это делается, но сложного ам ничего нет.
Дождавшись подтверждения аккаунта, создаем в разделе *Мy ads* два юнита с указанными выше параметрами. Для каждого раздела мы теперь можем получить код.

Шаг второй - размещаем рекламный блок в боковой панели.
Для этого создадим файл - расширение `google_adsense.html` и разместим его в каталоге `source/_includes/custom/asides/` (по аналогии с twitter).

Вот код файла:
{% codeblock google_adsense.html %}
{% if site.show_google_ads %
<section>  
    <!--
    Сюда размещаем код, который мы получили в Google AdSense для блока 300х250
    -->
</section>  
{% endif %}

И теперь осталось отредактировать _config.yml

  • в конце файла добавляем строку show_google_ads: true
  • в раздел default_asides: добавляем через запятую параметр custom/asides/google_adsense.html

После генерации и деплоя мы … ничего не увидим. Не пугаемся — это нормально. Гугл сначала проверит, правильно ли мы все разместили. А пока вместо рекламы показывает пустое место. Реклама там появится только после окончательного подтверждения аккаунта.

Ждем-с.

Вставка рекламы в шаблон поста

Здесь все немного проще, чем в предыдущих случаях.

На первом шаге — создаем код (или берем из ранее созданного) рекламного блока Googe AdSense.

Далее, в каталоге OCtopress находим файл Rakefile. Будем его редактировать.

Для генерации нового поста используется задача new_post. Находим в файле набор строк, начинающихся с post.puts.
Теперь для каждой строки кода, полученного из Гугла, добавляем новую строку вида post.puts "строка_кода_Гугла".
Я еще перед рекламным блоком вставил строку post.puts "<!--more-->", чтобы реклама автоматически уходила под CUT. Теперь при создании нового поста не нужно вспоминать о вставке кода.

Для работы достаточно сохранить файл Rakefile. Перегенерация и деплой сайта не требуется.

http://cmd-q.ru/2013/05/15/chto-ia-dorabotal-v-octopress/

Губарь Маргарита Александровна