Hugo 加入 Google Custom Search 站內搜尋功能

由於 中文 的語言特性,要切分詞做精準搜尋不容易,為節省時間就直接用 google 提供的站內搜尋:Google Custom Search。 我使用 Hugo Mainroad 佈景主題,已具備 search widget,所以設定起來非常容易。

安裝 Google Custom Search 執行環境

  1. 先在 google 申請帳號 然後 登入帳號。
  2. 打開 瀏覽器 進入 https://cse.google.com.tw/cse/all
  3. 勾選 搜尋引擎 → [ 新增 ]。
  4. 輸入 要搜尋的網站,我選擇搜尋 網站全部www.myblog.com/*
  5. 語言 → 中文(繁體)
  6. 輸入 搜尋引擎的名稱 ( 可修改 ) 然後按 [ 建立 ]。
    恭喜!
    你已經成功建立搜尋引擎。
    

    ``

  7. 新增到您的網站 → 按 [ 取得程式碼 ]
    <script async src="https://cse.google.com/cse.js?cx=XXXXXXXXXXXX"></script>
    <div class="gcse-search"></div>
    

    ``

  8. 記下 cx=XXXXXXXXXXXX 碼 或 點擊左欄 [編輯搜尋引擎] 下拉 [搜尋引擎名稱] → 設定 → 基本資訊 的 下方 搜尋引擎 ID → [複製到剪貼簿]。
  9. 檔案總管 進入 f:\Hugo\Sites\您的網站名 目錄。
  10. 用 “記事本” 打開 config.toml
  11. 在 config.toml 配置文件中加入 cx 參數
    [Params]
    googleCustomSearch = "XXXXXXXXXXXX" # Google 搜尋引擎 ID
    
    [Params.sidebar]
    widgets = ["search", "recent", "categories", "taglist"] # 佈景主題要有提供 "search" widget 才需檢查此項
    
  12. 檔案總管 進入 F:\Hugo根目錄\Sites\您的網站名\themes\佈景主題\layouts\partials\widgets
  13. 文字編輯器 打開 search.html
  14. 修改 action
    action="https://google.com/search" 
    改成
    action="https://cse.google.com/cse" 
    表示使用 Google Custom Search 來搜尋。
    
  15. 修改 input
    <input type="hidden" name="sitesearch" value="{{ .Site.BaseURL }}" />
    改成
    <input type="hidden" name="cx" value="{{ .Site.Params.googleCustomSearch }}" />
    

    其中 .Site.Params.googleCustomSearch 表示將( 步驟 9. ) config.toml 文件中的 googleCustomSearch 賦值給 cx

  16. 設定完後要等幾天才可以進行站內搜尋。

參考資料連結 Reference