<article> <h1 class="title"><%= page.title %> </h1> <div class="entry-content wrapper"> <div id="search"> <input type="text" placeholder="请输入关键字" id="Jinput"> </div> <div class="info"> 本次搜索结果共<span id="Jcount">0</span>条 </div> <div id="JresList"></div>
<% let posts = site.posts.data let searchData = [] posts.forEach(item => { searchData.push({ title: trim(item.title), content: trim(strip_html(item.content)).replace(/{/g,'{').replace(/}/g,'}'), url:'/'+item.path, link: item.link, plink: item.permalink }) }); let _searchData = JSON.stringify(searchData) %>
<script> let searchData = <%- _searchData %>
let searchMod = { searchTitle: true, searchContent: 1, contentPieces: 2, excludes: ['{{', '}}', '{', '}', '.', '/', '\\', '。'], contentDecoration: 50, roughFetch: false, trimStr(str) { return str.trim().toLowerCase() }, init(input) { input.addEventListener('input', (e) => { let searchText = this.trimStr(input.value) this.fetchTxtFromDB(searchText, searchData) }); }, fetchTxtFromDB(searchText, DB) { let resultArr = []
if (searchText) { let searchTextArr = searchText.split(/[\s\-]+/); searchTextArr = searchTextArr.filter((item) => { return !this.excludes.includes(item); })
if (searchTextArr.length > 1) { searchTextArr.push(searchText); }
resultArr = DB.filter((item) => { let articleTitle = this.trimStr(item.title); let titleHitArr = [] item.tmpTitleArr = [] item._title = ''
let articleContent = this.trimStr(item.content); let contentHitArr = [] item.tmpContentArr = [] item.indexArr = [] item._content = '' item._contentSliceArr = []
searchTextArr.map((one, index) => { if (this.searchTitle) { let b = articleTitle.indexOf(one) > -1; b && titleHitArr.push(one) }
if (this.searchContent) { let b2 = articleContent.indexOf(one) > -1 b2 && contentHitArr.push(one) } })
if (this.searchTitle && titleHitArr.length) { titleHitArr.map((one, index) => { let keyWordHtml = this.keyWordTpl().replace(/{{searchText}}/, one), titleArrWithoutKeyWord = (!index ? articleTitle : item.tmpTitleArr[index - 1]).split(one), highlightTxt = titleArrWithoutKeyWord.join(keyWordHtml);
item.tmpTitleArr.push(highlightTxt); item._title = highlightTxt; })
delete item.tmpTitleArr }
if (this.searchContent && contentHitArr.length) { contentHitArr.map((one, index) => { if (this.roughFetch) { let keyWordHtml = this.keyWordTpl().replace(/{{searchText}}/, one), contentArrWithoutKeyWord = (!index ? articleContent : item.tmpContentArr[index - 1]).split(one), highlightTxt = contentArrWithoutKeyWord.join(keyWordHtml);
item.tmpContentArr.push(highlightTxt); item._content = highlightTxt; } else { item.indexArr.push({ start: articleContent.indexOf(one), length: one.length, str: one, }) } })
item.indexArr.map((one, index) => { let keyWordEndPosition = one.start + one.length let content = this.roughFetch ? item._content : item.content; let contentLen = content.length;
if (one.start > this.contentDecoration) { let highLightEndPosition = keyWordEndPosition + this.contentDecoration highLightEndPosition = highLightEndPosition > contentLen ? contentLen : highLightEndPosition item._contentSliceArr.push('...'+content.slice(one.start - this.contentDecoration, highLightEndPosition) + '...') } else { let highLightEndPosition = keyWordEndPosition + this.contentDecoration * 2 highLightEndPosition = highLightEndPosition > contentLen ? contentLen : highLightEndPosition item._contentSliceArr.push('...'+content.slice(0, highLightEndPosition) + '...') } })
if (!this.roughFetch) { contentHitArr.map((one, index) => { let keyWordHtml = this.keyWordTpl().replace(/{{searchText}}/, one), contentArrWithoutKeyWord = (!index ? item._contentSliceArr.join('<i style="display:block;padding-top:10px"></i>') : item.tmpContentArr[index - 1]).split(one), highlightTxt = contentArrWithoutKeyWord.join(keyWordHtml);
item.tmpContentArr.push(highlightTxt); item._content = highlightTxt }) }
delete item.tmpContentArr delete item._contentSliceArr delete item.indexArr }
return (this.searchTitle && titleHitArr.length) || (this.searchContent && contentHitArr.length) }) }
this.resultArr = resultArr; this.render(JresList, Jcount, resultArr) }, render(ele, countEle, resultArr) { let htmlArr = resultArr.map((item) => { return this.itemTpl() .replace(/{{url}}/g, item.url) .replace(/{{title}}/g, item._title || item.title) .replace(/{{content}}/g, item._content) })
ele.innerHTML = htmlArr.join('') countEle.innerHTML = htmlArr.length }, itemTpl() { return ` <li class="item"> <a target="_blank" href="{{url}}"> <div class="search-result-title">{{title}}</div> <p class="search-result search-result-link">{{content}}</p> </a> </li> `; }, keyWordTpl() { return `<b class="search-keyword">{{searchText}}</b>` } }
searchMod.init(Jinput) </script> </div> </article>
|
访客评论