Media 类）Link to this heading#要渲染一个有吸引力且易于使用的Web表单不仅仅需要HTML，还需要CSS样式表，如果您想使用多样的 "Web2.0" 组件，您还需要在每个页面上包含一些JavaScript。要在任何给定模板上准确组合CSS和JavaScript取决于此页面上使用的组件。
\n这是资源定义的来源。Django允许你将不同的文件（像样式表和脚本）与需要这些资源的表单和组件进行关联。例如，如果您想用日历来渲染DateFields，你可以自定义一个日历组件。然后这个组件可以与渲染日历所需的CSS和JavaScript相关联。在表单上使用日历组件时，Django能够识别所需的CSS和JavaScript文件，并提供表单中的文件名列表，合适地插入到你的网页中。
\n\n\n定义资源最简单方法是静态定义。要使用这种方法，声明是一个内部的 Media 类。此内部类的属性定义了这个需求。
这有个例子:
\nfrom django import forms\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="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://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="http://static.example.com/pretty.css" type="text/css" media="screen" rel="stylesheet">\n<link href="http://static.example.com/lo_res.css" type="text/css" media="tv,projector" rel="stylesheet">\n<link href="http://static.example.com/newspaper.css" type="text/css" media="print" rel="stylesheet">\njsLink to this heading#描述所需JavaScript文件的一个元组。有关如何指定这些文件的路径的详细内容，请参阅 路径章节 。
\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>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n<script src="http://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>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://static.example.com/whizbang.js"></script>\n如果您需要更多的继承控制，用一个 动态属性 定义你的 。动态属性使您可以完全控制哪些文件是否继承。
\nMedia 作为动态属性Link to this heading#如果您需要执行一些更复杂的资源需求操作，你可以直接定义 media 属性。这是通过定义一个返回 forms.Media 实例的组件属性来实现的。这个 forms.Media 的构造函数接受 css 和 js 关键字参数，与静态媒体定义中使用的格式相同。
例如，我们也可以以动态的方式定义日历组件的静态定义：
\nclass CalendarWidget(forms.TextInput):\n @property\n def media(self):\n return forms.Media(css={'all': ('pretty.css',)},\n js=('animations.js', 'actions.js'))\n更多有关如何为动态 media 属性构建返回值的内容，请参阅 媒体对象 章节。
用于指定资源的路径可以是相对路径的也可以是绝对路径的。如果路径以 / 、 http:// 或 https:// 开头，则它将被解释为绝对路径，并保持原样。所有其他路径都会以相应值作为前缀。如果在settings中设置了 django.contrib.staticfiles ，就可以用来服务于资源。
无论您是否使用 django.contrib.staticfiles ，都需要设置 STATIC_URL 和 STATIC_ROOT 来渲染一张完整的网页。
为了找到相应的前缀来使用，Django会去检查 STATIC_URL 是否不为 None ，并自动回退使用 MEDIA_URL 。例如，您的网站的 MEDIA_URL 设置为 'http://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', 'http://othersite.com/actions.js')\n\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://uploads.example.com/animations.js"></script>\n<script src="http://othersite.com/actions.js"></script>\n但如果 STATIC_URL 设置是 'http://static.example.com/' ：
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://othersite.com/actions.js"></script>\n或者如果 staticfiles 配置使用 ManifestStaticFilesStorage ：
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.27e20196a850.js"></script>\n<script src="http://othersite.com/actions.js"></script>\nMedia 对象Link to this heading#当您访问表单或者组件的 media 属性时，返回值是一个 forms.Media 对象。正如我们已经看到的， Media 对象的字符串表示是一段需要在您HTML页面的 <head> 块中包含相关文件的HTML代码。
然而， Media 对象还有其他一些有趣的属性。
如果您只需要特定类型的文件，则可以使用下标运算符过滤出感兴趣的媒体文件。例如：
\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n\n>>> print(w.media['css'])\n<link href="http://static.example.com/pretty.css" type="text/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>>> class OtherWidget(forms.TextInput):\n... class Media:\n... js = ('whizbang.js',)\n\n>>> w1 = CalendarWidget()\n>>> w2 = OtherWidget()\n>>> print(w1.media + w2.media)\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n<script src="http://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>>> class TimeWidget(forms.TextInput):\n... class Media:\n... js = ('jQuery.js', 'time.js', 'noConflict.js')\n>>> w1 = CalendarWidget()\n>>> w2 = TimeWidget()\n>>> print(w1.media + w2.media)\n<script src="http://static.example.com/jQuery.js"></script>\n<script src="http://static.example.com/calendar.js"></script>\n<script src="http://static.example.com/time.js"></script>\n<script src="http://static.example.com/noConflict.js"></script>\n合并 Media 对象时，如果资源排序冲突，会导致警告提示： MediaOrderConflictWarning 。
MediaLink to this heading#组件不是唯一可以具有 media 定义的对象——表单也可以。表单上 media 定义的规则与组件的规则相同：声明可以是静态的或动态的；声明的路径和继承规则也一模一样。
无论您是否定义了 media 声明，*所有*表单对象都有一个 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>>> f = ContactForm()\n>>> f.media\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n<script src="http://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...\n... class Media:\n... css = {\n... 'all': ('layout.css',)\n... }\n\n>>> f = ContactForm()\n>>> f.media\n<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet">\n<link href="http://static.example.com/layout.css" type="text/css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n<script src="http://static.example.com/whizbang.js"></script>\n