Question

我正在尝试将CSS包含在Phoenix模板（EEx）中，以便我可以定义不仅包含HTML而且包含自己的CSS的组件（在服务器上呈现）。为此，我想为该模板（组件）包含一个带有CSS的标签，希望它将被注入＆lt; head＆gt; ，但这不是发生的事情。我做了一些经验并且无法实现这一点（很奇怪，当我这样做时，我的网页没有破坏，我可以看到＆lt; head＆gt; 和＆lt; style＆gt; < ＆lt; body＆gt; 中的/ code>标签。＆＃xA;示例 templateXYZ.html.eex 代码可以是：

＆＃xA;＆ #xA;

 <代码>＆LT;风格＆GT;＆＃XA; .main {color：red;}＆＃xA;＆lt; / style＆gt;＆＃xA;＆＃xA;＆lt; div class =“main”＆gt;＆＃xA;＆＃xA; ＆lt;！ -  Html代码在这里 - ＆gt;＆＃xA;＆＃xA;＆lt; / div＆gt;＆＃xA;

＆＃xA;＆＃xA;

注意这个的主要目标是允许我在一个模板中编写所有“组件”代码（Html，CSS和Javascript - 后面没有问题，所以我在示例/问题中省略它）的方式是我只需要将模板放在我的其他模板中的适当位置（在另一个模板中渲染模板也不是问题）并且不做任何事情（就像我有一个单独的CSS文件并需要在<代码>＆lt; head＆gt; ）。

＆＃xA;＆＃xA;

作为比较，我可以在客户端做我想要的原始Javascript放置我的 DOM中的＆lt; style＆gt; 和HTML如下所示：

＆＃xA;＆＃xA;

  function f_auxButton（imgpath，id）{＆＃xA; if（document.getElementById（'auxButtonId'））{} //＆lt; style＆gt;仅在第一个组件实例上创建，以避免重复＆＃xA;别的{＆＃xA; $（'＆lt; style id =“auxButtonId”＆gt; \＆＃xA; .auxButton {\＆＃xA; width：25px; \＆＃xA; height：25px; \＆＃xA; margin：10px; \＆ #xA;} \＆＃xA;＆lt; \ style＆gt;'）。appendTo（“head”）}＆＃xA;＆＃xA; return'＆lt; img src =“'+ imgpath +'”class =“auxButton”id =“'+ id +'”＆gt;'＆＃xA;

＆＃xA;＆＃xA; < p>然后我只需要调用＆lt; script＆gt; f_auxButton（arg1，arg2）＆lt; / script＆gt; ，我想放置HMTL，我就得到它（加上＆lt; style＆gt ; 标记进入＆lt; head＆gt; 。

＆＃xA;＆＃xA;

那么，有没有办法做到这一点？

＆＃XA;

Answer 1

<强> app.html.eex

<!doctype html>
<html>
    <head>
        <title></title>
        <%= render_existing view_module(@conn), "_styles.html", assigns %>
    </head>
    <body>
        <div class="main">
            <%= render_existing view_module(@conn), "_component.html", assigns %>
        </div>
    </body>
</html>

<强> /web/templates/shared/_components.html.eex

<%= render MyApp.PageView, "_styles.html" %>
<img src="<%= static_path(MyApp.Endpoint, "/path/example.png")%>", class="auxButton">

<强> /web/templates/page/_styles.html.eex

<style>
  .auxButton {width: 25px;height: 25px;margin: 10px;}
</style>

最终结果

<!doctype html>
  <html>
    <head>
      <title>My App</title>
      <style>
        .auxButton {width: 25px;height: 25px;margin: 10px;}
      </style>
    </head>
      <body>
        <div class="main">
          <img src="/path/example.png" class="auxButton">
        </div>
      </body>
   </html>

如何使用内联<style>标记在Phoenix EEx模板中包含CSS

1 个答案: