티스토리 404 에러 페이지를 보기 좋게 수정해 본다

티스토리 404 에러 페이지를 보기 좋게 수정해 본다.


이게 무슨 소리일까요 ? 


우선,  https://ooppa.tistory.com/1818 를 방문해 보세요


글이 삭제 되었거나 페이지에 오류가 난 경우를 보면 아래 이미지처럼 

"잘못된 주소이거나, 비공개 또는 삭제된 글입니다"라는 썰렁한 문구를 보여줍니다.




관리자 도구(F12)를 이용해 보면 티스토리의 skin.html 에서는 확인할 수 없는 부분입니다.


썰렁한 404 에러 페이지를 아래 이미지처럼 보기 좋게 수정할 겁니다

스크립트 추가,


$(".absent_post").removeAttr("style");  // 기존의 .absent_post 클래스를 제거

$(".absent_post").attr("style", "font-size:0px; width:100%; height:100%; top:0; left:0; background: url('이미지경로') center center;"); // 이미지로 변경


위의 스크립트를 skin.html 에 넣어주면 끝.

이제 나만의 티스토리, 404 오류 페이지를 볼수 있습니다.



첨언하자면, 원래는 포스팅 되는 자리에 넣으려고 하다보니 그것 또한 화면이 이상하여 그냥 페이지 전체를 덮어버렸습니다.


자주 저에게 나눔해주시는 땀똔님, 마샬님의 경우는 몇 초뒤에 메인화면으로 전환되도록 하셨던데...,

똥손인 저로써는 범접할 수 없어서 그냥 페이지를 클릭하거나 마우스 오른쪽 버턴을 클릭하면 메인페이지로 가도록 변경하였습니다.


혹시, 질문하실까봐? 미리 알려드립니다.

마우스 이벤트 onclick, oncontextmenu 를 사용하였습니다.

묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

도움/네트워크 다른 글

이 글에 담긴 의견 16

*

*

    • 헉 전 저번에 코드 보여주실 때 absent_post로 이래저래 다루시길래 아시는 줄 알고 말씀을 안 드렸네요;;
      글 작성해뒀습니다 ㅋㅋㅋㅋ
      그나저나 사진이 모바일에선 잘리네요 ㅠㅠ

    • 탕비에서 문제인지 뭔지... ^^;
      자꾸 루푸가 돌아서...,
      아마도 새글 있으면 리다이렉션, 없으면 rss 불러와 랜덤 페이지 노출 하도록 한것이 충돌이 있나봐여 ㅋㅋㅋ
      계속 랜덤으로 돌아요 ㅋㅋㅋ
      이게 제일 깔끔해서 일단 적용했는데..., 한번 더 확인해 봐야겠네요

    • 그 홈 버튼 누르면 가는 경로로 리다이렉트 시키시면 되지 않을까요?

    • 아 "/" 경로로 가서 새글 체크를 하고 RSS를 랜덤으로 돌리게 되어서..., 천천히 고민해 볼께요.
      신경써주셔서 감사 ㅋㅋ

    • 마샬님의 더 좋은 방법 - https://marshall-ku.tistory.com/172


      $(function() {
      var b = $(".article_container"),
      f = $(".absent_post").length,
      h = $(".article_container div");
      0 < f && (document.title = "404 Not Found", h.removeAttr("style"), b.append("<div class=\"nothing inner\"><img src=\"https://i.imgur.com/lgAB1Hp.jpg\"><p>404 Error<p><div>\uBA54\uC778 \uD398\uC774\uC9C0\uB85C \uB3CC\uC544\uAC11\uB2C8\uB2E4...</div></div>"), $(".absent_post").remove(), setTimeout(function() {
      location.href = "/"
      }, 5e3))
      })

    • 입대 준비하느랄 바쁠텐데 이러저래 신경 써줘서 감사합니다.
      https://i.imgur.com/Kc0RuCb.png


      역시 난, 똥손이였소~
      https://i.imgur.com/tuzryOP.gif


      앞선 포스팅에 작성한 스크립트에 리다이렉션 시키는 스크립트를 추가한 코드입니다.

      if ($(".absent_post").length > 0) {
      setTimeout(function() {
      location.href = "/"
      }, 5000)
      }

      핵심은 여기입니다. .absent_post의 개수가 0개를 초과하면, 5초 뒤에 "/" 경로로 이동하게 하는 스크립트입니다.
      5000을 수정하시면 리다이렉션되는 시간을 조절하실 수 있습니다.

이전 글

다음 글