Исходники webstartpage.ru


Привет, друзья.

Я подумал и решил, что выложить всем на обозрение исходники моего последнего проекта может быть весьма полезно. Так что вот они, держите.

Сайт отличается использованием файловых элементов и сборкой скриптов\стилей через Gulp. Если вы давно хотели узнать, как разрабатывают сайты MODX из PhpStorm — вот ваш шанс!

Для начала нужно установить pdoTools и HybridAuth. Затем нужно выгрузить исходники Startpage.
Внимание, работать только на чистом сайте! На рабочих проектах эксперементировать не нужно.

Итак, создаём директории на сервере (всё указано для modhost.pro):
mkdir ~/www/Extras && mkdir ~/www/Extras/Startpage
mkdir ~/www/Extras/Startpage/assets && mkdir ~/www/Extras/Startpage/core
mkdir ~/www/Extras/Startpage/assets/components && mkdir ~/www/Extras/Startpage/core/components
mkdir ~/www/assets/components/startpage && mkdir ~/www/core/components/startpage

Потом делаем символические ссылки, чтобы загружаемые файлы попадали в рабочие директории:
ln -s ~/www/assets/components/startpage ~/www/Extras/Startpage/assets/components/
ln -s ~/www/core/components/startpage ~/www/Extras/Startpage/core/components/startpage

Дальше можно собирать пакет вызовом через
http://yoursite.com/Extras/Startpage/_build/build.transport.php
А можно и не собирать — все изменения сразу вступают в работу, благодаря символическим ссылкам.

Ключ для загрузки скриншотов нужно получить у screenshotmachine.com и указать в настройку sp_api_key.

Исходники скриптов и стилей находятся в _build/assets, также обратите обратите внимание на package.json и gulpfile.js в корне. Установка нужных javascript библиотек
npm install --prefix ~/www/Extras/Startpage/_build/

Минификация и копирование их в рабочие директории:
gulp copy --gulpfile ~/www/Extras/Startpage/_build/gulpfile.js

Сборка скриптов и стилей самого дополнения:
gulp watch --gulpfile ~/www/Extras/Startpage/_build/gulpfile.js

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

Настройки для работы в PhpStorm примерно такие:


Таким образом я и делаю сегодня сайты на MODX, практически не открывая админку.
18 may 2017, 10:57    Василий Наумкин   G+  
13    465 +28

Comments (7)

  1. Дмитрий 18 may 2017, 12:01 # 0
    Супер! Большое спасибо! Как раз хотел научиться такие штуки делать. Теперь есть база для экспериментов.
    1. ck 18 may 2017, 12:13 # 0
      Вот это подарок!
      Документация — это, конечно, хорошо, но рабочий проект — просто здорово!
      1. Алексей Соин 18 may 2017, 14:24 # 0
        Спасибо большое!
        1. Александр Москвин 18 may 2017, 17:54 # 0
          Респект)
          1. Сергей Лелеко 18 may 2017, 18:30 # +1
            Василий, спасибо большое тебе! Очень полезно в образовательных целях так сказать :)
            1. Волков Николай 18 may 2017, 20:15 # +1
              От меня тоже низкий поклон. Давно хотел глянуть на то, как сделан полностью сайт, а не отдельный компонент, от программиста такого уровня. Так сказать перенять фишечки:-)
              1. Rahim Egamov 20 may 2017, 16:45 # 0
                Без слов! RESPECT
                You need to login to create comments.