时间戳

首页 > 解决方案 > Squarespace - 根据博客标签更改 CSS 元素

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

问题描述

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

提前感谢您的帮助！

标签： javascriptcsssquarespace

解决方案

不幸的是，在 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;
}

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

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

推荐阅读