Squarespace

Question

您好，我不是 Javascript 开发人员，我想知道是否有人可以帮助制作一个脚本，根据分配的内容更改 CSS class 的颜色我的 Squarespace 网站的博客标签。从本质上讲，我有三个主要的博客类别，其中有许多 sub-topics 在整个站点中以特定颜色引用。我想更改博客标题颜色以匹配分配标签时的颜色。

提前感谢您的帮助！

Answer 1

不幸的是，在 Squarespace 7.1 中，博客项目 body 元素的 class 属性不再包含分配给 post 的标签和类别的 classes。此外，虽然页面上有类似的 classes，但 Squarespace 无法“slugify”类别和标签名称，从而生成无效的 classes。我已将此错误报告给 Squarespace，但不知道他们是否会解决它。

为了解决这两个问题，可以通过站点范围的 FOOTER 代码注入添加以下内容：

<!-- Add first category class of blog item to body element for targeting blog titles via CSS. -->
<script>
(function() {
  var catEl = document.querySelector(".collection-5fa562b2aa23eb3d7f314914 .blog-item-category");
  var cat;

  if (!catEl) {
    return;
  }

  cat = catEl.className.match(/blog-item-category--\S*/)[0];
  if (cat) {
    document.body.classList.add(cat);
  }
})();
</script>

添加该脚本后，您可以通过 CSS 编辑器添加 CSS，如下所示：

.blog-item-category--exploration .blog-item-title h1 {
  color: #f6972e !important;
}

您可以为每个类别重复上述规则。

请注意，由于我之前提到的错误，每个 class 将仅包含标签 的第一个单词（全部小写），紧随 .blog-item-category--部分。

Squarespace - 根据博客标签更改 CSS 个元素

Squarespace - Change CSS elements depending on blog tag

javascript

css