使用 Squarespace 编辑 html/css

Question

我正在尝试在 Squarespace 上创建一个网站，但在我的 HTML 页面上 selecting 元素以用于自定义 css 时遇到了问题。当我在浏览器上使用 inspect 元素时，某些元素的 ID 会发生变化，而其他元素则保持不变。

我是运行开发者模式，通过github将代码下载到我的本地机器上。

在 downloaded site.region 文件中，我找到了 div 元素，其中包含我要设置样式的内容：

<div id="content" class="main-content" data-content-field="main-content" data-collection-id="{collection.id}" {.equal? collection.typeName "gallery"}{.or}{.equal? collection.typeName "index"}{.or}data-edit-main-image="Banner"{.end}{.end}>
     {squarespace.main-content}
</div>

{squarespace.main-content} 是从哪里来的，我如何 select 里面的元素设置样式？

Answer 1

在方形空间中执行此操作：

打开开发者选项（编辑JS至少是必须的，不确定CSS),
转到设计 »» 自定义CSS
add/change 无论你喜欢什么，你都应该设计类或 css 选择器，比如 nth-child/nth-of-type 而不是那些动态 ID。

您可以在此处查看更多信息：

Answer 2

关于有的ID变了，有的不变，确实是这样。有关这方面的更多信息，请参阅。总结：

...any ID starting with "yui" can/will change on page refresh...however...block IDs (ID's starting with "block-" do not change as long as the block is not removed...

关于 {squarespace.main-content} 的来源，这是一个 JSON-T tag，告诉服务器加载内容管理系统中输入的内容 (a.k.a。"Layout Engine") 该页面。无论该标签在哪里，该页面的布局引擎内容都将被加载。

最后，关于如何 select 主要内容中的元素使用 CSS 进行样式设置，您是在正确的轨道上。像您一样检查元素。如果您想针对特定块，请查找以 block- 开头的 ID 并针对这些块。或者找到其他方法来定位元素，例如 :first-child 或 nth-child select 或。然后在the CSS Editor or, if you're using Developer Mode (as you indicated that you are), then add the rules to your base.less file (or other CSS files as the case may be) and then update your template using Git or SFTP.

中输入你的CSS

最后请注意，您不需要使用开发人员模式来定位具有 CSS 的元素。您可以简单地按照提到的那样定位正确的元素，然后按照提到的那样在 CSS 编辑器中输入规则，因此可能根本不需要增加开发者模式的复杂性。

使用 Squarespace 编辑 html/css

Using Squarespace to edit html/css

html

css

squarespace