如何定制tumblr 404 URL未找到页面?

It seems Tumblr does not provide a div tag to customize the look and feel of the 'url not found' page. Is there any way other way to customize the 404 (URL NOT FOUND) Page?

似乎Tumblr没有提供div标签来定制“url not found”页面的外观和感觉。是否有其他方法来定制404 (URL未找到)页面?

4 个解决方案

#1

Edit: this method only works on tumblogs that don't have pages.

Ask, Submit, and other pages created in the Customize section will be detected as "not found" with this code.

Ask、Submit和Customize部分中创建的其他页面将被检测为“没有找到”。

---

Description

Tumblr uses the normal {block:Posts} loop for static pages but without assigning any variables like {PostID}. If we use a class like post{PostID}, on 404 pages all static pages we'll see a .post element, whereas on posts the elements will be something like .post125678

Tumblr对静态页面使用普通的{block:Posts}循环，但不指定任何变量，如{PostID}。如果我们使用post{PostID}之类的类，在404页面上我们将看到一个.post元素，而在post上，元素将是.post125678之类的

Example

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

Using javascript:

使用javascript:

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

Using CSS:

使用CSS:

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

Cool javascript-less example

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

In CSS:

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

Edit: Possible fixes

To fix this method, we should find a {tag} that is only shown on pages but not on 404 pages.

要修复这个方法，我们应该找到一个{tag}，它只显示在页面上，而不显示在404页面上。

{ShortURL}, if it weren't buggy, could be used since in theory 404 pages shouldn't have a ShortURL.

{ShortURL}，如果它不是错误的，可以使用，因为在理论上404页面不应该有一个短消息。

I also tried {Permalink} but it behaves like {PostID} in this case.

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

#2

Sadly there isn't an official way to do this.

遗憾的是，没有官方的方法来做这件事。

However, if your using javascript / jQuery, you could sniff for the following text:

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

The URL you requested could not be found

无法找到您请求的URL

Example jQuery code:

jQuery代码示例:

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

I would be more incline to add a class to the parent / body element so you can style the whole page differently.

我更倾向于将类添加到父/主体元素中，以便您可以以不同的方式对整个页面进行样式设置。

Hope that helps.

希望有帮助。

#3

This worked for me

这为我工作

<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

I was research this problem too, and I found a answer. If you gotta to 404 Error page, that post is no have any PostID, so you can just check {PostID} is null or not to check it is 404 page.

我也在研究这个问题，我找到了答案。如果你要去404错误页面，那篇文章没有任何PostID，所以你可以检查{PostID}是否为null或者不检查它是否为404页面。