问题
I need to add a class name or an ID to a Squarespace textblock to be targeted by JavaScript. If I use a code block to add the text, I can add a class name, however it can't be edited easily like other text blocks.
I am looking for a way to add the class name with the element still bing recognized as a text block.
Is there a way to do this from the editor or is developer mode my only option.
回答1:
Unfortunately, you cannot directly edit the HTML of a text block (or any block besides markdown and code blocks) within Squarespace. Squarespace does not make such capability available.
Even using developer mode, one only has access to the overall template and surrounding code. In developer mode, one can insert "block fields" (an area allowing content editors to add/drag/drop/arrange blocks in a grid) and add a class to the block field, but one cannot alter the code within the block field nor the blocks themselves.
Alternatives/Workarounds:
- Use the block ID in combination with
.row,.col,p,first-childandnth-childselectors in order to target specific elements within a text block. More about using block ids here and here. Of course, doing this means that your selector will be fragile...editing the text within the text block could alter the applicability of the selector you used. - If one needs to target a specific word or words within a
pelement, one can highlight the text within the text block, set it as both bold and italic, then target that phrase via JavaScript and/or CSS by using the block id in combination withstrong,emselectors.Take note of the order in which you click on the bold and italic buttons, since this determines which is inside which, and changes your selector.You can override the font-weight and font-style as needed. This is a popular workaround among Squarespace designers, despite its absurdity. - Use the code block or markdown block, as you mentioned.
来源：https://stackoverflow.com/questions/59332357/how-do-i-add-css-class-names-to-text-blocks-in-squarespace