Tumblr（带有主题）无法添加页脚或随机化帖子顺序答案

【问题标题】：Tumblr (with a theme) cannot add footer or randomize posts orderTumblr（带有主题）无法添加页脚或随机化帖子顺序
【发布时间】：2018-07-01 12:39:35
【问题描述】：

我有一个 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};
}

&lt;div id="footer"&gt;&lt;/div&gt;

但上述方法似乎都不起作用。 Tumblr 和主题是否有一些限制？

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

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

【问题讨论】：

标签： html css tumblr

【解决方案1】：

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

页脚

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

.footer 将定位 class 为 footer 的 HTML 元素。类似<div class="footer"></div>。

#footer 将定位 id 为 footer 的 HTML 元素。类似于<div id="footer"></div>。

因此，更改其中之一，使 CSS 选择器与 HTML 文档中的内容匹配。

随机帖子

我可以看到您正在使用您正在使用的 javascript sn-p 来定位具有 .entry 类的 HTML 元素。您链接的问题中 sn-p 的“.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。这基本上转化为具有post 类的<article></article> 元素。

不过，请注意，您的主题似乎使用了名为 isotope 的东西来布置帖子网格。您需要在行之前添加您的 javascript，例如

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

为了确保您没有尝试在已经绝对定位的元素周围移动。

【讨论】：

谢谢！页脚很简单（我很傻）。我还应用了边距来正确定位它。但是随机帖子仍然不起作用。我已将脚本放在所有 $antsIsoCont 之前，但随后帖子变为空白。我还在尝试这个。
浏览器控制台中有什么可以分享的吗？我的意思是一个错误？
所以我放错了代码，它与其余部分冲突。当然，这里是错误：ibb.co/byYnmd 要清楚 - 我使用 article.post 而不是 .entry 的代码再次感谢。
看起来你没有安装 jQuery。 stackoverflow.com/questions/1458349/installing-jquery

【解决方案2】：

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

阅读CSS Selector Reference，了解更多关于基本 CSS 的知识。

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

或

将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};
}

&lt;div id="footer"&gt;&lt;/div&gt;

【讨论】：