Более 10 лет работаю удаленно. Захотелось поделиться опытом поиска удаленных заказов и собрать список платформ для поиска фриланс-проектов. Сразу встал вопрос, на чем реализовывать проект. Я немного разбираюсь в PHP, JS и даже Python, но себя программистом не считаю и, в общем-то, не сильно люблю писать код. По этой причине было решено не использовать фреймворки, а сделать всё на готовой CMS. Выбор пал на Drupal — не самый популярный вариант сейчас, но, считаю, абсолютно незаслуженно.

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

Тип материала и поля

Основа сайта — контент. Главная фича, из-за которой выбран Drupal, — настраиваемые типы контента и модуль Field. В любой момент можно добавить поля разного вида. Если не хватает стандартных, есть множество модулей на drupal.org и всегда можно написать свой / заказать на фрилансе. Все настройки доступны в админке, а модули загружаются одной командой в Composer. Ну, покажите, где еще так можно?

В моем случае, чтобы понимать, какой сервис лучше, хочется иметь объективную метрику. Alexa и SimilarWeb — признанные источники данных о посещаемости, Ahrefs — сервис для специалистов по продвижению, анализирующий ссылки на сайт. Все три сервиса имеют API, к сожалению, довольно ограниченные в бесплатной версии. Для получения данных сделан простой модуль. Данные счетчика — это обычные числовые поля. При сохранении материала (ноды) запускается hook_node_presave, получающий информацию через API и сохраняющий в поле.

<?php 
function freelanceabout_node_presave(Drupal\Core\Entity\EntityInterface $entity) {
    if ($entity->getType() == 'site') {
	    $domain = $entity->field_link->uri; //Получаем значение поля адреса сайта
	    $domain = parse_url($domain); 
	    $domain = $domain['host']; // Получаем доменное имя сайта
        $entity->field_alexa_rank->value = alexa_rank_get($domain); // Получаем Alexa Rank     
    } 
}

function alexa_rank_get($domain) {
	$rank = 0; // На случай, если нет информации о сайте

	// Ниже код из докуметации Amazon API
	    $url = 'https://awis.api.alexa.com/api?Action=UrlInfo&Output=json&Count=10&ResponseGroup=Rank,LinksInCount&Start=1&Url='.$domain; 
	
	    $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_TIMEOUT, 4);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_HTTPHEADER, array(
	      'Accept: application/xml',
          'Content-Type: application/xml',
          'x-api-key: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
        ));
        $response = curl_exec($ch);
        curl_close($ch);
        
        $response = json_decode($response, true);
    
    $rank = $response['Awis']['Results']['Result']['Alexa']['TrafficData']['Rank']; // Получаем нужное значение
       
    return $rank;
}

Темизация

В своем проекте хочется попробовать какие-то необычные дизайнерские решения. Шаблонизатор Twig позволяет проводить такие эксперименты. Для примера — страница фриланс-биржи. Это один Twig-шаблон, где расставлены все поля. Layout было решено не использовать, чтобы иметь полный контроль над версткой страницы.

Каталог и поиск

Еще одно важное преимущество Drupal — модуль Views, позволяющий создавать динамические страницы без написания кода. Главная страница — Views c контекстными фильтрами по URL и сортировкой. Чаще всего в таких случаях используют Exposed Filters, но мне хотелось получить красивые адреса страниц вида «язык/страна/специализация». При использовании Contextual filters нет автоматической формы выбора, как в случае раскрытых фильтров. Поэтому все же пришлось написать простой модуль, добавляющий форму, с переходом на страницу с нужными параметрами.

Отзывы

Технически отзыв — это комментарий. CMS дает возможность по аналогии с типами контента добавлять разные типы комментариев и подключать к ним любые поля. Для выставления оценки используется модуль Fivestar. Я работаю с ним еще с 6-й версии Drupal и не имею нареканий на работу. 9-я версия нестабильна, но работает отлично, а все возможные проблемы и сценарии использования описаны в трекере проекта.

Работает рейтинг так: в форме комментария есть поле оценки (Fivestar), где пользователи при написании отзыва выставляют оценку. В настройках типа материала добавлено еще одно поле Fivestar, но уже без возможности редактирования — оно агрегирует данные всех комментариев.

Регистрация

По умолчанию Drupal представляет функцию регистрации с адресом электронной почты. Одной почты в 2021 году недостаточно, поэтому подключен вход из Facebook и Google. Для этого есть готовые модули, где нужно только заполнить форму настроек. Самое сложное в этом процессе — разобраться в запутанном интерфейсе Facebook и получить свой API-ключ.

Оптимизация и производительность

Сайт сейчас крутится на самом дешевом тарифе Vultr за 5$ в месяц. На Apache и MySQL с дефолтными настройками. При этом в PageSpeed Insights удалось достичь оценки 97 из 100. В этом помогли два модуля, мне не пришлось ничего писать самому.

AdvAgg сжимает CSS и JS, что значительно увеличивает скорость загрузки сайта.
Другой полезный модуль, Webp, преобразует все загруженные изображения в формат WebP, который очень любит «Гугл».

Обновление с Drupal 8 на Drupal 9

Первую версию FreelanceAbout я сделал в 2020 году, когда Drupal 9 еще был в статусе беты. Сейчас захотелось перейти на новую версию. При обновлении обнаружилось, что некоторые модули не имеют версии под «девятку», но это не проблема: в большинстве случаев достаточно добавить одну строку в .info-файл модуля.

Надеюсь, я сумел показать, насколько просто можно делать нешаблонные проекты на Drupal. В отличие от фреймворков Laravel, CodeIgniter и других здесь вам не нужно писать много кода (почти всё можно сделать в админке). Без фронтэнд-библиотек React, Vue, не нужно знать и использовать два разных языка программирования. Это дает возможность запуска проекта в одиночку или командой из нескольких человек. При этом сайт сразу имеет базовую поисковую оптимизацию, возможность регистрации пользователей и быстро работает.