【问题标题】：How to customize tumblr 404 URL not found page如何自定义 tumblr 404 URL 未找到页面
【发布时间】：2013-05-22 09:05:11
【问题描述】：

Tumblr 似乎没有提供 div 标签来自定义“找不到 url”页面的外观。有没有其他方法可以自定义 404 (URL NOT FOUND) 页面？

【问题讨论】：

这个问题可能更适合Web Applications

标签： html css tumblr

【解决方案1】：

编辑：此方法仅适用于没有页面的tumblog。

询问、提交以及在“自定义”部分创建的其他页面将使用此代码检测为“未找到”。

说明

Tumblr 对静态页面使用普通的 {block:Posts} 循环，但没有分配任何变量，例如 {PostID}。如果我们使用像 post{PostID} 这样的类，在 ~~404 页面~~ 所有静态页面上，我们将看到一个 .post 元素，而在 posts 上元素将类似于.post125678

示例

{block:Posts}
  <div class="post{PostID}">
    {block:Photo}all your blocks here{/block:Photo}
  </div>
{/block:Posts}

使用javascript：

var is404 = document.getElementsByClass('post').length;

使用 CSS：

.post {
    /*this is a 404 page, customize it*/
}

很酷的无 javascript 示例

{block:Posts}
  <div class="post{PostID}">
    {block:Photo}all your blocks here{/block:Photo}
  </div>
{/block:Posts}
<div class="fill-me"></div>

在 CSS 中：

.post { /*Hide Tumblr's 404 message*/
    display: none;
}
.post + .fill-me:before { /*use your message and style*/
    content: 'This page was not found!';
    font-size: 2em;
}

编辑：可能的修复

为了解决这个问题，我们应该找到一个只显示在页面上而不显示在 404 页面上的 {tag}。

{ShortURL}，如果没有问题，可以使用，因为理论上 404 页面不应该有 ShortURL。

我也尝试了{Permalink}，但在这种情况下它的行为类似于{PostID}。

【讨论】：

不错的解决方案，但是您的回答具有误导性。 Tumblr 没有提供与 404 / 未找到相关的语言字符串：tumblr.com/docs/en/localizing_themes。用户仍然必须输入每种语言的消息。值得一提的是，解决方案是IE9+。
我从来没有说过你不必提供本地化的 404 消息，我只是说检测到 404 页面无论是什么语言 Tumblr 显示该消息。检测 404通过查找英文文本“未找到”的页面仅适用于一种语言（或要求您了解并维护多种语言的错误消息列表）
我阅读了 每种语言的作品，然后看到了很酷的无 javascript 示例，其中只有英文示例，所以我很糟糕。又是一个不错的解决方案，值得投票。
我想我应该更清楚，我编辑了答案。
/ask 和 /submit 页面也没有 {PostID}，所以这个解决方案有点短，尽管我喜欢纯 CSS。不过，很容易在询问帖子中添加一个类，并使用 .post:not(.<askclass>):not(.<submitclass>) + .fill-me:before 选择器避免它

【解决方案2】：

遗憾的是，没有官方的方法可以做到这一点。

但是，如果您使用 javascript / jQuery，您可以嗅探以下文本：

找不到您请求的网址

示例 jQuery 代码：

$(document).ready(function() {
    $("p:contains(The URL you requested could not be found.)").html('YOUR TEXT HERE');
});

我更倾向于向父/正文元素添加一个类，这样您就可以对整个页面进行不同的样式设置。

希望对您有所帮助。

【讨论】：

【解决方案3】：

这对我有用

<script type="text/javascript">
/* Works for me */
    var text_posts = document.getElementsByClassName("regular");
    var text_404 = "The URL you requested could not be found.";
    var title_404 = "Not Found";
    if(text_posts.length == 1){
        var bodyNode = text_posts[0].lastChild;
        if(bodyNode.previousSibling.textContent == text_404) {
            // titleNode.innerHTML = "<a href='/'>Not Found</a>";
            var blog_loc = "http://" + document.domain + "/";
            var query = window.location.href.slice(blog_loc.length);
            var tokens = query.toLowerCase().split('/');
            var keyword = tokens.join(" ");
            var bodyContent = "Looks like you came from an old bookmark, or just looking for a page that doesn't exist. Were you looking for <span class='tg'><a href='/search/"+ escape(keyword) +"'>"+keyword+"</a></span>";
            bodyNode.previousSibling.innerHTML = bodyContent;
        }
    }
</script>

【讨论】：

问题是消息的变化取决于访问者的语言

【解决方案4】：

我也在研究这个问题，我找到了答案。如果您必须到 404 错误页面，该帖子没有任何 PostID，所以你可以检查 {PostID} 是否为空来检查它是 404 页面。

【讨论】：