# 伪站内搜索 - 伪站内搜索,在网站上搜索弹出google或者baidu的搜索结果,使用google cse 或者baidu站内搜索，搜索出来的结果是搜索引收录的页面，如果搜索引擎没有收录，那就没有结果,以hyde模板为例 1. 以google cse服务为例，google网站注册cse服务，然后把申请到的代码放入到layout/partial/google-search.html ``` <script async src="https://cse.google.com/cse.js?cx=xxx:xxx"></script> <div class="gcse-search"></div> ``` 2. 把search.html 加入到baseof ``` {{ partial "head.html" . }} <body class="{{ .Site.Params.themeColor }} {{if .Site.Params.layoutReverse}}layout-reverse{{end}}"> {{ partial "sidebar.html" . }} <main class="content container"> {{ partial "google-search.html" . }} {{ block "main" . -}}{{- end }} </main> {{ template "_internal/google_analytics_async.html" . }} </body> </html> ``` 3. 打开首页或者任何一个其他页面，就可以看到搜索框出现了，搜索的结果必须是google收录的网页 ***** # 站内搜索 - 真正的站内搜索,hugo可以通过hugo-lunr来实现，实现的原理是把所有的页面内容生成一个json文件，当你搜索的时候是从用户的客户端通过js来完成搜索，这对于中心型的网站或者博客来说足够用了 1. hugo自从0.20.0版本已经可以支持output format了,config.toml ``` [outputs] section = [ "HTML", "JSON"] ``` 2. layouts/post/list.json ``` [ {{ range $index, $value := where .Site.Pages "Type" "posts" }} {{ if $index }}, {{ end }} { "url": "{{ .RelPermalink }}", "title": "{{ .Title }}", "content": {{ .Content | plainify | jsonify }} } {{ end }} ] ``` 3. 上面两步配置完成后,执行hugo命令将会在posts目录下生成index.json 4. 制作模板themes/hyde/layouts/partials/internal-search ``` <script src="https://unpkg.com/lunr/lunr.js"></script> <script type="text/javascript"> // define globale variables var idx, searchInput, searchResults = null var documents = [] function renderSearchResults(results){ if (results.length > 0) { // show max 10 results if (results.length > 9){ results = results.slice(0,10) } // reset search results searchResults.innerHTML = '' // append results results.forEach(result => { // create result item var article = document.createElement('article') article.innerHTML = ` <a href="${result.ref}"><h3 class="title">${documents[result.ref].title}</h3></a> <p><a href="${result.ref}">${documents[result.ref].title}</a></p> <br> ` searchResults.appendChild(article) }) // if results are empty } else { searchResults.innerHTML = '<p>No results found.</p>' } } function registerSearchHandler() { // register on input event searchInput.oninput = function(event) { // remove search results if the user empties the search input field if (searchInput.value == '') { searchResults.innerHTML = '' } else { // get input value var query = event.target.value // run fuzzy search var results = idx.search(query + '*') // render results renderSearchResults(results) } } // set focus on search input and remove loading placeholder searchInput.focus() searchInput.placeholder = '' } window.onload = function() { // get dom elements searchInput = document.getElementById('search-input') searchResults = document.getElementById('search-results') // request and index documents fetch('/posts/index.json', { method: 'get' }).then( res => res.json() ).then( res => { // index document idx = lunr(function() { this.ref('url') this.field('title') this.field('content') res.forEach(function(doc) { this.add(doc) documents[doc.url] = { 'title': doc.title, 'content': doc.content, } }, this) }) // data is loaded, next register handler registerSearchHandler() } ).catch( err => { searchResults.innerHTML = `<p>${err}</p>` } ) } </script> <input id="search-input" type="text" placeholder="Loading..." name="search"> <section id="search-results" class="search"></section> ``` 3. 在themes/hyde/layouts/_default/baseof.html ``` {{ partial "head.html" . }} <body class="{{ .Site.Params.themeColor }} {{if .Site.Params.layoutReverse}}layout-reverse{{end}}"> {{ partial "sidebar.html" . }} <main class="content container"> {{ partial "internal-search.html" . }} {{ block "main" . -}}{{- end }} </main> {{ template "_internal/google_analytics_async.html" . }} </body> </html> ``` 4. 然后打开页面输入搜索框就可以搜多到内容