Рабочий процесс для разработки / настройки шаблонов

16

Обычно я только настраиваю существующие бесплатные шаблоны и меняю цвета и шрифты. Вопрос в том, когда у меня уже есть страница Joomla в Интернете, какой самый простой способ внести изменения в шаблон CSS?

В настоящее время я использую инструменты разработки Chrome для поиска и настройки определенных стилей для предварительного просмотра. Если мне это нравится, я настраиваю файл css шаблона прямо в онлайн-редакторе в области администрирования.

Когда я только начинал, и у меня не было никакого контента, я использовал локальный веб-сервер с Joomla, который имел преимущество в том, что я мог использовать подходящую IDE для написания CSS и PHP-кода. Поскольку у меня уже есть какой-то контент, я бы хотел посмотреть, как изменения, которые я делаю, выглядят с моим контентом.

Я знаю, что это основной вопрос, но есть ли предпочтительный рабочий процесс, когда кто-то хочет изменить дизайн существующего сайта?

halirutan
источник

Ответы:

10

Клонируйте сайт с помощью Akeeba, установите его локально, а затем настройте по мере необходимости. Когда вы закончите SSH / FTP, ваши измененные файлы вернутся на сайт.

Есть множество веских причин, по которым неосторожно «подгонять» на живом сайте…

Сет Уорбертон
источник
Обратите внимание, что если вы изменили базу данных (например, вы изменили порядок модулей), это не сработает.
Флим
@Flimm Речь шла об изменении CSS, а не о синхронизации изменений, которые хранятся в БД.
Сет Уорбертон
10

У вас есть несколько вариантов здесь, в зависимости от того, простота использования, автоматизация или стоимость:

  • Сделайте то же самое, что вы делали ранее с локальной установкой, но после установки измените локальную установку Joomla, чтобы использовать вашу живую, удаленную базу данных MySQL configuration.php, если ваш хост поддерживает удаленный доступ. Будьте осторожны - любые изменения БД будут перенесены в живую ...

  • Используйте такой компонент, как extplorer, и отредактируйте файлы шаблонов прямо в браузере, с другой открытой вкладкой, отображающей сайт, с использованием инструментов разработчика Chrome. extplorer имеет раскраску кода и отлично подходит для быстрого внесения небольших изменений.

  • Используйте систему управления версиями для отправки изменений - например, разработайте свой шаблон в локальной установке Joomla, используя выбранную IDE, с шаблоном в хранилище. Когда закончите, внесите изменения в ваш живой сайт. Используйте зацепку после фиксации, чтобы оформить эти изменения как рабочую версию. Хотя это сложнее в настройке, это означает, что вы всегда можете вернуться к старым версиям шаблона, если допустите ошибку. Добавьте удаленный MySQL, чтобы обеспечить согласованность данных между локальными и живыми.

  • Платите за подходящий шаблон / шаблонную структуру - в моей компании мы используем шаблоны YooTheme . Этот шаблонный фреймворк имеет функцию под названием «Customizr», которая представляет собой двухпанельное окно с сотнями переменных CSS (ну, переменные LESS) слева и предварительным просмотром справа. Эти переменные контролируют достаточно близко каждый элемент шаблона, от заполнения желоба до тени текста пункта меню, и всего, что между ними. Изменения применяются мгновенно в предварительном просмотре, и можно определить несколько «стилей», чтобы вы могли играть с различными конфигурациями переменных. Все это говорит, я уверен, что у других шаблонных фреймворков есть очень похожие функции.

NB: я не имею отношения ни к extplorer, ни к YooTheme, кроме как как пользователь.

codinghands
источник
6

Если вы просто вносите изменения в CSS, вы можете продолжить их предварительный просмотр в Chrome Development Tools и, используя среду онлайн-разработки, такую ​​как Cloud9 или ShiftEdit, вы можете напрямую подключиться к вашему серверу через FTP и внести изменения в действующий сайт, используя подходящую среду IDE. похоже на то, как вы это делали, когда он был размещен локально

Однако я не рекомендовал бы это для каких-либо более значительных изменений, которые могут сломать ваш сайт (я научился этому нелегко несколько лет назад). Для этого я рекомендую настроить локальный сервер (или бесплатную виртуальную машину с сайта koding.com ), клонировать сайт с помощью Akeeba и использовать Git * для внесения изменений в ваш действующий сайт после их тестирования.

* Если вы не хотите, чтобы ваш код был общедоступным на GitHub, хорошей альтернативой является BitBucket .

Адам Б
источник
5

Способ 1

Один из методов, который я использовал, - это добавление моего собственного файла CSS в файл шаблона index.php. Это может быть добавлено, только если вы являетесь пользователем.

Способ расширить это - написать простой плагин, который добавляет файл CSS, если вы являетесь пользователем. Я использовал это для внесения изменений в шаблон администратора по умолчанию, чтобы избежать внесения изменений непосредственно в шаблон, который может быть заменен следующим обновлением.

Что-то вроде...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Способ 2

Для предварительного просмотра изменений шаблона вы можете продублировать шаблон и внести изменения в дубликат. Чтобы просмотреть эти изменения, добавьте «? Template = test» к URL, который переопределяет шаблон. Замените «test» тем именем, которое вы решили использовать для дубликата.

Обратите внимание, что вам нужно продублировать весь шаблон, а не только стиль. Оба стиля и шаблоны могут быть продублированы в интерфейсе администратора.

Я не верю, что можно изменить стиль в URL. [PW: Я только что узнал, что в J3 вы можете переопределить стиль в URL. Смотрите способ 3.]


Способ 3

Аналогично методу 2, но со стилями. Используйте «тестовый» стиль и измените основной шаблон, чтобы включить тестовую таблицу стилей. Чтобы переопределить стиль в URL, добавьте? TemplateStyle =, где находится идентификатор шаблона (то есть числовой).

Питер Уайзман
источник
@peter Мне нравится идея плагина, я все еще думаю, что вы должны кодировать удаленно и возвращаться в систему контроля
версий,
1
@tristanbailey Спасибо. Да, удаленное кодирование намного чище, но в вопросе упоминается, что это можно сделать на существующем сайте.
Питер Уайзман