“unnesting”嵌套Blockquotes使用jQuery（以适应tumblr的2015年9月更新）

Question

我正在研究一个新的tumblr主题，用于一个非常重量级的博客。根据tumblr对评论链的最新更新，一些帖子变得非常冗长。虽然它在我的仪表板上看起来很好，但由于嵌套的块引用，它在我的博客上造成了严重破坏。

我想模仿评论在我的信息中心上的显示方式，没有用户的图标等，并且使用交替的颜色来帮助区分评论员。 （如果我可以删除“空白”评论，我会稍后处理。）

我做了一些搜索，但只能找到如何获得交替的颜色。我确实看到one post完全破坏了评论，但我不理解他们提供的代码。

我是HTML，CSS和jQuery的新手，所以任何帮助都会非常感激！

Answer 1

@relgukxilef的回答几乎对我有用。

我必须将jQuery插入主题，然后等待jQuery初始化。 Tumblr还更新了其标签。

这是我的解决方案：

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script type="text/javascript">
  $(document).ready(function () {
    // flatten reblogs
    $("div.post-content blockquote").each(function() {
      $(this).parent().prepend($(this).children());
      $(this).remove();
    });

    // remove : and add -
    $("div.post-content a.tumblr_blog").each(function() {
      var authorPTag = $(this).parent();
      authorPTag.html($(this));
      authorPTag.prepend("- ");
    });
  });
</script>

我将其添加到主题的底部，并且一切运行正常

Answer 2

似乎没有官方的方法来做到这一点。然而，使用JS可以实现这种效果。以下脚本将展平嵌套的blockquotes，并在博客名称后删除“：”，而是在其前面添加“ - ”。只需将其放在script标记下的新body标记中即可。

$(function() {
    // flatten reblogs
    $("div.cont blockquote").each(function() {
        $(this).parent().prepend($(this).children());
        $(this).remove();
    });

    // remove : and add -
    $("div.cont a.tumblr_blog").each(function() {
        var authorPTag = $(this).parent();
        authorPTag.html($(this));
        authorPTag.prepend("- ");
    });
});

在默认主题上看起来像这样：

但请注意，下次Tumblr更新渲染reblog的方式时，这可能会中断。它也无法用于无休止的滚动。