Question

所以，我已经为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>

Answer 1

虽然这主要是基于意见的，但这就是我如何做到的......

我更喜欢使用Rails模板，我可以使用该模板为404页面生成HTML，然后将该页面保存在应用程序的public/文件夹中。这样，当应用程序更改时，我可以快速访问路由以生成404页面，然后将HTML保存到public/目录。

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

实现自定义404错误页面

1 个答案: