Skip to content

Commit 094023b

Browse files
author
sylar
committed
Site updated: 2018-03-16 21:24:11
1 parent f5b72d3 commit 094023b

File tree

30 files changed

+10269
-4
lines changed

30 files changed

+10269
-4
lines changed

‎2013/12/01/hello-world/index.html

+362
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828

2929

3030

31+
<meta name="google-site-verification" content="SyOFL1enPAoQ4IZbTniF2DEgJc5HNRORE1eCDU8nC6g" />
32+
3133

3234

3335

@@ -132,6 +134,15 @@
132134

133135

134136

137+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-115901048-1"></script>
138+
<script>
139+
window.dataLayer = window.dataLayer || [];
140+
function gtag(){dataLayer.push(arguments);}
141+
gtag('js', new Date());
142+
143+
gtag('config', 'UA-115901048-1');
144+
</script>
145+
135146

136147

137148

@@ -257,12 +268,43 @@
257268

258269

259270

271+
<li class="menu-item menu-item-search">
272+
273+
<a href="javascript:;" class="popup-trigger">
274+
275+
276+
<i class="menu-item-icon fa fa-search fa-fw"></i> <br />搜索</a>
277+
</li>
278+
260279
</ul>
261280

262281

263282

264283

265284

285+
<div class="site-search">
286+
287+
<div class="popup search-popup local-search-popup">
288+
<div class="local-search-header clearfix">
289+
<span class="search-icon">
290+
<i class="fa fa-search"></i>
291+
</span>
292+
<span class="popup-btn-close">
293+
<i class="fa fa-times-circle"></i>
294+
</span>
295+
<div class="local-search-input-wrapper">
296+
<input autocomplete="off"
297+
placeholder="搜索..." spellcheck="false"
298+
type="text" id="local-search-input">
299+
</div>
300+
</div>
301+
<div id="local-search-result"></div>
302+
</div>
303+
304+
305+
306+
</div>
307+
266308
</nav>
267309

268310

@@ -753,6 +795,326 @@ <h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerl
753795

754796

755797

798+
<script type="text/javascript">
799+
// Popup Window;
800+
var isfetched = false;
801+
var isXml = true;
802+
// Search DB path;
803+
var search_path = "search.xml";
804+
if (search_path.length === 0) {
805+
search_path = "search.xml";
806+
} else if (/json$/i.test(search_path)) {
807+
isXml = false;
808+
}
809+
var path = "/" + search_path;
810+
// monitor main search box;
811+
812+
var onPopupClose = function (e) {
813+
$('.popup').hide();
814+
$('#local-search-input').val('');
815+
$('.search-result-list').remove();
816+
$('#no-result').remove();
817+
$(".local-search-pop-overlay").remove();
818+
$('body').css('overflow', '');
819+
}
820+
821+
function proceedsearch() {
822+
$("body")
823+
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
824+
.css('overflow', 'hidden');
825+
$('.search-popup-overlay').click(onPopupClose);
826+
$('.popup').toggle();
827+
var $localSearchInput = $('#local-search-input');
828+
$localSearchInput.attr("autocapitalize", "none");
829+
$localSearchInput.attr("autocorrect", "off");
830+
$localSearchInput.focus();
831+
}
832+
833+
// search function;
834+
var searchFunc = function(path, search_id, content_id) {
835+
'use strict';
836+
837+
// start loading animation
838+
$("body")
839+
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
840+
'<div id="search-loading-icon">' +
841+
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
842+
'</div>' +
843+
'</div>')
844+
.css('overflow', 'hidden');
845+
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
846+
847+
848+
849+
$.ajax({
850+
url: path,
851+
dataType: isXml ? "xml" : "json",
852+
async: true,
853+
success: function(res) {
854+
// get the contents from search data
855+
isfetched = true;
856+
$('.popup').detach().appendTo('.header-inner');
857+
var datas = isXml ? $("entry", res).map(function() {
858+
return {
859+
title: $("title", this).text(),
860+
content: $("content",this).text(),
861+
url: $("url" , this).text()
862+
};
863+
}).get() : res;
864+
var input = document.getElementById(search_id);
865+
var resultContent = document.getElementById(content_id);
866+
var inputEventFunction = function() {
867+
var searchText = input.value.trim().toLowerCase();
868+
var keywords = searchText.split(/[\s\-]+/);
869+
if (keywords.length > 1) {
870+
keywords.push(searchText);
871+
}
872+
var resultItems = [];
873+
if (searchText.length > 0) {
874+
// perform local searching
875+
datas.forEach(function(data) {
876+
var isMatch = false;
877+
var hitCount = 0;
878+
var searchTextCount = 0;
879+
var title = data.title.trim();
880+
var titleInLowerCase = title.toLowerCase();
881+
var content = data.content.trim().replace(/<[^>]+>/g,"");
882+
883+
var contentInLowerCase = content.toLowerCase();
884+
var articleUrl = decodeURIComponent(data.url);
885+
var indexOfTitle = [];
886+
var indexOfContent = [];
887+
// only match articles with not empty titles
888+
if(title != '') {
889+
keywords.forEach(function(keyword) {
890+
function getIndexByWord(word, text, caseSensitive) {
891+
var wordLen = word.length;
892+
if (wordLen === 0) {
893+
return [];
894+
}
895+
var startPosition = 0, position = [], index = [];
896+
if (!caseSensitive) {
897+
text = text.toLowerCase();
898+
word = word.toLowerCase();
899+
}
900+
while ((position = text.indexOf(word, startPosition)) > -1) {
901+
index.push({position: position, word: word});
902+
startPosition = position + wordLen;
903+
}
904+
return index;
905+
}
906+
907+
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
908+
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
909+
});
910+
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
911+
isMatch = true;
912+
hitCount = indexOfTitle.length + indexOfContent.length;
913+
}
914+
}
915+
916+
// show search results
917+
918+
if (isMatch) {
919+
// sort index by position of keyword
920+
921+
[indexOfTitle, indexOfContent].forEach(function (index) {
922+
index.sort(function (itemLeft, itemRight) {
923+
if (itemRight.position !== itemLeft.position) {
924+
return itemRight.position - itemLeft.position;
925+
} else {
926+
return itemLeft.word.length - itemRight.word.length;
927+
}
928+
});
929+
});
930+
931+
// merge hits into slices
932+
933+
function mergeIntoSlice(text, start, end, index) {
934+
var item = index[index.length - 1];
935+
var position = item.position;
936+
var word = item.word;
937+
var hits = [];
938+
var searchTextCountInSlice = 0;
939+
while (position + word.length <= end && index.length != 0) {
940+
if (word === searchText) {
941+
searchTextCountInSlice++;
942+
}
943+
hits.push({position: position, length: word.length});
944+
var wordEnd = position + word.length;
945+
946+
// move to next position of hit
947+
948+
index.pop();
949+
while (index.length != 0) {
950+
item = index[index.length - 1];
951+
position = item.position;
952+
word = item.word;
953+
if (wordEnd > position) {
954+
index.pop();
955+
} else {
956+
break;
957+
}
958+
}
959+
}
960+
searchTextCount += searchTextCountInSlice;
961+
return {
962+
hits: hits,
963+
start: start,
964+
end: end,
965+
searchTextCount: searchTextCountInSlice
966+
};
967+
}
968+
969+
var slicesOfTitle = [];
970+
if (indexOfTitle.length != 0) {
971+
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
972+
}
973+
974+
var slicesOfContent = [];
975+
while (indexOfContent.length != 0) {
976+
var item = indexOfContent[indexOfContent.length - 1];
977+
var position = item.position;
978+
var word = item.word;
979+
// cut out 100 characters
980+
var start = position - 20;
981+
var end = position + 80;
982+
if(start < 0){
983+
start = 0;
984+
}
985+
if (end < position + word.length) {
986+
end = position + word.length;
987+
}
988+
if(end > content.length){
989+
end = content.length;
990+
}
991+
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
992+
}
993+
994+
// sort slices in content by search text's count and hits' count
995+
996+
slicesOfContent.sort(function (sliceLeft, sliceRight) {
997+
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
998+
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
999+
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
1000+
return sliceRight.hits.length - sliceLeft.hits.length;
1001+
} else {
1002+
return sliceLeft.start - sliceRight.start;
1003+
}
1004+
});
1005+
1006+
// select top N slices in content
1007+
1008+
var upperBound = parseInt('1');
1009+
if (upperBound >= 0) {
1010+
slicesOfContent = slicesOfContent.slice(0, upperBound);
1011+
}
1012+
1013+
// highlight title and content
1014+
1015+
function highlightKeyword(text, slice) {
1016+
var result = '';
1017+
var prevEnd = slice.start;
1018+
slice.hits.forEach(function (hit) {
1019+
result += text.substring(prevEnd, hit.position);
1020+
var end = hit.position + hit.length;
1021+
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
1022+
prevEnd = end;
1023+
});
1024+
result += text.substring(prevEnd, slice.end);
1025+
return result;
1026+
}
1027+
1028+
var resultItem = '';
1029+
1030+
if (slicesOfTitle.length != 0) {
1031+
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
1032+
} else {
1033+
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
1034+
}
1035+
1036+
slicesOfContent.forEach(function (slice) {
1037+
resultItem += "<a href='" + articleUrl + "'>" +
1038+
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
1039+
"...</p>" + "</a>";
1040+
});
1041+
1042+
resultItem += "</li>";
1043+
resultItems.push({
1044+
item: resultItem,
1045+
searchTextCount: searchTextCount,
1046+
hitCount: hitCount,
1047+
id: resultItems.length
1048+
});
1049+
}
1050+
})
1051+
};
1052+
if (keywords.length === 1 && keywords[0] === "") {
1053+
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
1054+
} else if (resultItems.length === 0) {
1055+
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
1056+
} else {
1057+
resultItems.sort(function (resultLeft, resultRight) {
1058+
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
1059+
return resultRight.searchTextCount - resultLeft.searchTextCount;
1060+
} else if (resultLeft.hitCount !== resultRight.hitCount) {
1061+
return resultRight.hitCount - resultLeft.hitCount;
1062+
} else {
1063+
return resultRight.id - resultLeft.id;
1064+
}
1065+
});
1066+
var searchResultList = '<ul class=\"search-result-list\">';
1067+
resultItems.forEach(function (result) {
1068+
searchResultList += result.item;
1069+
})
1070+
searchResultList += "</ul>";
1071+
resultContent.innerHTML = searchResultList;
1072+
}
1073+
}
1074+
1075+
if ('auto' === 'auto') {
1076+
input.addEventListener('input', inputEventFunction);
1077+
} else {
1078+
$('.search-icon').click(inputEventFunction);
1079+
input.addEventListener('keypress', function (event) {
1080+
if (event.keyCode === 13) {
1081+
inputEventFunction();
1082+
}
1083+
});
1084+
}
1085+
1086+
// remove loading animation
1087+
$(".local-search-pop-overlay").remove();
1088+
$('body').css('overflow', '');
1089+
1090+
proceedsearch();
1091+
}
1092+
});
1093+
}
1094+
1095+
// handle and trigger popup window;
1096+
$('.popup-trigger').click(function(e) {
1097+
e.stopPropagation();
1098+
if (isfetched === false) {
1099+
searchFunc(path, 'local-search-input', 'local-search-result');
1100+
} else {
1101+
proceedsearch();
1102+
};
1103+
});
1104+
1105+
$('.popup-btn-close').click(onPopupClose);
1106+
$('.popup').click(function(e){
1107+
e.stopPropagation();
1108+
});
1109+
$(document).on('keyup', function (event) {
1110+
var shouldDismissSearchPopup = event.which === 27 &&
1111+
$('.search-popup').is(':visible');
1112+
if (shouldDismissSearchPopup) {
1113+
onPopupClose();
1114+
}
1115+
});
1116+
</script>
1117+
7561118

7571119

7581120

0 commit comments

Comments
 (0)