在外部托管的 CSS 中使用 Tumblr 的块元素

Question

我在使用 Tumblr 的自定义变量功能和外部托管的 CSS 时遇到问题。

背景
Tumblr 主题被编写为单个 html 页面，所有 CSS 都存储在文档中的

Tumblr 允许存储用户定义的数据在您的命名变量中，用花括号括起来。然后可以将它们应用到 CSS 中。一个示例可能是附加到 {color:BackgroundColour} 的颜色十六进制代码，然后可以使用它来代替 CSS 中的 #value。 （更多信息）

当浏览器呈现页面时，存储在 < code>{color:BackgroundColor} 作为十六进制代码返回，一切正常。

问题
为了使主题开发更容易，我在外部托管 CSS 并在
中链接 当页面呈现时，我的自定义变量将按 CSS 中写入的形式返回，而不是提取附加值。

因此页面呈现：

#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
background-color:{color:BackgroundColor};  
}

而不是：

#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
background-color: #dedede;  
}

仅当 CSS 从外部托管链接时才会发生这种情况。他们是我可以解决这个问题的方法吗？

Answer 1

根据我对 tumblr 模板引擎的有限了解，我不相信远程托管的 css 文件可以实现这一点。所有变量声明都在服务器端呈现，并以正确的语法提供给客户端。无论您如何注入外部托管的 css 文件，它都会为时已晚，因为服务器已经渲染了内容。

我能看到的唯一可行的妥协是将你的 css 文件拆分为需要变量和不需要变量的选择器。

例子：
tumblr 页面中包含的样式块。

<style type="text/css">
    #header{
        background-color:{color:BackgroundColor};  
    }
</style>

外部托管文件：

#header{
    width: 600px;
    margin: 0;
    padding: 0;
    border: 0;
}

这样您就可以满足外部托管 css 文件的要求，同时还可以利用 tumblr 引擎。