Creare child-theme in Orchard

by Andrea 20 April 2011 03:37

Uno dei vantaggi che ho trovato in Orchard, stà nella possibilità di creare dei child-theme, cioè temi che ereditano da un tema esistente. Questo è un grosso vantaggio in quanto permette di lasciare intatto il tema base, e lavorare nel nuovo tema andando a modificare solamente i file che differiscono.

Il metodo che più mi è piaciuto per realizzare child-theme è quello basato sulla Code Generation di Orchard (Command-Line Code Generation), che è un modulo che si trova nella gallery, e che possiamo tranquillamente utilizzare durante lo sviluppo di nuove funzionalità per questo CMS.

Ma vediamo cosa dobbiamo fare:

  • Abilitare il modulo 'Code Generation' dalla dashboard
  • Avviare l'applicativo Orchard.exe contenuto nella cartella bin del progetto Orchard
  • Nella console che si aprirà inserire la seguente riga:
    codegen theme TestTheme /BasedOn:TheThemeMachine /CreateProject:true

Theme_projectIn questo modo verrà creata una nuova cartella all'interno della cartella Themes, con il nome voluto, in questo caso TestTheme.
Avendo specificato CreateProject:true verrà anche creato un progetto che ci permetterà di aprire ed editare i file del tema direttamente da Visual Studio (immagine qui a destra).
Con BasedOn:TheThemeMachine si specifica di utilizzare un specifico tema, come tema base, dandoci la possibilità di scrivere solamente le view o altri file (fogli di stile, immagini) che differiscono dal tema base (invece che tutti i file).

La soluzione più semplice 'inizialmente' sarà quella di copiare dal tema base i soli file che si vogliono modificare e compiere le customizzazioni volute, velocizzando di gran lunga il processo di creazione del nostro tema.

Dopo aver creato il nuovo tema, uno dei primi file che andremo a modificare sarà Theme.txt, che è il manifest del tema, e contiene tutte le informazioni relative al tema presente in quella precisa cartella, quali autore, descrizione e come visto, il tema base da utilizzare.
Rimuovendo la riga che inizia con BaseTheme, si forzerà l'uso del solo tema corrente, senza quindi  ereditare da un tema esistente.

Name: TestTheme
Author: Andrea Dottor
Website: http://blog.dottor.net
Description: Description for the theme
Version: 1.0
BaseTheme: TheThemeMachine
# todo: provide tags
# Tags: Classic, Serif

Una volta assegnati nuovi valori al file Theme.txt si potrà procedere con la modifica degli stili nel file Style/Site.css oppure del layout, lavorando nel file Views/Layout.cshtml, oppure in una specifica view.
Avendo il grosso vantaggio di ereditare da un tema base, le modifiche che dovremmo compiere, ad esempio per modificare gli stili, sono ridotte al minimo:

  • Copiare il file Site.css dal tema base alla cartella Style del nuovo tema
  • Modificare gli stili voluti direttamente da Visual Studio

Terminata la modifica/creazione del nostro tema, non dovremo fare altro che abilitarlo diretamente dalla dashboard di Orchard nella sezione Themes.
Consiglio anche di fare uno screenshot del website con il nuovo tema e sostituirla al file Theme.png per facilitarne il riconoscimento dalla dashboard.

Per approfondire l'argomento: http://www.orchardproject.net/docs/

Technorati Tags: ,,

Tags: , , , ,

.NET | ASP .NET | Microsoft

Comments are closed