【高級】17:創建站內搜索 · Hugo 零基礎建站教程

# 偽站內搜索 - 偽站內搜索,在網站上搜索彈出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. 然后打開頁面輸入搜索框就可以搜多到內容