it-swarm.it

Flusso di lavoro per lo sviluppo / regolazione di modelli

Di solito modifico solo modelli gratuiti esistenti e cambio colori e caratteri. La domanda è: quando ho già la mia pagina Joomla online, qual è il modo più semplice per apportare modifiche al modello CSS?

Attualmente sto usando Chrome Development Tools per trovare e regolare stili specifici per un'anteprima. Se mi piace, aggiorno il file css del modello direttamente nell'editor online nell'area di amministrazione.

Quando ho iniziato e non avevo contenuti, ho usato un server web locale con Joomla che aveva il vantaggio di poter usare un IDE corretto per scrivere codice css e php. Da quando ho già alcuni contenuti ora, vorrei vedere come appaiono le modifiche con i contenuti che ho.

So che questa è una domanda di base, ma esiste un flusso di lavoro preferito quando qualcuno vuole regolare il design di un sito esistente?

16
halirutan

Clonare il sito di vita con Akeeba, installarlo localmente, quindi regolare come richiesto. Quando hai finito SSH/FTP i tuoi file modificati sono tornati al sito live.

Ci sono tutta una serie di buoni motivi per cui è imprudente "Tweak" su un sito live ...

10
Seth Warburton

Hai alcune opzioni qui, a seconda che la tua attenzione sia la facilità d'uso, l'automazione o il costo:

  • Fai esattamente quello che hai fatto prima con la tua installazione locale, ma una volta installato, modifica l'installazione locale di Joomla per utilizzare il tuo database MySQL live e remoto in configuration.php, se il tuo host supporta l'accesso remoto. Attenzione però: qualsiasi modifica al DB passerà al live ...

  • Usa un componente come extplorer e modifica i file modello direttamente nel browser, con un'altra scheda aperta che mostra il sito, ancora usando Strumenti di sviluppo di Chrome. extplorer presenta una colorazione del codice ed è ideale per apportare rapidamente piccole modifiche.

  • Usa un sistema di controllo della versione per inviare le modifiche, ad esempio sviluppa il tuo modello in un'installazione Joomla locale usando l'IDE scelto, con il modello in un repository. Al termine, apporta le modifiche al tuo sito live. Utilizzare un hook post-commit per verificare tali modifiche come versione funzionante. Sebbene sia più complicato da configurare, significa che puoi sempre ripristinare le versioni precedenti del modello se commetti un errore. Aggiungi MySQL remoto per garantire la coerenza dei dati tra locale e live.

  • Paga per un modello/modello di framework adeguato - nella mia azienda utilizziamo YooTheme modelli. Questo framework di template ha una funzione chiamata 'Customizr', che è sostanzialmente una finestra a 2 riquadri con centinaia di variabili CSS (beh, variabili LESS) a sinistra e un'anteprima live a destra. Queste variabili controllano abbastanza vicino a ogni elemento del modello, dall'imbottitura di Gutter all'ombra del testo delle voci di menu e tutto il resto. Le modifiche vengono applicate istantaneamente nell'anteprima e possono essere definiti più 'stili' in modo da poter giocare con diverse configurazioni variabili. Detto questo, sono sicuro che altri framework di template hanno caratteristiche molto simili.

NB: Non ho alcuna relazione con extplorer né con YooTheme se non come utente.

10
codinghands

Se si tratta solo di modifiche CSS che stai apportando, puoi anche continuare a visualizzarle in anteprima in Chrome Strumenti di sviluppo e utilizzare un ambiente di sviluppo online come Cloud9 o ShiftEdit puoi connetterti direttamente al tuo server via FTP ed apportare modifiche al sito live usando un IDE appropriato simile a quello che hai fatto quando è stato ospitato localmente.

Non lo consiglierei comunque per eventuali cambiamenti più grandi che potrebbero danneggiare il tuo sito (l'ho imparato nel modo più duro qualche anno fa). Per questi, consiglio di configurare un server locale (o un VM gratuito da koding.com ), clonare il sito con Akeeba e usare Git * per Invia le modifiche al tuo sito live dopo averle testate.

* Se non vuoi che il tuo codice sia pubblico su GitHub una buona alternativa è BitBucket .

6
Adam B

Metodo 1

Un metodo che ho usato è quello di aggiungere il mio file css nel file index.php del modello. Questo può essere racchiuso per aggiungerlo solo se sei l'utente.

Un modo per estenderlo è scrivere un semplice plugin che aggiunge un file css se sei l'utente. Ho usato questo per apportare modifiche al modello di amministrazione predefinito, per evitare di apportare direttamente modifiche al modello che potrebbero essere sostituite dal prossimo aggiornamento.

Qualcosa di simile a...

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

Metodo 2

Per visualizzare l'anteprima delle modifiche al modello, è possibile duplicare il modello e apportare modifiche nel duplicato. Per visualizzare tali modifiche, aggiungi "? Template = test" all'URL, che sostituisce il modello. Sostituisci "test" con qualsiasi nome tu abbia deciso di usare per il duplicato.

Nota che devi duplicare l'intero modello e non solo uno stile. Sia gli stili che i modelli possono essere duplicati nella GUI dell'amministratore.

Non credo che sia possibile sovrascrivere uno stile nell'URL. [PW: Ho appena scoperto che in J3, puoi sovrascrivere uno stile nell'URL. Vedi metodo 3.]


Metodo 3

Simile al metodo 2 ma con stili. Utilizzare uno stile "test" e modificare il modello principale per includere il foglio di stile di test. Per sovrascrivere uno stile nell'URL, aggiungi? TemplateStyle =, dove si trova l'identificatore del modello (cioè numerico).

5
Peter Wiseman