Question

我创建了一个Tumblr博客，展示了我感兴趣的照片。我希望我的tumblr照片帖子以随机顺序显示，以便每次加载页面时，我的网格主题中的帖子顺序随机显示。这样每个人都可以在不滚动的情况下查看我的所有帖子。

有没有人知道我可以简单地插入到我的主题的代码，以便帖子以随机顺序显示，并在每次页面加载时以随机顺序显示。

Answer 1

我对Tumbler并不完全熟悉，但我愿意打赌这些图像块有一个独特的类名。您也可以在Tumbler上插入JavaScript。见：http://www.problogtricks.com/2013/12/add-custom-css-javascript-code-to-tumblr-blog.html

也就是说，使用JavaScript随机化元素非常容易。这是一个如何完成的演示。在确定仅适用于这些元素的唯一类名后，您可以在下面的JavaScript函数中更改参数。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .putauniqueclassnamehere{
        }
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
        $(document).ready(function (name) {
            return function () {
                var max = $(name).length;
                $.each($(name), function (p1, p2) {
                    var randPos = Math.floor(Math.random() * (max - 0 + 1) + 0);
                    $(p2).insertBefore($(name)[randPos]);
                })
                return ;
            }
        }(".putauniqueclassnamehere"))
    </script>
</head>
<body>
    <div class="mytest">Test 1</div>
    <div class="mytest">Test 2</div>
    <div class="mytest">Test 3</div>
    <div class="mytest">Test 4</div>
    <div class="mytest">Test 5</div>
</body>
</html>

Answer 2

只需将其粘贴到主题的末尾即可：

{block:IndexPage}
<script>
    $(document).ready(function (name) {
        return function () {
            var elts = $(name);
            var max = elts.length;
            $.each(elts, function (index, elt) {
                var randPos = Math.floor(Math.random() * (max - 0 + 1) + 0);
                $(elt).insertBefore(elts[randPos]);
            })
            return ;
        }
    }(".entry"))
</script>
{/block:IndexPage}

所有的功劳都归功于Joshua Dannemann。我刚刚将类的相关部分粘贴到我的主题：entry。它可以是post或其他。发布指向 tumblr 的链接，我可以为您提供更多帮助。

编辑：

重命名为p1和p2
添加了{block:IndexPage}和{/block:IndexPage}代码（没有它们，帖子页面已损坏）

用于以随机顺序显示帖子的Html代码

2 个答案: