样式优化

package.json

@@ -55,7 +55,7 @@
   "devDependencies": {
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.1.6",
-    "gulp": "^4.0.0",
+    "gulp": "^3.9.1",
     "gulp-babel": "^8.0.0",
     "gulp-clean-css": "^3.10.0",
     "gulp-eslint": "^5.0.0",

public/src/css/site.css

@@ -2,8 +2,18 @@
     height: 100%;
 }
 
+html, body {
+    padding: 0;
+    margin: 0 auto;
+    tap-highlight-color: rgba(0, 0, 0, 0);
+    focus-ring-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-focus-ring-color: rgba(0, 0, 0, 0);
+}
+
 body {
-    font-family: 微软雅黑;
+    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
+    font-size: 14px;
 }
 
 body.mCustomScrollbar .mCSB_scrollTools .mCSB_draggerContainer {
@@ -28,7 +38,8 @@ label {
 }
 
 a {
-    color: #585f69;
+    color: #444;
+    transition: color .3s;
 }
 
 a:hover, a:focus {
@@ -141,19 +152,42 @@ blockquote {
     opacity: 1;
 }
 
-.navbar-default .navbar-nav > .active:nth-child(1) a{
+.nav-line {
+    position: absolute;
+    height: 3px;
+    border-radius: 5px;
+    bottom: 0;
+    left: 37px;
+    width: 30px;
+    display: none;
+}
+
+.navbar-default .navbar-nav .nav-line {
+    display: block;
+}
+
+.navbar-default .navbar-nav .active.blog-nav a {
     color: #f60;
-    border-color: #f60;
 }
 
-.navbar-default .navbar-nav > .active:nth-child(2) a{
+.navbar-default .navbar-nav .active.blog-nav .nav-line {
+    background: rgba(255, 102, 0, 0.8);
+}
+
+.navbar-default .navbar-nav .active.guestbook-nav a {
     color: #d243ff;
-    border-color: #d243ff;
 }
 
-.navbar-default .navbar-nav > .active:nth-child(3) a{
+.navbar-default .navbar-nav .active.guestbook-nav .nav-line {
+    background: rgba(210, 67, 255, 0.8);
+}
+
+.navbar-default .navbar-nav .active.about-nav a {
     color: #01b7ee;
-    border-color: #01b7ee;
+}
+
+.navbar-default .navbar-nav .active.about-nav .nav-line {
+    background: rgba(1, 183, 238, 0.8);
 }
 
 .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
@@ -235,17 +269,28 @@ blockquote {
 }
 
 .category-list .nav li a {
-    padding: 14px 20px 14px 25px;
     border-bottom: 1px solid transparent;
     border-top: 1px solid transparent;
     font-size: 15px;
+    height: 50px;
+    position: relative;
+    display: flex;
+    align-items: center;
 }
 
 .category-list .nav li a img {
     width: 25px;
     height: 25px;
-    margin-right: 4px;
-    margin-top: -3px;
+    position: absolute;
+}
+
+.category-list .nav li a span {
+    padding-left: 28px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
 }
 
 .nav > li > a:hover, .nav > li > a:focus {
@@ -882,6 +927,13 @@ body.dragging, body.dragging * {
 
 .post-modal .modal-header h4, .blog-item h4 a {
     line-height: 1.3;
+    max-height: 47px;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
 }
 
 .post-modal .modal-header h4 {
@@ -1461,4 +1513,9 @@ img.wechat-img {
 
 .fa {
     position: relative;
+}
+
+#filterForm .dropdown-toggle {
+    width: 71px;
+    height: 34px;
 }

public/src/js/index.js

@@ -194,9 +194,12 @@ function resetModal() {
     $("#label-foot").empty();
 }
 
+var lastKeyword = '';
 function searchPost() {
     var inputEl = $('#Keyword');
-    if (!inputEl.val()) {
+
+    // 如果上一次搜索时输入了关键字，这次搜索没有关键字，依然执行搜索，否则用户就无法清除关键字筛选了
+    if (!lastKeyword && !inputEl.val()) {
         inputEl.focus();
         return;
     }
@@ -208,6 +211,7 @@ function searchPost() {
     begin = new Date();
     $("#load-list").show();
     $("#PageIndex").val(1);
+    lastKeyword = inputEl.val();
     requestData();
 }
 

views/shared/layout.pug

@@ -40,19 +40,22 @@ html(lang='zh-CN')
                         span=settings.SiteName
                 .navbar-collapse.collapse
                     ul.nav.navbar-nav.my-nav-pills.navbar-right
-                        li
+                        li.blog-nav
                             a(href='/blog')
                                 i.fa.fa-pen-nib.fa-fw
                                 |  #{__("layout.blog")}
+                            .nav-line.animated.fadeInLeft
                         if(settings.ShowGuestbook === 'true')
-                            li
+                            li.guestbook-nav
                                 a(href='/guestbook')
                                     i.fa.fa-comment-dots.fa-fw
                                     |  #{__("layout.message")}
-                        li
+                                .nav-line.animated.fadeInLeft
+                        li.about-nav
                             a(href='/about')
                                 i.fa.fa-user.fa-fw
                                 |  #{__("layout.about")}
+                            .nav-line.animated.fadeInLeft
                         li
                             a.locale-link(href=`/locale/${__("lang-code")}`)
                                 i.fa.fa-language.fa-fw