添加网站前台搜索文章功能

src/common/config/route.js

@@ -29,4 +29,4 @@ module.exports = [
     ["jobs", "home/index/jobs"],
     [/^jobs\/(\d+)$/,"home/index/jobs?page=:1&pagesize=10"],
     [/^category\/(\d+)\/(\d+)$/, "home/index/category?id=:1&page=:2&pagesize=10"]
-]
+]

view/home/inc/header.html

@@ -2,11 +2,11 @@
     <link rel="shortcut icon" href="<%=_web.url%>static/common/images/common/favicon.ico" type="image/x-icon">
     <link href="<%=_web.url%>static/src/css/business/index/layout.css" rel="stylesheet">
     <link href="<%=_web.url%>static/src/css/business/index/index.css" rel="stylesheet">
+    <link href="<%=_web.url%>static/src/css/business/common/font-awesome.min.css" rel="stylesheet">
     <link rel="stylesheet" media="screen and (max-width: 600px)" href="<%=_web.url%>static/src/css/business/index/smallscreen.css" />
     <!--[if lt IE 9]>
       <script src="<%=_web.url%>static/src/js/widget/html5/html5.min.js"></script>
     <![endif]-->
     <script>
         var G_csrf="<%=csrf%>";
     </script>
-

view/home/inc/menu.html

@@ -9,12 +9,18 @@ <h1>Liblog <span style="font-size: 12px">v1.0</span></h1>
                   <a href="<%=item.url%>"> <%=item.menuname%></a>
               </li>
            <%})%>
-            <li class="navto-search"><a href="javascript:;" class="search-show active"><i class="fa fa-search"></i></a></li>
+            <li class="navto-search">
+                <a href="javascript:;" class="search-show active">
+                  <i class="fa fa-search"></i>
+                </a>
+            </li>
         </ul>
         <div class="topbar">
             <ul class="site-nav topmenu">
                 <li style="display: block;">
-                    <a class="red" href="http://livisky.github.io/" target="_blank"><i class="glyphicon glyphicon-thumbs-up"></i>推荐:Liblog v1.0</a>
+                    <a class="red" href="http://livisky.github.io/" target="_blank">
+                      <i class="glyphicon glyphicon-thumbs-up"></i>推荐:Liblog v1.0
+                    </a>
                 </li>
                 <li>
                     <a href="/links.html">友情链接</a>
@@ -27,6 +33,12 @@ <h1>Liblog <span style="font-size: 12px">v1.0</span></h1>
                 </li>
             </ul>
         </div>
-        <i class="fa fa-bars m-icon-nav"></i>
     </div>
 </header>
+<div class="site-search">
+<div class="container">
+	<form method="get" class="site-search-form" action="/search?keyword=">
+		<input class="search-input" name="keyword" type="text" placeholder="输入关键字搜索"><button class="search-btn" type="submit"><i class="fa fa-search"></i></button>
+	</form>
+</div>
+</div>

www/static/src/css/business/index/layout.css

@@ -10,7 +10,7 @@ ul {
 	padding: 0px;
 }
 a {
-	
+
 }
 a:link {
 	color: rgb(102, 102, 102); text-decoration: none;
@@ -28,7 +28,7 @@ a:hover {
 	float: right;
 }
 .l_box {
-	background: rgb(255, 255, 255); padding: 10px 0px 10px 0px; border-radius: 6px; 
+	background: rgb(255, 255, 255); padding: 10px 0px 10px 0px; border-radius: 6px;
     width: 74%;
 }
 .r_box {
@@ -258,7 +258,7 @@ article.mainbd {
 	float: none;
 }
 .site-nav .sub-menu a:hover {
-	
+
 }
 .site-nav li:hover > .sub-menu {
 	display: block;
@@ -366,7 +366,7 @@ article.mainbd {
 	margin: 0px 0px 18px 46px;
 }
 .article-content ul {
-	
+
 }
 .article-content ol {
 	list-style: decimal;
@@ -452,4 +452,15 @@ article.mainbd {
 	right: 20px;
 	bottom: 200px;
 	display: none;
-}
+}
+.site-search{background-color: #fff;background-color: rgba(255,255,255,0.95);position: absolute;top:0;left:0;right:0;height: 100px;z-index: 1;}
+.site-search.active{top: 108px;}
+.site-search-form{padding: 25px 10%;overflow: hidden;}
+.search-input{float:left;color:#999;border:solid 1px #ddd;width:80%;height: 48px;padding: 0px 12px;border-right: none;font-size: 16px;border-radius: 2px 0 0 2px;outline: none}
+.search-input:focus{border-color: #45B6F7;}
+.search-btn{color:#fff;border: none;background: #45B6F7;height: 50px;font-size: 16px;padding: 0 12px;border-radius: 0 2px 2px 0;width: 10%;}
+.search-btn:hover, .search-btn:focus{color:#fff;opacity: 0.85;filter:alpha(opacity=85);}
+.search-btn .fa{font-size: 16px;width: 16px;}
+.site-search-form a{margin-left: 20px;color: #999;}
+.site-search-form a:hover{color: #45B6F7;}
+.search .site-search{position: relative;margin: -15px 0 15px;border-bottom: 1px solid #eaeaea;}

www/static/src/css/business/index/smallscreen.css

@@ -19,4 +19,5 @@ article.mainbd{width: 100%;}
 .author.second{float:left;}
 .topnews.recom .blogs ul{width: 98%}
 .mainbd .left{display: none}
-.right.markdown-body{width: 100%;max-width: 100%;margin-left: 0px;line-height: 30px;}
+.right.markdown-body{width: 100%;max-width: 100%;margin-left: 0px;line-height: 30px;}
+.navto-search{display: none}

www/static/src/js/business/pagecommon/footer.js

@@ -8,4 +8,9 @@ $(window).scroll(function() {
         $('#back-top').fadeOut();
     }
 });
-$("#back-top").on("click",function(){$("html,body").animate({scrollTop:"0"})})
+$("#back-top").on("click",function(){$("html,body").animate({scrollTop:"0"})})
+//搜素
+$(".search-show").on('click',function(){
+    $(".site-search").toggleClass('active')
+    $(this).find(".fa-search").toggleClass('fa-remove');
+})

更新日志.md

@@ -0,0 +1,13 @@
+### Liblog更新日志：
+#### 2016/7/1
+>添加文章列表页添加文章搜索及标记筛选功能
+
+#### 2016/7/2
+>完善后台畅言评论设置及统计代码设置
+
+#### 2016/7/4
+>添加网站前台导航菜单管理功能
+>添加网站前台隐藏/显示某个标签的功能
+
+#### 2016/7/5
+>添加网站前台搜索文章功能