如何使用内联<；在Phoenix EEx模板中包含CSS；风格>；标签_Css_Elixir_Phoenix Framework

如何使用内联<；在Phoenix EEx模板中包含CSS；风格>；标签

css elixir

如何使用内联<；在Phoenix EEx模板中包含CSS；风格>；标签,css,elixir,phoenix-framework,Css,Elixir,Phoenix Framework,我试图在Phoenix模板（EEx）中包含CSS，这样我就可以定义（在服务器上呈现的）组件，这些组件不仅包括HTML，还包括它们自己的CSS。为此，我想为该模板（组件）添加一个带有CSS的标记，希望它能被注入到中，但事实并非如此。我做了一些体验，但没能做到这一点（奇怪的是，当我这么做时，我的网页没有破裂，我可以看到和标签在里面）。示例templateXYZ.html.eex代码可以是： <style> .main {color: red;} </style> &

我试图在Phoenix模板（EEx）中包含CSS，这样我就可以定义（在服务器上呈现的）组件，这些组件不仅包括HTML，还包括它们自己的CSS。为此，我想为该模板（组件）添加一个带有CSS的标记，希望它能被注入到

中，但事实并非如此。我做了一些体验，但没能做到这一点（奇怪的是，当我这么做时，我的网页没有破裂，我可以看到

和

标签在

里面）。示例

templateXYZ.html.eex

代码可以是：

<style>
   .main {color: red;}
</style>

<div class="main">

    <!-- Html code goes here -->

</div>


.main{颜色：红色；}

请注意，这项工作的主要目标是允许我在一个模板中编写所有“组件”代码（Html、CSS和Javascript，后者没有问题，所以我在示例/问题中省略了它），这样我只需要将模板放在其他模板中的适当位置（在另一个模板中呈现一个模板也不是问题）并且什么也不做（比如我有一个单独的CSS文件，需要在

中导入它）

作为比较，我可以在客户端使用原始Javascript做我想做的事情，将我的

和HTML放在DOM中，如下所示：

function f_auxButton(imgpath,id){
        if (document.getElementById('auxButtonId')){} // <style> is only created on first component instanciation to avoid duplication
    else {
    $('<style id="auxButtonId">\
       .auxButton {\
            width: 25px;\
            height: 25px;\
            margin: 10px;\
        }\
    <\style>').appendTo("head")}

    return '<img src="'+imgpath+'" class="auxButton" id="'+id+'">'

函数f_auxButton（imgpath，id）{ 如果（document.getElementById（'auxButtonId'））{}//仅在第一个组件实例上创建，以避免重复否则{ $('\ 奥克斯布顿先生{\ 宽度：25px\ 高度：25px\ 利润率：10px\ }\ ）.appendTo（“head”）} 返回“” 然后，我只需调用

f_auxButton（arg1，arg2）

将HMTL放置在我想放置的位置，然后我就可以得到它（加上进入

的

标记）

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

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>

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

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

/web/templates/shared/_components.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>

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

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


，class=“auxButton”>

/web/templates/page/_styles.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>

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

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


.auxButton{宽度：25px；高度：25px；边距：10px；}

最终结果

<!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>


我的应用程序
.auxButton{宽度：25px；高度：25px；边距：10px；}

Hi Paulo你有可以共享的代码来帮助你了解你想要完成什么吗？如果只是在一个模板一个模板的基础上包含css或javascript等，一个可能的解决方案是创建一个共享目录，允许你呈现共享模板，例如/web/templates/shared/_styles.html.eex，然后wi精简该文件，您将添加必要的css，但在您需要的控制流中。我发现了以下问题：。它为我提供了一个解决方案，因此不是我要寻找的答案…嗨，保罗。我想我现在明白您的意思了。您想创建一个（共享模板）你将嵌入到其他模板中的文件，然后添加共享文件html和css，但css应用于头部和html，其中包括shared file.html和css，但css应用于头部和html，其中包括共享文件。不幸的是，我也是Phoenix/Elixir的新手，不知道该怎么做但你也可以向“irc lang频道”的人寻求帮助，如果你找到了解决方案，请将其发回这里。@Dikaio谢谢。我会想办法解决这个问题，然后将其发回这里。我不知道我是否完全理解你的意思……我编辑了我的问题，以澄清问题。谢谢！Paulo我认为使用这种方法可以让你做到这一点您正在尝试做什么。请参见上面更改的答案。我不确定这是否是最好的方法，但它确实有效！这很好，我不知道它可以起作用。然而，这是工作的一半，因为您仍然需要在单独的模板/文件中定义。我的目标是在同一模板中使用HTML和CSS。我有即使尝试使用不同的模板方法，我仍然没有答案。我认为最好的方法可能会直接使用视图并删除模板，但我也觉得它比它带来的好处更复杂……谢谢你，迪凯！我明白你的观点，保罗！如果你找到实现这一点的完美方法，我也很想看看它是如何实现的。比ks！