diff --git a/_config.yml b/_config.yml index 12322b9..47f971b 100644 --- a/_config.yml +++ b/_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: diff --git a/themes/yilia/layout/_partial/tools.ejs b/themes/yilia/layout/_partial/tools.ejs index 7b0307d..eeb3d29 100644 --- a/themes/yilia/layout/_partial/tools.ejs +++ b/themes/yilia/layout/_partial/tools.ejs @@ -23,9 +23,15 @@
<%if(hasInnerArchive){%>
-
- - +
+ + + + {{searchItem.query}} + + + +
@@ -43,7 +49,7 @@
    -
  • +
  • @@ -68,11 +74,11 @@

    - +

    - - + +

diff --git a/themes/yilia/source-src/css/core/_variables.scss b/themes/yilia/source-src/css/core/_variables.scss index 89cc600..4c4f558 100644 --- a/themes/yilia/source-src/css/core/_variables.scss +++ b/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; // 遮罩层颜色 // 基本颜色 diff --git a/themes/yilia/source-src/css/highlight.scss b/themes/yilia/source-src/css/highlight.scss index 9f82145..280c162 100644 --- a/themes/yilia/source-src/css/highlight.scss +++ b/themes/yilia/source-src/css/highlight.scss @@ -1,4 +1,3 @@ -.article-entry pre, .article-entry .highlight { margin: 10px 0; overflow: auto; diff --git a/themes/yilia/source-src/css/tools.scss b/themes/yilia/source-src/css/tools.scss index 5cfacba..456c603 100644 --- a/themes/yilia/source-src/css/tools.scss +++ b/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; } } diff --git a/themes/yilia/source-src/js/slider.js b/themes/yilia/source-src/js/slider.js index 8f83a8b..4f1a511 100644 --- a/themes/yilia/source-src/js/slider.js +++ b/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 + }) + } + }) }) }