Media 类）Link to this heading#呈现一个有吸引力的、易于使用的网络表格需要的不仅仅是 HTML，它还需要 CSS 样式表，如果你想使用花哨的部件，你可能还需要在每个页面上包含一些 JavaScript。任何特定页面所需的 CSS 和 JavaScript 的确切组合将取决于该页面上使用的部件。
\n这就是资源定义的作用。Django 允许你将不同的文件——如样式表和脚本——与需要这些资产的表单和部件联系起来。例如，如果你想用一个日历来渲染 DateFields，你可以定义一个自定义的日历部件。然后这个部件可以与渲染日历所需的 CSS 和 JavaScript 相关联。当日历部件在表单上使用时，Django 能够识别需要的 CSS 和 JavaScript 文件，并以适合包含在你的网页上的形式提供文件名列表。
\n\n\n定义资源最简单方法是静态定义。要使用这种方法，声明是一个内部的 Media 类。此内部类的属性定义了这个需求。
这有个例子:
\nfrom django import forms\n\n\nclass CalendarWidget(forms.TextInput):\n class Media:\n css = {\n "all": ["pretty.css"],\n }\n js = ["animations.js", "actions.js"]\n这段代码定义了一个 CalendarWidget ，它继承自 TextInput 。每次CalendarWidget在表单上使用时，该表单都会包含CSS文件 pretty.css ，以及JavaScript文件 animations.js 和 actions.js 。
这个静态定义在运行时被转换为一个名为 media 的小部件属性。可以通过这个属性获取 CalendarWidget 实例的资产列表：
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n以下是所有可能的 Media 选项列表。没有一个是必需项。
cssLink to this heading#描述各种表单输出媒体所需的CSS文件的字典。
\n字典中的值应该是一个文件名元组/列表。有关如何指定这些文件的路径的详细内容，请参阅 路径章节 。
\n字典中的键是输出媒体类型。它们和媒体声明中CSS文件接受的类型相同：'all'、'aural'、'braille'、'embossed'、'handheld'、'print'、'projection'、'screen'、'tty' 和 'tv'。如果您需要针对不同媒体类型使用不同的样式表，就要给每个输出媒体提供一个CSS文件列表。下面的示例提供了两个CSS选项——一个用于屏幕，一个用于打印：
\nclass Media:\n css = {\n "screen": ["pretty.css"],\n "print": ["newspaper.css"],\n }\n如果一组CSS文件适用于多种输出媒体类型，字典的键可以是以逗号分隔的输出媒体类型列表。在下面的例子中，电视和投影机将具有相同的媒体需求：
\nclass Media:\n css = {\n "screen": ["pretty.css"],\n "tv,projector": ["lo_res.css"],\n "print": ["newspaper.css"],\n }\n如果这个最后的 CSS 定义要被渲染，它将变成以下 HTML：
\n<link href="https://static.example.com/pretty.css" media="screen" rel="stylesheet">\n<link href="https://static.example.com/lo_res.css" media="tv,projector" rel="stylesheet">\n<link href="https://static.example.com/newspaper.css" media="print" rel="stylesheet">\nStylesheet objectsLink to this heading#Represents a stylesheet link. The rel attribute is set to\n"stylesheet".
The first parameter, href, is the string path to the stylesheet file.\nSee the section on paths for details on how to\nspecify paths to these files.
The optional keyword arguments, **attributes, are additional HTML\nattributes set on the rendered <link> tag.
See 路径作为对象 for usage examples.
\njsLink to this heading#描述所需JavaScript文件的一个元组。有关如何指定这些文件的路径的详细内容，请参阅 路径章节 。
\nScript objectsLink to this heading#Represents a script file.
\nThe first parameter, src, is the string path to the script file. See\nthe section on paths for details on how to\nspecify paths to these files.
The optional keyword arguments, **attributes, are HTML attributes that\nare set on the rendered <script> tag.
See 路径作为对象 for usage examples.
\nextendLink to this heading#定义了 Media 声明继承行为的一个布尔值。
默认情况下，使用静态 Media 定义的任何对象都会继承与父小部件关联的所有资产。这将发生无论父级如何定义自己的要求。例如，如果我们要扩展上面示例中的基本日历小部件：
>>> class FancyCalendarWidget(CalendarWidget):\n... class Media:\n... css = {\n... "all": ["fancy.css"],\n... }\n... js = ["whizbang.js"]\n...\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<link href="https://static.example.com/fancy.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n<script src="https://static.example.com/whizbang.js"></script>\nFancyCalendar 小部件继承了其父级小部件的所有资产。如果你不希望 Media 以这种方式被继承，可以在 Media 声明中添加一个 extend=False 声明：
>>> class FancyCalendarWidget(CalendarWidget):\n... class Media:\n... extend = False\n... css = {\n... "all": ["fancy.css"],\n... }\n... js = ["whizbang.js"]\n...\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="https://static.example.com/fancy.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/whizbang.js"></script>\n如果您需要更多的继承控制，用一个 动态属性 定义你的 。动态属性使您可以完全控制哪些文件是否继承。
\nMedia 作为动态属性Link to this heading#If you need to perform some more sophisticated manipulation of asset\nrequirements, you can define the media property directly. This is\ndone by defining a widget property that returns an instance of\nforms.Media. The constructor for forms.Media accepts css\nand js keyword arguments in the same format as that used in a\nstatic media definition.
例如，我们也可以以动态的方式定义日历组件的静态定义：
\nclass CalendarWidget(forms.TextInput):\n @property\n def media(self):\n return forms.Media(\n css={"all": ["pretty.css"]}, js=["animations.js", "actions.js"]\n )\n更多有关如何为动态 media 属性构建返回值的内容，请参阅 媒体对象 章节。
用于指定资产的字符串路径可以是相对路径或绝对路径。如果路径以 /、http:// 或 https:// 开头，它将被解释为绝对路径，并保持不变。所有其他路径都将以适当前缀的值作为前缀。如果安装了 django.contrib.staticfiles 应用程序，它将用于提供资产。
无论您是否使用 django.contrib.staticfiles ，都需要设置 STATIC_URL 和 STATIC_ROOT 来渲染一张完整的网页。
为了找到要使用的前缀，Django 会检查 STATIC_URL 设置是否不为 None，并自动回退到使用 MEDIA_URL。例如，如果你的站点的 MEDIA_URL 是 'https://uploads.example.com/' 而 STATIC_URL 是 None：
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n... class Media:\n... css = {\n... "all": ["/css/pretty.css"],\n... }\n... js = ["animations.js", "https://othersite.com/actions.js"]\n...\n\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" media="all" rel="stylesheet">\n<script src="https://uploads.example.com/animations.js"></script>\n<script src="https://othersite.com/actions.js"></script>\n但如果 STATIC_URL 是 'https://static.example.com/'：
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://othersite.com/actions.js"></script>\n或者如果使用 ManifestStaticFilesStorage 配置了 staticfiles：
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.27e20196a850.js"></script>\n<script src="https://othersite.com/actions.js"></script>\nAssets may also be object-based, using Script or\nStylesheet. These allow you to pass custom HTML attributes:
class Media:\n js = [\n Script(\n "https://cdn.example.com/something.min.js",\n **{\n "crossorigin": "anonymous",\n "async": True,\n },\n ),\n ]\nIf this Media definition were to be rendered, it would become the following\nHTML:
\n<script src="https://cdn.example.com/something.min.js"\n crossorigin="anonymous"\n async>\n</script>\nSimilarly, a Stylesheet object can be used to add a stylesheet\nlink with custom HTML attributes:
class Media:\n css = {\n "all": [\n Stylesheet(\n "https://cdn.example.com/print.css",\n crossorigin="anonymous",\n media="print",\n ),\n ]\n }\nIf this Media definition were to be rendered, it would become:
\n<link href="https://cdn.example.com/print.css"\n crossorigin="anonymous"\n media="print"\n rel="stylesheet">\nMedia 对象Link to this heading#Represents a collection of media assets required by a widget or form.
\n当您访问表单或者组件的 media 属性时，返回值是一个 forms.Media 对象。正如我们已经看到的， Media 对象的字符串表示是一段需要在您HTML页面的 <head> 块中包含相关文件的HTML代码。
然而， Media 对象还有其他一些有趣的属性。
如果你只想要特定类型的文件，你可以使用下标运算符来过滤出感兴趣的媒体。例如：
\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n\n>>> print(w.media["css"])\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n当您使用下标运算符时，返回值是一个新的 Media 对象——但只包含感兴趣的媒体。
Media 对象Link to this heading#Media 对象也可以相互相加。当两个 Media 对象相加时，结果的 Media 对象包含两者指定的资产的并集：
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n... class Media:\n... css = {\n... "all": ["pretty.css"],\n... }\n... js = ["animations.js", "actions.js"]\n...\n\n>>> class OtherWidget(forms.TextInput):\n... class Media:\n... js = ["whizbang.js"]\n...\n\n>>> w1 = CalendarWidget()\n>>> w2 = OtherWidget()\n>>> print(w1.media + w2.media)\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n<script src="https://static.example.com/whizbang.js"></script>\n资源插入DOM的顺序一般来说很重要。例如，您可能有一个依赖于jQuery的脚本。因此，合并 Media 对象会尝试保持资源在每个 Media 类中定义的相对顺序。
例如：
\n>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n... class Media:\n... js = ["jQuery.js", "calendar.js", "noConflict.js"]\n...\n>>> class TimeWidget(forms.TextInput):\n... class Media:\n... js = ["jQuery.js", "time.js", "noConflict.js"]\n...\n>>> w1 = CalendarWidget()\n>>> w2 = TimeWidget()\n>>> print(w1.media + w2.media)\n<script src="https://static.example.com/jQuery.js"></script>\n<script src="https://static.example.com/calendar.js"></script>\n<script src="https://static.example.com/time.js"></script>\n<script src="https://static.example.com/noConflict.js"></script>\n合并 Media 对象时，如果资源排序冲突，会导致警告提示： MediaOrderConflictWarning 。
MediaLink to this heading#组件不是唯一可以具有 media 定义的对象——表单也可以。表单上 media 定义的规则与组件的规则相同：声明可以是静态的或动态的；声明的路径和继承规则也一模一样。
不管你是否定义了一个 media 声明，所有 Form 对象都有一个 media 属性。该属性的默认值是将所有组成表单的小部件的 media 定义相加的结果：
>>> from django import forms\n>>> class ContactForm(forms.Form):\n... date = DateField(widget=CalendarWidget)\n... name = CharField(max_length=40, widget=OtherWidget)\n...\n\n>>> f = ContactForm()\n>>> f.media\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n<script src="https://static.example.com/whizbang.js"></script>\n如果你想将额外的资产与一个表单关联起来，例如，表单布局的 CSS，请向表单添加一个 Media 声明：
>>> class ContactForm(forms.Form):\n... date = DateField(widget=CalendarWidget)\n... name = CharField(max_length=40, widget=OtherWidget)\n... class Media:\n... css = {\n... "all": ["layout.css"],\n... }\n...\n\n>>> f = ContactForm()\n>>> f.media\n<link href="https://static.example.com/pretty.css" media="all" rel="stylesheet">\n<link href="https://static.example.com/layout.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.js"></script>\n<script src="https://static.example.com/actions.js"></script>\n<script src="https://static.example.com/whizbang.js"></script>\n