Bei der Entwicklung eines Moduls in Orchard können wir einige Stile oder Skripte hinzufügen, die speziell für dieses Modul sind. Aus Sicht der Webseitenoptimierung müssen wir oft Stile am Seitenkopf (<head>am Label) hinzufügen, während Skripte am unteren Rand der Seite (in der Nähe</body> des Labels) hinzugefügt werden möchten. Die Ansichtsdatei, die dem von uns entwickelten Modul entspricht, ist jedoch tatsächlich ein PartialView, und wenn wir Style- oder Skriptreferenz-Tags direkt in die Ansicht einfügen, erreichen wir nicht den gewünschten Effekt. Wie wird dieses Feature also in Orchard gehandhabt?
Die WebViewPage-Klasse der MVC-View-Engine wurde im Orchard-Framework neu geschrieben, und die Attribute scrip{filter}t und Style wurden hinzugefügt, um Styles und Skripte einzuführen. Dies ermöglicht es uns, diese beiden Eigenschaften direkt in der Ansicht zu verwenden, um die entsprechende Methode aufzurufen.
Verwenden Sie interne Stile und Skripte in Ihren Ansichten
Wenn wir eine Stil- oder Skriptdefinition direkt auf die Seite schreiben müssen. Dann können wir Stile und Skripte in bestimmte Bereiche schreiben, die durch das Orchard-Thema definiert sind. Zum Beispiel können Sie ein Skript auf den unteren Bereich der Seite mit folgender Methode schreiben:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
Funktion JsSub() {
Skripte können hier geschrieben werden
}
</scrip{filter}t>
}
In Orchard hat das Attribut Style keine Head-Methode, vielleicht möchte Orchard nicht, dass wir interne Styles verwenden. Also legen wir den Stil in eine externe Stildatei zur Referenz.
Verwenden Sie externe Stile und Skripte in Ihrer Ansicht
Wenn wir Stile und Skripte in Modulen aufrufen wollen. Dann kann ich die Include-Methode der scrip{filter}t und Style-Attribute verwenden, wie zum Beispiel:
@{
Stil.Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
Auf diese Weise schlägt Orchard beim Rendern einer Seite automatisch die entsprechende Style-Datei im Styles-Verzeichnis dieses Moduls nach und generiert ein Style-Referenz-Tag, das am Seitenkopf geschrieben wird. Es sucht außerdem nach der entsprechenden Skriptdatei im Verzeichnis scrip{filter}ts und generiert ein Skriptreferenz-Tag, das am unteren Rand der Seite geschrieben ist.
Nutze Ressourcendateien
Zusätzlich zu den beiden oben beschriebenen Methoden stellt Orchard auch eine Funktion für das Ressourcendatei-Manifest bereit. Ich muss nur noch eine ResourceManifest.cs-Datei im Root-Verzeichnis des Moduls erstellen und die IResourceManifestProvider-Oberfläche implementieren. In dieser Ressourcen-Manifest-Datei können wir reichhaltigere Funktionen zum Referenzieren von Stilen und Skriptdateien haben.
Zum Beispiel kann die Definition einer Referenz auf eine Skriptdatei verwendet werden mit:
public void BuildManifests(ResourceManifestBuilder builder) {
Bauherr. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
So können Sie beim Referenzieren auf eine Ansicht folgendes verwenden:
@{
scrip{filter}t.Require("jQuery");
}
Außerdem können nach der Definition auch andere Module diese Ressource verwenden, und wenn mehrere View-Dateien auf einer Seite auf diese Ressource verweisen, gibt es keine doppelten Referenzen, und Orchard generiert nur ein Tag, das auf dieses Skript verweist.
Dasselbe gilt für die Definition von Stilen:
Bauherr. Add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Bei Verwendung von:
@{
Stil. Erfordern ("jQueryUI_Orchard ");
}
Die Ressourcendateiliste verfügt außerdem über eine Abhängigkeitseinstellung. Wenn eine Skriptressource von anderen Skriptressourcen abhängig sein muss, kann folgende Definition verwendet werden:
Bauherr. Add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
So verwenden wir nur jQueryUI_Core Skript im View, und es importiert automatisch das jquery-Skript, von dem es abhängt.
Wenn Sie sich gleichzeitig auf mehrere Skripte verlassen, können Sie Kommas verwenden, um mehrere abhängige Ressourcen zu trennen, zum Beispiel:
Bauherr. Add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Orchard unterstützt jedoch noch nicht die Funktion von Skriptressourcen, die auf Style-Ressourcen angewiesen sind, was etwas schade ist, denn tatsächlich müssen einige js gleichzeitig mit Style-Dateien verwendet werden, wie zum Beispiel das jQueryUI-Plugin.
Zusätzlich kann die Resource Inventory-Datei auch verschiedene Skriptdateien für Debug-Modus und Release-Modus festlegen und auch die entsprechende Ressourcenversion definieren, wie zum Beispiel:
Bauherr. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
Das Orchard.jQuery-Modul, das mit Orchard geliefert wird, ist ein solches Modul, das das jQueryUI-Plugin definiert. Wenn wir dieses Plugin verwenden müssen, können wir das in dieser Manifestdatei definierte JS-Plugin betrachten und es in unserem eigenen Modul referenzieren. Es ist jedoch erwähnenswert, dass wir, wenn wir auf den Inhalt im Orchard.jQuery-Modul referenzieren müssen, das Dependenzmodul Orchard.jQuery in der Modul-Manifestdatei setzen müssen, sodass, wenn unser Modul aktiviert ist, das Orchard.jQuery-Modul synchron aktiviert wird, um sicherzustellen, dass die von uns referenzierten Ressourcen normal aufgerufen werden können.
Der jquery wird mit scrip{filter}t.Require("jQuery") referenziert. AtHead();
|
Veröffentlicht am 28.07.2016 16:21:53
|
|
|
