修改错误页面、404页面、500页面的样式

2015-08-18 16:52:44 +08:00
parent 97ffd604cf
commit 46321e4249
4 changed files with 453 additions and 20 deletions
--- a/template/404.html
+++ b/template/404.html
@@ -0,0 +1,151 @@
+{% extends "oj_base.html" %}
+{% block css_block %}
+    <style>
+        pre {
+            position: relative;
+            padding: 10px;
+            border: none;
+            overflow: auto;
+            line-height: 1.3;
+            max-height: 500px;
+        }
+
+        .hljs {
+            display: block;
+            padding: 0.5em;
+            background: #fdf6e3;
+            color: #657b83;
+        }
+
+        .hljs-comment,
+        .hljs-template_comment,
+        .diff .hljs-header,
+        .hljs-doctype,
+        .hljs-pi,
+        .lisp .hljs-string,
+        .hljs-javadoc {
+            color: #93a1a1;
+        }
+
+        /* Solarized Green */
+        .hljs-keyword,
+        .hljs-winutils,
+        .method,
+        .hljs-addition,
+        .css .hljs-tag,
+        .hljs-request,
+        .hljs-status,
+        .nginx .hljs-title {
+            color: #859900;
+        }
+
+        /* Solarized Cyan */
+        .hljs-number,
+        .hljs-command,
+        .hljs-string,
+        .hljs-tag .hljs-value,
+        .hljs-rules .hljs-value,
+        .hljs-phpdoc,
+        .tex .hljs-formula,
+        .hljs-regexp,
+        .hljs-hexcolor,
+        .hljs-link_url {
+            color: #2aa198;
+        }
+
+        /* Solarized Blue */
+        .hljs-title,
+        .hljs-localvars,
+        .hljs-chunk,
+        .hljs-decorator,
+        .hljs-built_in,
+        .hljs-identifier,
+        .vhdl .hljs-literal,
+        .hljs-id,
+        .css .hljs-function {
+            color: #268bd2;
+        }
+
+        /* Solarized Yellow */
+        .hljs-attribute,
+        .hljs-variable,
+        .lisp .hljs-body,
+        .smalltalk .hljs-number,
+        .hljs-constant,
+        .hljs-class .hljs-title,
+        .hljs-parent,
+        .haskell .hljs-type,
+        .hljs-link_reference {
+            color: #b58900;
+        }
+
+        /* Solarized Orange */
+        .hljs-preprocessor,
+        .hljs-preprocessor .hljs-keyword,
+        .hljs-pragma,
+        .hljs-shebang,
+        .hljs-symbol,
+        .hljs-symbol .hljs-string,
+        .diff .hljs-change,
+        .hljs-special,
+        .hljs-attr_selector,
+        .hljs-subst,
+        .hljs-cdata,
+        .clojure .hljs-title,
+        .css .hljs-pseudo,
+        .hljs-header {
+            color: #cb4b16;
+        }
+
+        /* Solarized Red */
+        .hljs-deletion,
+        .hljs-important {
+            color: #dc322f;
+        }
+
+        /* Solarized Violet */
+        .hljs-link_label {
+            color: #6c71c4;
+        }
+
+        .tex .hljs-formula {
+            background: #eee8d5;
+        }
+    </style>
+{% endblock %}
+{% block body %}
+    <div class="container">
+        <h2>404 - Page Not Found</h2>
+        <hr>
+        <div class="article fmt">
+
+<pre><code class="cpp"><span class="hljs-comment">// C</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;stdio.h&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"404 - Page Not Found"</span>);
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="cpp"><span class="hljs-comment">// C++</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;iostream&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    std::<span class="hljs-built_in">cout</span> &lt;&lt; <span class="hljs-string">"404 - Page Not Found"</span> &lt;&lt; std::endl;
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="java"><span class="hljs-comment">// Java</span>
+<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span>
+</span>{
+    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">main</span><span class="hljs-params">(String[] args)</span>
+    </span>{
+        System.out.println(<span class="hljs-string">"404 - Page Not Found"</span>);
+    }
+}</code></pre>
+<pre><code class="js"><span class="hljs-comment">// JavaScript</span>
+<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"404 - Page Not Found"</span>)</code></pre>
+<pre><code class="python"><span class="hljs-comment">// Python</span>
+<span class="hljs-keyword">print</span> <span class="hljs-string">"404 - Page Not Found"</span></code></pre>
+
+                </div>
+    </div>
+{% endblock %}
--- a/template/500.html
+++ b/template/500.html
@@ -0,0 +1,151 @@
+{% extends "oj_base.html" %}
+{% block css_block %}
+    <style>
+        pre {
+            position: relative;
+            padding: 10px;
+            border: none;
+            overflow: auto;
+            line-height: 1.3;
+            max-height: 500px;
+        }
+
+        .hljs {
+            display: block;
+            padding: 0.5em;
+            background: #fdf6e3;
+            color: #657b83;
+        }
+
+        .hljs-comment,
+        .hljs-template_comment,
+        .diff .hljs-header,
+        .hljs-doctype,
+        .hljs-pi,
+        .lisp .hljs-string,
+        .hljs-javadoc {
+            color: #93a1a1;
+        }
+
+        /* Solarized Green */
+        .hljs-keyword,
+        .hljs-winutils,
+        .method,
+        .hljs-addition,
+        .css .hljs-tag,
+        .hljs-request,
+        .hljs-status,
+        .nginx .hljs-title {
+            color: #859900;
+        }
+
+        /* Solarized Cyan */
+        .hljs-number,
+        .hljs-command,
+        .hljs-string,
+        .hljs-tag .hljs-value,
+        .hljs-rules .hljs-value,
+        .hljs-phpdoc,
+        .tex .hljs-formula,
+        .hljs-regexp,
+        .hljs-hexcolor,
+        .hljs-link_url {
+            color: #2aa198;
+        }
+
+        /* Solarized Blue */
+        .hljs-title,
+        .hljs-localvars,
+        .hljs-chunk,
+        .hljs-decorator,
+        .hljs-built_in,
+        .hljs-identifier,
+        .vhdl .hljs-literal,
+        .hljs-id,
+        .css .hljs-function {
+            color: #268bd2;
+        }
+
+        /* Solarized Yellow */
+        .hljs-attribute,
+        .hljs-variable,
+        .lisp .hljs-body,
+        .smalltalk .hljs-number,
+        .hljs-constant,
+        .hljs-class .hljs-title,
+        .hljs-parent,
+        .haskell .hljs-type,
+        .hljs-link_reference {
+            color: #b58900;
+        }
+
+        /* Solarized Orange */
+        .hljs-preprocessor,
+        .hljs-preprocessor .hljs-keyword,
+        .hljs-pragma,
+        .hljs-shebang,
+        .hljs-symbol,
+        .hljs-symbol .hljs-string,
+        .diff .hljs-change,
+        .hljs-special,
+        .hljs-attr_selector,
+        .hljs-subst,
+        .hljs-cdata,
+        .clojure .hljs-title,
+        .css .hljs-pseudo,
+        .hljs-header {
+            color: #cb4b16;
+        }
+
+        /* Solarized Red */
+        .hljs-deletion,
+        .hljs-important {
+            color: #dc322f;
+        }
+
+        /* Solarized Violet */
+        .hljs-link_label {
+            color: #6c71c4;
+        }
+
+        .tex .hljs-formula {
+            background: #eee8d5;
+        }
+    </style>
+{% endblock %}
+{% block body %}
+    <div class="container">
+        <h2>500 - Server Error</h2>
+        <hr>
+        <div class="article fmt">
+
+<pre><code class="cpp"><span class="hljs-comment">// C</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;stdio.h&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"500 - Server Error"</span>);
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="cpp"><span class="hljs-comment">// C++</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;iostream&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    std::<span class="hljs-built_in">cout</span> &lt;&lt; <span class="hljs-string">"500 - Server Error"</span> &lt;&lt; std::endl;
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="java"><span class="hljs-comment">// Java</span>
+<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span>
+</span>{
+    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">main</span><span class="hljs-params">(String[] args)</span>
+    </span>{
+        System.out.println(<span class="hljs-string">"500 - Server Error"</span>);
+    }
+}</code></pre>
+<pre><code class="js"><span class="hljs-comment">// JavaScript</span>
+<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"500 - Server Error"</span>)</code></pre>
+<pre><code class="python"><span class="hljs-comment">// Python</span>
+<span class="hljs-keyword">print</span> <span class="hljs-string">"500 - Server Error"</span></code></pre>
+
+                </div>
+    </div>
+{% endblock %}
--- a/template/utils/error.html
+++ b/template/utils/error.html
@@ -1,10 +1,151 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <title></title>
-</head>
-<body>
-{{ error }}
-</body>
-</html>
+{% extends "oj_base.html" %}
+{% block css_block %}
+    <style>
+        pre {
+            position: relative;
+            padding: 10px;
+            border: none;
+            overflow: auto;
+            line-height: 1.3;
+            max-height: 500px;
+        }
+
+        .hljs {
+            display: block;
+            padding: 0.5em;
+            background: #fdf6e3;
+            color: #657b83;
+        }
+
+        .hljs-comment,
+        .hljs-template_comment,
+        .diff .hljs-header,
+        .hljs-doctype,
+        .hljs-pi,
+        .lisp .hljs-string,
+        .hljs-javadoc {
+            color: #93a1a1;
+        }
+
+        /* Solarized Green */
+        .hljs-keyword,
+        .hljs-winutils,
+        .method,
+        .hljs-addition,
+        .css .hljs-tag,
+        .hljs-request,
+        .hljs-status,
+        .nginx .hljs-title {
+            color: #859900;
+        }
+
+        /* Solarized Cyan */
+        .hljs-number,
+        .hljs-command,
+        .hljs-string,
+        .hljs-tag .hljs-value,
+        .hljs-rules .hljs-value,
+        .hljs-phpdoc,
+        .tex .hljs-formula,
+        .hljs-regexp,
+        .hljs-hexcolor,
+        .hljs-link_url {
+            color: #2aa198;
+        }
+
+        /* Solarized Blue */
+        .hljs-title,
+        .hljs-localvars,
+        .hljs-chunk,
+        .hljs-decorator,
+        .hljs-built_in,
+        .hljs-identifier,
+        .vhdl .hljs-literal,
+        .hljs-id,
+        .css .hljs-function {
+            color: #268bd2;
+        }
+
+        /* Solarized Yellow */
+        .hljs-attribute,
+        .hljs-variable,
+        .lisp .hljs-body,
+        .smalltalk .hljs-number,
+        .hljs-constant,
+        .hljs-class .hljs-title,
+        .hljs-parent,
+        .haskell .hljs-type,
+        .hljs-link_reference {
+            color: #b58900;
+        }
+
+        /* Solarized Orange */
+        .hljs-preprocessor,
+        .hljs-preprocessor .hljs-keyword,
+        .hljs-pragma,
+        .hljs-shebang,
+        .hljs-symbol,
+        .hljs-symbol .hljs-string,
+        .diff .hljs-change,
+        .hljs-special,
+        .hljs-attr_selector,
+        .hljs-subst,
+        .hljs-cdata,
+        .clojure .hljs-title,
+        .css .hljs-pseudo,
+        .hljs-header {
+            color: #cb4b16;
+        }
+
+        /* Solarized Red */
+        .hljs-deletion,
+        .hljs-important {
+            color: #dc322f;
+        }
+
+        /* Solarized Violet */
+        .hljs-link_label {
+            color: #6c71c4;
+        }
+
+        .tex .hljs-formula {
+            background: #eee8d5;
+        }
+    </style>
+{% endblock %}
+{% block body %}
+    <div class="container">
+        <h2>出错了~~ {{ error }}</h2>
+        <hr>
+        <div class="article fmt">
+
+<pre><code class="cpp"><span class="hljs-comment">// C</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;stdio.h&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"An error occurred\n"</span>);
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="cpp"><span class="hljs-comment">// C++</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;iostream&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    std::<span class="hljs-built_in">cout</span> &lt;&lt; <span class="hljs-string">"An error occurred"</span> &lt;&lt; std::endl;
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="java"><span class="hljs-comment">// Java</span>
+<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span>
+</span>{
+    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">main</span><span class="hljs-params">(String[] args)</span>
+    </span>{
+        System.out.println(<span class="hljs-string">"An error occurred"</span>);
+    }
+}</code></pre>
+<pre><code class="js"><span class="hljs-comment">// JavaScript</span>
+<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"An error occurred\n"</span>)</code></pre>
+<pre><code class="python"><span class="hljs-comment">// Python</span>
+<span class="hljs-keyword">print</span> <span class="hljs-string">"An error occurred"</span></code></pre>
+
+                </div>
+    </div>
+{% endblock %}
--- a/template/utils/info.html
+++ b/template/utils/info.html
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <title></title>
-</head>
-<body>
-{{ info }}
-</body>
-</html>