使用照片的第一个标签作为标题 - tumblr答案

【问题标题】：Using the first tag of a photopost as a title - tumblr使用照片的第一个标签作为标题 - tumblr
【发布时间】：2015-12-27 13:44:40
【问题描述】：

我正在尝试使用 tumblr 上每张照片/照片集帖子的第一个标签专门将其设置为标题（文字帖子内置了标题选项，照片帖子没有）我找到了其他 - 太手工 - 解决方案，但我认为从长远来看，第一个标签将是一种连贯的方式来做到这一点。

我不知道如何只获取标签列表的第一个孩子，或者从数组中获取它。

这可能吗？

谢谢

【问题讨论】：

可以单独使用 css，但您需要分享您的代码或展示一个工作示例以便其他人能够帮助您。
我没有找到工作示例...
您已经回答了自己的问题？
这个怎么样：jsfiddle.net/lharby/Lrkezh4n 这只是使用了纯 css 解决方案。
@lharby 我回答了，因为我最终尝试的方法奏效了。我以为我把它贴在这里，所以其他人也可以使用它。（我不知道为什么会存在这个标题问题）

标签： post tags css-selectors tumblr photo

【解决方案1】：

使用纯 css 解决方案。

HTML：

<div class="post cf">
  <ul class="notes">
     <li>Note 1</li>
     <li>Note 2</li>
     <li>Note 3</li>
  </ul>
</div>

CSS：

.notes {
  margin:0;
  list-style:none;
}

.notes li {
  float:left;
  padding-right:10px;
}

.notes li:first-child {
  float:none;
  color:red;
  font-size:2em;
}

你没有提供任何html，所以我已经猜到了结构，但原理很容易应用。

另外，如果你只希望它影响照片帖子，你可以轻松地将 css 选择器更改为

.photo .notes li:first-child { //css }

等等。

jsfiddle

【讨论】：

【解决方案2】：

在 tumblr 源代码编辑器开始的 {photo} 部分之后，我写了这个小 js。我在我的 {photoset} 标签后面放了同样的东西。所以现在我的照片和照片集帖子的第一个标签充当标题。这转到头部

.tag_to_title { STYLE HERE }

下面的 sn-p {photo} HERE 开头{/photo} 和 {photoset} HERE 以及 {/photoset}

<script type="text/javascript">
    var myTags = {};
    {block:Posts}
    {block:HasTags}
    myTags[{JSPostID}] = [
        {block:Tags}
        {
            "tag": {JSTag},
            "tagURL": {JSTagURL},
        },
        {/block:Tags}
    ];
    </script>
    <h2 class="tag_to_title">
    <script type="text/javascript">
    document.write(myTags[{JSPostID}][0].tag);
    </script>
    </h2>
    </br>
    {/block:HasTags}
    {/block:Posts}

【讨论】：