Question

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

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

中的<head>标记中

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

当浏览器呈现页面时，{color:BackgroundColor}中存储的数据将作为十六进制代码返回，一切正常。

问题
为了使主题开发更容易，我在外部托管我的CSS并在<head>中链接当页面呈现时，我的自定义变量将按原样返回，而不是拉动附加值。

所以页面渲染：

#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引擎。