diff --git a/themes/hexo-theme-xups/source/css/_partial/header.styl b/themes/hexo-theme-xups/source/css/_partial/header.styl
index 88f9b6e..ff0bc69 100644
--- a/themes/hexo-theme-xups/source/css/_partial/header.styl
+++ b/themes/hexo-theme-xups/source/css/_partial/header.styl
@@ -55,7 +55,10 @@
margin-top 0
a.search-result-title
color #3272b5
- font-size 20px
+ font-size 18px
+ p.search-result
+ font-size 14px
+ margin 0.6em 0
strong.search-keyword
color #ff776d
.logo
diff --git a/themes/hexo-theme-xups/source/js/local_search.js b/themes/hexo-theme-xups/source/js/local_search.js
index 9c6fd9e..9505359 100644
--- a/themes/hexo-theme-xups/source/js/local_search.js
+++ b/themes/hexo-theme-xups/source/js/local_search.js
@@ -1,103 +1,10 @@
-// A local search script with the help of [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
-// Copyright (C) 2015
-// Joseph Pan
-// Shuhao Mao
-// Edited by MOxFIVE
(function(){
-var searchFunc = function(path, search_id, content_id) {
- 'use strict';
- axios({
- url: path
- }).then(function(response){
- var parser = new DOMParser()
- const xmlDoms = parser.parseFromString(response.data, "application/xml")
- //找出所有文章的标题 正文 URL
- var datas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(){
- return {
- title: this.getElementsByTagName("title").innerHTML,
- content: this.getElementsByTagName("content").innerHTML,
- url: this.getElementsByTagName("url").innerHTML,
- }
- })
- var $input = document.getElementById(search_id);
- var $resultContent = document.getElementById(content_id);
-
- $input.addEventListener('input', function(){
- var str='';
- var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
- $resultContent.innerHTML = "";
- if (this.value.trim().length <= 0) {
- return;
- }
- // perform local searching
- datas.forEach(function(data) {
- var isMatch = true;
- var content_index = [];
- var data_title = data.title.trim().toLowerCase();
- var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
- var data_url = data.url;
- var index_title = -1;
- var index_content = -1;
- var first_occur = -1;
- // only match artiles with not empty titles and contents
- if(data_title != '' && data_content != '') {
- keywords.forEach(function(keyword, i) {
- index_title = data_title.indexOf(keyword);
- index_content = data_content.indexOf(keyword);
- if( index_title < 0 && index_content < 0 ){
- isMatch = false;
- } else {
- if (index_content < 0) {
- index_content = 0;
- }
- if (i == 0) {
- first_occur = index_content;
- }
- }
- });
- }
- // show search results
- if (isMatch) {
- str += "- "+ "> " + data_title +"";
- var content = data.content.trim().replace(/<[^>]+>/g,"");
- if (first_occur >= 0) {
- // cut out characters
- var start = first_occur - 6;
- var end = first_occur + 6;
- if(start < 0){
- start = 0;
- }
- if(start == 0){
- end = 10;
- }
- if(end > content.length){
- end = content.length;
- }
- var match_content = content.substr(start, end);
- // highlight all keywords
- keywords.forEach(function(keyword){
- var regS = new RegExp(keyword, "gi");
- match_content = match_content.replace(regS, ""+keyword+"");
- })
- str += "
" + match_content +"...
"
- }
- }
- })
- $resultContent.innerHTML = str;
- })
- })
-
- // $.ajax({
- // url: path,
- // dataType: "xml",
- // })
-}
var articleDatas = null;
new Vue({
el: "#search-box",
data: {
queryText: null,
- searchResult: null
+ searchResult: []
},
mounted: function() {
axios({
@@ -124,22 +31,21 @@ new Vue({
},
watch: {
queryText: function(newVal, oldVal) {
+ this.searchResult.length = 0;
if(!newVal || !newVal.trim() || !articleDatas) return
var keywords = newVal.trim().toLowerCase().split(/[\s\-]+/);
- var searchResult = '';
+ var _this = this;
articleDatas.forEach(function(article){
var isMatch = true;
- var content_index = [];
- var data_title = article.title.trim().toLowerCase();
- var data_content = article.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
- var data_url = article.url;
+ var title = article.title.trim().toLowerCase();
+ var content = article.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
var index_title = -1;
var index_content = -1;
- var first_occur = -1;
- if(data_title && data_content) {
+ var first_occur = -1; //关键字在正文当中第一次出现的位置
+ if(title && content) {
keywords.forEach(function(keyword, i) {
- index_title = data_title.indexOf(keyword);
- index_content = data_content.indexOf(keyword);
+ index_title = title.indexOf(keyword);
+ index_content = content.indexOf(keyword);
if( index_title < 0 && index_content < 0 ){
isMatch = false;
} else {
@@ -153,13 +59,13 @@ new Vue({
});
}
if (isMatch) {
- searchResult += "- "+ "> " +data_title+"";
- var content = article.content.trim().replace(/<[^>]+>/g,"");
+ var resultItem = {};
+ resultItem.url = article.url;
+ resultItem.title = article.title;
if (first_occur >= 0) {
// cut out characters
var start = first_occur - 6;
- var end = first_occur + 6;
+ var end = first_occur + 15;
if(start < 0){
start = 0;
}
@@ -169,20 +75,18 @@ new Vue({
if(end > content.length){
end = content.length;
}
- var match_content = content.substr(start, end);
- // highlight all keywords
+ var matchContent = content.substring(start, end);
+ debugger
+ // 高亮关键字
keywords.forEach(function(keyword){
var keywordReg = new RegExp(keyword, "gi");
- match_content = match_content.replace(keywordReg, ""+keyword+"");
+ matchContent = matchContent.replace(keywordReg, ""+keyword+"");
})
- searchResult += "
" + match_content +"...
";
+ resultItem.matchContent = matchContent
}
- searchResult += " ";
+ _this.searchResult.push(resultItem)
}
})
- searchResult += "
";
- this.searchResult = searchResult
- console.log(searchResult)
}
}
})