html - Tumblr(带有主题)无法添加页脚或随机化帖子顺序

Question

我有一个 tumblr 网站(作品集)，想要自定义页脚并随机排列帖子的顺序。不知何故，我无法成功地做任何这些事情。我正在编辑这个 theme 的 HTML我正在尝试这样的事情 Html code for displaying posts in random order用于随机化帖子顺序。

然后对于自定义页脚，我尝试创建这种样式:

.footer{
  height: 125px;
  background-image: url(https://preview.ibb.co/njBged/clients_and_collaborations2.png);
  background-size: 100% 100%;
  color: {color:Text};
}

<div id="footer"></div>

但以上似乎都不起作用。 Tumblr 和主题有一些限制吗？

也许你们中的一些人可以为我指出正确的方向。干杯!

我的网站:http://mantaspalaima.com

Answer 1

我认为你们这里的两个问题有一个共同的根源!您使用的 CSS 选择器与您希望它们处理的 HTML 元素不匹配。

页脚

关于您的页脚样式，您用于定位页脚元素的 CSS 选择器很接近，但不太正确!

.footer将以 class 为 footer 的 HTML 元素为目标.类似于 <div class="footer"></div> .

#footer将以 id 为 footer 的 HTML 元素为目标.类似于 <div id="footer"></div> .

因此，更改一个或另一个，使 CSS 选择器与 HTML 文档中的内容相匹配。

随机帖子

我可以看到您正在定位一个类为 .entry 的 HTML 元素使用您正在使用的那个 javascript 片段。您链接的问题中片段的“.entry ”部分。

{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")) // <-- THIS LINE!
</script>
{/block:IndexPage}

查看您页面上的一些代码，这是我看到的一个类似元素的示例:

<article id="ant-175268574147" class=" ants-item-three post modal post-photoset pp" ...>...</article>

如果你想以此为目标，你可以使用这样的 CSS 选择器:article.post .这基本上转化为 <article></article>类别为 post 的元素.

不过，请注意，您的主题似乎使用了一种名为 isotope 的东西布置帖子网格。你会想要在行之前添加你的javascript

$antsIsoCont = $('#stash-ants');
antsIsotope = $antsIsoCont.imagesLoaded(function(){
// ...

确保您没有尝试移动已经绝对定位的元素。