Quando sviluppiamo un modulo in Orchard, possiamo aggiungere alcuni stili o script specifici per questo modulo. Dal punto di vista dell'ottimizzazione delle pagine web, spesso dobbiamo aggiungere stili all'inizio della pagina (<head>sull'etichetta), mentre gli script vogliono essere aggiunti in fondo alla pagina (vicino</body> all'etichetta). Tuttavia, il file di visualizzazione corrispondente al modulo che abbiamo sviluppato è in realtà un PartialView, e se aggiungiamo tag di stile o riferimento script direttamente alla vista, non otterremo l'effetto desiderato. Come viene gestita questa funzione in Orchard?
La classe WebViewPage del motore di visualizzazione MVC è stata riscritta nel framework Orchard, e gli attributi scrip{filter}t e Style sono stati aggiunti per introdurre stili e script. Questo ci permette di usare direttamente queste due proprietà nella vista per chiamare il metodo corrispondente.
Usa stili e script interni nelle tue visualizzazioni
Se dobbiamo scrivere una definizione di stile o di script direttamente nella pagina. Poi possiamo scrivere stili e script in aree specifiche definite dal tema dell'Orchart. Ad esempio, puoi scrivere uno script nell'area inferiore della pagina usando il seguente metodo:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
funzione JsSub() {
Gli script possono essere scritti qui
}
</scrip{filter}t>
}
In Orchard, l'attributo Stile non ha un metodo Testa, forse Orchard non vuole che usiamo stili interni. Quindi mettiamo lo stile in un file di stile esterno come riferimento.
Usa stili e script esterni nella tua visuale
Se vogliamo chiamare stili e script nei moduli. Poi posso usare il metodo Include degli attributi scrip{filter}t e Style, come ad esempio:
@{
Stile. Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
In questo modo, durante il rendering di una pagina, orchard cerca automaticamente il file di stile corrispondente nella directory Styles di questo modulo e genera un tag di riferimento stile da scrivere in cima alla pagina. Cercherà anche il file di script corrispondente nella directory scrip{filter}ts e genererà un tag di riferimento script scritto in fondo alla pagina.
Usa file di risorse
Oltre ai due metodi sopra descritti, Orchard fornisce anche una funzione di manifesto di file risorse. Devo solo creare un file ResourceManifest.cs nella directory radice del modulo e implementare l'interfaccia IResourceManifestProvider. In questo file manifest di risorse, possiamo avere funzioni più ricche per il riferimento a stili e file script.
Ad esempio, definire un riferimento a un file script può essere usato con:
public void BuildManifests(ResourceManifestBuilder builder) {
muratore. Aggiunge(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
In questo modo, quando fai riferimento in una vista, puoi usare:
@{
scrip{filter}t.Require("jQuery");
}
Inoltre, dopo aver definito, anche altri moduli possono utilizzare questa risorsa, e quando ci sono più file di visualizzazione che fanno riferimento a questa risorsa su una pagina, non ci saranno riferimenti duplicati e Orchard genererà solo un tag che fa riferimento a questo script.
Lo stesso vale per gli stili definitori:
muratore. Aggiunge(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Quando si utilizza:
@{
Stile. Richiedere("jQueryUI_Orchard ");
}
La lista file di risorse ha anche una funzione di impostazione di dipendenza. Quando una risorsa script deve dipendere da altre risorse script, può essere utilizzata la seguente definizione:
muratore. Aggiunge(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
In questo modo usiamo solo jQueryUI_Core script nella view, e importerà automaticamente anche lo script jquery da cui dipende.
Se ti affidi a più script contemporaneamente, puoi usare le virgole per separare più risorse dipendenti, come ad esempio:
muratore. Aggiunge(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Tuttavia, Orchard non supporta ancora la funzione delle risorse script che si basano su risorse di stile, il che è un po' un peccato, anzi, alcuni js devono essere usati contemporaneamente ai file di stile, come il plugin jQueryUI.
Inoltre, il file di inventario delle risorse può anche impostare diversi file script per la modalità debug e la modalità di rilascio, e può anche definire la corrispondente versione della risorsa, ad esempio:
muratore. Aggiunge(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
Il modulo Orchard.jQuery che viene fornito con Orchard è uno di questi moduli che definisce il plugin jQueryUI. Se dobbiamo usare questo plugin, possiamo guardare il plugin js definito in questo file manifest e consultarlo nel nostro modulo. Tuttavia, vale la pena notare che, se dobbiamo fare riferimento al contenuto del modulo Orchard.jQuery, dobbiamo impostare la dipendenza Orchard.jQuery nel file manifest del modulo, così che quando il nostro modulo sarà abilitato, il modulo Orchard.jQuery venga abilitato in sincrona per garantire che le risorse a cui facciamo riferimento possano essere chiamate normalmente.
Il jquery viene citato tramite scrip{filter}t.Require("jQuery"). AtHead();
|
Pubblicato su 28/07/2016 16:21:53
|
|
|
