将标识符添加到 squarespace 部分

问题描述

使用 Squarespace 的“添加部分”按钮并选择部分样式。有没有办法标记部分，以便可以使用客户代码专门针对它们？例如。假设我想获取所有与“产品”和“销售”相关的部分，并使用自定义 CSS 对它们进行不同的样式设置？注意：某些部分样式上没有“标签”，例如列表。

解决方法

不幸的是，Squarespace 在 7.1 版（在撰写本文时为最新版本）中移除了具有自定义部分 ID 的功能。这在您的情况下可能很有用，但听起来您想要的是将自定义类分配给特定部分的能力，而这不是 Squarespace 曾经提供的功能。

典型的解决方法是通过 data-section-id 属性定位部分，如下所示：

section[data-section-id="5f870b03756b454a0f310e88"] {
  /* Your CSS Here */
}

如果您有多个要定位的部分，它通常如下所示：

section[data-section-id="5f870b03756b454a0f310e88"],section[data-section-id="5f32be4fe69e956b3c47c805"],section[data-section-id="5f870b2e692993607c0b1ba2"] {
  /* Your CSS Here */
}

Squarespace 支持 LESS CSS，可以在这种情况下使用。例如，您可以将所有销售部分样式分配给一个类。然后，在自定义 Sales 部分时，您可以应用该类以及可能不适用于其他 Sales 部分的其他自定义样式。像这样：

.salesSectionStyles {
   // Your Sales section-related CSS Here
   ul {
     // custom list styles here.
   }
}

section[data-section-id="5f870b03756b454a0f310e88"] {
  .salesSectionStyles;
  // More custom CSS here.
}

section[data-section-id="5f32be4fe69e956b3c47c805"] {
  .salesSectionStyles;
  // Even more custom CSS here.
}

或者，使用 LESS，您可以维护一个变量，例如 @salesSections（您为其分配一个包含所有销售相关部分的选择器的字符串），然后将 CSS 应用于该变量。在大多数情况下，我不会推荐这种方法，但它看起来像这样：

@salesSections: ~'section[data-section-id="5f870b03756b454a0f310e88"],section[data-section-id="5f870b2e692993607c0b1ba2"]';
                
@{salesSections} {
  // Your CSS Here
}

请记住，上面的最后两个代码片段使用了 LESS CSS，Squarespace 仅在 CSS 编辑器中（而不在代码块中）支持。它不是标准的 CSS。后两个示例中的第一个还说明了使用 LESS 嵌套，以便将自定义样式应用于销售相关部分中的所有无序列表元素 (ul)。