2014-02-21 73 views
0

所以,我已经为404页面定制了设计 - 但是,我在实现它时遇到了问题。实现自定义404错误页面

我很快就了解到,您必须将CSS直接嵌入到HTML中 - 其次,它看起来不像我可以使用html.erb或嵌入式ruby换句话说。这就是说,对我来说,在我的404.html页面上实现以下设计代码的最佳方式是什么?

<!DOCTYPE html> 
<html lang="en"><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 
    <title>New Error Design</title> 

    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <!-- Custom styles for this template --> 
    <link href="css/mystyle.css" rel="stylesheet"> 
    <link href="css/mediaquery.css" rel="stylesheet"> 

    <link rel="stylesheet" href="css/selectify.css" /> 
</head> 

<body> 
    <header class="navbar navbar-inverse"> 
     <div class="container"> 
     <div class="row"> 
     <div class="col-md-3 logo"> 
      <a href="index.html"><img src="images/logo.png" alt="logo"></a> 
     </div> 



     <div class="col-md-3 pull-right"> 
      <a href="sign-in.html"><button type="button" class="btn btn-info sign-i-u">Sign IN</button></a> 
      <a href="sign-up.html"><button type="button" class="btn btn-info sign-i-u">Sign Up</button></a> 
     </div> 

     </div> 
     </div> 
    </header> 

    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12 error_text"> 
      <h1> Sorry, the page you requested is not found</h1> 

      <div class="col-md-12"> 
       <div class="col-md-6 col-md-offset-3 text-center"> 
       <%= link_to 'sign Up', new_user_registration_path, class: "btn btn-primary buttons_style" %> 
       <%= link_to 'Login', new_user_session_path, class: "btn btn-primary buttons_style" %> 
       <%= link_to 'Return To Home', root_path, class: "btn btn-primary buttons_style" %> 
       </div> 
      </div> 

     </div> 
     </div> 
    </div> 


    <footer> 
     <div class="container"> 
     <p class="f-logo"><a href="index.html"><img src="images/footer_logo.png" alt="logo-image"></a></p> 
     <p class="links"> 
     <a href="#">Blog</a> 
     <a href="#">About</a> 
     <a href="#">Privacy</a> 
     <a href="#">Terms</a> 
     <a href="#">Copyright</a> 
     </p> 
     <p class="copy">2014 © Company name. All Rights Reserved</p> 
     </div> 
    </footer> 
</body> 
</html> 

回答

1

虽然这将主要依据的意见,这里是如何我已经做到了......

我希望有,我可以用它来生成一个404页面的HTML Rails的模板,然后只需将该页保存在应用程序的public/文件夹中即可。这样,当应用发生变化时,我可以快速访问路由以生成404页面,然后将HTML保存到public/目录。

确保您设置您的应用程序以使用自定义页面。 Rambling Labs has a good example如何做到这一点。