带有 css/js 的 Django“包含”模板
Posted
技术标签:
【中文标题】带有 css/js 的 Django“包含”模板【英文标题】：Django 'Include' template with css/js 【发布时间】：2018-01-14 22:39:51 【问题描述】：我有一个通用模板，用于通过include 标记将html（即menubar.html 中的菜单栏）包含到其他应用模板中。它具有一些已定义的 css 和 js 功能，分别存储在 menubar.css|menubar.js 文件中。
在menubar.html 文件中包含指向这些文件的链接似乎更方便，如下所示：
//At the Start
<link rel="stylesheet" href="% static '<appname>/css/menubar.css' %" />
//.... other menubar HTML
//At the End
<script src="% static '<app_name>/js/menubar.js' %"></script>
我担心这不是一个好习惯，因为模板将加载不位于 HEAD 的 css 和不位于末尾的 js的BODY。
这些被描述为standard HTML practises。
明确的替代方法是在我包含子模板的每个模板中链接 css 或 js，但这似乎很乏味。
我知道还有扩展模板的可能性，但是我相信使用 css/js 也会出现同样的问题。
什么是最好的？
【问题讨论】：
【参考方案1】：你可以在这里使用 django-sekizai 包：
https://django-sekizai.readthedocs.io/en/latest/
您将有一个基本模板：
% load sekizai_tags %
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- other css and head content goes here -->
% render_block "css" %
</head>
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
% render_block "js" %
</body>
</html>
然后在您的 menubar.html 中，您可以在模板中的任何位置添加以下内容，它们的 css 将被添加到页面头部，而 javascript 将被添加到正文的底部：
% addtoblock "css" %
<link rel="stylesheet" href="% static '<appname>/css/menubar.css' %"/>
% endaddtoblock %
% addtoblock "js" %
<script src="% static '<app_name>/js/menubar.js' %"></script>
% endaddtoblock %
这是一个非常方便的包！
【讨论】：
好建议！这与Template Inheritance 有何不同？我刚刚读到您可以使用% block % 标签并调用 block.super 来获取原始内容。这不会在本地做同样的事情（没有额外的包）吗？
抱歉，我看到了区别 - django 不提供对 processing blocks within includes 的原生支持。我看到 django-sekizai 专门处理这个问题。不错！【参考方案2】：
您可以使用模板继承在 django 中动态加载您的 js 和 css。 This is the reference.
来自this关于javascript加载你使用继承标签的帖子可能如下所示：
#base.html
% block js %
<script src="% static '<app>/js/resource.js' %"></script>
... //other scripts
% endblock %
然后在另一个模板中：
# child.html
% extends base.html %
% block js %
block.super //Includes base.html js block content
<script src="% static '<otherapp>/js/resource2.js' %">
... //other scripts
% endblock%
【讨论】：
如果我使用 % include % 标签而不是继承，这看起来如何@gene-sescon？即，我在页面中包含一个 html 资源，但它还需要像页面本身一样扩展 JS 功能。以上是关于带有 css/js 的 Django“包含”模板的主要内容，如果未能解决你的问题，请参考以下文章