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(){
// ...

为确保您没有试图在已经完全定位的元素周围移动。

Answer 2

我在您的代码中观察到的一个主要的CSS问题是您在CSS脚本中引用了footer CSS类，但是您尚未将该类添加到div中。

阅读 CSS Selector Reference 以获取有关基本CSS的更多知识。

将CSS代码从.footer更改为#footer。

OR

将class='footer'添加到<div>。

#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（带有主题）无法添加页脚或将帖子顺序随机化

2 个答案:

脚

随机帖子