正在寻找有关如何将自定义类添加到 Squarespace 中的部分和模块的指南？

问题描述

我有一位客户正在使用 Squarespace，并要求我解决移动堆叠问题。

我有 2 行图像 + 文本并排交替。这在桌面上看起来不错，但在移动设备上堆叠顺序是错误的。

桌面堆叠：

图片+文字

文字+图片

当前移动堆叠：

图片

文字

文字

图片

理想的堆叠：

图片

文字

图片

文字

通常我是通过将部分与自定义类交替来实现的，但我没有看到任何添加它的地方。 您可以向部分添加自定义类吗？

感谢任何帮助。谢谢！

解决方法

无法直接编辑出现在 Squarepace 的默认网格和块系统（他们称之为“LayoutEngine”）中的标记。一般来说，必须要么在代码块中（或通过代码注入点）编写自己的 HTML，要么在默认标记加载到页面后使用 JavaScript 更改 HTML。

但在您的具体情况下，this is a common problem in Squarespace，通常仅使用 CSS 解决，使用以下组合：

1. first-child、last-child 和 nth-child 选择器，和/或
2. > 直系后代/子组合子，和/或
3. 特定块 ID（每个 sqs-block 都有一个唯一的 id 属性），和/或
4. 媒体查询，以便规则仅在到达移动断点后生效，和/或
5. 带有 display:flex 属性的 order。或 display:table-header 与 display:table-footer 以强制不同的堆叠顺序。

特定的 CSS 通常会因特定情况而有很大差异，无论您是尝试重新排序块、列还是行。与上面链接的类似问题为您尝试解决的同一问题提供了特定的解决方案，但在您的情况下解决它的代码可能看起来完全不同，尽管它可能会使用上述五项内容的组合。>

或者，您可以使用 JavaScript 来定位块并添加您自己的类，然后使用这些类编写 CSS。即使在这种情况下，一般方法也是一样的。