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

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

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

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

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

15 голосов | спросил halirutan 2 Maypm14 2014, 17:17:27

4 ответа


9

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

Есть целый ряд веских причин, почему это неосмотрительно для «слабых» на живом сайте?

ответил Seth Warburton 2 Maypm14 2014, 21:45:45
9

Здесь у вас есть несколько вариантов, в зависимости от того, является ли ваш фокус простой в использовании, автоматизации или стоимости:

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

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

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

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

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

ответил codinghands 2 Maypm14 2014, 19:11:10
6

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

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

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

ответил Adam B 2 Maypm14 2014, 22:32:15
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-адресу, который переопределяет шаблон. Замените «тест» на любое имя, которое вы решили использовать для дубликата.

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

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


Способ 3

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

ответил Peter Wiseman 3 Mayam14 2014, 08:43:35

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132