django 包含_javascript/使用_javascript 和类似的

0 投票

1 回答

2813 浏览

提问于 2025-04-16 23:03

我在寻找一种方法，可以像Symfony那样在Django模板中包含JavaScript和CSS文件。

我的基础模板base/layout.html看起来是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
  {% load static %} 
  <meta http-equiv="X-UA-Compatible" content="IE=8" />  
  <meta name="description" content="{% block meta_description %}{% endblock %}" />
  <meta name="keywords" content="{% block meta_keywords %}{% endblock %}" /> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <title>{% block meta_title %}{% endblock %} Daily-Cooking</title>
  {% block javascript %}  
  <script type="text/javascript" src="http://yandex.st/jquery/1.6.2/jquery.min.js"></script>  
  {% endblock %}
  {% block css %}
  <link rel="stylesheet" href="{% get_static_prefix %}/blueprint/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="{% get_static_prefix %}/blueprint/print.css" type="text/css" media="print">
  <link rel="stylesheet" href="{% get_static_prefix %}/blueprint/src/forms.css" type="text/css" media="screen, projection">  
  <link rel="stylesheet" href="{% get_static_prefix %}/css/base.css" type="text/css" media="screen, projection"> 
  <!--[if lt IE 8]>
    <link rel="stylesheet" href="{% get_static_prefix %}/blueprint/ie.css" type="text/css" media="screen, projection">
  <![endif]-->  
  {% endblock %}
</head> 
<body>
  {% include "base/header.html" %}
  {% block content %}{% endblock %}
  {% include "base/footer.html" %}      
  {% block layer %}{% endblock %}
</body>
</html>

我可以很容易地添加一个扩展基础模板的其他模板：

{% extends "base/layout.html" %}
{% block javascript%}
   some custom scropt
{% endblock %}

这样是可以正常工作的。但有两个问题：

我不能使用{% block %}超过一次。
在包含的模板（比如例子中的header.html）里的每个{% block javascript %}都会被当作这个包含模板的块来处理。

我认为最好的方法是：

在base/layout.html中有类似这样的内容：

{% include_javascripts %}

任何子模板或包含的模板：

{% use_javascript "jquery.js" %}

此外，我希望块{% block layer %}{% endblock %}也能以类似的方式扩展，并且可以扩展多次。

django javascript css jquery 模板继承模板扩展 include 块结构

1 个回答

你可以把 JavaScript 和 CSS 的调用提取到另一个模板里，比如叫做 js.html。每次你想要添加这些内容时，只需要用 Django 的原生命令 {% include "js.html" %} 来调用就可以了。详细说明可以查看这里：https://docs.djangoproject.com/en/dev/ref/templates/builtins/?from=olddocs#include。

在子模板中，你总是可以使用 {{ block.super }} 来继承父模板中的整个块，或者像下面这样覆盖它：

<head>
    {% block javascript %}
        {{ block.super }}
        <link .... >
    {% endblock %}
</head>

关于这方面的完整文档可以在这里找到：https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance。

第二种方法是编写你自己的模板标签，以你想要的方式渲染链接 - https://docs.djangoproject.com/en/dev/howto/custom-template-tags/#writing-custom-template-tags。

第三种方法是使用比如 django-compress 这个插件（它的目的是压缩和合并 JavaScript 和 CSS，减少网站的 HTTP 请求）。这个插件有一些内置的标签可以帮助你。基本上，你需要在 settings.py 中定义文件组，像这样：

COMPRESS_CSS = {
    'group_one': {
        'source_filenames': ('css/style.css', 'css/foo.css', 'css/bar.css'),
        'output_filename': 'css/one_compressed.css',
        'extra_context': {
        'media': 'screen,projection',
        },
    },
# other CSS groups goes here
}

然后在模板中你可以调用 {% compressesd_css 'group_one' %}。

回答于 2025-04-16 由 Python大师

分享举报

django 包含_javascript/使用_javascript 和类似的

1 个回答

撰写回答