移动端与电脑端导航分离、新封面

3 files changed, 40 insertions, 39 deletions

diff --git a/includes/footer.php b/includes/footer.php
index 82d527a..8017818 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -41,48 +41,22 @@
         pres[i].className  = 'line-numbers';}
       Prism.highlightAll(true,null);}
 	  $('form#login-form').addClass('need-refresh');
-	  var OwO_demo = new OwO({
-        logo: 'OωO表情',
-        container: document.getElementsByClassName('OwO')[0],
-        target: document.getElementsByClassName('OwO-textarea')[0],
-        api: '<?php Utils::indexTheme('assets/OwO.json'); ?>',
-        position: 'down',
-        width: '400px',
-        maxHeight: '250px'
-      });
-	  jQuery(function() {          
-          jQuery("img").lazyload({threshold: 200,effect: "fadeIn"});
-      });
+	  var OwO_demo = new OwO({logo: 'OωO表情',container: document.getElementsByClassName('OwO')[0],target: document.getElementsByClassName('OwO-textarea')[0],api: '<?php Utils::indexTheme('assets/OwO.json'); ?>',position: 'down',width: '400px',maxHeight: '250px'});
+	  jQuery(function() {jQuery("img").lazyload({threshold: 200,effect: "fadeIn"});});
     });
 	//LazyLoad
-	jQuery(function() {          
-        jQuery("img").lazyload({threshold: 200,effect: "fadeIn"});
-    });
+	jQuery(function() {jQuery("img").lazyload({threshold: 200,effect: "fadeIn"});});
 	//解决刷新后不显示行号的问题
     var pres = document.getElementsByTagName('pre');
-    for (var i = 0; i < pres.length; i++){
-      if (pres[i].getElementsByTagName('code').length > 0)
-      pres[i].className  = 'line-numbers';
-    }
+    for (var i = 0; i < pres.length; i++){if (pres[i].getElementsByTagName('code').length > 0)pres[i].className  = 'line-numbers';}
 	//Search
-    function Search() {
-	  $(".search").toggleClass("ready");
-	  $(".search-close").toggleClass("ready");
-    }
+    function Search() {$(".search").toggleClass("ready");$(".search-close").toggleClass("ready");}
+    //mobileMenu
+	function toggleMobileMenu() {$(".mobile-menu").toggleClass("ready");$(".mobile-menu-close").toggleClass("ready");}
 	//Login
-    function Login() {
-	  $(".login").toggleClass("ready");
-	  $(".login-close").toggleClass("ready");
-    }
-	var OwO_demo = new OwO({
-      logo: 'OωO表情',
-      container: document.getElementsByClassName('OwO')[0],
-      target: document.getElementsByClassName('OwO-textarea')[0],
-      api: '<?php Utils::indexTheme('assets/OwO.json'); ?>',
-      position: 'down',
-      width: '400px',
-      maxHeight: '250px'
-    });</script>
+    function Login() {$(".login").toggleClass("ready");$(".login-close").toggleClass("ready");}
+	//OwO
+	var OwO_demo = new OwO({logo: 'OωO表情',container: document.getElementsByClassName('OwO')[0],target: document.getElementsByClassName('OwO-textarea')[0],api: '<?php Utils::indexTheme('assets/OwO.json'); ?>',position: 'down',width: '400px',maxHeight: '250px'});
 	</script>
     <?php $this->footer(); ?>
 	
diff --git a/includes/head.php b/includes/head.php
index 9367c0c..116b8ff 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -46,13 +46,13 @@ if (isset($_POST['action'])) {
 	<?php $this->options->headerEcho(); ?>
 	<!-- css -->
     <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/normalize.css'); ?>" />
-    <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/miracles.min.css'); ?>" />
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/nprogress.css'); ?>" />
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/prism.css'); ?>" />
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/owo.min.css'); ?>" />
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/fancybox.css'); ?>" />
+	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/miracles.min.css'); ?>" />
 	<!-- icon font -->
-	<link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_8emw6f3zka.css" />
+	<link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_hilot65sdef.css" />
 	<!-- Google Fonts -->
 	<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Serif+SC:300&display=swap" rel="stylesheet">
 	
diff --git a/includes/header.php b/includes/header.php
index abc57ca..c43b4dd 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,4 +1,5 @@
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+      <!-- 搜索 -->
       <div class="search ready">
 	    <button class="search-close ready" onclick="Search()"><i class="iconfont icon-x"></i></button>
 	    <form method="post" action="">
@@ -8,6 +9,7 @@
 		  </div>
         </form>
 	  </div>
+	  <!-- 登录面板 -->
 	  <div class="login ready">
 	    <button class="login-close ready" onclick="Login()"><i class="iconfont icon-x"></i></button>
 		<?php if($this->user->hasLogin()): ?>
@@ -26,7 +28,22 @@
         </form>
 		<?php endif; ?>
 	  </div>
-      <nav class="nav<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>">
+      <!-- 移动端导航面板 -->
+	  <div class="mobile-menu ready">
+	    <button class="mobile-menu-close ready" onclick="toggleMobileMenu()"><i class="iconfont icon-x"></i></button>
+		<h2 class="mobile-menu-title">页面导航</h2>
+		<div class="mobile-menu-pagelist"><div class="container-fluid"><div class="row">
+		  <?php $this->widget('Widget_Contents_Page_List')
+          ->parse('<div class="col-6"><a href="{permalink}">{title}</a></div>'); ?>
+		</div></div></div>
+		<div class="mobile-menu-footer">
+		  <p>&copy; <?php echo date('Y'); ?> <a href="<?php $this->options->SiteUrl(); ?>"><?php $this->options->title(); ?></a> | Theme <a href="https://github.com/BigCoke233/miracles">Miracles</a></p>
+		</div>
+	  </div>
+	  
+	  <!-- 导航 -->
+	  <!-- > 大屏幕导航 -->
+      <nav class="large-screen nav<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>">
 	    <div class="container">
 		  <p class="nav-content">
 		    <a href="<?php $this->options->SiteUrl(); ?>" class="nav-title"><?php $this->options->title(); ?></a>
@@ -39,6 +56,16 @@
 		  <button class="nav-icon-button login-button" onclick="Login()"><i class="iconfont icon-user"></i></button>
 		</div>
 	  </nav>
+	  <!--> 小屏幕导航 -->
+	  <nav class="small-screen nav nav-mobile<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>">
+        <div class="nav-mobile-content">
+		  <a href="<?php $this->options->SiteUrl(); ?>" style="float:left"><i class="iconfont icon-xuanzhongshangcheng"></i></a>
+		  <a onclick="Search()" style="float:left"><i class="iconfont icon-chaxun"></i></a>
+		  <a onclick="Login()" style="float:left"><i class="iconfont icon-user"></i></a>
+		  <a onclick="toggleMobileMenu()" style="float:right">MENU <i class="iconfont icon-list"></i></a>
+		</div>
+	  </nav>
+	  
 	  <div id="pjax-container">
 	  <header>
 	    <?php if($this->is('post') || $this->is('page')): ?>