在 Octobercms 从 Partial 注入 CSS答案

【问题标题】：On Octobercms inject CSS from Partial在 Octobercms 从 Partial 注入 CSS
【发布时间】：2019-05-17 20:31:04
【问题描述】：

我尝试使用以下方法从部分注入 Javascript 和 Css：

function onStart()
{
    $this->addCss('assets/css/style1.css');
    $this->addCss('assets/css/style2.css');
    $this->addJs('assets/js/javascript1.js');
    $this->addJs('assets/js/javascript2.js');

}

在我的布局中，我使用的是 {% styes %} 和 {% scripts %}，但是只有 javascripts 被成功注入。没有注入 CSS。

我也使用了 {% put scripts %} 和 {% put styles %} 但只是再次注入了脚本。

如果我直接在我的 layout.htm css 上使用上面的代码，但我需要在我的部分上使用这个函数。这可能吗？

【问题讨论】：

样式 {% styles %} 用于顶部，{% scripts %} 添加在底部，因此对于 css，您需要查看标题，因为我也可以添加 css、部分脚本
是的，我知道将 {%styles%} 放在哪里，我将它放在我的布局上的 head 标签上。如果您的部分属于 cms 页面，您可以成功注入 css，我也自己测试它并且它可以工作。但是如果你使用属于 layout.htm 的部分，那么你就不能注入 css。您能否确认您可以从属于布局的部分注入 css？
哦！抱歉，我只是忽略了那部分，让我再检查一次。
好的，我明白了你的问题，因为你的{% styles %} 必须在your partial which has css/js inclusion code 之后，现在可以堆给你的是{% styles %} 是coming first it collect all the information render style tags 然后你的部分评估所以，它注册这种风格有点晚了。
如果你愿意，可以回答我的问题，接受它。

标签： css octobercms partials octobercms-backend

【解决方案1】：

看来{% styles %}在尊重层次结构。

意味着如果您在部分之前使用{% styles %}，它将不为该部分注入 css。

所以你的部分是在 {% styles %} 之后出现的，它没有它的信息，所以它不会从中注入样式。

例如。您在部分代码部分 onStart 中包含 css/js 那么，

这会起作用

<!-- it will work -->
{% partial 'site/meta' %} <- you are injecting styles in code section
{% styles %} <- its after partial

这将不工作

<!-- it will not work -->
{% styles %} <- its before partial
{% partial 'site/meta' %} <- you are injecting styles in code section

所以，我们可以确保我们包含/注入所有样式，然后使用{% styles %}，这样它就包含了所有关于 css 包含/注入的信息。然后它可以用css渲染所有的样式标签。

如有任何疑问，请发表评论。

【讨论】：