Przepływ pracy dotyczący opracowywania / dostosowywania szablonów

16

Zwykle dostosowuję tylko istniejące bezpłatne szablony i zmieniam kolory i czcionki. Pytanie brzmi: kiedy mam już swoją stronę Joomla online, jaki jest najłatwiejszy sposób na wprowadzenie zmian w szablonie css?

Obecnie używam Narzędzi programistycznych Chrome, aby znaleźć i dostosować określone style podglądu. Jeśli mi się podoba, dostosowuję plik css szablonu bezpośrednio w edytorze online w obszarze administracyjnym.

Kiedy zaczynałem i nie miałem żadnej zawartości, korzystałem z lokalnego serwera z Joomla, który miał tę zaletę, że mogłem użyć odpowiedniego IDE do pisania kodu css i php. Ponieważ mam już trochę treści, chciałbym zobaczyć, jak zmiany, które wprowadzam, wyglądają z zawartością, którą mam.

Wiem, że jest to podstawowe pytanie, ale czy istnieje preferowany przepływ pracy, gdy ktoś chce dostosować projekt istniejącej witryny?

halirutan
źródło

Odpowiedzi:

10

Sklonuj witrynę za pomocą Akeeba, zainstaluj ją lokalnie, a następnie dostosuj zgodnie z wymaganiami. Po zakończeniu SSH / FTP zmienione pliki z powrotem do strony na żywo.

Istnieje wiele dobrych powodów, dla których nierozsądne jest „poprawianie” w witrynie na żywo…

Seth Warburton
źródło
Pamiętaj, że jeśli modyfikujesz modyfikację bazy danych (na przykład zmieniłeś kolejność modułów), to nie zadziała.
Flimm
@Flimm Pytanie dotyczyło zmiany CSS, a nie synchronizacji zmian zachowanych w bazie danych.
Seth Warburton
10

Masz tutaj kilka opcji, w zależności od tego, czy Twoim celem jest łatwość użycia, automatyzacja czy koszt:

  • Rób dokładnie to, co robiłeś wcześniej z instalacją lokalną, ale po zainstalowaniu zmień lokalną instalację Joomla, aby korzystać z aktywnej, zdalnej bazy danych MySQL configuration.php, jeśli host obsługuje zdalny dostęp. Bądź jednak ostrożny - wszelkie zmiany DB zostaną przeniesione na żywo ...

  • Użyj komponentu takiego jak extplorer i edytuj pliki szablonów bezpośrednio w przeglądarce, z otwartą kolejną kartą wyświetlającą witrynę, nadal korzystając z narzędzi programistycznych Chrome. extplorer posiada kolorowanie kodu i świetnie nadaje się do szybkiego wprowadzania drobnych zmian.

  • Użyj systemu kontroli wersji, aby wypchnąć zmiany - na przykład opracuj szablon w lokalnej instalacji Joomla, używając wybranego IDE, z szablonem w repozytorium. Po zakończeniu wprowadź zmiany w aktywnej witrynie. Użyj haka po zatwierdzeniu, aby sprawdzić te zmiany jako działającą wersję. Chociaż konfiguracja jest bardziej skomplikowana, oznacza to, że zawsze możesz przywrócić stare wersje szablonów, jeśli popełnisz błąd. Dodaj zdalny MySQL, aby zapewnić spójność danych na poziomie lokalnym i na żywo.

  • Zapłać za odpowiedni szablon / framework szablonów - w mojej firmie korzystamy z szablonów YooTheme . Ta struktura szablonów ma funkcję o nazwie „Customizr”, która jest zasadniczo dwupanelowym oknem zawierającym setki zmiennych CSS (dobrze, zmienne LESS) po lewej stronie i podgląd na żywo po prawej stronie. Zmienne te kontrolują wystarczająco dużo każdego elementu szablonu, od wypełnienia rynny po cień tekstu pozycji menu i wszystko pomiędzy. Zmiany są wprowadzane natychmiast w podglądzie i można zdefiniować wiele „stylów”, dzięki czemu można grać z różnymi konfiguracjami zmiennych. To powiedziawszy, jestem pewien, że inne ramy szablonów mają bardzo podobne funkcje.

NB: Nie mam żadnych powiązań z extplorer ani YooTheme inaczej niż jako użytkownik.

kodowania
źródło
6

Jeśli wprowadzasz tylko zmiany CSS, możesz kontynuować ich podgląd w Narzędziach programistycznych Chrome i przy użyciu internetowego środowiska programistycznego, takiego jak Cloud9 lub ShiftEdit , możesz połączyć się bezpośrednio z serwerem za pośrednictwem FTP i wprowadzić poprawki w witrynie na żywo, używając odpowiedniego IDE podobnie jak wtedy, gdy był hostowany lokalnie.

Nie polecałbym tego jednak w przypadku większych zmian, które mogłyby uszkodzić Twoją witrynę (kilka lat temu nauczyłem się na własnej skórze). W tym przypadku zalecam skonfigurowanie lokalnego serwera (lub darmowej maszyny wirtualnej z koding.com ), klonując stronę za pomocą Akeeba i używanie Git * do wypychania zmian na stronie po ich przetestowaniu.

* Jeśli nie chcesz, aby Twój kod był publiczny w GitHub, jedną dobrą alternatywą jest BitBucket .

Adam B.
źródło
5

Metoda 1

Jedną z zastosowanych przeze mnie metod jest dodanie własnego pliku css do pliku szablonu index.php. Można to zawinąć, aby dodać, jeśli jesteś użytkownikiem.

Jednym ze sposobów rozszerzenia tego jest napisanie prostej wtyczki, która dodaje plik css, jeśli jesteś użytkownikiem. Użyłem tego, aby wprowadzić zmiany w domyślnym szablonie administratora, aby uniknąć wprowadzania zmian bezpośrednio w szablonie, które mogą zostać zastąpione przez następną aktualizację.

Coś jak...

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");
}

Metoda 2

Aby wyświetlić podgląd zmian szablonu, możesz powielić szablon i wprowadzić zmiany w duplikacie. Aby wyświetlić te zmiany, dodaj „? Template = test” do adresu URL, który zastępuje szablon. Zamień „test” na dowolną nazwę, którą zdecydowałeś się zastosować do duplikatu.

Pamiętaj, że musisz powielić cały szablon, a nie tylko styl. Zarówno style, jak i szablony można duplikować w interfejsie administratora.

Nie sądzę, że można zastąpić styl w adresie URL. [PW: Właśnie dowiedziałem się, że w J3 możesz zastąpić styl w adresie URL. Zobacz metodę 3.]


Metoda 3

Podobne do metody 2, ale ze stylami. Użyj stylu „testowego” i zmodyfikuj główny szablon, aby uwzględnić arkusz stylów testowych. Aby zastąpić styl w adresie URL, dodaj? TemplateStyle =, gdzie jest identyfikator szablonu (tj. Numeryczny).

Peter Wiseman
źródło
@peter Podoba mi się pomysł wtyczki, nadal uważam, że powinieneś zdalnie kodować i zameldować się w celu kontroli źródła, ale jeśli jest udostępniany zespołowi testującemu, próby niektórych testów mogą być dobre
tristanbailey
1
@tristanbailey Thanks. Tak, zdalne kodowanie jest znacznie czystsze, ale pytanie zawierało odniesienie do robienia tego online w istniejącej witrynie.
Peter Wiseman