如何将 css 文件添加到 Squarespace 开发者模式

Question

我在样式中添加了 index.css，并将其包含在 template.conf 中：

{
  "name": "Wright",
  "author": "Squarespace, Inc.",
  "layouts": {
    "default": {
      "name": "Default",
      "regions": [
        "site"
      ]
    }
  },
  "stylesheets": [
    "index.css"
  ],
  etc...
}

我从文档中看到样式表将被编译成 site.css:

stylesheets

List of your stylesheet. Stylesheets will be compiled into site.css following the ordering here.

NOTE: If you add a file named reset.css to the /styles/ folder it will automatically get added to the top of the site.css file. It should not be listed in the "stylesheets" variable in template.conf.

这个 site.css 文件在哪里？ site.region是怎么调用的？

目前，我无法通过这种方式加载自定义 css 文件。

Answer 1

文件 site.css 是所有 Squarespace 的默认样式以及您在问题中通过 stylesheets: [ ... ] 添加的任何样式的编译结果输出。

只要您的（或 Squarespace 的）样式表发生变化，它就会自动为您创建。您没有对它的直接写入权限，它不会出现在您的模板中。

因此，如果您确实按照问题中所述完成了操作（将文件添加到 /styles 并将其添加到您的 template.conf 文件），并且您随后更新了模板通过 Git（请注意，SFTP 存在错误，可能无法更新您的文件），您的 CSS 将在用户加载网站后包含在 site.css 中。

为了回答您的最后一个问题，site.css 文件不是通过任何区域文件直接加载的。也就是说，如果在代码内部搜索，是找不到的。相反，它作为 {squarespace-headers} 的一部分加载，您可以在模板文件中找到它，在 .region 文件或 .block 文件中。

如何将 css 文件添加到 Squarespace 开发者模式

How to add css file to Squarespace developer mode

css

squarespace