diff --git a/404.php b/404.php
new file mode 100644
index 0000000..6a2a210
--- /dev/null
+++ b/404.php
@@ -0,0 +1,16 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+<?php $this->need('header.php'); ?>
+
+    <div class="col-mb-12 col-tb-8 col-tb-offset-2">
+
+        <div class="error-page">
+            <h2 class="post-title">404 - <?php _e('页面没找到'); ?></h2>
+            <p><?php _e('你想查看的页面已被转移或删除了, 要不要搜索看看: '); ?></p>
+            <form method="post">
+                <p><input type="text" name="s" class="text" autofocus /></p>
+                <p><button type="submit" class="submit"><?php _e('搜索'); ?></button></p>
+            </form>
+        </div>
+
+    </div><!-- end #content-->
+	<?php $this->need('footer.php'); ?>
diff --git a/README.md b/README.md
index 8a620d2..429e3d7 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,22 @@
-# typecho-theme-Mecho
-typecho主题
+
+####  Mecho
+
+- 特色：
+	- 每日必应图片、每日故事
+
+- 使用方式：
+
+```
+#进入 typecho 主题目录
+cd usr/themes/
+
+#克隆本主题
+git clone git@github.com:WarnerYang/typecho-theme-Mecho.git Mecho
+
+```
+
+- 每日访问后会在博客根目录生成两个文件
+	- 20180719.jpg  #必应每日壁纸
+	- 20180719.json #必应每日故事
+
+**觉得不错就右上角  start 支持下吧！**
diff --git a/archive.php b/archive.php
new file mode 100644
index 0000000..b1682e2
--- /dev/null
+++ b/archive.php
@@ -0,0 +1,43 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+<?php $this->need('header.php'); ?>
+
+<div id="body">
+  <div class="container">
+    <div class="row">
+      <div class="col-12" id="main" role="main">
+        <h3 class="archive-title"><?php $this->archiveTitle(array(
+          'category'  =>  _t('分类 %s 下的文章'),
+          'search'    =>  _t('包含关键字 %s 的文章'),
+          'tag'       =>  _t('标签 %s 下的文章'),
+          'author'    =>  _t('%s 发布的文章')
+          ), '', ''); ?></h3>
+          <?php if ($this->have()): ?>
+           <?php while($this->next()): ?>
+            <article class="post index" itemscope itemtype="http://schema.org/BlogPosting">
+             <h2 class="post-title" itemprop="name headline"><a itemtype="url" href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h2>
+             <ul class="post-meta">
+               <li>
+                <time datetime="<?php $this->date('c'); ?>" itemprop="datePublished">
+                  <?php $this->date('Y-m-d'); ?>
+                </time>
+              </li>
+              <li><?php $this->category(','); ?></li>
+              <li itemprop="interactionCount">                
+              <a itemprop="discussionUrl" href="<?php $this->permalink() ?>#comments">
+                  <?php $this->commentsNum('%d 条评论'); ?>
+                </a>
+            </ul>
+            <div class="post-content home" itemprop="articleBody">
+              <?php $this->excerpt(100, '...'); ?>
+           </div>
+         </article>
+       <?php endwhile; ?>
+     <?php else: ?>
+      <article class="post">
+        <h2 class="post-title"><?php _e('没有找到内容'); ?></h2>
+      </article>
+    <?php endif; ?>
+
+    <?php $this->pageNav('上一页','下一页',10,'...');?>
+  </div><!-- end #main -->
+  <?php $this->need('footer.php'); ?>
diff --git a/comments.php b/comments.php
new file mode 100644
index 0000000..8da420a
--- /dev/null
+++ b/comments.php
@@ -0,0 +1,49 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+<div id="comments">
+  <?php $this->comments()->to($comments); ?>
+  <?php if ($comments->have()): ?>
+   <h3><?php $this->commentsNum('%d 条评论'); ?></h3>
+   <?php $comments->listComments(); ?>
+   <?php $comments->pageNav('上一页','下一页',10,'...');?>
+ <?php endif; ?>
+ <?php if($this->allow('comment')): ?>
+  <div id="<?php $this->respondId(); ?>" class="respond">
+    <div class="cancel-comment-reply">
+      <?php $comments->cancelReply(); ?>
+    </div>
+
+    <h3 id="response"><?php _e('留言'); ?></h3>
+    <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
+      <?php if($this->user->hasLogin()): ?>
+        <p><?php _e('已登录: '); ?><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>. <a href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> &raquo;</a></p>
+      <?php else: ?>
+        <p>
+          <label for="author" class="required"><?php _e('名称（必填）'); ?></label>
+          <input type="text" name="author" id="author" class="text" value="<?php $this->remember('author'); ?>" required />
+        </p>
+        <p>
+          <label for="mail"<?php if ($this->options->commentsRequireMail): ?> class="required"<?php endif; ?>><?php _e('邮箱（必填，不会被公开）'); ?></label>
+          <input type="email" name="mail" id="mail" class="text" value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
+        </p>
+        <p>
+          <label for="url"<?php if ($this->options->commentsRequireURL): ?> class="required"<?php endif; ?>><?php _e('网站'); ?></label>
+          <input type="url" name="url" id="url" class="text" placeholder="<?php _e('http://'); ?>" value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
+        </p>
+      <?php endif; ?>
+      <p>
+        <label for="textarea" class="required"><?php _e('内容（必填，支持 Markdown 语法）'); ?></label>
+        <textarea rows="8" cols="50" name="text" id="textarea" class="textarea" required ><?php $this->remember('text'); ?></textarea>
+      </p>
+      <?php
+      if(isset($this->options->plugins['activated']['Smilies']))
+        Smilies_Plugin::output();
+      ?>
+      <p>
+        <button type="submit" class="submit"><?php _e('留言'); ?></button>
+      </p>
+    </form>
+  </div>
+<?php else: ?>
+  <h3><?php _e('评论已关闭'); ?></h3>
+<?php endif; ?>
+</div>
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..beb7009
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,765 @@
+body {
+	font-size: 87.5%;
+	font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
+}
+body,html{
+	height:100%
+}
+*:focus{outline: none;}
+.hide{display: none;}
+.show{display: inline-block;}
+.tr{text-align: right;}
+.tl{text-align: left;}
+.fixed{position: fixed;}
+.fl{float: left;}
+.fr{float: right;} 
+.submit{    
+	background-color: #363d4d;
+	border: none;
+	padding: 3px 20px;
+	border-radius: 5px;
+	color: #ffffff;
+}
+#pic{
+	height: 75%;
+	width: 100%;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	text-align: center;
+	position: relative;
+	background-color: #000;
+	display: table;
+}
+.info_box{
+	padding: 0 20%;
+	color: #ffffff;
+	line-height: 22px;
+	display: table-cell;
+	vertical-align: middle;
+	background: rgba(0,0,0,0.5); 
+}
+.info_box .min{
+	font-size: 14px;
+	color: #eee;
+	padding: 2px;
+}
+.info_box .title{
+	font-size: 18px;
+	font-weight: lighter;
+	padding: 0;
+	margin: 0;
+
+}
+.info_box .content{
+	font-size: 14px;
+	letter-spacing: 1px;
+	line-height: 25px;
+	text-align: center;
+}
+.copyright{
+	position: absolute;
+	right: 5px;
+	bottom: 0;
+}
+
+a {
+	color: #586C94;
+	position: relative;
+	-webkit-transition: all 0.5s; 
+	transition: all 0.5s;  	
+	padding: 3px; 
+}
+
+a,a:focus {	
+	outline: none;
+	text-decoration:none; 
+}
+
+a:hover,a:active {
+	text-decoration:none; 
+	outline:none;
+}
+.post-title a{
+	color: #545454;
+}
+.post.index .post-title a{
+	color: #545454;
+}
+.post-title a:before {
+	content: "";
+	position: absolute;
+	width: 100%;
+	height: 1px;
+	bottom: 0;
+	left: 0;
+	background-color: #626773;
+	visibility: hidden;
+	-webkit-transform: scaleX(0);
+	-o-transform: scaleX(0);
+	transform: scaleX(0);
+	-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
+	-o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
+	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
+}
+
+.post-title a:hover:before {
+	visibility: visible;
+	-webkit-transform: scaleX(1);
+	-o-transform: scaleX(1);
+	transform: scaleX(1);
+}   
+
+pre,code {
+	background: #F3F3F0;
+	font-size: .92857em;
+	font-family: Menlo,Monaco,Consolas,"Lucida Console","Courier New",monospace;
+}
+
+code {
+	padding: 2px 4px;
+	color: #B94A48;
+}
+
+pre {
+	overflow: auto;
+	padding: 0;
+	max-height: 400px;
+	border: 1px solid #ccc;
+}
+
+pre code {
+	padding: 3px;
+	color: #444;
+}
+
+blockquote {
+	margin: 1em 1.5em;
+	padding-left: 0.5em;
+	border-left: 4px solid #F3F3F0;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	font-weight: normal;
+} 
+
+input[type="text"],input[type="email"],input[type="url"],input[type="password"],textarea {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	padding: 5px;
+	width: 100%;
+	border: 1px solid #E9E9E9;
+	border-radius: 2px;
+}
+input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus{
+	border: 1px solid #363d4d;
+}
+input[type="text"].ipt:focus{
+	border:none;
+}
+textarea {
+	resize: vertical;
+}
+
+.browsehappy {
+	padding: 8px 0;
+	background: #FBE3E4;
+	color: #8A1F11;
+	text-align: center;
+}
+
+.browsehappy a {
+	color: #8A1F11;
+	text-decoration: underline;
+	font-weight: bold;
+}
+
+#header {
+	width: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 999;
+}
+.header-bg{
+	background-color: #363d4d;
+}
+.header-bg2{
+	background-color: #363d4c;
+}
+#nav{
+	background-color:rgba(0, 0, 0, 0);
+	color: #fff;
+	max-width: 80%;
+}
+
+#logo {
+	display: block;
+	height: 100%;
+	line-height: 50px;
+	font-size: 18px;
+	float: left;
+	padding-right: 20px;
+	color: #ffffff;
+	font-weight: normal;
+}
+
+#logo img{
+	height: 56px;
+	float: left;
+	padding: 0 10px;
+}
+
+#menu{
+	line-height: 56px;
+	width: 75%;
+	text-align:right;
+}
+
+#menu a{
+	display: inline-block;
+	height: 100%;
+	padding: 0px 20px;
+	font-size: 16px;
+	color: #fff;
+}
+
+#menu a:hover,#menu .current {
+	color: #238efa;
+}
+
+.search_box{
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 56px;
+	line-height: 56px;
+	background-color: #363d4c;
+}
+.search_box form{
+	height: 100%;
+	width: 300px;
+	text-align: center;
+	margin: 0 auto;
+	position: relative;
+}
+.search_box .ipt{
+	width: 100%;
+	height: 30px;
+	border: none;
+	border-radius: 50px;
+	padding:0 42px 0 10px; 
+}
+.search_box .btn{
+	background:transparent url(../img/icon-search.png) no-repeat center center;
+	width: 40px!important;
+	height: 30px;
+	position: absolute;
+	right: 0;
+	top: 13px;
+	border:none;
+	text-indent: -9999em;
+	background-color: #eee;
+	padding:0; 
+	border-radius:0 50px 50px 0;
+}
+
+.post {
+	padding: 55px 0 20px;
+	border-bottom: 1px dashed #DDD;
+}
+
+.post:last-child{
+	border:none;
+}
+
+.post.index{
+	padding: 40px 0;
+}
+
+.post-title {
+	margin: 0.4em 0;
+	font-size: 18px;
+	text-align: center;
+}
+.post.index .post-title {
+	font-size: 22px;
+}
+
+.post-meta {
+	margin: 5px 0;
+	padding: 3px;
+	color: #999;
+	font-size: 12px;
+	text-align: center;
+}
+
+.post-meta li {
+	display: inline-block;
+	padding: 0 2px;
+	text-align: center;
+	border-left: 1px solid #EEE;
+}
+
+.post-meta li:first-child {
+	margin-left: 0;
+	padding-left: 0;
+	border: none;
+}
+.post-meta li a{
+	color: #999;
+}
+.post-meta li a:hover{
+	text-decoration: underline;
+}
+
+.post .tags {
+	clear: both;
+}
+
+.post-near {
+	margin: 30px 0;
+	padding: 0;
+	color: #999;
+	list-style: none;
+}
+
+.post-near li {
+	margin: 10px 0;
+}
+
+.archive-title {
+	margin: 0;
+	padding: 70px 0 5px 0;
+	color: #000;
+	border-bottom: 1px dashed #dedede;
+	font-size: 16px;
+}
+
+.more {
+	text-align: center;
+} 
+
+.more a {
+	padding: 4px 15px;
+	color: #999999;
+	border: 1px dashed #363d4d;
+	font-size: 14px;
+	border-radius: 20px;
+	-webkit-transition: all .5s;
+	transition: all .5s;
+}
+.more a:hover,.more a:active{
+	background: #363d4d;
+	color: #fff;
+	padding: 4px 40px;
+	border: 1px dashed #dedede;
+}
+
+.protected .text {
+	width: 50%;
+}
+
+.page-navigator {
+	margin: 50px 0;
+	padding: 0;
+	list-style: none;
+	text-align: center;
+}
+
+.page-navigator li {
+	display: inline-block;
+	margin: 0 4px;
+}
+
+.page-navigator a {
+	display: inline-block;
+	padding: 0 11px;
+	height: 30px;
+	line-height: 30px;
+	background: #EEE;
+	color: #888;
+	text-decoration: none;
+}
+
+.page-navigator a:hover,.page-navigator a:active {
+	background-color: #363d4d;
+	color: #ffffff;
+}
+
+.page-navigator .current a {
+	background: #363d4d;
+	color: #ffffff;
+}
+
+#comments {
+	padding: 20px 0;
+}
+
+.comment-list,.comment-list ol {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	color: #aaacb4;
+}
+
+.comment-list li {
+	margin-top: 10px;
+	padding: 10px;
+	border: 1px dashed #ddd;
+	border-radius: 8px;
+}
+
+.comment-list li.comment-level-odd {
+	background: #fbfbfb;
+}
+
+.comment-list li.comment-level-even {
+	background: #FFF;
+}
+
+.comment-list li .comment-reply {
+	text-align: right;
+	font-size: .92857em;
+}
+
+.comment-meta a {
+	color: #999;
+	font-size: .92857em;
+}
+
+.comment-author {
+	display: block;
+	margin-bottom: 3px;
+	color: #545454;
+}
+
+.comment-author .avatar {
+	float: left;
+	margin-right: 10px;
+	border-radius: 30px;
+}
+
+.comment-author cite {
+	font-weight: bold;
+	font-style: normal;
+}
+
+.comment-list .respond {
+	margin-top: 15px;
+	border-top: 1px solid #EEE;
+}
+
+.respond .cancel-comment-reply {
+	float: right;
+	margin-top: 15px;
+	font-size: .92857em;
+}
+
+#comment-form label {
+	display: block;
+	margin-bottom: .5em;
+	font-weight: bold;
+}
+
+#comment-form .required:after {
+	color: #C00;
+	content: " *";
+}
+
+#secondary {
+	padding-top: 15px;
+	word-wrap: break-word;
+}
+
+.widget {
+	margin-bottom: 30px;
+}
+
+.widget-list {
+	padding: 0;
+	list-style: none;
+}
+
+.widget-list li {
+	margin: 5px 0;
+	line-height: 1.5;
+}
+
+.widget-list li ul {
+	margin-left: 15px;
+}
+
+#footer {
+	padding: 3em 0;
+	color: #6e6f73;
+	text-align: center;
+	line-height: 8px;
+}
+#footer,#footer a { 
+		background-color: #f8f8f8;
+		color: #545454;
+}
+#footer a:hover,#footer a:active {
+	text-decoration: underline;
+}
+#footer .links a{
+	line-height: 20px;
+}
+.error-page {
+	margin-top: 100px;
+	margin-bottom: 100px;
+}
+.post-content,.comment-content {
+	word-wrap: break-word;
+	line-height: 1.6;
+	font-size: 16px;
+	color: #3e3e3e;
+}
+.post-content.home{
+	color: #999999;
+	text-align: center;
+}
+
+.post-content h2,.comment-content h2 {
+	font-size: 1.28571em;
+}
+
+.post-content img,.comment-content img,.post-content video,.comment-content video {
+	max-width: 100%;
+}
+
+.post-content a img,.comment-content a img {
+	position: relative;
+	bottom: -4px;
+	background: #FFF;
+}
+
+.post-content hr,.comment-content hr {
+	margin: 2em auto;
+	width: 100px;
+	border: 1px solid #E9E9E9;
+	border-width: 2px 0 0 0;
+}
+
+.post-content a{
+	color: #586C94;
+}
+.post-content a:hover,.post-content a:active {
+	text-decoration: underline;
+}
+.aligncenter,div.aligncenter {
+	display: block;
+	margin-right: auto;
+	margin-left: auto;
+}
+
+.alignleft {
+	float: left;
+}
+
+.alignright {
+	float: right;
+}
+
+img.alignleft {
+	margin: 0 15px 0 0;
+}
+
+img.alignright {
+	margin: 0 0 0 15px;
+}
+
+@media(max-width:768px) {
+	button, html input[type=button], input[type=reset], input[type=submit] {
+		cursor: none;
+	}
+	#header{
+		background:#363d4c;
+		position: static;
+	}
+	#pic{
+		display: none;
+	}
+	.post.index .post-title a {
+		color: #545454; 
+	}
+	.post {
+		padding: 0;
+	}
+	#nav {
+		max-width: 100%; 
+	}
+	#nav .col-3{
+		padding-left: 13px;
+	}
+	#hamburger-1{
+		display: block;
+	}
+	#menu {
+		display: none;
+		height: auto;
+		line-height: 20px;
+		width: 100%;
+		padding: 10px;
+		position: absolute;
+		top: 56px;
+		text-align: left;
+		background-color: #363d4c;
+		z-index: 1;
+		border-top: 1px groove #1AAD19;
+	}	
+	#menu a{
+		height: 30px;
+		line-height: 30px;
+		padding: 0px 12px;
+		font-size: 14px;
+	}
+	#menu a:hover, #menu .current {
+		color: #1AAD19;
+	}
+	.header-bg {
+		background-color: #363d4c;
+	}
+	.submit {
+		background-color: #1AAD19;
+	}
+	.submit:active,.submit:hover {
+		color: rgba(255, 255, 255, 0.6);
+		background-color: #179B16;
+	}
+	.page-navigator .current a {
+	}
+	.page-navigator a:hover, .page-navigator a:active {
+		color: rgba(255, 255, 255, 0.6);
+	}
+	.info_box{
+		padding: 0 5%;
+	}
+	.search_box form {
+		height: 100%;
+		width: 200px;
+	}
+	.post.index {
+		padding: 10px;
+	}
+	.post.index .post-title {
+		font-size: 18px;
+	}
+	.page-navigator {
+		margin: 20px 0;
+	}
+	.shadow p{
+		margin: 0;
+		padding: 0;
+	}
+	.post-title {
+		text-align: left;
+	}
+	.post-meta {
+		text-align: left;
+		margin: 0 0 5px 0;
+	}
+	.post-content.home {
+		display: none;
+	}
+	.archive-title {
+		padding: 15px 0 5px 0;
+		color: #363d4c;
+	}
+	input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus {
+		border: 1px solid #1aad19;
+	}
+	#footer {
+		padding: 1em 0;
+	}
+} 
+#main{
+	float: inherit;
+}
+@media(min-width:1200px) {
+	.container {
+		max-width: 768px;
+	}
+}
+
+.hidden {
+	display: none!important;
+	visibility: hidden;
+}
+
+.sr-only {
+	position: absolute;
+	overflow: hidden;
+	margin: -1px;
+	padding: 0;
+	width: 1px;
+	height: 1px;
+	border: 0;
+}
+
+.sr-only.focusable:active,.sr-only.focusable:focus {
+	position: static;
+	overflow: visible;
+	clip: auto;
+	margin: 0;
+	width: auto;
+	height: auto;
+}
+
+.invisible {
+	visibility: hidden;
+}
+
+/*面包导航*/
+.hamburger{
+	display: none;
+	position: absolute;
+	right: 13px;
+	top: 13px;
+}
+.hamburger .line{
+	width: 23px;
+	height: 2px;
+	background-color: #fff;
+	display: block;
+	margin: 6px auto;
+	-webkit-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;
+}
+
+#hamburger-1.is-active .line:nth-child(2){
+	opacity: 0;
+}
+
+#hamburger-1.is-active .line:nth-child(1){
+	-webkit-transform: translateY(8px) rotate(45deg);
+	-ms-transform: translateY(8px) rotate(45deg);
+	-o-transform: translateY(8px) rotate(45deg);
+	transform: translateY(8px) rotate(45deg);
+}
+
+#hamburger-1.is-active .line:nth-child(3){
+	-webkit-transform: translateY(-8px) rotate(-45deg);
+	-ms-transform: translateY(-8px) rotate(-45deg);
+	-o-transform: translateY(-8px) rotate(-45deg);
+	transform: translateY(-8px) rotate(-45deg);
+}    
+/*滚动条美化*/
+::-webkit-scrollbar{  
+	width: 5px;
+}  
+
+/*定义滚动条轨道 内阴影+圆角*/  
+::-webkit-scrollbar-track{  
+	background-color: #f4f5f6;
+}  
+
+/*定义滑块 内阴影+圆角*/  
+::-webkit-scrollbar-thumb{  
+	background-color: #aaacb4;
+	border-radius: 20px;
+} 
\ No newline at end of file
diff --git a/footer.php b/footer.php
new file mode 100644
index 0000000..87b11ea
--- /dev/null
+++ b/footer.php
@@ -0,0 +1,18 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+</div><!-- end .row -->
+</div>
+</div><!-- end #body -->
+<footer id="footer" role="contentinfo">
+	&copy; <?php echo date('Y'); ?> <a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title(); ?></a> | Powered by <a href="https://github.com/typecho/typecho">Typecho</a>| Theme <a href="https://github.com/WarnerYang/typecho-theme-Mecho">Mecho</a>
+</footer><!-- end #footer -->
+<?php $this->footer(); ?>
+<script src="<?php $this->options->adminStaticUrl('js', 'jquery.js'); ?>"></script>
+<script src="<?php $this->options->themeUrl('js/main.js'); ?>"></script>
+<script src="<?php $this->options->themeUrl('js/shuru.js'); ?>"></script>
+<script type="text/javascript">
+	POWERMODE.colorful = true; // make power mode colorful
+	POWERMODE.shake = false; // turn off shake
+	document.body.addEventListener('input', POWERMODE);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/functions.php b/functions.php
new file mode 100644
index 0000000..d1e0182
--- /dev/null
+++ b/functions.php
@@ -0,0 +1,56 @@
+<?php
+if (!defined('__TYPECHO_ROOT_DIR__')) exit;
+
+function themeConfig($form) {
+    $logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', NULL, NULL, _t('站点LOGO地址'), _t('在这里填入一个图片URL地址, 以在网站标题前加上一个LOGO'));
+    $form->addInput($logoUrl);
+    
+    $sidebarBlock = new Typecho_Widget_Helper_Form_Element_Checkbox('sidebarBlock', 
+    array('ShowRecentPosts' => _t('显示最新文章'),
+    'ShowRecentComments' => _t('显示最近回复'),
+    'ShowCategory' => _t('显示分类'),
+    'ShowArchive' => _t('显示归档'),
+    'ShowOther' => _t('显示其它杂项')),
+    array('ShowRecentPosts', 'ShowRecentComments', 'ShowCategory', 'ShowArchive', 'ShowOther'), _t('侧边栏显示'));
+    
+    $form->addInput($sidebarBlock->multiMode());
+}
+
+/**
+* 获取必应每日壁纸、故事
+* @author  Warner
+* @link    https://github.com/WarnerYang
+*/
+function bing(){
+    //删除之前的图片和故事
+    for ($i=1; $i <=10 ; $i++) { 
+        @unlink(date('Ymd',time()-24*3600*$i).'.jpg');
+        @unlink(date('Ymd',time()-24*3600*$i).'.json');
+    }
+
+    $img_name   = date('Ymd').'.jpg'; //每日图片
+    $coverstory = date('Ymd').'.json'; //每日故事 json格式
+
+    if (!file_exists($img_name)) {
+        $url = "http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1";
+        $result = file_get_contents($url);
+        $output = json_decode($result,true);
+        $img_url = $output["images"][0]["url"];
+        $img = file_get_contents("http://cn.bing.com".$img_url);  
+        @file_put_contents($img_name,$img); //写入图片
+    }
+    if (!file_exists($coverstory)) {
+        $json = file_get_contents('http://cn.bing.com/cnhp/coverstory/');
+        @file_put_contents($coverstory,$json); //写入文本
+    }
+    $coverstory = json_decode(file_get_contents($coverstory),true);
+    return $coverstory;
+}
+
+/*
+function themeFields($layout) {
+    $logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', NULL, NULL, _t('站点LOGO地址'), _t('在这里填入一个图片URL地址, 以在网站标题前加上一个LOGO'));
+    $layout->addItem($logoUrl);
+}
+*/
+
diff --git a/header.php b/header.php
new file mode 100644
index 0000000..eb616a7
--- /dev/null
+++ b/header.php
@@ -0,0 +1,155 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+
+<!DOCTYPE HTML>
+
+<html class="no-js">
+
+<head>
+
+    <meta charset="utf-8">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+
+    <meta name="renderer" content="webkit">
+
+    <meta http-equiv="Cache-Control" content="no-siteapp">
+
+    <meta http-equiv="widow-target" content="_top">
+
+    <meta name="robots" content="index,follow">
+
+    <meta name="format-detection" content="telephone=no">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+
+    <title><?php $this->archiveTitle(array(
+
+        'category'  =>  _t('分类 %s 下的文章'),
+
+        'search'    =>  _t('包含关键字 %s 的文章'),
+
+        'tag'       =>  _t('标签 %s 下的文章'),
+
+        'author'    =>  _t('%s 发布的文章')
+
+        ), '', ' - '); ?><?php $this->options->title(); ?></title>
+
+
+
+        <!-- 使用url函数转换相关路径 -->
+
+        <link rel="stylesheet" href="<?php $this->options->adminStaticUrl('css','normalize.css'); ?>">
+
+        <link rel="stylesheet" href="<?php $this->options->adminStaticUrl('css','grid.css'); ?>">
+
+        <link rel="stylesheet" href="<?php $this->options->themeUrl('css/style.css'); ?>">
+
+
+
+    <!--[if lt IE 9]>
+
+    <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
+
+    <script src="http://cdn.staticfile.org/respond.js/1.3.0/respond.min.js"></script>
+
+    <![endif]-->
+
+
+
+    <!-- 通过自有函数输出HTML头部信息 -->
+
+    <?php $this->header(); ?>
+</head>
+
+<body>
+
+<!--[if lt IE 8]>
+
+    <div class="browsehappy" role="dialog"><?php _e('当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>'); ?>.</div>
+
+    <![endif]-->
+
+
+
+    <header id="header" class="clearfix <?php if($this->is('index')): ?><?php else: ?>header-bg<?php endif; ?>">
+
+        <div class="container" id="nav">
+
+            <div class="row">
+
+                <div class="col-3">
+
+                    <a id="logo" href="<?php $this->options->siteUrl(); ?>">
+
+                        <?php if ($this->options->logoUrl): ?>
+
+                            <img src="<?php $this->options->logoUrl() ?>"/>
+
+                        <?php endif; ?>
+
+                        <?php $this->options->title() ?>
+
+                    </a>
+
+                </div>
+
+                <div id="menu" class="col-9">
+
+                    <a<?php if($this->is('index')): ?> class="current"<?php endif; ?> href="<?php $this->options->siteUrl(); ?>"><?php _e('首页'); ?></a>
+                    <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
+                    <?php while($pages->next()): ?>
+
+                        <a<?php if($this->is('page', $pages->slug)): ?> class="current"<?php endif; ?> href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
+
+                    <?php endwhile; ?>
+
+                        <!-- <a href="javascript:;" id="search">搜索</a> -->
+
+                    <?php if($this->user->hasLogin()): ?>
+
+                        <a href="<?php $this->options->adminUrl('login.php'); ?>">后台</a>
+
+                    <?php endif; ?>
+
+                </div>                    
+
+                <div class="search_box hide">
+
+                    <form method="post" action="">
+
+                        <input class="ipt" type="text" name="s"/ placeholder="输入你想搜索的内容">
+
+                        <input class="btn" type="submit"> 
+
+                    </form> 
+
+                </div> 
+
+                <div class="hamburger" id="hamburger-1">
+
+                  <span class="line"></span>
+
+                  <span class="line"></span>
+
+                  <span class="line"></span>
+
+              </div>
+
+          </div><!-- end .row -->
+
+      </div>
+
+  </header><!-- end #header -->
+
+
+
+
+
+
+
+
+
diff --git a/img/icon-search.png b/img/icon-search.png
new file mode 100644
index 0000000..6ab0619
Binary files /dev/null and b/img/icon-search.png differ
diff --git a/img/icon-search@2x.png b/img/icon-search@2x.png
new file mode 100644
index 0000000..243b408
Binary files /dev/null and b/img/icon-search@2x.png differ
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..d73478d
--- /dev/null
+++ b/index.php
@@ -0,0 +1,55 @@
+<?php
+/**
+ * Mecho主题
+ * 
+ * @package Typecho Mecho Theme 
+ * @author  Warner
+ * @version beta
+ * @link    https://github.com/WarnerYang
+ */
+
+if (!defined('__TYPECHO_ROOT_DIR__')) exit;
+$this->need('header.php');
+$coverstory = bing(); 
+?>
+<?php if($this->is('index')): ?>
+	<div id="pic" style="background-image:url('<?php _e($this->options->siteUrl().date('Ymd').'.jpg'); ?>');">
+		<div class="info_box">
+			<p class="title"><?php _e($coverstory['title']); ?></p>
+			<p class="min"><?php _e($coverstory['attribute']); ?></p>
+			<p class="content"><?php _e($coverstory['para1']); ?></p>
+			<a class="min copyright" href="javascript:;" title="图片版权归必应所有"><?php _e($coverstory['provider']); ?></a>
+		</div>
+	</div>
+<?php endif; ?>
+<div id="body">
+	<div class="container">
+		<div class="row">
+			<div class="col-mb-12 col-12" id="main" role="main">
+				<?php while($this->next()): ?>
+					<article class="post index" itemscope itemtype="http://schema.org/BlogPosting">
+						<h2 class="post-title" itemprop="name headline">
+							<a itemtype="url" href="<?php $this->permalink() ?>"><?php $this->title() ?>
+							</a>
+						</h2>
+						<ul class="post-meta">
+							<li>
+								<time datetime="<?php $this->date('c'); ?>" itemprop="datePublished">
+									<?php $this->date('Y-m-d'); ?>
+								</time>
+							</li>
+							<li><?php $this->category(','); ?></li>
+							<li itemprop="interactionCount">
+								<a itemprop="discussionUrl" href="<?php $this->permalink() ?>#comments">
+									<?php $this->commentsNum('%d 条评论'); ?>
+								</a>
+							</li>
+						</ul>
+						<div class="post-content home" itemprop="articleBody">
+							<?php $this->excerpt(100, '...'); ?>
+						</div>
+					</article>
+				<?php endwhile; ?>
+				<?php $this->pageNav('上一页','下一页',10,'...');?>
+			</div><!-- end #main-->
+			<?php $this->need('footer.php'); ?>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..49080d0
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,35 @@
+$(document).ready(function(){
+    var body_height = $("body").height();
+
+    /*改变背景高度*/
+    $(".copyright").on('click',function() {
+        var pic_height = $("#pic").height();
+        if(pic_height ==  body_height){
+            $("#pic").animate({height:"75%"});
+            $("#header").removeClass("hide");
+            $(".info_box").css("background","rgba(0,0,0,0.3)");
+            $(".info_box p").removeClass("hide");
+        }else{
+            $("#pic").animate({height:"100%"});
+            $("#header").addClass("hide");
+            $(".info_box").css("background","rgba(0,0,0,0)");
+            $(".info_box p").addClass("hide");
+        }
+    });
+
+    /*搜索*/
+    $("#search").on('click', function() {
+        $(".search_box").show();
+        $(".search_box .ipt").focus();
+    });
+    $(".search_box .ipt").blur(function() {
+        $(".search_box").hide();
+    });
+
+    /*面包导航*/
+    $(".hamburger").click(function(){
+        $(this).toggleClass("is-active");
+        $("#menu").toggle();
+        $("#header").toggleClass("header-bg2");
+    });
+});
diff --git a/js/shuru.js b/js/shuru.js
new file mode 100644
index 0000000..4acdb1b
--- /dev/null
+++ b/js/shuru.js
@@ -0,0 +1,313 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["POWERMODE"] = factory();
+	else
+		root["POWERMODE"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var canvas = document.createElement('canvas');
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+	canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
+	window.addEventListener('resize', function () {
+	    canvas.width = window.innerWidth;
+	    canvas.height = window.innerHeight;
+	});
+	document.body.appendChild(canvas);
+	var context = canvas.getContext('2d');
+	var particles = [];
+	var particlePointer = 0;
+
+	POWERMODE.shake = true;
+
+	function getRandom(min, max) {
+	    return Math.random() * (max - min) + min;
+	}
+
+	function getColor(el) {
+	    if (POWERMODE.colorful) {
+	        var u = getRandom(0, 360);
+	        return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')';
+	    } else {
+	        return window.getComputedStyle(el).color;
+	    }
+	}
+
+	function getCaret() {
+	    var el = document.activeElement;
+	    var bcr;
+	    if (el.tagName === 'TEXTAREA' ||
+	        (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
+	        var offset = __webpack_require__(1)(el, el.selectionStart);
+	        bcr = el.getBoundingClientRect();
+	        return {
+	            x: offset.left + bcr.left,
+	            y: offset.top + bcr.top,
+	            color: getColor(el)
+	        };
+	    }
+	    var selection = window.getSelection();
+	    if (selection.rangeCount) {
+	        var range = selection.getRangeAt(0);
+	        var startNode = range.startContainer;
+	        if (startNode.nodeType === document.TEXT_NODE) {
+	            startNode = startNode.parentNode;
+	        }
+	        bcr = range.getBoundingClientRect();
+	        return {
+	            x: bcr.left,
+	            y: bcr.top,
+	            color: getColor(startNode)
+	        };
+	    }
+	    return { x: 0, y: 0, color: 'transparent' };
+	}
+
+	function createParticle(x, y, color) {
+	    return {
+	        x: x,
+	        y: y,
+	        alpha: 1,
+	        color: color,
+	        velocity: {
+	            x: -1 + Math.random() * 2,
+	            y: -3.5 + Math.random() * 2
+	        }
+	    };
+	}
+
+	function POWERMODE() {
+	    { // spawn particles
+	        var caret = getCaret();
+	        var numParticles = 5 + Math.round(Math.random() * 10);
+	        while (numParticles--) {
+	            particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
+	            particlePointer = (particlePointer + 1) % 500;
+	        }
+	    }
+	    { // shake screen
+	        if (POWERMODE.shake) {
+	            var intensity = 1 + 2 * Math.random();
+	            var x = intensity * (Math.random() > 0.5 ? -1 : 1);
+	            var y = intensity * (Math.random() > 0.5 ? -1 : 1);
+	            document.body.style.marginLeft = x + 'px';
+	            document.body.style.marginTop = y + 'px';
+	            setTimeout(function() {
+	                document.body.style.marginLeft = '';
+	                document.body.style.marginTop = '';
+	            }, 75);
+	        }
+	    }
+	};
+	POWERMODE.colorful = false;
+
+	function loop() {
+	    requestAnimationFrame(loop);
+	    context.clearRect(0, 0, canvas.width, canvas.height);
+	    for (var i = 0; i < particles.length; ++i) {
+	        var particle = particles[i];
+	        if (particle.alpha <= 0.1) continue;
+	        particle.velocity.y += 0.075;
+	        particle.x += particle.velocity.x;
+	        particle.y += particle.velocity.y;
+	        particle.alpha *= 0.96;
+	        context.globalAlpha = particle.alpha;
+	        context.fillStyle = particle.color;
+	        context.fillRect(
+	            Math.round(particle.x - 1.5),
+	            Math.round(particle.y - 1.5),
+	            3, 3
+	        );
+	    }
+	}
+	requestAnimationFrame(loop);
+
+	module.exports = POWERMODE;
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+	/* jshint browser: true */
+
+	(function () {
+
+	// The properties that we copy into a mirrored div.
+	// Note that some browsers, such as Firefox,
+	// do not concatenate properties, i.e. padding-top, bottom etc. -> padding,
+	// so we have to do every single property specifically.
+	var properties = [
+	  'direction',  // RTL support
+	  'boxSizing',
+	  'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
+	  'height',
+	  'overflowX',
+	  'overflowY',  // copy the scrollbar for IE
+
+	  'borderTopWidth',
+	  'borderRightWidth',
+	  'borderBottomWidth',
+	  'borderLeftWidth',
+	  'borderStyle',
+
+	  'paddingTop',
+	  'paddingRight',
+	  'paddingBottom',
+	  'paddingLeft',
+
+	  // https://developer.mozilla.org/en-US/docs/Web/CSS/font
+	  'fontStyle',
+	  'fontVariant',
+	  'fontWeight',
+	  'fontStretch',
+	  'fontSize',
+	  'fontSizeAdjust',
+	  'lineHeight',
+	  'fontFamily',
+
+	  'textAlign',
+	  'textTransform',
+	  'textIndent',
+	  'textDecoration',  // might not make a difference, but better be safe
+
+	  'letterSpacing',
+	  'wordSpacing',
+
+	  'tabSize',
+	  'MozTabSize'
+
+	];
+
+	var isFirefox = window.mozInnerScreenX != null;
+
+	function getCaretCoordinates(element, position, options) {
+
+	  var debug = options && options.debug || false;
+	  if (debug) {
+	    var el = document.querySelector('#input-textarea-caret-position-mirror-div');
+	    if ( el ) { el.parentNode.removeChild(el); }
+	  }
+
+	  // mirrored div
+	  var div = document.createElement('div');
+	  div.id = 'input-textarea-caret-position-mirror-div';
+	  document.body.appendChild(div);
+
+	  var style = div.style;
+	  var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9
+
+	  // default textarea styles
+	  style.whiteSpace = 'pre-wrap';
+	  if (element.nodeName !== 'INPUT')
+	    style.wordWrap = 'break-word';  // only for textarea-s
+
+	  // position off-screen
+	  style.position = 'absolute';  // required to return coordinates properly
+	  if (!debug)
+	    style.visibility = 'hidden';  // not 'display: none' because we want rendering
+
+	  // transfer the element's properties to the div
+	  properties.forEach(function (prop) {
+	    style[prop] = computed[prop];
+	  });
+
+	  if (isFirefox) {
+	    // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
+	    if (element.scrollHeight > parseInt(computed.height))
+	      style.overflowY = 'scroll';
+	  } else {
+	    style.overflow = 'hidden';  // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
+	  }
+
+	  div.textContent = element.value.substring(0, position);
+	  // the second special handling for input type="text" vs textarea: spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
+	  if (element.nodeName === 'INPUT')
+	    div.textContent = div.textContent.replace(/\s/g, "\u00a0");
+
+	  var span = document.createElement('span');
+	  // Wrapping must be replicated *exactly*, including when a long word gets
+	  // onto the next line, with whitespace at the end of the line before (#7).
+	  // The  *only* reliable way to do that is to copy the *entire* rest of the
+	  // textarea's content into the <span> created at the caret position.
+	  // for inputs, just '.' would be enough, but why bother?
+	  span.textContent = element.value.substring(position) || '.';  // || because a completely empty faux span doesn't render at all
+	  div.appendChild(span);
+
+	  var coordinates = {
+	    top: span.offsetTop + parseInt(computed['borderTopWidth']),
+	    left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
+	  };
+
+	  if (debug) {
+	    span.style.backgroundColor = '#aaa';
+	  } else {
+	    document.body.removeChild(div);
+	  }
+
+	  return coordinates;
+	}
+
+	if (typeof module != "undefined" && typeof module.exports != "undefined") {
+	  module.exports = getCaretCoordinates;
+	} else {
+	  window.getCaretCoordinates = getCaretCoordinates;
+	}
+
+	}());
+
+/***/ }
+/******/ ])
+});
+;
\ No newline at end of file
diff --git a/page.php b/page.php
new file mode 100644
index 0000000..d9ea901
--- /dev/null
+++ b/page.php
@@ -0,0 +1,17 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+<?php $this->need('header.php'); ?>
+
+<div id="body">
+	<div class="container">
+		<div class="row">
+			<div class="col-12" id="main" role="main">
+				<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+					<h1 class="post-title" itemprop="name headline"><a itemtype="url" href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>
+					<div class="post-content" itemprop="articleBody">
+						<?php $this->content(); ?>
+					</div>
+				</article>
+				<?php $this->need('comments.php'); ?>
+			</div><!-- end #main-->
+
+			<?php $this->need('footer.php'); ?>
diff --git a/post.php b/post.php
new file mode 100644
index 0000000..f3b3449
--- /dev/null
+++ b/post.php
@@ -0,0 +1,30 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+<?php $this->need('header.php'); ?>
+
+<div id="body">
+    <div class="container">
+        <div class="row">
+            <div class="col-mb-12 col-12" id="main" role="main">
+                <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+                    <h1 class="post-title" itemprop="name headline"><a itemtype="url" href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>
+                    <ul class="post-meta">
+                        <li>
+                            <time datetime="<?php $this->date('c'); ?>" itemprop="datePublished">
+                                <?php $this->date('Y-m-d H:i'); ?>
+                            </time>
+                        </li>
+                        <li><?php $this->category(','); ?></li>
+                    </ul>
+                    <div class="post-content" itemprop="articleBody">
+                        <?php $this->content(); ?>
+                    </div>
+                    <p itemprop="keywords" class="tags"><?php _e('标签: '); ?><?php $this->tags(', ', true, 'none'); ?></p>
+                </article>
+                <?php $this->need('comments.php'); ?>
+                <ul class="post-near">
+                    <li>上一篇: <?php $this->thePrev('%s','没有了'); ?></li>
+                    <li>下一篇: <?php $this->theNext('%s','没有了'); ?></li>
+                </ul>
+            </div><!-- end #main-->
+
+            <?php $this->need('footer.php'); ?>
diff --git a/sidebar.php b/sidebar.php
new file mode 100644
index 0000000..a10c76a
--- /dev/null
+++ b/sidebar.php
@@ -0,0 +1,59 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+<div class="col-mb-12 col-12 kit-hidden-tb" id="secondary" role="complementary">
+    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowRecentPosts', $this->options->sidebarBlock)): ?>
+    <section class="widget col-8 fl">
+		<h3 class="widget-title"><?php _e('最新文章'); ?></h3>
+        <ul class="widget-list">
+            <?php $this->widget('Widget_Contents_Post_Recent')
+            ->parse('<li><a href="{permalink}">{title}</a></li>'); ?>
+        </ul>
+    </section>
+    <?php endif; ?>
+
+    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowRecentComments', $this->options->sidebarBlock)): ?>
+    <section class="widget">
+		<h3 class="widget-title"><?php _e('最近回复'); ?></h3>
+        <ul class="widget-list">
+        <?php $this->widget('Widget_Comments_Recent')->to($comments); ?>
+        <?php while($comments->next()): ?>
+            <li><a href="<?php $comments->permalink(); ?>"><?php $comments->author(false); ?></a>: <?php $comments->excerpt(35, '...'); ?></li>
+        <?php endwhile; ?>
+        </ul>
+    </section>
+    <?php endif; ?>
+
+    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowCategory', $this->options->sidebarBlock)): ?>
+    <section class="widget col-2">
+		<h3 class="widget-title"><?php _e('分类'); ?></h3>
+        <?php $this->widget('Widget_Metas_Category_List')->listCategories('wrapClass=widget-list'); ?>
+	</section>
+    <?php endif; ?>
+
+    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowArchive', $this->options->sidebarBlock)): ?>
+    <section class="widget col-2">
+		<h3 class="widget-title"><?php _e('归档'); ?></h3>
+        <ul class="widget-list">
+            <?php $this->widget('Widget_Contents_Post_Date', 'type=month&format=F Y')
+            ->parse('<li><a href="{permalink}">{date}</a></li>'); ?>
+        </ul>
+	</section>
+    <?php endif; ?>
+
+    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowOther', $this->options->sidebarBlock)): ?>
+	<section class="widget">
+		<h3 class="widget-title"><?php _e('其它'); ?></h3>
+        <ul class="widget-list">
+            <?php if($this->user->hasLogin()): ?>
+				<li class="last"><a href="<?php $this->options->adminUrl(); ?>"><?php _e('进入后台'); ?> (<?php $this->user->screenName(); ?>)</a></li>
+                <li><a href="<?php $this->options->logoutUrl(); ?>"><?php _e('退出'); ?></a></li>
+            <?php else: ?>
+                <li class="last"><a href="<?php $this->options->adminUrl('login.php'); ?>"><?php _e('登录'); ?></a></li>
+            <?php endif; ?>
+            <li><a href="<?php $this->options->feedUrl(); ?>"><?php _e('文章 RSS'); ?></a></li>
+            <li><a href="<?php $this->options->commentsFeedUrl(); ?>"><?php _e('评论 RSS'); ?></a></li>
+            <li><a href="http://www.typecho.org">Typecho</a></li>
+        </ul>
+	</section>
+    <?php endif; ?>
+
+</div><!-- end #sidebar -->