Bij het ontwikkelen van een module in Orchard kunnen we enkele stijlen of scripts toevoegen die specifiek zijn voor deze module. Vanuit het perspectief van webpaginaoptimalisatie moeten we vaak stijlen toevoegen aan het begin van de pagina (<head>bij het label), terwijl scripts onderaan de pagina (bij het label) willen worden toegevoegd</body>. Het viewbestand dat bij de module is die we hebben ontwikkeld, is echter een PartialView, en als we stijl- of scriptreferentietags direct aan de view toevoegen, bereiken we niet het gewenste effect. Hoe wordt deze functie in Orchard afgehandeld?
De WebViewPage-klasse van de MVC-weergave-engine is herschreven in het Orchard-framework, en de attributen scrip{filter}t en Style zijn toegevoegd om stijlen en scripts te introduceren. Dit stelt ons in staat deze twee eigenschappen direct in de weergave te gebruiken om de overeenkomstige methode aan te roepen.
Gebruik interne stijlen en scripts in je views
Als we een stijldefinitie of scriptdefinitie direct op de pagina moeten schrijven. Dan kunnen we stijlen en scripts schrijven in specifieke gebieden die door het Orchard-thema worden gedefinieerd. Je kunt bijvoorbeeld een script schrijven voor het onderste deel van de pagina met de volgende methode:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
functie JsSub() {
Scripts kunnen hier geschreven worden
}
</scrip{filter}t>
}
In Orchard heeft het Stijl-attribuut geen Hoofdmethode, misschien wil Orchard niet dat we interne stijlen gebruiken. Laten we de stijl dus in een extern stijlbestand plaatsen om naar te verwijzen.
Gebruik externe stijlen en scripts in je weergave
Als we stijlen en scripts in modules willen aanroepen. Daarna kan ik de Include-methode gebruiken van de attributen scrip{filter}t en Style, zoals:
@{
Style.Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
Op deze manier zal Orchard bij het renderen van een pagina automatisch het bijbehorende stijlbestand opzoeken in de Styles-map in deze module en een stijlreferentietag genereren om aan het begin van de pagina te schrijven. Het zoekt ook naar het bijbehorende scriptbestand in de scrip{filter}ts-map en genereert een scriptreferentietag onderaan de pagina.
Gebruik resourcebestanden
Naast de twee hierboven beschreven methoden biedt Orchard ook een resource file manifest-functie. Ik hoef alleen nog een ResourceManifest.cs-bestand aan te maken in de module rootmap en de IResourceManifestProvider-interface te implementeren. In dit resource manifest-bestand kunnen we rijkere functies hebben voor het refereren naar stijlen en scriptbestanden.
Bijvoorbeeld, het definiëren van een referentie naar een scriptbestand kan worden gebruikt met:
public void BuildManifests(ResourceManifestBuilder builder) {
Bouwer. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
Op deze manier kun je bij het refereren op een weergave gebruikmaken:
@{
scrip{filter}t.Require("jQuery");
}
Bovendien kunnen na het definiëren ook andere modules deze bron gebruiken, en wanneer er meerdere view-bestanden op een pagina zijn die naar deze bron verwijzen, zijn er geen dubbele referenties en genereert Orchard alleen een tag die naar dit script verwijst.
Hetzelfde geldt voor het definiëren van stijlen:
Bouwer. Add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Bij het gebruik van:
@{
Stijl. Vereisen ("jQueryUI_Orchard");
}
De resource-bestandslijst heeft ook een afhankelijkheidsinstelling. Wanneer een scriptbron afhankelijk moet zijn van andere scriptbronnen, kan de volgende definitie worden gebruikt:
Bouwer. Add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
Op deze manier gebruiken we alleen jQueryUI_Core script op de view, en importeert het automatisch het jquery-script waarop het afhankelijk is.
Als je op meerdere scripts tegelijk vertrouwt als scripts, kun je komma's gebruiken om meerdere afhankelijke bronnen te scheiden, zoals:
Bouwer. Add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Orchard ondersteunt echter nog niet de functie van scriptbronnen die afhankelijk zijn van stijlbronnen, wat jammer is, want sommige js moeten zelfs tegelijk worden gebruikt als stijlbestanden, zoals de jQueryUI-plugin.
Daarnaast kan het resource-inventarisbestand ook verschillende scriptbestanden instellen voor debugmodus en releasemodus, en kan het ook de bijbehorende resourceversie definiëren, zoals:
Bouwer. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
De Orchard.jQuery-module die bij Orchard wordt geleverd, is zo'n module die de jQueryUI-plugin definieert. Als we deze plugin moeten gebruiken, kunnen we kijken naar de js-plugin die in dit manifestbestand is gedefinieerd en deze in onze eigen module verwijzen. Het is echter belangrijk op te merken dat als we de inhoud in de Orchard.jQuery-module moeten refereren, we de afhankelijkheidsmodule van Orchard.jQuery in het modulemanifestbestand moeten zetten, zodat wanneer onze module is ingeschakeld, de Orchard.jQuery-module synchroon wordt ingeschakeld om ervoor te zorgen dat de bronnen die we refereren normaal kunnen worden aangeroepen.
De jquery wordt gebruikt met scrip{filter}t.Require("jQuery"). AtHead();
|
Geplaatst op 28-07-2016 16:21:53
|
|
|
