Search

December 25, 2020

Search實作分析

請點擊連結至官方查看

製作搜尋分為兩種

使用雲端搜尋(google, algolia…)
這類不是進階服務要錢，要不然就是有廣告
使用JS來搞
缺點: 效率慢，搜尋不準

JS搜尋

以下的東西都是官方有提到的搜尋

hugofastsearch

Setup

Add index.json file to layouts/_default

主要是利用Hugo去撈取每一個頁面的資料

{{- $.Scratch.Add "index" slice -}}
{{- range .Site.RegularPages -}}
    {{/* 這裡對應 fastsearch.js
         dict 後面的東西要自己放好，如果抓不到就會出現undefine，如果一直有問題請用chrome來debug js檔案
    */}}
    {{- $.Scratch.Add "index" (dict "title" .Title "date" .Date "desc" .Description "tags" .Params.tags "section" .Section "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

Add JSON as additional output format in config.toml
```
[outputs]
home = ["HTML", "RSS", "JSON"]
```
Add search.js and fuse.js (downloaded from fusejs.io) to static/js
這兩個請去github fuse release page下載 (我是找不到在fusejs.io的哪邊有可以載😆，到release page載比較快😎)
- search.js 路徑 : Fuse-6.4.3/src/search/bitap/search.js
  我是不知道為什麼要它，我是沒用到它。
- fuse.js 路徑 : Fuse-6.4.3/dist/fuse.js
Add searchbox html to bottom of layouts/_default/baseof.html
他把第3點取得道的兩個js放到baseof.html之中，
常理上baseof.html會對所有頁面都會有作用，如果你只想要特殊頁面有用，可以自己選擇要放到哪邊去。
這裡面很簡單，主要就是搞一個input的按鍵，導入兩個js即可完成
```
<div id="fastSearch">
  <input id="searchInput" tabindex="0">
    <ul id="searchResults">
  </ul>
</div>
<script src="/js/search/fuse/fuse.js"></script>
<script src="/js/search/fuse/fastsearch.js"></script>
```

Add css styles to your site’s main css file or top of baseof.html

基本上css自己調整就可以了，自己在chrome用檢查去找到各個元素很快就知道了

值得一提的是，如果你抓官方給的CSS，預設會把input隱藏起來，靠快捷鍵觸發後才會顯示

另外即便您調整css，讓它不隱藏，之後在搜尋上打字也是沒用，因為它的觸發條件用熱鍵！

熱鍵觸發之後還會去init物件，也就是Fuse物件(fuse.js)它會去抓取index.json的資料

以下是fastsearch.js的片段代碼內容

 1document.addEventListener('keydown', function(event) {
 2    // CMD-/ to show / hide Search
 3    if (event.metaKey && event.which === 191) {  // windows鍵 + /
 4    // Load json search index if first time invoking search
 5    // Means we don't load json unless searches are going to happen; keep user payload small unless needed
 6        if(firstRun) {
 7            loadSearch(); // loads our json data and builds fuse.js search index  // 會用到fuse.js 這會去抓取index.json的資料
 8            firstRun = false; // let's never do this again
 9        }
10    }
11}

所以如果你只有改css是沒用的

#fastSearch { /* 整個div */
  visibility: hidden;  /* <--要不要隱藏看你 */
}

#fastSearch input { /* input控件 */
}

#searchResults li { /* 搜尋跑出來的li */
}
#searchResults li .title { font-size: 1.1em; margin-bottom: 10px; display: inline-block;}

#searchResults { visibility: inherit; display: inline-block; width: 320px; }
#searchResults a { text-decoration: none !important; padding: 10px; display: inline-block; }
#searchResults a:hover, a:focus { outline: 0; background-color: #666; color: #fff; }

hugo server
Visit localhost:1313/
按下 CMD-/觸發搜尋
它的觸發一定要按下快捷鍵
他的預設用 Windows鍵 + / :
event.metaKey && event.which === 191
我自己是改成 Alt + / :
event.altKey && event.which === 191
- 關於:event.which
- 關於:KeyboardEvent.metaKey

自己用JS做

我這邊提供比較簡單的方法來做

基本上我們可以用

{{ range .Site.RegularPages.ByLastmod.Reverse }}

👉代碼連結

來找到所有頁面

接著可以把內容取出來

再交由js去把結果抓出來

下面我介紹兩種方法，都能實現搜尋

simple-search: 自己刻一個搜尋欄位
dataTable:
利用datatable來渲染整個搜尋結果
可以排序、分頁，擁有一個不錯看的表格！

simple-search

DataTables.js

因為這種方式用到DataTables，所以我先放上DataTables的相關資訊

demo網址

以下是我Hugo中主題的運用

site-search.html
js
- jquery.dataTables.js : 這個就是dataTable的東西，我沒改
- search-by-datatable.js
demo連結