搜索框改造完毕

_config.yml

@@ -64,6 +64,12 @@ archive_generator:
   daily: false
   order_by: -date
 
+tag_generator:
+  per_page: 20
+
+category_generator:
+  per_page: 20
+
 # Category & Tag
 default_category: uncategorized
 category_map:

themes/yilia/layout/_partial/tools.ejs

@@ -23,9 +23,15 @@
   <div class="tools-wrap">
     <%if(hasInnerArchive){%>
     	<section class="tools-section tools-section-all" v-show="innerArchive">
-        <div class="search-wrap">
-          <input class="search-ipt" v-model="search" type="text" placeholder="<%=__('search') %>…">
-          <i class="icon" :class="search?'icon-close':'icon-search'" @click="clearChose"></i>
+        <div class="search-wrap" @click="$refs.searchIpt.focus()">
+          <span :class="'search-item'" v-for="(searchItem,index) in searchItems" :key="index">
+            <i class="icon icon-book" v-if="searchItem.type === 'category'"></i>
+            <i class="icon icon-price-tags" v-if="searchItem.type === 'tag'"></i>
+            {{searchItem.query}}
+            <i class="icon icon-close" @click="searchItems.splice(index,1)"></i>
+          </span>
+          <input class="search-ipt" ref="searchIpt" v-model="search" @blur="addSearchItem(search)" @keydown="searchKeydown" type="text" placeholder="<%=__('search') %>…">
+          <i class="icon icon-search" @click="addSearchItem(search)"></i>
         </div>
         <div class="widget tagcloud search-tag">
           <div>
@@ -43,7 +49,7 @@
           <ul class="article-tag-list" v-show="showTags">
             <% site.tags.forEach(function(tag, i){ %> 
               <li class="article-tag-list-item">
-                <a href="javascript:void(0)" @click="chose('<%-tag.name%>','#')" class="js-tag color<%= tag.name.length % 7 + 1 %>"><%-tag.name%></a>
+                <a href="javascript:void(0)" @click="addSearchItem('<%-tag.name%>','tag')" class="js-tag color<%= tag.name.length % 7 + 1 %>"><%-tag.name%></a>
               </li>
             <% }) %>
             <div class="clearfix"></div>
@@ -51,14 +57,14 @@
           <ul class="article-tag-list" v-show="showCategories">
             <% site.categories.forEach(function(category, i){ %> 
               <li class="article-tag-list-item">
-                <a href="javascript:void(0)" @click="chose('<%-category.name%>','$')" class="js-tag color<%= category.name.length % 7 + 1 %>"><%-category.name%></a>
+                <a href="javascript:void(0)" @click="addSearchItem('<%-category.name%>','category')" class="js-tag color<%= category.name.length % 7 + 1 %>"><%-category.name%></a>
               </li>
             <% }) %>
             <div class="clearfix"></div>
           </ul>
         </div>
         <ul class="search-ul">
-          <li class="search-li" v-for="item in items" v-show="!item.isHide">
+          <li class="search-li" v-for="(item,index) in items" :key="index" v-show="!item.isHide">
             <a :href="item.path|urlformat" class="search-title"><i class="icon-quo-left icon"></i>
               <span v-text="item.title"></span>
             </a>
@@ -68,11 +74,11 @@
             </p>
             <p class="search-category" v-if="item.categories.length">
               <i class="icon-book icon" ></i>
-              <span v-for="category in item.categories" @click="chose(category.name, '$')" v-text="category.name"></span>
+              <span v-for="(category,index) in item.categories" :key="index" @click="addSearchItem(category.name, 'category')" v-text="category.name"></span>
             </p>
             <p class="search-tag" v-if="item.tags.length">
-              <i class="icon-price-tags icon" ></i>
-              <span v-for="tag in item.tags" @click="chose(tag.name, '#')" v-text="tag.name"></span>
+              <i class="icon icon-price-tags" ></i>
+              <span v-for="tag in item.tags" @click="addSearchItem(tag.name, 'tag')" v-text="tag.name"></span>
             </p>
           </li>
         </ul>

themes/yilia/source-src/css/core/_variables.scss

@@ -25,7 +25,6 @@ $colorBorder:                    #dbdbdb !default;
 $colorLink:                      #08c !default;
 $colorPlaceholder:               #999 !default; // input placeholder color
 $colorDisabled:                  (text: #999, bg: #e3e3e3, border: #dbdbdb) !default; // textColor bgColor borderColor
-$colorOverlay:                   rgba(0,0,0,.7) !default; // 遮罩层颜色
 
 
 // 基本颜色

themes/yilia/source-src/css/highlight.scss

@@ -1,4 +1,3 @@
-.article-entry pre,
 .article-entry .highlight {
   margin: 10px 0;
   overflow: auto;

themes/yilia/source-src/css/tools.scss

@@ -36,14 +36,18 @@
       margin: 20px 20px 10px 20px;
       position: relative;
       border-bottom: 2px solid $colorF;
+      display: flex;
+      flex-wrap: wrap;
       cursor: text;
       .search-ipt {
-        width: 50px;
         color: $colorF;
         background: none;
         border: none;
+        flex-grow: 1;
+        width: 0;
+        min-width: 80px;
       }
-      .icon {
+      >.icon-search {
         position: absolute;
         right: 0;
         bottom: 7px;
@@ -55,20 +59,17 @@
         }
       }
       .search-item {
-        border: 1px solid $colorF;
         padding-left: 5px;
-        line-height: 1.4em;
-        display: inline-block;
-        border-radius: $radiusBase;
-        &::after {
-          content: "x";
-          border-left: 1px solid $colorF;
-          width: 20px;
-          height: 20px;
-          display: inline-block;
-          margin: 3px 0 3px 3px;
-          line-height: 20px;
-          text-align: center;
+        margin: 2px;
+        border-radius: 20px;
+        background-color: #076773;
+        white-space: nowrap;
+        >.icon-close {
+          color: darken($colorF, 15%);
+          font-size: 12px;
+          position: relative;
+          bottom: 2px;
+          margin-right: 3px;
           cursor: pointer;
         }
       }

themes/yilia/source-src/js/slider.js

@@ -27,6 +27,7 @@ new Vue({
     showTags: false,
     showCategories: false,
     search: null,
+    searchItems: [],
     waifu: {
       tip: null, // 提示语文字
       tipOpacity: 0, // 提示语框透明度
@@ -37,12 +38,6 @@ new Vue({
     stop (event) {
       event.stopPropagation()
     },
-    chose (name, prefix) {
-      this.search = prefix + name
-    },
-    clearChose () {
-      this.search = null
-    },
     openSlider (event, type) {
       event.stopPropagation()
       this.innerArchive = false
@@ -68,6 +63,24 @@ new Vue({
         waifuTools[name].call(this)
       }
     },
+    addSearchItem(query, type='title') {
+      // 如果已存在相同的查询条件, 则不加入
+      var isExist = Array.prototype.some.call(this.searchItems, searchItem => {
+        return searchItem.query === query && searchItem.type === type
+      })
+      if(!isExist && query) {
+        this.searchItems.push({query, type})
+      }
+      this.search = null
+    },
+    searchKeydown(event) {
+      console.log(event.keyCode)
+      if(event.keyCode == 13){ // 回车键
+        this.addSearchItem(this.search)
+      } else if(event.keyCode == 8) { // 退格键
+        this.searchItems.pop()
+      }
+    },
     showMessage (text, time) {
       if(!text) return
       if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1]
@@ -89,9 +102,10 @@ new Vue({
     }
   },
   watch: {
-    search (newVal, oldVal) {
-      if(newVal) {
-        handleSearch.call(this, newVal.toLowerCase())
+    searchItems (newVal, oldVal) {
+      console.log(newVal)
+      if(newVal && newVal.length) {
+        handleSearch.call(this, newVal)
       } else {
         this.items.forEach(function(item){
           item.isHide = false
@@ -120,33 +134,22 @@ new Vue({
   }
 })
 
-function handleSearch(val) {
-  var type
-  if (val.startsWith('#')) {
-    val = val.substr(1, val.length)
-    type = 'tag'
-  } else if (val.startsWith('$')) {
-    val = val.substr(1, val.length)
-    type = 'category'
-  } else {
-    type = 'title'
-  }
-  this.items.forEach((item) => {
-    switch(type) {
-    case 'title' : 
-      item.isHide = item.title.toLowerCase().indexOf(val) < 0
-      break
-    case 'tag' : 
-      item.isHide = Array.prototype.every.call(item.tags, function(tag){
-        return tag.name.toLowerCase() !== val
-      })
-      break
-    case 'category' : 
-      item.isHide = Array.prototype.every.call(item.categories, function(category){
-        return category.name.toLowerCase() !== val
-      })
-      break
-    }
+function handleSearch(searchItems) {
+  this.items.forEach(articleItem => {
+    articleItem.isHide = !Array.prototype.every.call(searchItems, searchItem => {
+      switch(searchItem.type) {
+        case 'title': 
+          return articleItem.title.toLowerCase().indexOf(searchItem.query.toLowerCase()) !== -1
+        case 'tag' : 
+          return Array.prototype.some.call(articleItem.tags, tag => {
+            return tag.name === searchItem.query
+          })
+        case 'category' : 
+          return Array.prototype.some.call(articleItem.categories, category => {
+            return category.name === searchItem.query
+          })
+      }
+    })
   })
 }