使用照片帖子的第一个标签作为标题 - tumblr

Question

我正在尝试使用 tumblr 上每个 photo/photoset post 的第一个标签专门将其设置为标题（文本 post 已内置标题选项，照片posts 不）我找到了其他 - 过于手工制作的 - 解决方案，但我认为在长运行中，第一个标签将是一种连贯的方式来做到这一点。

我找不到如何只获取标签列表的 first-child，或从数组中获取它。

这可能吗？

谢谢

Answer 1

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

.tag_to_title { STYLE HERE }

和下面的片段{photo} HERE in the beginning {/photo} and {photoset} HERE as well {/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}

Answer 2

使用纯 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

使用照片帖子的第一个标签作为标题 - tumblr

Using the first tag of a photopost as a title - tumblr

post

tags

css-selectors

tumblr

photo