在Django中将相关文件保存在一起的最佳方法

What’s the best way to keep related files together in Django?

在Django中将相关文件保存在一起的最佳方法是什么？

In addition to our HTML templates, most views have at least one additional JavaScript file, and possibly an additional CSS file. For example:

除了我们的HTML模板，大多数视图至少还有一个额外的JavaScript文件，可能还有一个额外的CSS文件。例如：

item_detail.html
item_detail.html
item_detail.js
item_detail.js
item_detail.css
item_detail.css

We want to keep these files side-by-side if possible, so we don't have to look in two or three directories to find them.

如果可能的话，我们希望将这些文件并排放置，因此我们不必查看两个或三个目录来查找它们。

Update: I do know that it’s dumb to defeat caching and that’s not what I’m asking. Each page loads several JavaScript and CSS items that are properly cached. For example:

更新：我知道打败缓存是愚蠢的，这不是我要问的。每个页面都会加载几个正确缓存的JavaScript和CSS项。例如：

<!-- at top of file -->
<link rel="stylesheet" href="/master/css/site-main.css">

<!-- at bottom of file -->
<script type="text/javascript" src="/master/js/jquery.js"></script>
<script type="text/javascript" src="/master/js/site-main.js"></script>

That part is fine.

那部分没问题。

In addition to this, each page loads page-specific JavaScript and CSS:

除此之外，每个页面都加载特定于页面的JavaScript和CSS：

<link rel="stylesheet" href="/static/css/widgets/item_detail.css">
<script type="text/javascript" src="/static/js/widgets/item_detail.js"></script>

In this example, item_detail.js would have event handlers that are needed on the item detail page (only).

在此示例中，item_detail.js将具有项目详细信息页面上所需的事件处理程序（仅限）。

Unfortunately this means that I now have several parallel directory structures for this view:

不幸的是，这意味着我现在有几个并行目录结构用于此视图：

my_site
- widgets
  - item_detail.html ← This is the view
  - item_detail.html←这是视图
- 小部件item_detail.html←这是视图
- static
  - css
    - item_detail.css ← This is the view-specific CSS
    - item_detail.css←这是特定于视图的CSS
  - css item_detail.css←这是特定于视图的CSS
  - js
    - item_detail.js ← This is the view-specific JavaScript
    - item_detail.js←这是特定于视图的JavaScript
  - js item_detail.js←这是特定于视图的JavaScript
- static css item_detail.css←这是视图特定的CSS js item_detail.js←这是视图特定的JavaScript
my_site小部件item_detail.html←这是视图static css item_detail.css←这是视图特定的CSS js item_detail.js←这是特定于视图的JavaScript

What I want is this:

我想要的是这个：

my_site
- widgets
  - item_detail.html ← This is the view
  - item_detail.html←这是视图
  - item_detail.css ← This is the view-specific CSS
  - item_detail.css←这是特定于视图的CSS
  - item_detail.js ← This is the view-specific JavaScript
  - item_detail.js←这是特定于视图的JavaScript
- 小部件item_detail.html←这是视图item_detail.css←这是视图特定的CSS item_detail.js←这是视图特定的JavaScript
my_site小部件item_detail.html←这是视图item_detail.css←这是视图特定的CSS item_detail.js←这是视图特定的JavaScript

Due to the way views work in Django, it’s not clear to me that this is possible.

由于视图在Django中的工作方式，我不清楚这是可能的。

5 个解决方案

#1

If you are just organizing stuff for development, you can symlink you template dir with all template, css and js files to directory you are serving static files too.

如果您只是组织开发的东西，您可以将模板目录与所有模板，css和js文件符号链接到您正在为静态文件提供服务的目录。

So from your example: add my_site/widgets to Django TEMPLATE_DIRS config and cp -s my_site/widgets to directory you have your static files in.

因此，从您的示例：将my_site / widgets添加到Django TEMPLATE_DIRS配置，将cp -s my_site / widgets添加到您拥有静态文件的目录中。

This is dirty hack and, please, don't use it in production as it is very insecure IMHO. But if you want to have neatly organized project in development stage - then I see this as one possible solution.

这是肮脏的黑客，请不要在生产中使用它，因为它是非常不安全的恕我直言。但是如果你想在开发阶段整齐地组织项目 - 那么我认为这是一个可能的解决方案。

And also consider that this might give you loads of headache when you move from development to production as stuff WILL fail.

并且还要考虑当你从开发转向生产时，这可能会给你带来很多麻烦，因为东西会失败。

#2

I agree with freiksenet. A solution to the problem he adresses could be aggregating the various css and js files. The whole site then uses just one css and one js file. The first load would be higher, yes, but a big part of the speed of a site is in downloading files, and if caching is done right, aggregation of these files helps imho.

我同意freiksenet。他所解决的问题的解决方案可能是聚合各种css和js文件。然后整个站点只使用一个css和一个js文件。第一个负载会更高，是的，但网站速度的很大一部分是下载文件，如果缓存正确，这些文件的聚合有助于imho。

I unfortunately don't have an answer to your main question.

遗憾的是，我对你的主要问题没有答案。

#3

I keep javascript in files separated by function and combine them into a single minified js file with a pre-commit hook (right after the tests run).

我将javascript保存在由函数分隔的文件中，并将它们组合成一个带有预提交钩子的缩小的js文件（在测试运行之后）。

for example: I have several jquery-ui dialogs on the site I'm currently working on. Each dialog's functionality is broken off into it's own js file for maintainability. And all the needed js files are "included" on the development pages using a short base.js file like so:

例如：我正在使用的网站上有几个jquery-ui对话框。每个对话框的功能都被分解为它自己的js文件以实现可维护性。所有需要的js文件都使用一个简短的base.js文件“包含”在开发页面上，如下所示：

function include(filename) {
    document.write(unescape("%3Cscript src='" + filename + "' type='text/javascript'%3E%3C/script%3E"));
}

// include-js (external)
include('/site_media/jquery-plugin1.js');
include('/site_media/js-sources/dialog1.js');

my pre-commit hook does a regex on this file...

我的预提交钩子在这个文件上做了一个正则表达式...

include\('/site_media/(.*)'\);

and feeds all the files into YUI compressor.

并将所有文件提供给YUI压缩器。

So I guess the answer to your question is... I put them wherever makes sense to me logically, because on the live site, it'll all be in the minified JS file(s) anyway

所以我想你的问题的答案是......我把它们放在逻辑上对我有意义的地方，因为在现场网站上，无论如何它都将在缩小的JS文件中

#4

You don't want to have your templates available as static files -- they may contain sensitive information or details about the page's implementation which are not appropriate for the public to see.

您不希望将模板作为静态文件提供 - 它们可能包含敏感信息或有关页面实现的详细信息，这些信息不适合公众查看。

CSS and JS do not have to be segregated into separate directories -- simply place them in the static/ directory.

CSS和JS不必分隔成单独的目录 - 只需将它们放在static /目录中即可。

my_site/
- widgets/
  - item_detail.html
  - item_detail.html
- 小部件/ item_detail.html
- static/
  - item_detail.css
  - item_detail.css
  - item_detail.js
  - item_detail.js
- static / item_detail.css item_detail.js
my_site / widgets / item_detail.html static / item_detail.css item_detail.js

#5

One approach I’m testing:

我正在测试的一种方法：

my_site/
- widgets/
  - item_detail.html
  - item_detail.html
  - item_detail.css
  - item_detail.css
  - item_detail.js
  - item_detail.js
- 小部件/ item_detail.html item_detail.css item_detail.js
my_site / widgets / item_detail.html item_detail.css item_detail.js

These are not shared statically. Instead, in the HTML template:

这些不是静态共享的。相反，在HTML模板中：

<script type="text/javascript" charset="utf-8">
    {% include "widgets/item_detail.js" %}    
</script>

(Similar code for CSS.) I would only do this for page-specific JavaScript and CSS, not site-wide stuff that can benefit from caching.

（类似于CSS的代码。）我只会针对特定于页面的JavaScript和CSS执行此操作，而不是可以从缓存中受益的站点范围内的内容。

This dumps the actual JavaScript and/or CSS right into the template, yet allows me to keep them in separate files for development purposes. This is nice, development-wise but defeats some JavaScript and CSS caching, but only for page-level stuff that’s not re-used on any other page.

这会将实际的JavaScript和/或CSS转储到模板中，但允许我将它们保存在单独的文件中以用于开发目的。这是很好的，开发方面的但是却失败了一些JavaScript和CSS缓存，但仅适用于在任何其他页面上没有重复使用的页面级别的东西。

#1