左侧抽屉栏，可与顶部导航栏进行切换 / Bug fix

12 files changed, 304 insertions, 34 deletions

diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css
index ad48593..08420f6 100644
--- a/assets/css/miracles.min.css
+++ b/assets/css/miracles.min.css
@@ -32,7 +32,8 @@ body,html {
 	width: 100%;

 }

 body {

-	font-family: 'Noto Sans SC',sans-serif

+	font-family: 'Noto Sans SC',sans-serif;

+	transition: all 0.3s;

 }

 hr {

 	border: none;

@@ -114,6 +115,22 @@ hr {
 	color: #fff;

 }

 

+/* Large Mask */

+.mask {

+	position: fixed;

+	top: 0;

+	bottom: 0;

+	left: 0;

+	right: 0;

+	background: rgb(70,70,70,0);

+	z-index: -100;

+	transition: all 0.4s;

+}

+.mask-open {

+	background: rgb(70,70,70,0.7);

+	z-index: 25;

+}

+

 /* 导航栏 */

 .nav {

 	background: rgba(255,255,255,0.96);

@@ -194,14 +211,143 @@ hr {
 	background: rgb(230,230,230);

 	cursor: pointer

 }

+

+/* Drawer */

+.drawer {

+	background: rgb(246,246,246);

+	border-right: 1px solid #ddd;

+	position: fixed;

+	top: 0;

+	bottom: 0;

+	z-index: 30;

+	left: -150vh;

+	transition: all 0.8s;

+	box-shadow: 0 0 30px #646464;

+	-moz-box-shadow: 0 0 30px #646464;

+	-webkit-box-shadow: 0 0 30px #646464;

+	/* Mobile */

+	width: 360px;

+}

+.drawer-avatar {

+	margin-top: 50px;

+}

+.drawer-avatar img {

+	display: block;

+	margin: 0 auto;

+	border-radius: 100%;

+	/* Mobile */

+	width: 150px;

+	height: 150px;

+}

+.drawer-button {

+	position: fixed;

+	top: 10px;

+	left: 15px;

+	background: rgba(0,0,0,0);

+	border-radius: 100%;

+	border: none;

+	height: 40px;

+	width: 40px;

+	display: flex;

+	align-items: center;

+	justify-content: center;

+	color: #fff;

+	text-shadow: 0 1px 6px #bababa;

+	transform: scale(1.2);

+	transition: background 0.3s;

+	padding: 3px;

+    outline: none;	

+	transition: all 0.5s;

+}

+.drawer-button:hover {

+	cursor: pointer;

+	background: rgba(200,200,200,0.4);

+}

+.drawer-open .drawer {

+	left: 0;

+}

+.drawer-open .drawer-button {

+	left: 4px;

+	top: 4px;

+	color: rgb(80,80,80);

+	text-shadow: 0 0 0 #fff;

+}

+.drawer-open #live2dcanvas {

+	z-index: 0!important;

+}

+

+.drawer-search {

+	background: rgb(240,240,240);

+	padding: 10px 8px;

+	margin-top: 20px;

+}

+.drawer-search-form input,

+.drawer-search-form button {

+	color: gray;

+	border-radius: 2px;

+	border: 1px solid #ccc;

+	margin: 0;

+	padding: 7px 3px;

+}

+.drawer-search-form input {

+	width: 70%;

+	background: #fff;

+	border-top-right-radius: 0;

+	border-bottom-right-radius: 0;

+	margin-right: -5px;

+}

+.drawer-search-form button {

+	width: 28%;

+	border-top-left-radius: 0;

+	border-bottom-left-radius: 0;

+	background: #ddd;

+}

+.drawer-content {

+	margin-top: 10px;

+	overflow-y: auto;

+	height: 60vh;

+}

+.drawer-content a {

+	display: block;

+	text-align: center;

+	font-size: 21px;

+	padding: 14px 0;

+}

+.drawer-content a:hover {

+	background: rgb(240,240,240);

+}

+.drawer-main {

+	height: 87vh;

+}

+.drawer-footer {

+	background: rgb(253,253,253);

+	padding: 8px 0;

+	text-align: center;

+	height: 13vh;

+}

+.drawer-icon {

+	height: 6vh;

+	width: 6vh;

+	border-radius: 100%;

+	background: rgb(246,246,246);

+	transition: background: 0.2s;

+	margin: 0 3px;

+	border: none;

+	outline: none;

+}

+.drawer-icon:hover {

+	background: rgb(240,240,240);

+}

+

 /* 首页大图 */

 .index-banner {

 	margin-top: -21px;

 	width: 100%;

 	text-align: center

 }

-.dark-cover {

-	/* 即 Mask */

+.dark-cover,

+.banner-mask {

+	/* .dark-cover 是之前版本遮罩的类名 */

 	width: 100%;

 	height: 100%;

 	background: rgba(30,30,30,.25);

@@ -248,7 +394,7 @@ hr {
 	margin-top: 30px;

 	transition: color .2s;

 	overflow: hidden;

-	height: 36px;

+	height: 40px;

 	white-space: nowrap;

 	text-overflow: ellipsis

 }

@@ -528,6 +674,7 @@ hr {
 /* 友链 */

 .links-box {

 	margin: 10px;

+	margin-left: 0;

 	margin-top: 30px

 }

 .links-box h2 {

@@ -1038,7 +1185,7 @@ hr {
 /* Options Pannel */

 .options {

 	transition: all 0.3s;

-	background: rgb(254,254,254,0.96);

+	background: #fff;

 	border-radius: 2px;

 	box-shadow: 0 1px 8px #bababa;

 	-moz-box-shadow: 0 1px 8px #bababa;

@@ -1151,6 +1298,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
 /* Live2D */

 #live2dcanvas {

 	display: none;

+	transition: all 0.3s;

 }

 /* 响应式相关 */

 .large-screen {

@@ -1159,8 +1307,23 @@ iframe[src*="//player.bilibili.com/player.html"] {
 .small-screen {

 	display: block

 }

+

+/* Mobile phone */

+@media (max-width:320) {

+	.drawer {

+		width: 100vw;

+	}

+}

 /* > Pad and up */

 @media (min-width:768px) {

+	.drawer-avatar img {

+		height: 220px;

+		width: 220px;

+	}

+	.drawer {

+		width: 360px;

+	}

+	

 	.fixed-button {

 		height: 60px;

 		width: 60px;

@@ -1434,4 +1597,17 @@ iframe[src*="//player.bilibili.com/player.html"] {
 	#live2dcanvas {

 		transform: scale(1);

 	}

+}

+/* 有 Drawer 时的设置面板 */

+.options-with-drawer {

+	background: rgb(246,246,246);

+	box-shadow: 0 0 0 #fff;

+	-moz-box-shadow: 0 0 0 #fff;

+	-webkit-box-shadow: 0 0 0 #fff;

+	width: 360px!important;

+	height: 210px!important;

+	top: auto!important;

+	right: auto!important;

+	bottom: 10vh!important;

+	z-index: 40!important;

 }
\ No newline at end of file
diff --git a/assets/css/prism.css b/assets/css/prism.css
index 1816e42..8611bc8 100644
--- a/assets/css/prism.css
+++ b/assets/css/prism.css
@@ -2,7 +2,7 @@ code[class*=language-],pre[class*=language-] {
 	color: #ccc;

 	background: rgba(0,0,0,0)!important;

 	font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;

-	font-size: 15px;

+	font-size: 16px;

 	text-align: left;

 	white-space: pre;

 	word-spacing: normal;

@@ -24,6 +24,7 @@ pre[class*=language-] {
 	margin: .5em 0;

 	overflow: auto;

 	margin: 20px -26px;

+	max-height: 85vh;

 }

 @media (min-width:768px) {

 	pre[class*=language-] {

@@ -118,7 +119,7 @@ pre[class*=language-].line-numbers>code {
 	position: absolute;

 	pointer-events: none;

 	top: 0;

-	font-size: 100%;

+	font-size: 16px;

 	left: -3.8em;

 	width: 3em;

 	letter-spacing: -1px;

diff --git a/assets/css/setting.miracles.css b/assets/css/setting.miracles.css
index 7ece2f6..2cb10c5 100644
--- a/assets/css/setting.miracles.css
+++ b/assets/css/setting.miracles.css
@@ -10,13 +10,11 @@
 :root {

 	--theme-color: #4D90FE;

 }

-

 body {

 	width: 100%;

 	background: rgb(252,252,252);

 	font-family: 'Noto Sans SC',sans-serif

 }

-

 hr {

 	border: none;

 	border-bottom: 1px solid rgb(220,220,220);

@@ -87,7 +85,7 @@ hr {
 	border: none;

 }

 [action="?MiraclesBackup"] {

-	margin-top: -30px;

+	margin-top: -10px;

 }

 

 /* Para */

@@ -104,7 +102,7 @@ iframe.miracles-news {
 	border: none;

 	height: 60px;

 	margin: 0 -8px;

-	margin-top: -10px;

+	margin-top: -5px;

 }

 

 /* 滚动条 */

diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js
index 1e0b01b..0ef0264 100644
--- a/assets/js/miracles.min.js
+++ b/assets/js/miracles.min.js
@@ -155,22 +155,55 @@ function panguLoad() {
 }

 

 /**

+ *  Prevent Scroll

+ */

+function bodyScroll(event){  

+    event.preventDefault();  

+} 

+function banScroll() {

+	document.body.addEventListener('touchmove',bodyScroll,false);  

+    $('body').css({'position':'fixed',"width":"100%"});

+}

+function allowScroll() {

+	document.body.removeEventListener('touchmove',bodyScroll,false);   

+    $("body").css({"position":"initial","height":"auto"});   

+}

+

+/**

  *  Open pannel

  */

 //Search

 function Search() {

 	$(".search").toggleClass("ready");

 	$(".search-close").toggleClass("ready");

+	//Ban or allow scroll

+	if($(".search").hasClass("ready")) {

+		allowScroll();

+	}else{

+		banScroll();

+	}

 }

 //mobileMenu

 function toggleMobileMenu() {

 	$(".mobile-menu").toggleClass("ready");

 	$(".mobile-menu-close").toggleClass("ready");

+	//Ban or allow scroll

+	if($(".mobile-menu").hasClass("ready")) {

+		allowScroll();

+	}else{

+		banScroll();

+	}

 }

 //Login

 function Login() {

 	$(".login").toggleClass("ready");

 	$(".login-close").toggleClass("ready");

+	//Ban or allow scroll

+	if($(".login").hasClass("ready")) {

+		allowScroll();

+	}else{

+		banScroll();

+	}

 }

 

 /**

@@ -239,6 +272,20 @@ function toggleOptions() {
   }

 

 /**

+ *  Drawer

+ */

+function toggleDrawer() {

+	$("body").toggleClass("drawer-open");

+	$(".mask").toggleClass("mask-open");

+	//Ban or allow scroll

+	if($("body").hasClass("drawer-open")) {

+		banScroll();

+	}else{

+		allowScroll();

+	}

+}

+

+/**

  *  Load Live2D

  */

 var config = {

diff --git a/functions.php b/functions.php
index 6c1dc7d..dd70365 100644
--- a/functions.php
+++ b/functions.php
@@ -55,6 +55,6 @@ function themeFields(Typecho_Widget_Helper_Layout $layout) {
  * 获取主题版本号
  */
 function themeVersion() {
- $info = Typecho_Plugin::parseInfo(__DIR__ . '/index.php');
- return $info['version'];
+    $info = Typecho_Plugin::parseInfo(__DIR__ . '/index.php');
+    return $info['version'];
 }
diff --git a/includes/footer.php b/includes/footer.php
index 52ea3e4..3046994 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -14,15 +14,15 @@
 	</div>
 	<!-- JavaScript -->
 	<?php if($this->options->CDN && $this->options->CDN=1): ?>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/jquery.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/pjax.jquery.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/jquery.fancybox.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/jquery.lazyload.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/nprogress.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/OwO.min.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/prism.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/pangu.js"></script>
-	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/l2dwidget.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/jquery.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/pjax.jquery.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/jquery.fancybox.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/jquery.lazyload.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/nprogress.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/OwO.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/prism.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/pangu.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/js/l2dwidget.min.js"></script>
 	<?php else: ?>
     <script src="<?php Utils::indexTheme('assets/js/jquery.js'); ?>"></script>
 	<script src="<?php Utils::indexTheme('assets/js/pjax.jquery.js'); ?>"></script>
diff --git a/includes/header.php b/includes/header.php
index 117f9ae..f1ebb6d 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,5 +1,5 @@
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
-
+      <div class="mask"></div>
       <!-- 搜索 -->
       <div class="search ready">
 	    <button class="search-close ready" onclick="Search()"><i class="iconfont icon-x"></i></button>
@@ -42,7 +42,7 @@
 		</div>
 	  </div>
 	  <!-- 前台设置 -->
-	  <div class="options ready">
+	  <div class="options ready<?php if($this->options->navStyle==1): ?> options-with-drawer<?php endif; ?>"<?php if($this->options->navStyle==1): ?> onclick="toggleOptions()"<?php endif; ?>>
 	    <!-- 字体设置 -->
 	    <div class="options-content">
 	      <div class="options-family container-fluid">
@@ -96,6 +96,7 @@
 		  </div>
 		</div>
 	  </div>
+	  <?php if($this->options->navStyle==0): ?>
 	  <!-- 导航 -->
 	  <!-- -大屏幕导航 -->
       <nav class="large-screen nav<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>">
@@ -122,7 +123,34 @@
 		  <a onclick="toggleMobileMenu()" style="float:right">MENU <i class="iconfont icon-list"></i></a>
 		</div>
 	  </nav>
-	  
+	  <?php elseif($this->options->navStyle==1): ?>
+	  <!-- 抽屉栏 -->
+	  <nav class="drawer">
+	    <div class="drawer-main">
+	      <button class="drawer-button" onclick="toggleDrawer()"><i class="iconfont icon-list"></i></button>
+	      <div class="drawer-avatar">
+		    <?php echo $this->author->gravatar(500); ?>
+		  </div>
+		  <div class="drawer-search">
+		    <form method="post" action="">
+              <div class="drawer-search-form">
+		        <input type="text" name="s" class="text" size="32" /> 
+			    <button type="submit" class="submit">搜索</button>
+		      </div>
+            </form>
+		  </div>
+		  <div class="drawer-content">
+		    <a href="<?php $this->options->SiteUrl(); ?>" onclick="toggleDrawer()">首页</a>
+		    <?php $this->widget('Widget_Contents_Page_List')
+            ->parse('<a href="{permalink}" onclick="toggleDrawer()">{title}</a>'); ?>
+		  </div>
+		</div>
+		<div class="drawer-footer">
+		  <button class="drawer-icon" onclick="Login();toggleDrawer()"><i class="iconfont icon-user"></i></button>
+          <button class="drawer-icon" onclick="toggleOptions()"><i class="iconfont icon-settings"></i></button>
+		</div>
+	  </nav>
+	  <?php endif; ?>
 	  <div id="pjax-container"><!-- 开始 pjax-container -->
 	  <header>
 	    <?php if($this->is('post') || $this->is('page')): ?>
@@ -130,7 +158,7 @@
 		<?php else: ?>
 	    <div class="index-banner" style="background:url('<?php $this->options->bannerUrl(); ?>') no-repeat;height:<?php $this->options->bannerHeight(); ?>vh;background-size:cover;">
 		<?php endif; ?>
-		  <div class="dark-cover">
+		  <div class="banner-mask">
 		    <div class="main-container container">
 			  <div class="banner-content">
 			    <?php if($this->is('index')): ?>
diff --git a/libs/Contents.php b/libs/Contents.php
index d08629f..40a27c6 100644
--- a/libs/Contents.php
+++ b/libs/Contents.php
@@ -36,7 +36,7 @@ class Contents
             $text = preg_replace($reg,$rp,$text);
 		    //解析友链项目
 	        $reg = '/\[(.*?)\]\{(.*?)\}\((.*?)\)/s';
-            $rp = '<div class="col-lg-2 col-4 col-md-3 links-container">
+            $rp = '<div class="col-lg-2 col-6 col-md-3 links-container">
 		    <a href="${2}" target="_blank" class="links-link">
 			  <div class="links-item">
 			    <div class="links-img" style="background:url(\'${3}\');width: 100%;padding-top: 100%;background-repeat: no-repeat;background-size: cover;"></div>
diff --git a/libs/Options.php b/libs/Options.php
index 6570018..e7c06b7 100644
--- a/libs/Options.php
+++ b/libs/Options.php
@@ -76,7 +76,9 @@ function themeConfig($form) {
 	 *  设置项

 	 */

     //nav

-	$nav_position = new Typecho_Widget_Helper_Form_Element_Select('nav_position',array('0'=>'不固定','1'=>'固定'),'0','<h2>导航栏 Nav</h2>是否固定','固定后，导航栏不会随滚动条滚动而移动在屏幕上的位置<hr>');

+	$navStyle = new Typecho_Widget_Helper_Form_Element_Select('navStyle',array('0'=>'顶部导航栏','1'=>'左侧抽屉蓝'),'0','<h2>导航栏 Nav</h2>类型','选择导航栏的类型（若选择左侧抽屉蓝，则下一条设置失效）');

+    $form->addInput($navStyle);

+	$nav_position = new Typecho_Widget_Helper_Form_Element_Select('nav_position',array('0'=>'不固定','1'=>'固定'),'0','是否固定','固定后，导航栏不会随滚动条滚动而移动在屏幕上的位置<hr>');

     $form->addInput($nav_position);

 	

 	//index-banner

diff --git a/libs/Utils.php b/libs/Utils.php
index 9e7943e..902b7d4 100644
--- a/libs/Utils.php
+++ b/libs/Utils.php
@@ -85,12 +85,17 @@ class Utils
 
     /**
      * 判定内容是否过时
-     * $timeout：过期时间，单位为天
+     * 
+     * @return array
      */
-    public static function isOutdated($archive, $timeout)
+    public static function isOutdated($archive)
     {
         date_default_timezone_set("Asia/Shanghai");
-        return round((time()- $archive->created) / 3600 / 24) > $timeout;
+        $created = round((time()- $archive->created) / 3600 / 24);
+        $updated = round((time()- $archive->modified) / 3600 / 24);
+        return array("is" => $created > 90,
+                    "created" => $created,
+                    "updated" => $updated);
     }
 
     /**
diff --git a/page.php b/page.php
index fc724fe..4023e47 100644
--- a/page.php
+++ b/page.php
@@ -6,6 +6,14 @@ $this->need('includes/header.php');
 	  <div class="post-body">
 	    <!-- 页面内容 -->
 	    <div class="post-content page-content">
+		  <?php $postCheck = Utils::isOutdated($this); if($postCheck["is"] && $this->is('post')): ?>
+            <div class="tip red">
+			  <div class="container-fluid"><div class="row">
+			    <div class="col-1 tip-icon"><i class="iconfont icon-info"></i></div>
+				<div class="col-11 tip-content">页面编写于 <?php echo $postCheck["created"]; ?> 天前，最后修改于 <?php echo $postCheck["updated"]; ?> 天前，其中某些信息可能已经过时。</div>
+			  </div></div>
+			</div>
+          <?php endif; ?>
 		  <?php $this->content(); ?>
 		</div>
 	  </div>
diff --git a/post.php b/post.php
index f0a4fb9..4d0da29 100644
--- a/post.php
+++ b/post.php
@@ -6,9 +6,14 @@ $this->need('includes/header.php');
 	  <div class="post-body">
 	    <!-- 文章内容 -->
 	    <div class="post-content">
-		  <?php $time = $this->date();
-		  
-		  ?>
+		  <?php $postCheck = Utils::isOutdated($this); if($postCheck["is"] && $this->is('post')): ?>
+            <div class="tip red">
+			  <div class="container-fluid"><div class="row">
+			    <div class="col-1 tip-icon"><i class="iconfont icon-info"></i></div>
+				<div class="col-11 tip-content">本文编写于 <?php echo $postCheck["created"]; ?> 天前，最后修改于 <?php echo $postCheck["updated"]; ?> 天前，其中某些信息可能已经过时。</div>
+			  </div></div>
+			</div>
+          <?php endif; ?>
 		  <?php $this->content(); ?>
 		  <br />
 		  <!-- 文章页脚 -->