Исходники 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/

Дальше можно собрать и установить пакет вызовом через
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/
npm link gulp

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

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

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

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


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

Комментарии (13)

  1. Дмитрий 18 мая 2017, 12:01 # 0
    Супер! Большое спасибо! Как раз хотел научиться такие штуки делать. Теперь есть база для экспериментов.
    1. ck 18 мая 2017, 12:13 # 0
      Вот это подарок!
      Документация — это, конечно, хорошо, но рабочий проект — просто здорово!
      1. Алексей Соин 18 мая 2017, 14:24 # 0
        Спасибо большое!
        1. Александр Москвин 18 мая 2017, 17:54 # 0
          Респект)
          1. Сергей Лелеко 18 мая 2017, 18:30 # +1
            Василий, спасибо большое тебе! Очень полезно в образовательных целях так сказать :)
            1. Волков Николай 18 мая 2017, 20:15 # +1
              От меня тоже низкий поклон. Давно хотел глянуть на то, как сделан полностью сайт, а не отдельный компонент, от программиста такого уровня. Так сказать перенять фишечки:-)
              1. Rahim Egamov 20 мая 2017, 16:45 # 0
                Без слов! RESPECT
                1. Михаил 02 июля 2017, 08:51 # 0
                  отличная тема. осталось только выпилить все, и заставить как то ссылку работать:
                  ln -s ~/www/assets/components/startpage ~/www/Extras/Startpage/assets/components/
                  ln -s ~/www/core/components/startpage ~/www/Extras/Startpage/core/components/startpage
                  А то показывает ссылку но фактически не ссылается
                  Вот так
                  1. Василий Наумкин 02 июля 2017, 09:33 # +1
                    Исправил ошибку в команде и проверил всё на чистом сайте — работает без нареканий

                    s9942.h4.modhost.pro
                    Пароли для доступа:
                    ssh - otoJrIu3WfkF
                    manager - IYGQdSvp5ldt
                    1. Михаил 02 июля 2017, 09:46 # +1
                      Сейчас попробую выпилить и оставить как болванку. Так сказать для чистой установке и пошел разрабатывать. Только сейчас посмотрю gulp и scss.

                      Или может есть чистая?
                      1. Михаил 02 июля 2017, 09:52 # 0
                        Хотя меняю в шаблоне который в Extras но на сайте не меняется))) или я не так понял?
                        1. Василий Наумкин 02 июля 2017, 09:57 # +2
                          Попробуй почитать описание.

                          Это не для разработки дополнений — это готовый сайт webstartpage.ru. Ничего выпиливать не нужно, можно просто посмотреть как я сейчас делаю сайты на MODX.
                          1. Михаил 02 июля 2017, 10:00 # +1
                            Все, понял. Это я тупанул. Спасибо еще раз за шикарный туториал.
                    Вы должны авторизоваться, чтобы оставлять комментарии.