請點擊 連結 至官方查看
製作搜尋分為兩種
使用雲端搜尋(google, algolia…)
這類不是進階服務要錢,要不然就是有廣告
使用JS來搞
缺點: 效率慢,搜尋不準
以下的東西都是官方有提到的搜尋
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
我這邊提供比較簡單的方法來做
基本上我們可以用
{{ range .Site.RegularPages.ByLastmod.Reverse }}
👉代碼連結
來找到所有頁面
接著可以把內容取出來
再交由js去把結果抓出來
下面我介紹兩種方法,都能實現搜尋
simple-search: 自己刻一個搜尋欄位
dataTable:
利用datatable來渲染整個搜尋結果
可以排序、分頁,擁有一個不錯看的表格!
因為這種方式用到DataTables,所以我先放上DataTables的相關資訊
以下是我Hugo中主題的運用