【问题标题】:Django: Include Media (css/js) in Class-Based ViewsDjango:在基于类的视图中包含媒体(css/js)
【发布时间】:2017-05-26 08:31:54
【问题描述】:

我正在将旧的 django 代码从基于方法的视图更新为基于类的视图。

我知道如何通过Media class 在表单中包含媒体(css/js)

如果基于类的视图不包含任何表单,我该如何使用媒体类?

【问题讨论】:

  • 如果静态文件与任何表单无关,则只需将它们放入您的 CBV 正在使用的 HTML 模板中
  • @v1k45 我的模板没有呈现整个页面。只是一个sn-p。 AFAIK js-includes 应该在<head> 中。我不知道如何在我的模板中包含一个 JS 文件,因为我想将包含在 <head> 中。
  • 您可以通过扩展基本模板文件然后在 head{% block %} 中添加 js 文件来覆盖/扩展 head 标签中的代码。 see this
  • 您的表单究竟是如何生成的?
  • @Udi 视图中没有表单。我更新了措辞,也许现在更清楚了(我不是母语人士)。

标签: django django-class-based-views django-media


【解决方案1】:

Django Sekizai 是为此而生的:

这是他们文档中的示例:

{% load sekizai_tags %}

<html>
<head>
{% render_block "css" %}
</head>
<body>
Your content comes here.
Maybe you want to throw in some css:
{% addtoblock "css" %}
<link href="/media/css/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
{% endaddtoblock %}
Some more content here.
{% addtoblock "js" %}
<script type="text/javascript">
alert("Hello django-sekizai");
</script>
{% endaddtoblock %}
And even more content.
{% render_block "js" %}
</body>
</html>

此示例在一个模板中显示所有内容,但是 - 当然 - 您可以通过继承或包含将其拆分为多个模板,并在任何部分模板中使用 addtoblock 指令。

一个更复杂的现实例子也是in their documentation

【讨论】:

    【解决方案2】:

    CSS/JS 通常在模板本身而不是在视图中管理。见https://docs.djangoproject.com/en/1.10/howto/static-files/

    例如使用base.html:

    <!DOCTYPE html>
    <html>
        <head>
    
            <title>
                {% block page_title %}{{ page_title }}{% endblock %}
            </title>
    
            {% block css %}
            {% endblock %}
    
        </head>
        <body>
    
            {% block main %}
            {% endblock %}
    
            {% block scripts %}
            {% endblock %}
    
        </body>
    </html>
    

    并用 my_page.html 扩展它:

    {% extends "base.html" %}
    {% load staticfiles %}
    
    {% block page_title %}
    Hello!
    {% endblock %}
    
    {% block css %}
        <link href="{% static "page.css" %}" rel="stylesheet"/>
    {% endblock %}
    
    {% block main %}
    Yo!
    {% endblock %}
    
    {% block scripts %}
        <script src="{% static 'my_scripts.js' %}"></script>
    {% endblock %}
    

    【讨论】:

    • 你能举个例子吗?你提到的文档显示了这个&lt;img src="{% static "my_app/example.jpg" %}" alt="My image"/&gt;。但是如何在页面顶部添加 CSS/JS(我的模板使用继承)?
    • 谢谢你的例子。如果我写一个可重用的应用程序。我可以确定基本模板(不是由应用程序提供,而是由项目提供)始终具有块 cssscripts
    • 不,你不能。 :-)
    • 我认为这是一个大问题。或者我错过了什么。
    • 有什么问题?您的可重用应用程序的用户必须遵循一些关于如何将其集成到他们的模板中的说明?这一点也不罕见,我不认为这是你需要担心的事情。 @udi 的答案是可靠的。同样,这些都是向可能实现您的可重用应用程序的潜在最终用户询问的完全合理的事情。您可能唯一需要担心的是确保在文档中为最终用户提供足够的示例。
    【解决方案3】:

    这是一个小型 mixin 类,可以帮助您将媒体添加到基于 CreateViewUpdateViewDeleteView 的视图中:

    class InjectFormMediaMixin(object):
        def get_form_class(self):
            form_class = super(InjectFormMediaMixin, self).get_form_class()
            if hasattr(self, 'Media') and not hasattr(form_class, 'Media'):
                form_class.Media = self.Media
            return form_class
    

    例子:

    class CreateFooView(InjectFormMediaMixin, CreateView):
        model = models.Foo
        fields = (
            'name',
        )
    
        class Media:
            css = {
                'all': ('pretty.css',)
            }
            js = ('animations.js', 'actions.js')
    

    【讨论】:

    • 我的视图不是CreateView 的子类。我猜get_form_class() 不会被调用。但我不确定。
    • 请添加您的视图类,或尝试查找您的表单的创建位置。
    • 我认为没有表格。看一下“关于”的例子。 AFAIK 不涉及任何形式:docs.djangoproject.com/en/1.10/topics/class-based-views/…
    猜你喜欢
    • 2013-06-10
    • 1970-01-01
    • 1970-01-01
    • 2018-05-14
    • 1970-01-01
    • 1970-01-01
    • 2016-06-22
    • 2014-02-16
    相关资源
    最近更新 更多