diff --git a/documents/theme.html b/documents/theme.html
new file mode 100644
index 0000000..3870588
--- /dev/null
+++ b/documents/theme.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Typecho Documentation</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="unsemantic-grid-responsive.css" rel="stylesheet" media="screen">
+    <link href="reset.css" rel="stylesheet" media="screen">
+    <link href="style.css" rel="stylesheet" media="screen">
+  </head>
+  <body>
+	<div class="grid-container">
+		<h1 class="title-header"><a href="index.html">Typecho Documentation</a></h1>
+		<div class="list">
+			<ul class="menu-list">
+				<li class="name-header">Theme Developing</li>
+				<section>
+					<h3>Preparing</h3>
+					<p>Before starting developing, you should meet this following requirements:</p>
+					1. A launchable web server, and the latest version of Typecho is installed.(If you don't, we recommend <a href="http://www.wampserver.com/">Wampserver</a>)
+					<br>2. Learned Basic HTML
+					<br>3. Learned Poor PHP
+				</section>
+				<section>
+					<h3>Related Articles</h3>
+					<ul class="menu-list">
+						<li><a href="#">Quick Start for making templates</a> This article made by Fen is easy to read, it fits developers that write Typecho templates for the first time to read.</li>
+						<li><a href="#">Template File Structures</a> Why there are index.php, header.php or other like this on the template directory? And how to identify? This article will show the structures.</li>
+						<li><a href="#">Magic "is" Syntax</a> "is" syntax can detect the status of the pages, and there are many uses, can help you make cool affects.</li>
+						<li><a href="#">Custom Show Method Of Page Title</a> Titleguy, look here</li>
+						<li><a href="#">Page Breadcrumb</a> Show the location of the article in view.</li>
+						<li><a href="#">Separate Article Comments</a> Separate the comments from quote, make it easy to read.</li>
+						<li><a href="#">Call Related Posts</a> Show related article in posts and make user browser more.</li>
+						<li><a href="#">Call Specified Catogory Posts</a> For example, somewhere needs to call mid=1 article list.</li>
+						<li><a href="#">About Category Description</a> For example, show the category description when the mouse is over there.</li>
+						<li><a href="#">About Customizing Templates</a> Custom index, page, catogory template enabling included.</li>
+						<li><a href="#">Custom 404 Page</a> Show a custom 404 page when it can't find the page.</li>
+						<li><a href="#">Custom Error Pages</a> Replace default system error pages.</li>
+						<li><a href="#">Custom Comment Zones</a> Do you feel default comment outputting style dull? Use custom comment code to make your comments more personal.</li>
+						<li><a href="#">Custom Header Outputting</a> Don't want to output template information? Or change rss address? Let's have a look.</li>
+					</ul>
+				</section>
+			</ul>
+		</div>
+		<p class="footer">This documentation is translated by <a href="mailto:t_om_2009@yeah.net">Jonnes</a>, <a href="http://docs.typecho.org/doku.php">the original Chinese documentation.</a></p>
+	</div>
+  </body>
+</html>
\ No newline at end of file
