css - 定位单个画廊元素 - Squarespace Flatiron 模板

Question

我目前在 Squarespace 6 中使用 Flatiron 模板。画廊中的每张图片目前都显示图片、标题和图片下方的 -view-。我希望将 -view- 更改为每个画廊元素所特有的不同名称(具体来说是一个城市)。

其中一个网格项的源代码是这样的:

<script>
    Y.use('squarespace-ui-base', function(Y) {
      Y.one(".project-item .meta h1").plug(Y.Squarespace.TextShrink);
    });
  </script>

  <!-- Main Grid -->
  <div id="grid" data-collection-id="53ebab59e4b0c8271c405596">


    <div class="item">
      <a href="/diesel-pop-up-brooklyn-nyc/" data-dynamic-load data-dynamic-receiver="#detail_53ee8134e4b020d5c7faa7b3"   >
        <div class="wrapper">
          <div class="project-title">
            <h2>DIESEL POP-UP</h2>
            <h3>&mdash; view &mdash;</h3>
          </div>
        </div>

          <img class="thumbnail loading" data-src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image-dimensions="480x642" data-image-focal-point="0.5,0.5" alt="2.jpg"  data-load="false" />
          <noscript><img src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg?format=original"></noscript>

      </a>
    </div>

我曾尝试在自定义 CSS 部分中使用它(只是为了尝试定位一个元素)，但它只影响图像链接到的页面，而不是图像本身。

.project-item[data-dynamic-href='/diesel-pop-up-brooklyn-nyc/'] {
  background-color: red;

是否有可以针对每个单独元素的代码？

Answer 1

前往:页面>设置>高级> header 注入(inject)(索引页)

然后粘贴以下内容:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $(".item:nth-child(1) h3").text("1st item");
    $(".item:nth-child(2) h3").text("2nd item");
    $(".item:nth-child(3) h3").text("3rd item");
    $(".item:nth-child(4) h3").text("4th item");
});
</script>

很酷。现在您可以将引号(第 1、2、3、4 项)中的文本更改为您想要替换“ View ”的任何文本。如果索引中的画廊超过 4 个，您可以复制一行并将其粘贴到下方，但只需确保将第 n 个子元素从 (4) 增加到 (5)。

希望对您有所帮助!