在HTML中自动嵌入样式表

Automatically embed a stylesheet in HTML

本文关键字：样式 HTML      更新时间：2023-09-26

我正在构建错误页面(404/503)，需要是独立的html文件，我的服务器端是nodejs，但这些文件将直接托管在nginx。我试图在html文档的顶部自动嵌入样式表，并想知道是否有任何工具用于此目的。搜索堆栈溢出和谷歌不断返回工具内联css用于电子邮件，但这不是我想要的。

我想从 开始

before.css 

.body { color: black }

before.html 

<!DOCTYPE html>
<html>
  <head>
    <title>A Question</title>
    <link rel="stylesheet" href="before.css">
  </head>
  <body>
    <p>Here be the answer</p>
  </body>
</html>

一旦处理完成，我将以

结束

after.html 

<!DOCTYPE html>
<html>
  <head>
    <title>A Question</title>
    <style>.body { color: black }</style>
  </head>
  <body>
    <p>Here be the answer</p>
  </body>
</html>

理想的解决方案是一个gulp插件或一个如何编写一个的想法。
如果需要的话，我可以用JS写这个。此外，我已经使用EJS和Stylus来导出原始的before文件。

多谢

正如许多人评论的那样，您试图找到一个非常复杂问题的解决方案，并且可能有许多易于使用的变通方法。但是，如果你真的想这样做，那么这里有一些我认为最好的方法:

服务器端模板:

在HTML中嵌入样式表的最好、干净和直接的方法是使用服务器端脚本语言(如@Mr_Green所指出的)。有很多可供选择的库，当您使用Node.js时，最好的库是EJS或Jade。你也可以使用PHP, Ruby, Python或任何你认为最好的，但思路是一样的:

  1. 首先，需要从样式表中读取内容并将其存储在一个变量中。在Node.js中，你可以使用fs.readFile()来轻松读取。css文件的内容。
  2. 然后，您必须将.css文件的内容(存储在变量中)输出到HTML中。以EJS为例，如果你的CSS文件的内容在一个变量styleFile中，那么你可以使用<style><%= styleFile %></style>来直接将你的样式表的内容放入你的HTML <style>标签中。

使用Ajax和JavaScript:

另一个解决方案是使用Ajax获取样式表的内容，然后使用JavaScript简单地将其放入<style>标记中。例如，您可以使用一些jQuery: $("style").html(// stylesheet contents var); .

当然你也可以使用Haml，如果有帮助的话。

希望这能回答你的问题。

相关文章：