Use styles and scripts in Orchard

ArticleDirectory

• Use internal styles and scripts in the view
• Use external styles and scripts in the view
• Use resource files

In the orchard development module, we may add some styles or scripts specific to this module. From the perspective of web page optimization, we usually need to add the style to the header of the page (

In the orchard framework, the webviewpage class of the MVC view engine is rewritten. The script and style attributes are added to introduce styles and scripts. In this way, we can directly use these two attributes in the view to call the corresponding method.

Use internal styles and scripts in the view. If you need to write style or script definitions directly to the page. We can write styles and scripts to a specific area defined by the orchard topic. For example, you can use the following method to write the script to the bottom area of the page: @ Using (script. Foot ()) { <SCRIPT type = "text/JavaScript"> Function jssub (){ // The script can be written here } </SCRIPT> } There is no head method for the style attribute in orchard. Maybe orchard doesn't want us to use an internal style. Therefore, we can reference styles in an external style file. Use external styles and scripts in the view if we want to call styles and scripts in the module. Then I can use the include method of the script and style attributes, such: @{ Style. Include ("xxx.css "); Script. Include ("XXX. js "); } In this way, when the page is displayed, orchard will automatically investigate the corresponding style files under the styles directory in this module and generate style reference labels to write them in the header of the page. You can also find the corresponding script file in the scripts directory and generate the script reference tag to write it at the bottom of the page. In addition to the two methods described above, orchard also provides a resource file list function. I only need to create a resourcemanifest. CS file in the module root directory and implement the iresourcemanifestprovider interface. In this resource list file, we can provide more functions for style and script file reference. For example, defining a reference to a script file can be used: Public void buildmanifests (resourcemanifestbuilder builder ){ Builder. Add (). definescript ("jquery"). seturl ("jquery-1.5.2.min.js ") } In this way, you can use the following to reference A View: @{ Script. Require ("jquery "); } Other modules can also use this resource after definition, and when multiple view files on a page reference this resource, duplicate references will not appear, orchard generates only one tag that references this script. The same is true for defining styles: Builder. Add (). definestyle ("jqueryui_orchard"). seturl ("jquery-ui-1.8.11.custom.css "); Use Time: @{ Style. Require ("jqueryui_orchard "); } The resource file list also provides the dependency setting function. When a script resource depends on other script resources, you can use the following definition: Builder. Add (). definescript ("jqueryui_core"). seturl ("jquery. UI. Core. Min. js"). setdependencies ("jquery "); In this way, we only use the jqueryui_core script on the view. It will automatically introduce the jquery script it depends on at the same time. If the script depends on multiple scripts at the same time, you can use commas to separate multiple dependent resources, for example: Builder. add (). definescript ("jqueryui_draggable "). seturl ("jquery. UI. draggable. min. JS ") setdependencies (" jqueryui_core "," jqueryui_widget "," jqueryui_mouse "); However, at present, orchard does not support script resources dependent on style resources. This is a pity. In fact, some JS files need to be used together with style files, such as jqueryui plug-in. In addition, the resource list file can set different script files for the debugging and publishing modes, and can also define the version of the corresponding resource, such: Builder. Add (). definescript ("jquery"). seturl ("jquery-1.5.2.min.js", "jquery-1.5.2.js"). setversion ("1.5.2 ");

 

The orchard. jquery module in orchard is such a module that defines the jqueryui plug-in. If you need this plug-in, you can view the JS plug-in defined in this configuration file and reference it in our own module. However, it is worth noting that if we need to reference orchard. in the jquery module, you need to set orchard dependency in the module list file. jquery module, so that orchard will be enabled simultaneously when our module is enabled. the jquery module ensures that all referenced resources can be called normally.