 %> "图片摄于2017年1月1日深圳梧桐山 By iPhone 7。")
-
-
-
+
+
+
+
+
+
-
-
+ <%= config.title %>
- <%= config.subtitle %>
-
+
+
+
+
+
+ -
+
- + {{article.title || '无标题'}} + +
-
+
-
-
-
-
+
+ -
-
- - {{article.title || '无标题'}} - - -
没有搜索到任何结果
-
+ 
-
-
-
+
+
- <% if (theme.head_links.enable) { %>
- <%
- var supList = theme.head_links.list.sup,
- subList = theme.head_links.list.sub;
- %>
-
- - <% for (var i in supList) { %> - <%= supList[i]['name'] %> - <% if (i != 'last') { %>|<% } %> - <% } %> -
-- <% for (var j in subList) { %> - ■ <%= subList[j]['name'] %> - <% } %> - -
- <% } %> -
- 
-
- 没有搜索到任何结果
+
+
+
diff --git a/themes/hexo-theme-xups/source/css/_partial/post.styl b/themes/hexo-theme-xups/source/css/_partial/post.styl
index 57d8970..9e68ba0 100644
--- a/themes/hexo-theme-xups/source/css/_partial/post.styl
+++ b/themes/hexo-theme-xups/source/css/_partial/post.styl
@@ -120,17 +120,10 @@
.archive-wapper
list-style none
- display flex
- flex-wrap wrap
- justify-content space-between
- .archive-item
- display inline-block
- height 50px
- padding 5px
- width 30%
- > a > .archive-div
- border 1px solid #a7a7a7
- border-radius 5px
- height 100%
- padding 5px
- box-sizing border-box
+ .archive-item > a
+ display block
+ font-size 16px
+ line-height 30px
+ .date
+ color #999
+ font-size 14px
diff --git a/themes/hexo-theme-xups/source/img/loading-bar.gif b/themes/hexo-theme-xups/source/img/loading-bar.gif
new file mode 100644
index 0000000..8452025
Binary files /dev/null and b/themes/hexo-theme-xups/source/img/loading-bar.gif differ
diff --git a/themes/hexo-theme-xups/source/js/local-search.js b/themes/hexo-theme-xups/source/js/local-search.js
index 5c5171b..500026d 100644
--- a/themes/hexo-theme-xups/source/js/local-search.js
+++ b/themes/hexo-theme-xups/source/js/local-search.js
@@ -1,95 +1,117 @@
(function(){
-var articleDatas = null;
-var resultDiv = null;
+var articleDatas = null,
+ resultDiv = null,
+ initCallback = function(){};
+function executeSearch(keywords) {
+ var _this = this;
+ articleDatas.forEach(function(article){
+ var isMatch = true,
+ title = article.title.trim().toLowerCase(),
+ index_title = -1, index_content = -1,
+ first_occur = -1; //关键字在正文当中第一次出现的位置
+ keywords.forEach(function(keyword, i) {
+ index_title = title ? title.indexOf(keyword) : -1;
+ index_content = article.content ? article.content.indexOf(keyword) : -1;
+ if( index_title < 0 && index_content < 0 ){
+ isMatch = false;
+ } else {
+ if (index_content < 0) {
+ index_content = 0;
+ }
+ if (i == 0) {
+ first_occur = index_content;
+ }
+ }
+ });
+ if (isMatch) {
+ var resultItem = {};
+ resultItem.url = article.url;
+ resultItem.title = article.title;
+ if (first_occur >= 0) {
+ // 截取出关键字所在的前后若干字符
+ var start = first_occur - 10;
+ var end = first_occur + 15;
+ if(start <= 0){
+ start = 0;
+ end = 25;
+ }
+ if(end > article.content.length){
+ end = article.content.length;
+ }
+ var matchContent = article.content.substring(start, end);
+ // 高亮关键字
+ keywords.forEach(function(keyword){
+ var keywordReg = new RegExp(keyword, "gi");
+ matchContent = matchContent.replace(keywordReg, ""+keyword+"");
+ })
+ resultItem.matchContent = matchContent
+ }
+ _this.searchResult.push(resultItem)
+ }
+ });
+}
new Vue({
el: "#search-box",
data: {
queryText: null,
- searchResult: []
+ searchResult: [],
+ searchIniting: false // 搜索是否正在初始化(search.xml文件很大, 异步ajax以及xml解析需要时间)
},
mounted: function() {
- resultDiv = document.getElementById("search-result-box")
- axios({
- url: "/search.xml"
- }).then(function(response){
- var xmlDoms = null
- if(window.DOMParser) {
- var parser = new DOMParser()
- xmlDoms = parser.parseFromString(response.data, "application/xml")
- } else {
- xmlDoms = new ActiveXObject("Microsoft.XMLDOM");
- xmlDoms.async = false;
- xmlDoms.loadXML(response.data);
- }
- //找出所有文章的标题 正文 URL
- articleDatas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(item){
- return {
- title: item.getElementsByTagName("title")[0].textContent,
- content: item.getElementsByTagName("content")[0].textContent,
- url: item.getElementsByTagName("url")[0].textContent,
+ resultDiv = document.getElementById("search-result-box");
+ },
+ methods : {
+ searchInit: function() {
+ if(articleDatas || this.searchIniting) return;
+ this.searchIniting = true;
+ var _this = this;
+ axios({
+ url: "/search.xml"
+ }).then(function(response){
+ var xmlDoms = null
+ if(window.DOMParser) {
+ var parser = new DOMParser()
+ xmlDoms = parser.parseFromString(response.data, "application/xml")
+ } else {
+ xmlDoms = new ActiveXObject("Microsoft.XMLDOM");
+ xmlDoms.async = false;
+ xmlDoms.loadXML(response.data);
}
- })
- });
+ //找出所有文章的标题 正文 URL
+ articleDatas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(item){
+ return {
+ title: item.getElementsByTagName("title")[0].textContent,
+ content: item.getElementsByTagName("content")[0].textContent.trim().replace(/<[^>]+>/g,"").toLowerCase(),
+ url: item.getElementsByTagName("url")[0].textContent,
+ }
+ });
+ _this.searchIniting = false;
+ initCallback.call(_this);
+ }).catch(function(){
+ _this.searchIniting = false;
+ _this.searchInit();
+ });
+ }
},
watch: {
queryText: function(newVal, oldVal) {
this.searchResult.length = 0;
if(!resultDiv) return;
- if(newVal && newVal.trim() && articleDatas) {
- resultDiv.style.display = "block"
+ if(newVal && newVal.trim()) {
+ resultDiv.style.display = "block";
} else {
- resultDiv.style.display = "none"
+ resultDiv.style.display = "none";
return
}
var keywords = newVal.trim().toLowerCase().split(/[\s\-]+/);
var _this = this;
- articleDatas.forEach(function(article){
- var isMatch = true;
- 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; //关键字在正文当中第一次出现的位置
- keywords.forEach(function(keyword, i) {
- index_title = title ? title.indexOf(keyword) : -1;
- index_content = content ? content.indexOf(keyword) : -1;
- if( index_title < 0 && index_content < 0 ){
- isMatch = false;
- } else {
- if (index_content < 0) {
- index_content = 0;
- }
- if (i == 0) {
- first_occur = index_content;
- }
- }
- });
- if (isMatch) {
- var resultItem = {};
- resultItem.url = article.url;
- resultItem.title = article.title;
- if (first_occur >= 0) {
- // 截取出关键字所在的前后若干字符
- var start = first_occur - 10;
- var end = first_occur + 15;
- if(start <= 0){
- start = 0;
- end = 25;
- }
- if(end > content.length){
- end = content.length;
- }
- var matchContent = content.substring(start, end);
- // 高亮关键字
- keywords.forEach(function(keyword){
- var keywordReg = new RegExp(keyword, "gi");
- matchContent = matchContent.replace(keywordReg, ""+keyword+"");
- })
- resultItem.matchContent = matchContent
- }
- _this.searchResult.push(resultItem)
+ if(this.searchIniting) {
+ initCallback = function(){
+ executeSearch.call(this, keywords);
}
- })
+ } else {
+ executeSearch.call(this, keywords);
+ }
}
}
})
+ <% if (theme.head_links.enable) { %>
+ <%
+ var supList = theme.head_links.list.sup,
+ subList = theme.head_links.list.sub;
+ %>
+
+ + <% for (var i in supList) { %> + <%= supList[i]['name'] %> + <% if (i != 'last') { %>|<% } %> + <% } %> +
++ <% for (var j in subList) { %> + ■ <%= subList[j]['name'] %> + <% } %> +
+ <% } %> +
+
+
+