Использование сторонних компонентов Django CMS

Использование сторонних компонентов Django CMS


Date of publication 09.06.2017



В этой статье я продолжу знакомить вас с DjangoCMS и расскажу о том как можно использовать в своём проекте готовые решения от сторонних разработчиков и для чего это нужно. В качестве примера я покажу как создать свой собственный блог на DjangoCMS и за основу возьму проект из прошлой статьи. Вы можете клонировать данный проект с GitHub (ветка part1) или создать свой собственный сайт и проводить эксперименты уже на нём.

Плагины и дополнения

Для DjangoCMS каждый разработчик может создавать свои собственные плагины, которые расширяют основной функционал и могут быть многократно использованы как в рамках одного проекта, так и в нескольких проектах одновременно. Это очень круто, но прежде чем делать свой велосипед, имеет смысл посмотреть уже готовые решения, так как это поможет сэкономить много времени и сил. Для этого компания Divio реализовала неплохой маркетплейс, где можно найти много готовых компонентов и использовать их в своём проекте: https://marketplace.django-cms.org/en/addons/. Тут есть не только плагины, но и целые дополнения для DjangoCMS, которые могут значительно упростить вам жизнь. Единственный минус это документация, так как она зачастую довольно скудная и со многими вещами приходится разбираться самостоятельно.

Итак, для того чтобы сделать блог, мне понадобится 2 компонента:

  1. Aldryn News&Blog - дополнение для DjangoCMS, которое позволяет добавить на сайт блог и ленту новостей. Aldryn News&Blog содержит сразу несколько плагинов для вывода различной информации, но шаблоны придётся кастомизировать вручную под дизайн сайта (кстати про это скромно умалчивается).
  2. Aldryn Disqus - какой же блог без холивара? Этот плагин добавляет возможность писать комментарии к постам с помощью сервиса Disqus.

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

Настройка Aldryn News&Blog

Чтобы приступить к работе, нам нужно установить дополнение Aldryn News&Blog в виртуальное окружение проекта:

pip install aldryn-newsblog

Не забудьте добавить зависимость aldryn-newsblog в requirements.txt.

После завершения установки откройте файл settings.py и добавьте в INSTALLED_APPS после 'cms':

INSTALLED_APPS = (
    ...
    # то что нужно добавить
    'aldryn_apphooks_config',
    'aldryn_categories',
    'aldryn_common',
    'aldryn_newsblog',
    'aldryn_people',
    'aldryn_reversion',
    'aldryn_translation_tools',
    'parler',
    'sortedm2m',
    'taggit',

    # если этого нет, то тоже добавить
    'djangocms_text_ckeditor',
    'easy_thumbnails',
    'filer',
    'reversion',
)

Кроме этого в THUMBNAIL_PROCESSORS (отвечает за отображение эскизов изображений) нужно закомментировать процессор scale_and_crop (если он есть) и добавить scale_and_crop_with_subject_location (если его нет). В итоге параметр THUMBNAIL_PROCESSORS должен выглядеть так:

THUMBNAIL_PROCESSORS = (
    'easy_thumbnails.processors.colorspace',
    'easy_thumbnails.processors.autocrop',
    # 'easy_thumbnails.processors.scale_and_crop',
    'filer.thumbnail_processors.scale_and_crop_with_subject_location',
    'easy_thumbnails.processors.filters',
    'easy_thumbnails.processors.background',
)

Убедитесь что ничего не забыли и все процессоры на месте. После этого нужно создать все необходимые таблицы в базе данных. Выполните команду:

python manage.py migrate

Теперь можно запускать приложение:

python manage.py runserver

Если всё сделано правильно, то приложение должно загрузиться без проблем. В нашем проекте ранее были созданы ранее были созданы 2 страницы(Главная и Контакты). Для блога нам нужно создать ещё одну страницу:

Заполните все поля и нажмите кнопку Сохранить и продолжить редактирование, затем перейдите на вкладку Расширенные настройки и выберите шаблон Fullwith:

В этом же окне выберите приложение NewsBlog из выпадающего списка:

Жмём кнопку Сохранить и публикуем страницу. После этого в тулбаре DjangoCMS должен появиться новый пункт News & Blog:

У меня в шаблоне Fullwith предусмотрено два плейсхолдера для заголовка и подзаголовка. Если их не заполнить, то страница будет смотреться не очень красиво, поэтому нажмите на кнопку Редактировать страницу, перейдите в структуру страницы (кнопка Структура) и заполните заголовок и подзаголовок страницы. На этом все подготовительные работы завершены и можно приступить к работе с News & Blog. Если у вас возникли трудности с созданием и настройкой страницы, то я советую прочесть эту статью.

Добавление статей в блог

Для того чтобы добавить в блог новую статью, выберете в меню на панели инструментов News & Blog > Add new article:

Перед вами откроется окно с кучей всяких настроек:

На самом деле здесь всё очень просто. Сейчас я вам расскажу что тут заполнять и каким образом:

  1. Поле Заголовок (Title) - сюда вписываем название статьи, заполнять нужно обязательно, так как на основе этого поля будет автоматически сгенерирован urlадрес страницы со статьёй блога.
  2. Поле Автор (Author) - для каждой статьи есть возможность задать автора, так что смело выбираем себя любимого из выпадающего списка, или добавляем с помощью кнопки + напротив поля.
  3. Дата публикации (Publishing date) - тут можно задать дату и время публикации статьи, всё просто.
  4. Чекбокс Опубликован (Published) - очень важная настройка, так как если вы поставите тут галочку, то статья будет опубликована на сайте и доступна для чтения. Я всегда оставляю это поле пустым, пока не допишу статью.
  5. Чекбокс Is featured - для каждой статьи можно задать "главную" картинку, которая будет выводиться в списке статей и в начале самой статьи. Данный чекбокс отвечает за отображение такой картинки и лично я всегда ставлю тут галочку.
  6. Блок Featured Image - тут можно выбрать заглавную картинку для своей статьи. Вообще в статье может быть любое количество картинок, но тут выбирается самая главная из них, можно сказать "лицо статьи".
  7. Поле Lead - сюда пишем короткую вступительную часть статьи, которая будет отображаться в ленте, а продолжение пишется уже в другом месте.
  8. Раздел Meta Options, поле Путь - это url статьи, заполняется автоматически на основе заголовка, но можно править на своё усмотрение.
  9. Раздел Meta Options, поля Meta Title, Meta Description и Meta Keywords - предназначены для SEO-дрочерства и легенды гласят что их заполнение может положительно сказаться на позициях сайта в поисковиках, так что я заполняю на всякий случай :)
  10. Раздел Расширенные настройки, поле Метки - позволяет добавлять к статье метки, которые можно потом вывести отдельным плагином на сайт. Метки способны значительно улучшить навигацию, так как помогают пользователю получить подборку статей с определённой тематикой в один клик.
  11. Раздел Расширенные настройки, блок Категории (Categories) - позволяет задать для статьи категории, которые можно вывести на сайт с помощью плагина. Ещё один способ разбить статьи по темам.
  12. Раздел Расширенные настройки, поле Связанные статьи (Related articles) - можно привязать к статье другие статьи со схожей тематикой.

Как вы могли заметить, всё очень просто. Давайте заполним эти поля произвольными данными и нажмём кнопку Сохранить. Я для примера заполнил заголовок и описание, добавил категорию IT и несколько меток (Python, Django, DjangoCMS) и автора статьи. Вот что у меня в итоге получилось:

В ленте появилась первая статья, все введённые данные отображаются, но выглядит это всё очень печально. Пока на дизайн не обращайте внимания, чуть позже мы его доработаем, а сейчас нам нужно доделать статью. Жмём на заголовок статьи, который является гиперссылкой и... мы попадаем на точно такую же страницу (так кажется с первого взгляда). На самом деле url этой страницы уже другой и сгенерирован он на основе нашего заголовка. Кроме того, если открыть структуру этой страницы, то мы увидим следующую картину:

На этой странице у нас 2 новых плейсхолдера: Newsblog_Article_Content и Newsblog_Social. В Newsblog_Article_Content можно добавить полный текст статьи с картинками и для этой цели мне хватает плагина Текст с его редактором. Как вариант можно текст и картинки помещать в разные плагины и чередовать между собой, но лично мне удобнее всё держать в одном плагине, так что тут дело вкуса. В Newsblog_Social мы поместим плагин для написания комментариев к статье.

В качестве примера я добавил плагин Текст с частью моей предыдущей статьи:

После сохранения всех изменений страница со статьёй будет выглядеть уже так:

Уже намного лучше! При этом если перейти на страницу блога с лентой статей (пункт Блог в главном меню), то можно увидеть что там всё осталось без изменений. Это очень удобно, так как у нас есть лента статей с коротким вступительным текстом для каждой статьи и полноценная страница с полным текстом статьи.

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

Выполните команду:

pip install aldryn-disqus

Не забудьте добавить зависимость aldryn-disqus в requirements.txt.

После этого откройте файл settings.py и добавьте в INSTALLED_APPS приложение 'aldryn_disqus'. Кроме этого, понадобится ещё одна настройка для Disqus:

DISQUS_SHORTNAME = 'example'

Эту переменную нужно обязательно задать в settings.py. В качестве значения переменной указывается shortname - уникальный идентификатор вашего сайта в Disqus. Этот идентификатор вы задаёте сами в личном профиле Disqus при создании профиля вашего сайта (https://disqus.com/admin/create/) и он обязательно должен совпадать с названием вашего домена, иначе работать не будет. Для данного примера я не регистрировал доменное имя, поэтому я указал для переменной DISQUS_SHORTNAME значение example (не рабочее), которое обязательно нужно заменить на реальный shortname.

Ну и финальный штрих:

python manage.py migrate

На этом настройка плагина завершена и теперь перезапустите сервер, откройте страницу со статьёй нашего блога, нажмите кнопку Структура, и добавьте в плейсхолдер Newsblog_Social плагин Disqus Plugin:

Нажимаем кнопку Опубликовать изменения страницы и получаем такой результат:

В конце статьи появилась возможность писать комментарии!

Кастомизация

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

Все шаблоны для Aldryn News&Blog находятся в виртуальном окружении проекта, в нашем случае тут:

env/lib/python3.5/site-packages/aldryn_newsblog/templates/aldryn_newsblog

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

После этого действия стандартные шаблоны Aldryn News&Blogs будут замещены шаблонами из папки templates и можно смело вносить правки не боясь ничего испортить :)

В качестве примера я внесу одно простое изменение: я хочу чтобы в заголовке было только название статьи и дата публикации статьи, а метки, автора и категорию я уберу. Для этого я закомментировал всё лишнее в файле templates/aldryn_newsblog/includes/article.html:

{% load i18n staticfiles thumbnail cms_tags apphooks_config_tags %}

<article class="article
    {% if article.is_featured %} featured{% endif %}
    {% if not article.published %} unpublished{% endif %}">

    {# The image is only shown on the detail view by using the condition "and detail_view" #}
    {% if article.featured_image_id and detail_view %}
        <p>
            <img src="{% thumbnail article.featured_image 800x450 crop subject_location=article.featured_image.subject_location %}" alt="{{ article.featured_image.alt }}">
        </p>
    {% endif %}

{#    {% if article.categories.exists %}#}
{#        <p>#}
{#            {% for category in article.categories.all %}#}
{#                <a href="{% namespace_url 'article-list-by-category' category.slug namespace=namespace default='' %}">{{ category.name }}</a>#}
{#                {% if not forloop.last %}, {% endif %}#}
{#            {% endfor %}#}
{#        </p>#}
{#    {% endif %}#}

    <h2>
        {% if not detail_view %}
            <a href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}">{% render_model article "title" %}</a>
        {% else %}
            {% render_model article "title" %}
        {% endif %}
    </h2>

    <p>{{ article.publishing_date|date }}</p>

{#    {% include "aldryn_newsblog/includes/author.html" with author=article.author %}#}

{#    {% if article.tags %}#}
{#        <p>#}
{#            {% for tag in article.tags.all %}#}
{#                <a href="{% namespace_url 'article-list-by-tag' tag=tag.slug namespace=namespace default='' %}">{{ tag.name }}</a>#}
{#            {% endfor %}#}
{#        </p>#}
{#    {% endif %}#}

    {% render_model article "lead_in" %}

    {% if detail_view %}
        {% render_placeholder article.content language placeholder_language %}
    {% endif %}
</article>

В итоге список статей будет выглядеть так:

А сама статья вот так:

Что ещё можно улучшить? Например можно вывести список последних статей, добавить облако меток, сделать поиск и для всего этого у Aldryn News&Blog есть готовые плагины из коробки, вот их список:

Более того, шаблоны плагинов легко кастомизируется и мы их уже скопировали в свой проект. Лежат они тут: templates/aldryn_newsblog/plugins. Так что у вас есть полный набор достаточно гибких инструментов для создания крутого блога.

На этом всё, не забудьте опубликовать созданную статью, иначе она будет доступна только в режиме редактирования.

Ну и традиционно ссылочка на проект: https://github.com/AlexeyKutepov/django_cms_project/tree/part2