diff --git a/about.php b/about.php
new file mode 100644
index 00000000..6fb1152d
--- /dev/null
+++ b/about.php
@@ -0,0 +1,41 @@
+<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit;
+/**
+ * 关于页面
+ *
+ * @package custom
+ */
+$this->need('includes/head.php');
+$this->need('includes/header.php');
+?>
+    <main class="main-container container">
+	  <div class="post-body">
+	    <br><br><br>
+	    <div class="about">
+		  <div class="about-avatar">
+		    <?php echo $this->author->gravatar(300); ?>
+			<?php if($this->fields->name==!''): ?>
+			<h2 class="about-name"><?php echo $this->fields->name(); ?></h2>
+			<?php endif; ?>
+		  </div>
+		  <div class="about-social">
+		    <?php if($this->fields->github==!''): ?>
+			<a href="https://github.com/<?php echo $this->fields->github(); ?>" target="_blank" title="GayHub"><i class="iconfont icon-github"></i></a>
+			<?php endif; ?>
+			<?php if($this->fields->qq==!''): ?>
+			<a href="tencent://Message/?Uin=<?php echo $this->fields->qq(); ?>&amp;websiteName=q-zone.qq.com&amp;Menu=yes" target="_blank" title="QQ"><i class="iconfont icon-qq1"></i></a>
+			<?php endif; ?>
+			<?php if($this->fields->bilibili==!''): ?>
+			<a href="https://space.bilibili.com/<?php echo $this->fields->bilibili(); ?>" target="_blank" title="Bilibili"><i class="iconfont icon-bilibili-"></i></a>
+			<?php endif; ?>
+			<?php if($this->fields->email==!''): ?>
+			<a href="mail:<?php echo $this->fields->email(); ?>"><i class="iconfont icon-mail_fill" target="_blank" title="email"></i></a>
+			<?php endif; ?>
+		  </div>
+		</div>
+	    <div class="post-content page-content">
+		  <?php $this->content(); ?>
+		</div>
+	  </div>
+<?php $this->need('includes/comments.php'); ?>
+	</main>
+<?php $this->need('includes/footer.php'); ?>
\ No newline at end of file
diff --git a/assets/css/dark.miracles.css b/assets/css/dark.miracles.css
index bb722434..1b698040 100644
--- a/assets/css/dark.miracles.css
+++ b/assets/css/dark.miracles.css
@@ -35,6 +35,12 @@
 .body-dark .comment-reply a {
 	background: transparent
 }
+/* No Shadow */
+.body-dark .options {
+	box-shadow: 0 0 0 #fff;
+	-moz-box-shadow: 0 0 0 #fff;
+	-webkit-box-shadow: 0 0 0 #fff;
+}
 /* Need Shadow */
 .body-dark .dark-button,
 .body-dark .post-body,
@@ -44,7 +50,8 @@
 .body-dark .OwO-body,
 .body-dark .OwO-open .OwO-logo,
 .body-dark .OwO .OwO-body .OwO-items .OwO-item:hover,
-.body-dark .options {
+.body-dark .options,
+.body-dark .comment-pagenav a {
 	box-shadow: 0 0 36px #323232!important;
 	-moz-box-shadow: 0 0 36px #323232!important;
 	-webkit-box-shadow: 0 0 36px #323232!important
@@ -65,7 +72,11 @@
 .body-dark .comment-author,
 .body-dark .bubble.saying-body,
 .body-dark .tags-item a,
-.body-dark .options-button-active {
+.body-dark .options-button-active,
+.body-dark .drawer-footer,
+.body-dark .drawer-search,
+.body-dark .drawer-content a:hover,
+.body-dark .comment-pagenav a {
 	background: #646464!important;
 }
 /* Need #5a5a5a bg */
@@ -88,7 +99,11 @@
 .body-dark .dialog,
 .body-dark .options,
 .body-dark .options-theme-label,
-.body-dark .options-family-button {
+.body-dark .options-family-button,
+.body-dark .drawer,
+.body-dark .drawer-icon,
+.body-dark .drawer-search-form input,
+.body-dark .drawer-search-form button {
 	background: #5a5a5a!important
 }
 /* OwO */
@@ -126,7 +141,13 @@
 .body-dark .mobile-menu-footer,
 .body-dark .options-family-button,
 .body-dark .options-theme-item:hover .options-theme-label,
-.body-dark .options-contentsize-button {
+.body-dark .options-contentsize-button,
+.body-dark .drawer,
+.body-dark .drawer a,
+.body-dark .drawer-open .drawer-button,
+.body-dark .drawer-icon,
+.body-dark .drawer-search-form button,
+.body-dark .drawer-search-form input {
 	color: #fafafa!important
 }
 /* Need #5a5a5a color */
@@ -146,7 +167,10 @@
 .body-dark .mobile-menu-title,
 .body-dark .mobile-menu-footer,
 .body-dark .saying-textarea,
-.body-dark .options hr{
+.body-dark .options hr, 
+.body-dark .drawer,
+.body-dark .drawer-search-form button,
+.body-dark .drawer-search-form input {
 	border-color: #6e6e6e!important;
 }
 .body-dark .tip {
diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css
index 08420f65..10257223 100644
--- a/assets/css/miracles.min.css
+++ b/assets/css/miracles.min.css
@@ -83,15 +83,19 @@ hr {
 }
 .html-filter-sepia {
 	filter: sepia(30%);
-    -webkit-filter: sepia(30%);;
-    -moz-filter: sepia(30%);;
-    -ms-filter: sepia(30%);;
-    -o-filter: sepia(30%);;
+    -webkit-filter: sepia(30%);
+    -moz-filter: sepia(30%);
+    -ms-filter: sepia(30%);
+    -o-filter: sepia(30%);
     filter:progid:DXImageTransform.Microsoft.BasicImage(sepia=0.30);
 }
 
 /* 组件 */
 /* > 按钮 */
+button {
+	outline: none;
+	cursor: pointer
+}
 .button {
 	border: 3px solid #ccc;
 	border-radius: 30px;
@@ -114,6 +118,36 @@ hr {
 	background: rgb(235,235,235);
 	color: #fff;
 }
+/* > Alert */
+.alert {
+	background: rgb(80,80,80);
+	color: #fff;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	padding: 10px 18px;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	margin: 0 auto;
+	box-shadow: 0 0 4px #000;
+	-moz-box-shadow: 0 0 4px #000;
+	-webkit-box-shadow: 0 0 4px #000;
+	z-index: 40;
+	transition: all 0.3s;
+}
+.alert.ready {
+	top: -200px;
+}
+.alert-close {
+	border: none;
+	background: rgb(0,0,0,0);
+	transform: scale(0.8);
+	color: #fff;
+	float: right;
+	margin-top: -36px;
+}
 
 /* Large Mask */
 .mask {
@@ -124,7 +158,7 @@ hr {
 	right: 0;
 	background: rgb(70,70,70,0);
 	z-index: -100;
-	transition: all 0.4s;
+	transition: background 0.4s;
 }
 .mask-open {
 	background: rgb(70,70,70,0.7);
@@ -272,7 +306,7 @@ hr {
 	color: rgb(80,80,80);
 	text-shadow: 0 0 0 #fff;
 }
-.drawer-open #live2dcanvas {
+#live2dcanvas {
 	z-index: 0!important;
 }
 
@@ -343,7 +377,10 @@ hr {
 .index-banner {
 	margin-top: -21px;
 	width: 100%;
-	text-align: center
+	text-align: center;
+	background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
 }
 .dark-cover,
 .banner-mask {
@@ -632,6 +669,34 @@ hr {
 	font-size: 160%;
 }
 
+/* 关于页面 */
+.about-avatar img {
+	margin: 0 auto;
+	display: block;
+	padding: 2px;
+	border: 3px solid #ddd;
+	border-radius: 100%;
+	height: 200px;
+	width: 200px;
+}
+.about-name {
+	text-align: center;
+	font-size: 35px;
+	margin: 20px 0;
+	margin-bottom: 0;
+}
+.about-social {
+	text-align: center;
+	margin-top: 15px;
+}
+.about-social a {
+	transform: scale(1.2);
+	border-radius: 100%;
+	padding: 5px 10px;
+}
+.about-social a:hover {
+	background: rgb(246,246,246);
+}
 
 /* 标签云 */
 .tags-list {
@@ -1316,6 +1381,10 @@ iframe[src*="//player.bilibili.com/player.html"] {
 }
 /* > Pad and up */
 @media (min-width:768px) {
+	.alert {
+		min-width: 300px;
+	    max-width: 700px
+	}
 	.drawer-avatar img {
 		height: 220px;
 		width: 220px;
diff --git a/assets/js/comment.ajax.js b/assets/js/comment.ajax.js
new file mode 100644
index 00000000..44d770eb
--- /dev/null
+++ b/assets/js/comment.ajax.js
@@ -0,0 +1,109 @@
+/**
+ *  Ajax Comment
+ *  半成品，还有报错，所以没有引用
+ */
+var replyTo = '';
+var bindButton = function() {
+    //绑定“评论回复”和“取消回复”的事件
+    $(".comment-reply a").click(
+        function () {
+            replyTo = $(this).parent().parent().parent().parent().parent().parent().attr("id");
+        }
+    );
+    $(".cancel-comment-reply a").click(function () { replyTo = ''; });
+}
+function commentCounts() {
+    //显示在评论区的评论数加一
+    var counts = parseInt($(".comment-title").text());
+    $(".comment-title").html($(".comment-title").html().replace(/\d+/, counts + 1));
+};
+function beforeSendComment() {
+    //发送前的一些处理
+    $(".comment-submit button").text("提交中");
+}
+function afterSendComment(ok) {
+    //发送后的处理
+    //清空replyTo变量，以及结束过渡动画、重新绑定回复按钮等等
+    //ok作为一个评论或失败的标志
+ 
+    if (ok) {
+        $(".comment-textarea").val('');
+        replyTo = '';
+    }
+    bindButton();
+}
+//主体部分
+beforeSendComment();
+$("#comment-form").submit(function() {
+    //监听评论表单submit事件
+    var commentData = $(this).serializeArray(); //获取表单POST的数据
+    beforeSendComment();
+    $.ajax({
+        type: $(this).attr('method'),
+        url: $(this).attr('action'),
+        data: commentData,
+        error: function(e) {
+            //失败的处理
+            //这里比较随意，比如可以直接刷新页面
+            console.log('Ajax Comment Error');
+            window.location.realod();
+        },
+        success: function(data) {
+          if (!$('.comments', data).length) {
+            var msg = $('title').eq(0).text().trim().toLowerCase() === 'error' ? $('.container', data).eq(0).text() : '评论提交失败！';
+            alertSend(msg);
+            afterSendComment(false);
+            return false;
+          }
+        }
+    })
+    return false;
+});
+var newComment;
+/** 获取新评论的id */
+newCommentId = $(".comment-list", data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function (a, b) { return a - b }).pop();
+if(replyTo === '') {
+        if(!$('.comment-list').length) {
+            //检查是否已有评论
+            newComment  = $("#li-comment-" + newCommentId, data);
+            //没有的话需要先嵌入评论列表的结构
+            //具体结构需要参照评论的模板而定，参照下图
+            $('.comment-title').after('<div class="comment-container"><ol class="comment-list"></ol></div>');
+            //插入评论
+            $('.comment-list').first().prepend((newComment).addClass('animated fadeInUp'));
+        }
+        else if($('.prev').length) {
+            //这里是当前评论不在第一页的情况
+            //所以这里可以进行比如跳转到第一页的操作，当然也可以进行别的操作
+            $('.comment-pagenav ul li a').eq(1).click();
+        }
+        else {
+            //当前页面直接在最前面插入评论
+            newComment  = $("#li-comment-" + newCommentId, data);
+            $('.comment-list').first().prepend((newComment).addClass('animated fadeInUp'));
+        }
+        //页面滑动到评论列表头部
+        $('html,body').animate({scrollTop:$('.comment-title').offset().top - 100},1000);
+    }
+else {
+    //取数据
+    newComment = $("#li-comment-" + newCommentId, data);
+    //处理子级评论
+    if ($('#' + replyTo).find('.comment-children').length) {
+        //当前父评论已经有嵌套的结构
+        //直接插入新的评论
+        $('#' + replyTo + ' .comment-children .comment-list').first().prepend((newComment).addClass('animated fadeInUp'));
+        TypechoComment.cancelReply();
+    }
+    else {
+        //当前父评论没有嵌套的结构
+        //先构建嵌套的结构再进插入子评论
+        //插入的结构视模板具体情况而定
+        $('#' + replyTo).append('<div class="comment-children"><ol class="comment-list"></ol></div>');
+        $('#' + replyTo + ' .comment-children .comment-list').first().prepend((newComment).addClass('animated fadeInUp'));
+        TypechoComment.cancelReply();
+    }
+}
+commentCounts();
+afterSendComment(true);
+alertSend("评论提交成功！");
\ No newline at end of file
diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js
index 0ef02640..3cbce15d 100644
--- a/assets/js/miracles.min.js
+++ b/assets/js/miracles.min.js
@@ -285,6 +285,28 @@ function toggleDrawer() {
 	}
 }
 
+/**
+ *  Alert
+ */
+function alertSend(content) {
+	$(".alert-content").text(content);
+	$(".alert").removeClass("ready");
+}
+function alertClose() {
+	$(".alert").addClass("ready");
+}
+
+/**
+ *  Listen copy event
+ */
+$(document).ready(function() {  
+    $("body").bind({  
+        copy : function(){  
+          alertSend("复制成功！若使用请注明原作者及原地址！");
+        }
+    });  
+});   
+
 /**
  *  Load Live2D
  */
@@ -329,5 +351,4 @@ if(loadPjax = true) {
 	afterPjax();
 	panguLoad();
   });
-}
-
+}
\ No newline at end of file
diff --git a/includes/comments.php b/includes/comments.php
index 52915614..785f2d6b 100644
--- a/includes/comments.php
+++ b/includes/comments.php
@@ -118,4 +118,5 @@
     <h3 class="comment-closed-alert"><?php _e('<i class="iconfont icon-x"></i> 评论已关闭'); ?></h3>
     <?php endif; ?>
 		</div>
-	  </div>
\ No newline at end of file
+	  </div>
+	
\ No newline at end of file
diff --git a/includes/footer.php b/includes/footer.php
index 30469944..91f036d5 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -43,7 +43,7 @@
 	afterPjax = function() {<?php if($this->is('post') || $this->is('page')): ?>owoLoad();<?php endif; ?><?php $this->options->pjax_complete(); ?>}
 	<?php endif; ?></script>
 	<script src="<?php Utils::indexTheme('assets/js/miracles.min.js'); ?>"></script>
-	<script>LazyLoad();PrismLoad();<?php if($this->is('post') || $this->is('page')): ?>owoLoad();<?php endif; ?>panguLoad();<?php $this->options->jsEcho(); ?></script>
+	<script><?php if($this->options->news==!''): ?>alertSend('公告：<?php echo $this->options->news(); ?>');<?php endif; ?>LazyLoad();PrismLoad();<?php if($this->is('post') || $this->is('page')): ?>owoLoad();<?php endif; ?>panguLoad();<?php $this->options->jsEcho(); ?></script>
 	<?php $this->footer(); ?>
   </body>
 </html>
\ No newline at end of file
diff --git a/includes/head.php b/includes/head.php
index 988ba6f2..e32bef09 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -45,13 +45,13 @@
 	<?php $this->options->headerEcho(); ?>
 	<!-- css -->
 	<?php if($this->options->CDN && $this->options->CDN=1): ?>
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/css/prism.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/css/owo.min.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/css/normalize.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/css/fancybox.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/css/prism.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/css/miracles.min.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/css/dark.miracles.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/prism.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/owo.min.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/normalize.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/fancybox.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/prism.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/miracles.min.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/dark.miracles.css" />
 	<?php else: ?>
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/prism.css'); ?>" />
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/owo.min.css'); ?>" />
@@ -62,7 +62,7 @@
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/dark.miracles.css'); ?>" />
 	<?php endif; ?>
 	<!-- icon font -->
-	<link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_oo2f2wsibld.css" />
+	<link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_nczm02by8we.css" />
 	<!-- Google Fonts -->
 	<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Serif+SC:300&display=swap" rel="stylesheet">
 	<style>.body-dark .pio-action .pio-home{background-image: url(<?php Utils::indexTheme('images/icons/home.png'); ?>);}.body-dark .pio-action .pio-close{background-image: url(<?php Utils::indexTheme('images/icons/remove.png'); ?>);}.body-dark .pio-action .pio-skin{background-image: url(<?php Utils::indexTheme('images/icons/skin.png'); ?>);}.body-dark .pio-action .pio-info{background-image: url(<?php Utils::indexTheme('images/icons/info.png'); ?>);}.body-dark .pio-action .pio-night{background-image: url(<?php Utils::indexTheme('images/icons/night.png'); ?>);}@media (min-width:992px) {.search{background-image:url(<?php Utils::indexTheme('images/search.png'); ?>);}.login{background-image:url(<?php Utils::indexTheme('images/login.png'); ?>)}}.search {background-position: bottom right;background-repeat: no-repeat}.login {background-position: bottom left;background-repeat:no-repeat}<?php $this->options->cssEcho(); ?></style>
diff --git a/includes/header.php b/includes/header.php
index f1ebb6d5..e5035376 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,5 +1,6 @@
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
       <div class="mask"></div>
+	  <div class="alert ready"><p class="alert-content">错误！未定义的 alert 信息</p><button onclick="alertClose()" class="alert-close"><i class="iconfont icon-x"></i></button></div>
       <!-- 搜索 -->
       <div class="search ready">
 	    <button class="search-close ready" onclick="Search()"><i class="iconfont icon-x"></i></button>
diff --git a/index.php b/index.php
index c12e43f8..74707045 100644
--- a/index.php
+++ b/index.php
@@ -5,7 +5,7 @@
  * 
  * @package     Miracles
  * @author      Eltrac
- * @version     1.1.2
+ * @version     1.2.0
  * @link        https://guhub.cn
  */
 if (!defined('__TYPECHO_ROOT_DIR__')) exit;
diff --git a/libs/Options.php b/libs/Options.php
index e7c06b71..3c85edea 100644
--- a/libs/Options.php
+++ b/libs/Options.php
@@ -75,6 +75,10 @@ function themeConfig($form) {
 	/**
 	 *  设置项
 	 */
+	//首要设置项
+	$news = new Typecho_Widget_Helper_Form_Element_Text('news', NULL, NULL, _t('<h2>首要设置 First</h2>全站公告'), _t('输入公告内容，用户进入站点时自动弹出'));
+    $form->addInput($news);
+	
     //nav
 	$navStyle = new Typecho_Widget_Helper_Form_Element_Select('navStyle',array('0'=>'顶部导航栏','1'=>'左侧抽屉蓝'),'0','<h2>导航栏 Nav</h2>类型','选择导航栏的类型（若选择左侧抽屉蓝，则下一条设置失效）');
     $form->addInput($navStyle);
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 00000000..b96ff1fd
Binary files /dev/null and b/screenshot.png differ