Skip to content

Resources (OrchardCore.Resources)

资源(OrchardCore.Resources)

Purpose

目的

The Resources module provides commonly used resources like JavaScript libraries and CSS files. It also enables the Resource Manager

Resources模块提供常用资源,如JavaScript库和CSS文件。它还启用了资源管理器

so any module can describe what resources are necessary on any page or component. When the full page is rendered all the required

所以任何模块都可以描述任何页面或组件上需要哪些资源。当完整页面呈现所有必需的

resources are computed and custom <script> and <link> tags are rendered accordingly. You can also register custom <meta> tags.

计算资源并相应地呈现自定义<script><link>标记。您还可以注册自定义<meta>标签。

Named Resources

命名资源

Named resources are well-known scripts and stylesheets that are described in a module. They have a name, a type (script, stylesheet)

命名资源是模块中描述的众所周知的脚本和样式表。他们有一个名字,一个类型(脚本,样式表)

and optionally a version. The OrchardCore.Resources modules provides some commonly used ones:

以及可选的版本。 OrchardCore.Resources模块提供了一些常用的模块:

| Name | Type | Versions | Dependencies |

|名称|输入|版本|依赖性|

| ---- | ---- | -------- | ------------ |

| ---- | ---- | -------- | ------------ |

| jQuery | Script | 1.12.4 | - |

| jQuery |脚本| 1.12.4 | - |

| jQuery | Script | 2.2.4 | - |

| jQuery |脚本| 2.2.4 | - |

| jQuery | Script | 3.3.1 | - |

| jQuery |脚本| 3.3.1 | - |

| Popper | Script | 1.14.3 | - |

|波普尔|脚本| 1.14.3 | - |

| Bootstrap | Script | 3.3.7, 4.1.3 | jQuery, Popper |

| Bootstrap |脚本| 3.3.7,4.1.3 | jQuery,Popper |

| Bootstrap | Style | 3.3.7, 4.1.3 | - |

| Bootstrap |风格| 3.3.7,4.1.3 | - |

| jQuery-ui | Script | 1.12.1 | jQuery |

| jQuery-ui |脚本| 1.12.1 | jQuery |

| font-awesome | Style | 4.7.0, 5.4.1 | - |

| font-awesome |风格| 4.7.0,5.4.1 | - |

Usage

用法

There are two ways to invoke a resource: either by using the IResourceManager API or a Tag Helper.

有两种方法可以调用资源:使用IResourceManager API或Tag Helper。

The API is necessary if you need to inject a resource from code. However it is recommended to use a Tag Helper when inside a view.

如果需要从代码中注入资源,则必须使用API​​。但是,建议在视图内使用Tag Helper。

Using the API

使用API

From your module, add a reference to the OrchardCore.Resources.Abstractions project.

从您的模块中,添加对OrchardCore.Resources.Abstractions项目的引用。

From the class you want to use the API in, inject the OrchardCore.ResourceManagement.IResourceManager interface.

从您想要使用API​​的类中,注入OrchardCore.ResourceManagement.IResourceManager接口。

Register a named resource

注册命名资源


var settings = resourceManager.RegisterResource("script", "bootstrap")

 <font color=#0099ff size=4 face="黑体">var settings = resourceManager.RegisterResource(“script”,“bootstrap”)</font> 


The result of this call is an object of type RequireSettings that is used to pass more parameters to the required resource.

此调用的结果是一个类型为“RequireSettings”的对象,用于将更多参数传递给所需的资源。

Place the resource at the beginning of the HTML document

将资源放在HTML文档的开头


settings.AtHead();

 <font color=#0099ff size=4 face="黑体">settings.AtHead();</font> 


Place the resource at the end of the HTML document

将资源放在HTML文档的末尾


settings.AtFoot();

 <font color=#0099ff size=4 face="黑体">settings.AtFoot();</font> 


Set the version to use

设置要使用的版本


settings.UseVersion("3.3");

 <font color=#0099ff size=4 face="黑体">settings.UseVersion( “3.3”);</font> 


This will use the latest available version between 3.3 and 3.4. If the version is not available an exception is thrown.

这将使用3.33.4之间的最新版本。如果版本不可用,则抛出异常。

Register custom script

注册自定义脚本

At the beginning of the HTML document:

在HTML文档的开头:


resourceManager.RegisterHeadScript(new HtmlString("<script>alert('Hello')</script>"));

 <font color=#0099ff size=4 face="黑体">resourceManager.RegisterHeadScript(new HtmlString(“<script> alert('Hello')</ script>”));</font> 


At the end of the HTML document:

在HTML文档的末尾:


resourceManager.RegisterFootScript(new HtmlString("<script>alert('Hello')</script>"));

 <font color=#0099ff size=4 face="黑体">resourceManager.RegisterFootScript(new HtmlString(“<script> alert('Hello')</ script>”));</font> 


Add custom meta tag

添加自定义元标记


resourceManager.RegisterMeta(new MetaEntry { Content = "Orchard", Name = "generator" });

 <font color=#0099ff size=4 face="黑体">resourceManager.RegisterMeta(new MetaEntry {Content =“Orchard”,Name =“generator”});</font> 


You can also add more content to an existing tag like this:

您还可以向现有标记添加更多内容,如下所示:


resourceManager.AppendMeta(new MetaEntry { Name = "keywords", Content = "orchard" }, ",");

 <font color=#0099ff size=4 face="黑体">resourceManager.AppendMeta(new MetaEntry {Name =“keywords”,Content =“orchard”},“,”);</font> 


Using the Tag Helpers

使用Tag Helpers

From your module, in the _ViewImports.cshtml or your view, add @addTagHelper *, OrchardCore.ResourceManagement.

从您的模块,在_ViewImports.cshtml或您的视图中,添加@addTagHelper *,OrchardCore.ResourceManagement

Register a named script

注册命名脚本

This example registers the script named bootstrap and all its dependencies (jquery).

此示例注册名为bootstrap的脚本及其所有依赖项(jquery)。


{% script name:"bootstrap" %}

 <font color=#0099ff size=4 face="黑体">{%script name:“bootstrap”%}</font> 



<script asp-name="bootstrap"></script>

 <font color=#0099ff size=4 face="黑体"><script asp-name =“bootstrap”> </ script></font> 


And for a stylesheet:

对于样式表:


<style asp-name="bootstrap"></style>

 <font color=#0099ff size=4 face="黑体"><style asp-name =“bootstrap”> </ style></font> 


Force the CDN

强制CDN

You can force a resource to be used from its CDN. By default the behavior is defined by configuration.

您可以强制从其CDN使用资源。默认情况下,行为由配置定义。


{% script name:"bootstrap", use_cdn:"true" %}

 <font color=#0099ff size=4 face="黑体">{%script name:“bootstrap”,use_cdn:“true”%}</font> 



<script asp-name="bootstrap" use-cdn="true"></script>

 <font color=#0099ff size=4 face="黑体"><script asp-name =“bootstrap”use-cdn =“true”> </ script></font> 


Use specific version

使用特定版本

This example will use the latest available version with a Major version of 3, like 3.3.7. If the version is not specified

这个例子将使用最新的可用版本和主要版本的3,如3.3.7。如果未指定版本

the latest one is always used.

最新的一个总是使用。


{% script name:"bootstrap", version:"4" %}

 <font color=#0099ff size=4 face="黑体">{%script name:“bootstrap”,version:“4”%}</font> 



<script asp-name="bootstrap" version="3"></script>

 <font color=#0099ff size=4 face="黑体"><script asp-name =“bootstrap”version =“3”> </ script></font> 


Specify location

指定位置

By default all scripts are rendered in the footer. You can override it like this:

默认情况下,所有脚本都在页脚中呈现。您可以像这样覆盖它:


{% script name:"bootstrap", at:"Foot" %}

 <font color=#0099ff size=4 face="黑体">{%script name:“bootstrap”,at:“Foot”%}</font> 



<script asp-name="bootstrap" at="Foot"></script>

 <font color=#0099ff size=4 face="黑体"><script asp-name =“bootstrap”at =“Foot”> </ script></font> 


Styles, however, are always injected in the header section of the HTML document.

但是,样式始终注入HTML文档的标题部分。

Inline definition

内联定义

You can declare a new resource directly from a view, and it will be injected only once even if the view is called multiple time.

您可以直接从视图声明新资源,即使多次调用视图,它也只会注入一次。


{% script source:"/TheTheme/js/foo.min.js", debug_src:"/TheTheme/js/foo.js" %}

 <font color=#0099ff size=4 face="黑体">{%script source:“/ TheTheme / js / foo.min.js”,debug_src:“/ TheTheme / js / foo.js”%}</font> 



<script asp-name="foo" asp-src="/TheTheme/js/foo.min.js?v=1.0" debug-src="/TheTheme/js/foo.js?v=1.0" depends-on="baz:1.0" version="1.0"></script>

 <font color=#0099ff size=4 face="黑体"><script asp-name =“foo”asp-src =“/ TheTheme / js / foo.min.js?v = 1.0”debug-src =“/ TheTheme / js / foo.js?v = 1.0”依赖于=“baz:1.0”version =“1.0”> </ script></font> 


In this example we also define a dependency on the script named baz with the version 1.0. If the version was not set

在这个例子中,我们还定义了一个名为baz的脚本的依赖关系,版本为1.0。如果未设置版本

the one with the highest number will be used.

将使用编号最高的那个。

You can also do the same for a stylesheet:

您也可以对样式表执行相同的操作:


{% style source:"/TheTheme/css/bar.min.css", debug_src:"/TheTheme/css/bar.css" %}

 <font color=#0099ff size=4 face="黑体">{%style source:“/ TheTheme / css / bar.min.css”,debug_src:“/ TheTheme / css / bar.css”%}</font> 



<style asp-src="/TheTheme/css/bar.min.css" debug-src="/TheTheme/css/bar.css"></style>

 <font color=#0099ff size=4 face="黑体"><style asp-src =“/ TheTheme / css / bar.min.css”debug-src =“/ TheTheme / css / bar.css”> </ style></font> 


Custom scripts

自定义脚本

The following example demonstrates how to inject a custom script in the footer section.

以下示例演示如何在页脚部分中注入自定义脚本。


<script at="Foot">

 <font color=#0099ff size=4 face="黑体"><script at =“Foot”></font> 


    document.write('<!-- some script -->');

</script>

 <font color=#0099ff size=4 face="黑体"></ SCRIPT></font>