Lors du développement d’un module dans Orchard, nous pouvons ajouter certains styles ou scripts spécifiques à ce module. D’un point de vue optimisation de page web, il faut souvent ajouter des styles à l’entête de la page (<head>à l’étiquette), tandis que les scripts veulent être ajoutés en bas de la page (près</body> de l’étiquette). Cependant, le fichier de vue correspondant au module que nous avons développé est en réalité un PartialView, et si nous ajoutons directement des balises de style ou de référence de script à la vue, nous n’obtiendrons pas l’effet souhaité. Alors, comment cette fonctionnalité est-elle prise en charge dans Orchard ?
La classe WebViewPage du moteur de vue MVC a été réécrite dans le cadre Orchard, et les attributs scrip{filter}t et Style ont été ajoutés pour introduire des styles et des scripts. Cela nous permet d’utiliser ces deux propriétés directement dans la vue pour appeler la méthode correspondante.
Utilisez des styles et scripts internes dans vos vues
Si nous devons écrire une définition de style ou de script directement dans la page. Ensuite, nous pouvons écrire des styles et des scripts dans des zones spécifiques définies par le thème Orchard. Par exemple, vous pouvez écrire un script dans la zone inférieure de la page en utilisant la méthode suivante :
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
fonction JsSub() {
Les scripts peuvent être écrits ici
}
</scrip{filter}t>
}
Dans Orchard, l’attribut Style n’a pas de méthode Tête, peut-être qu’Orchard ne veut pas que nous utilisions des styles internes. Mettons donc le style dans un fichier de style externe pour référence.
Utilisez des styles et scripts externes dans votre vue
Si nous voulons appeler des styles et scripts dans des modules. Ensuite, je peux utiliser la méthode Include des attributs scrip{filter}t et Style, tels que :
@{
Style. Inclure(« xxx.css ») ;
scrip{filter}t.Include(« xxx.js ») ;
}
Ainsi, lors du rendu d’une page, Orchard consulte automatiquement le fichier de style correspondant dans le répertoire Styles de ce module et génère une balise de référence de style à écrire en tête de page. Il cherchera également le fichier de script correspondant dans le répertoire scrip{filter}ts et générera une balise de référence de script écrite en bas de la page.
Utiliser les fichiers de ressources
En plus des deux méthodes décrites ci-dessus, Orchard fournit également une fonction de manifest de fichier de ressources. Je dois juste créer un fichier ResourceManifest.cs dans le répertoire racine du module et implémenter l’interface IResourceManifestProvider. Dans ce fichier manifest de ressources, nous pouvons disposer de fonctions plus riches pour référencer les styles et les fichiers script.
Par exemple, définir une référence à un fichier script peut être utilisé avec :
public void BuildManifests(ResourceManifestBuilder builder) {
constructeur. Ajoutez(). Definescrip{filter}t(« jQuery »). SetUrl(« jquery-1.5.2.min.js »)
}
Ainsi, lors de références sur une vue, vous pouvez utiliser :
@{
scrip{filter}t.Require(« jQuery ») ;
}
De plus, après définition, d’autres modules peuvent également utiliser cette ressource, et lorsqu’il y a plusieurs fichiers de vue référençant cette ressource sur une page, il n’y aura pas de doublons, et Orchard ne générera qu’une balise référenciant ce script.
Il en va de même pour définir les styles :
constructeur. Ajoutez(). DefineStyle (« jQueryUI_Orchard »). SetUrl(« jquery-ui-1.8.11.custom.css ») ;
Lors de l’utilisation de :
@{
Style. Exige(« jQueryUI_Orchard « ) ;
}
La liste de fichiers de ressources possède également une fonction de réglage de dépendance. Lorsqu’une ressource de script doit dépendre d’autres ressources de script, la définition suivante peut être utilisée :
constructeur. Ajoutez(). Definescrip{filter}t(« jQueryUI_Core »). SetUrl(« jquery.ui.core.min.js »). SetDependencies(« jQuery ») ;
De cette façon, nous n’utilisons jQueryUI_Core script que dans la vue, et il importera automatiquement le script jquery dont il dépend également.
Si vous comptez sur plusieurs scripts simultanément en tant que scripts, vous pouvez utiliser des virgules pour séparer plusieurs ressources dépendantes, telles que :
constructeur. Ajoutez(). Definescrip{filter}t(« jQueryUI_Draggable »). SetUrl(« jquery.ui.draggable.min.js »)SetDependencies(« jQueryUI_Core », « jQueryUI_Widget », « jQueryUI_Mouse ») ;
Cependant, Orchard ne prend pas encore en charge la fonction des ressources de script reposant sur les ressources de style, ce qui est un peu dommage, en fait, certains js doivent être utilisés en même temps que les fichiers de style, comme le plugin jQueryUI.
De plus, le fichier d’inventaire des ressources peut également définir différents fichiers de script pour le mode débogage et le mode de libération, et peut également définir la version de ressource correspondante, telles que :
constructeur. Ajoutez(). Definescrip{filter}t(« jQuery »). SetUrl(« jquery-1.5.2.min.js », « jquery-1.5.2.js »). SetVersion (« 1.5.2 ») ;
Le module Orchard.jQuery fourni avec Orchard est l’un de ces modules qui définit le plugin jQueryUI. Si nous devons utiliser ce plugin, nous pouvons consulter le plugin js défini dans ce fichier manifest et le référer dans notre propre module. Cependant, il est important de noter que si nous devons référencer le contenu du module Orchard.jQuery, nous devons définir la dépendance Orchard.jQuery dans le fichier manifest du module, de sorte que lorsque notre module est activé, le module Orchard.jQuery soit activé de manière synchrone pour garantir que les ressources que nous référencons puissent être appelées normalement.
Le jquery est référencé à l’aide de scrip{filter}t.Require(« jQuery »). AtHead() ;
|
Publié sur 28/07/2016 16:21:53
|
|
|
