给Hugo站点添加搜索功能

RebootOK · · 582 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。
## 实现思路 * 利用hugo生成的index.xml文件进行内容搜索。 * hugo的content目录下的html文件会被编译到模板中去。 * 利用以上特性使用js实现功能。 ## 效果图 演示地址:[https://www.rebootok.com/search/](https://www.rebootok.com/search/) ![QQ截图20200312154830.png](https://static.studygolang.com/200312/dda8953c4e8371ab27a838d4a56beb7e.png) ## 实现代码 content目录的search.html文件 ```html +++ title = "搜索" menu = "main" weight = 30 +++ <style> /* 手机适配 */ @media screen and (max-width: 500px) { .search{ padding-right: 25px; } .search input{ width: 100%; } .search button{ display: none; } } /* 电脑适配 */ @media screen and (min-width: 500px) { .search{ width: 500px; } .search input{ width: 444px; } } /* 通用样式 */ .search{ margin: auto; } .search input{ outline: none; border: 2px solid #c05b4d; height: 32px; padding: 10px; } .search button{ outline: none; border: 0px; height: 56px; width:56px; position:absolute; background-color:#c05b4d ; } .search .icon{ width: 28px; height: 28px; } </style> <div class="search"> <input type="text" placeholder="请输入搜索内容..." id="search-key" /> <button onclick="search()"> <svg t="1583982313567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1271" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"></style> </defs> <path d="M694.857143 475.428571q0-105.714286-75.142857-180.857142T438.857143 219.428571 258 294.571429 182.857143 475.428571t75.142857 180.857143T438.857143 731.428571t180.857143-75.142857T694.857143 475.428571z m292.571428 475.428572q0 29.714286-21.714285 51.428571t-51.428572 21.714286q-30.857143 0-51.428571-21.714286l-196-195.428571q-102.285714 70.857143-228 70.857143-81.714286 0-156.285714-31.714286t-128.571429-85.714286-85.714286-128.571428T36.571429 475.428571t31.714285-156.285714 85.714286-128.571428 128.571429-85.714286T438.857143 73.142857t156.285714 31.714286 128.571429 85.714286 85.714285 128.571428T841.142857 475.428571q0 125.714286-70.857143 228l196 196q21.142857 21.142857 21.142857 51.428572z" p-id="1272" fill="#ffffff"></path> </svg> </button> </div> <h1 id="search-tip" style="color: #c05b4d;text-align: center;display: none;">搜索中,请稍后 ...</h1> <br /> <div id="result"></div> <script type="text/javascript"> // enter window.onload = function() { document.onkeydown = function(ev) { var event = ev || event if (event.keyCode == 13) { search() } } } // search function search() { key = document.getElementById("search-key").value; if (key === "") { return; } document.getElementById("search-key").value = ""; // tip document.getElementById("search-tip").innerText = "搜索中,请稍后 ..."; document.getElementById("search-tip").style.display = "block"; // clear var el = document.getElementById('result'); var childs = el.childNodes; for (var i = childs.length - 1; i >= 0; i--) { el.removeChild(childs[i]); } // xml xmltext = new XMLHttpRequest; xmltext.open("GET", "/index.xml", false); xmltext.send(); resp = xmltext.responseXML; items = resp.getElementsByTagName("item"); // search var i = 0; haveResult = false; while (i < items.length) { txt = items[i].getElementsByTagName("title")[0].innerHTML + items[i].getElementsByTagName("description")[0].innerHTML if (txt.indexOf(key) > -1) { haveResult = true; title = items[i].getElementsByTagName("title")[0].innerHTML; link = items[i].getElementsByTagName("link")[0].innerHTML; time = items[i].getElementsByTagName("pubDate")[0].innerHTML; mark = items[i].getElementsByTagName("description")[0].innerHTML; addItem(title, link, time, mark) } i++; } if (!haveResult) { document.getElementById("search-tip").innerText = "搜索完毕,未发现结果 ..."; document.getElementById("search-tip").style.display = "block"; } } // add function addItem(title, link, time, mark) { document.getElementById("search-tip").style.display = "none"; tmpl = "<article class=\"post\" style=\"border-bottom: 1px solid #e6e6e6;\" >" + "<header class=\"post-header\">" + "<h1 class=\"post-title\"><a class=\"post-link\" href=\"" + link + "\" target=\"_blank\">" + title + "</a></h1>" + "<div class=\"post-meta\">" + " <span class=\"post-time\">" + time + "</span>" + "</div>" + " </header>" + "<div class=\"post-content\">" + "<div class=\"post-summary\">" + mark + "</div>" + "<div class=\"read-more\">" + "<a href=\"" + link + "\" class=\"read-more-link\" target=\"_blank\">阅读更多</a>" + "</div>" + " </div>" + "</article>" div = document.createElement("div") div.innerHTML = tmpl; document.getElementById('result').appendChild(div) } </script> ```

有疑问加站长微信联系

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:1006366459

582 次点击  ∙  2 赞  
加入收藏 微博
2 回复  |  直到 2020-03-13 14:38:36
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传