是否可以使用Django从JS文件中包含CSS(这里是棘手的部分)?

时间:2021-11-28 20:30:39

As far as I know, there's no way to use {% include %} within a dynamic JS file to include styles. But I don't want to have to make another call to the server to download styles.

据我所知,没有办法在动态JS文件中使用{%include%}来包含样式。但我不想再打电话给服务器下载样式。

Perhaps it would be possible by taking a stylesheet and injecting it into the head element of the document...has anyone does this before?

也许通过采用样式表并将其注入文档的head元素是可能的......有没有人这样做过?

3 个解决方案

#1


In your JS file:

在你的JS文件中:

var style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('type', 'text/css');
style.setAttribute('href', 'style.css');
document.getElementsByTagName('head')[0].appendChild(style);

Hope that helps.

希望有所帮助。

#2


With jquery...

$('head').append($('<link rel="stylesheet" type="text/css" href="style.css">'))

#3


I can envision cases where you'd want to dynamically generate JS or CSS, but generally you're better off creating static files for each and making your code general enough to fulfill all your needs.

我可以想象你想要动态生成JS或CSS的情况,但通常你最好为每个创建静态文件并使你的代码足够通用以满足你的所有需求。

This goes beyond a simple matter of code reuse - if you're dynamically generating any of this, it will need to be re-downloaded each time it's used. You're wasting CPU time rendering the templates, and wasting bandwidth sending the same (or potentially the same) data over the wire over and over.

这超出了代码重用的简单问题 - 如果您动态生成任何此类代码,则每次使用时都需要重新下载。你浪费CPU时间渲染模板,浪费带宽一遍又一遍地通过线路发送相同(或可能相同)的数据。

But if you have a good use case for meta-coding, there's no reason why you can't either:

但是如果你有一个很好的元编码用例,就没有理由你不能:

a) put the JS or CSS in the header (or body, in the case of JS) of your rendered template b) create a view for the JS or CSS, and use Django's template engine to render them.

a)将JS或CSS放在渲染模板的头部(或JS的主体)中b)为JS或CSS创建一个视图,并使用Django的模板引擎来渲染它们。

The {% include %} tag will work fine for (a), and for (b) you'd just use normal HTML to reference the URL of your view.

{%include%}标记适用于(a),而(b)您只需使用普通HTML来引用视图的网址即可。

#1


In your JS file:

在你的JS文件中:

var style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('type', 'text/css');
style.setAttribute('href', 'style.css');
document.getElementsByTagName('head')[0].appendChild(style);

Hope that helps.

希望有所帮助。

#2


With jquery...

$('head').append($('<link rel="stylesheet" type="text/css" href="style.css">'))

#3


I can envision cases where you'd want to dynamically generate JS or CSS, but generally you're better off creating static files for each and making your code general enough to fulfill all your needs.

我可以想象你想要动态生成JS或CSS的情况,但通常你最好为每个创建静态文件并使你的代码足够通用以满足你的所有需求。

This goes beyond a simple matter of code reuse - if you're dynamically generating any of this, it will need to be re-downloaded each time it's used. You're wasting CPU time rendering the templates, and wasting bandwidth sending the same (or potentially the same) data over the wire over and over.

这超出了代码重用的简单问题 - 如果您动态生成任何此类代码,则每次使用时都需要重新下载。你浪费CPU时间渲染模板,浪费带宽一遍又一遍地通过线路发送相同(或可能相同)的数据。

But if you have a good use case for meta-coding, there's no reason why you can't either:

但是如果你有一个很好的元编码用例,就没有理由你不能:

a) put the JS or CSS in the header (or body, in the case of JS) of your rendered template b) create a view for the JS or CSS, and use Django's template engine to render them.

a)将JS或CSS放在渲染模板的头部(或JS的主体)中b)为JS或CSS创建一个视图,并使用Django的模板引擎来渲染它们。

The {% include %} tag will work fine for (a), and for (b) you'd just use normal HTML to reference the URL of your view.

{%include%}标记适用于(a),而(b)您只需使用普通HTML来引用视图的网址即可。