When developing a module in Orchard, we may add some styles or scripts that are specific to this module. From a web page optimization perspective, we often need to add styles to the head of the page (<head>at the label), while scripts want to be added to the bottom of the page (near</body> the label). However, the view file corresponding to the module we developed is actually a PartialView, and if we add style or script reference tags directly to the view, we will not achieve the desired effect. So how is this feature handled in Orchard?
The WebViewPage class of the MVC view engine has been rewritten in the Orchard framework, and the scrip{filter}t and Style attributes have been added to introduce styles and scripts. This allows us to use these two properties directly in the view to call the corresponding method.
Use internal styles and scripts in your views
If we need to write a style definition or script definition directly into the page. Then we can write styles and scripts into specific areas defined by the Orchard theme. For example, you can write a script to the bottom area of the page using the following method:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
function JsSub() {
Scripts can be written here
}
</scrip{filter}t>
}
In Orchard, the Style attribute does not have a Head method, perhaps Orchard does not want us to use internal styles. So let's put the style in an external style file to reference.
Use external styles and scripts in your view
If we want to call styles and scripts in modules. Then I can use the Include method of the scrip{filter}t and Style attributes, such as:
@{
Style.Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
In this way, when rendering a page, orchard will automatically look up the corresponding style file in the Styles directory in this module and generate a style reference tag to write at the head of the page. It will also look for the corresponding script file in the scrip{filter}ts directory and generate a script reference tag written at the bottom of the page.
Use resource files
In addition to the two methods described above, Orchard also provides a resource file manifest function. I just need to create a ResourceManifest.cs file in the module root directory and implement the IResourceManifestProvider interface. In this resource manifest file, we can have richer functions for referencing styles and script files.
For example, defining a reference to a script file can be used with:
public void BuildManifests(ResourceManifestBuilder builder) {
builder. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
This way, when referencing on a view, you can use:
@{
scrip{filter}t.Require("jQuery");
}
Moreover, after defining, other modules can also use this resource, and when there are multiple view files referencing this resource on a page, there will be no duplicate references, and Orchard will only generate a tag that references this script.
The same goes for defining styles:
builder. Add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
When using:
@{
Style.Require("jQueryUI_Orchard ");
}
The resource file list also has a dependency setting function. When a script resource needs to depend on other script resources, the following definition can be used:
builder. Add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
This way we only use jQueryUI_Core script on the view, and it will automatically import the jquery script it depends on as well.
If you rely on multiple scripts at the same time as scripts, you can use commas to separate multiple dependent resources, such as:
builder. Add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
However, Orchard does not yet support the function of script resources relying on style resources, which is a bit of a pity, in fact, some js need to be used at the same time as style files, such as the jQueryUI plugin.
In addition, the resource inventory file can also set different script files for debug mode and release mode, and can also define the corresponding resource version, such as:
builder. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
The Orchard.jQuery module that comes with Orchard is one such module that defines the jQueryUI plugin. If we need to use this plugin, we can look at the js plugin defined in this manifest file and reference it in our own module. However, it is worth noting that if we need to reference the content in the Orchard.jQuery module, we need to set the dependency Orchard.jQuery module in the module manifest file, so that when our module is enabled, the Orchard.jQuery module will be enabled synchronously to ensure that the resources we reference can be called normally.
The jquery is referenced using scrip{filter}t.Require("jQuery"). AtHead();
|
Posted on 7/28/2016 4:21:53 PM
|
|
|
