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

问题描述

嗨，我不是 Javascript 开发人员，我想知道是否有人能够帮助制作一个脚本，根据为我的 Squarespace 站点分配的博客标签来更改 CSS 类的颜色。基本上，我有三个主要的博客类别，其中包含许多子主题，这些子主题在整个站点中都以特定颜色引用。我想在分配标签时更改博客标题颜色以匹配。

提前感谢您的帮助！

解决方法

遗憾的是，在 Squarespace 7.1 中，博客项目 class 元素的 body 属性不再包含分配给帖子的标签和类别的类。此外，尽管页面上存在类似的类，但 Squarespace 无法“slugify”类别和标签名称，从而生成无效类。我已经向 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;
}

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

请注意，由于我之前提到的错误，每个类将只包含标记的第一个单词（全部小写），跟在 .blog-item-category-- 部分之后。

javascript squarespace