javascript - 如何将 css 类名称添加到 Squarespace 中的文本 block ？

Question

我需要将类名或 ID 添加到 Squarespace 文本 block 以供 JavaScript 定位。如果我使用代码块来添加文本，我可以添加一个类名，但是它不像其他文本 block 那样容易编辑。

我正在寻找一种方法来添加类名，该元素仍被识别为文本 block 。

有没有办法从编辑器中做到这一点，或者开发者模式是我唯一的选择。

Answer 1

不幸的是，您不能在 Squarespace 中直接编辑文本 block (或除 markdown 和代码块之外的任何 block )的 HTML。 Squarespace 不提供此类功能。

即使使用开发人员模式，也只能访问整个模板和周围的代码。在开发人员模式下，可以插入“block fields”(允许内容编辑器在网格中添加/拖放/排列 block 的区域)并向 block 字段添加类，但不能更改 block 字段内的代码也不是 block 本身。

备选方案/解决方法:

• 将 block ID 与 .row、.col、p、first-child 和nth-child 选择器以定位文本 block 中的特定元素。关于使用 block ID 的更多信息 here和 here .当然，这样做意味着您的选择器会很脆弱……编辑文本 block 中的文本可能会改变您使用的选择器的适用性。
• 如果需要定位 p 元素中的一个或多个特定单词，可以突出显示文本 block 中的文本，将其设置为粗体和斜体，然后通过 JavaScript 定位该短语，然后/或 CSS，将 block ID 与 strong、em 选择器结合使用。 记下您点击粗体和斜体按钮的顺序，因为这决定了哪个在哪个里面，并更改您的选择器。您可以根据需要覆盖字体粗细和字体样式。这是 Squarespace 设计师中流行的解决方法，尽管它很荒谬(编辑:您也可以在键盘上按 CTRL+U 为突出显示的文本添加下划线，然后通过 CSS 定位带下划线的元素)。
• 如您所述，使用代码块或 Markdown block 。