使用 Google Custom Search Engine 增强博客搜索能力(实际体验还不如本地搜索),实验环境为 Hexo + Suka主题,目标为在科学网络环境下调用 Google CSE ,在常规网络环境下使用Local Search。
Google CSE 创建
使用 CSE 需要通过 https://cse.google.com/
自行创建一个,记录下得到搜索引擎 ID,在配置文件中使用。

设置搜索引擎搜索范围,指定本站:

其他相关设置可根据个人需求自行调整。
Suka 主题更改
在配置文件 themes\suka\_config.yml
中的 Search 部分添加字段,方便后续更改与调整,修改内容如下:
1 2 3 4 5
| search: use: googlecse swiftype_key: googlecse_id: 005901140517734173075:cfrhjvvby4c
|
更改 layout 部分内容,用以生成最终代码,首先修改 themes\suka\layout\_pages\search.ejs
增加 googlecse
的内容,这部分内容与配置文件中 use 部分使用一致,可根据个人习惯修改名称,保持两侧一致即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <div class="container search-container"> <div class="main-container"> <!-- # Title # --> <h2 class="page-title"><%= __('search.main') %></h2> ...... <% if (theme.search.use === 'googlecse') { %> <%- partial('_plugin/search/googlecse/main') %> <% } %> </div> </div> ...... <% if (theme.search.use === 'googlecse') { %> <%- partial('_plugin/search/googlecse/common') %> <% } %>
|
匹配配置文件,指定所需的文件地址。
在 themes\suka\layout\_plugin\search\
下创建 googlecse
目录,与 themes\suka\layout\_pages\search.ejs
中指定路径保持一致,之后创建 common.ejs 与 main.ejs 两个文件,其中内容直接复制 themes\suka\layout\_plugin\search\local-search
中文件。
修改 HTML 部分内容如下,增加 CSE 使用的 <div class="gcse-search"></div>
部分内容,并使用 style="display:none"
在初始情况下隐藏。
1 2 3 4 5 6 7 8 9 10 11
| <div id="gcse" style="display:none"><div class="gcse-search"></div></div> <div id="ls"> <div id="search-input"> <form class="input-group" autocomplete="off"> <input maxlength="80" type="search" id="search-field" name="s" class="form-input input-lg" placeholder="<%= __('search.placeholder') %>" required> <button class="btn btn-primary input-group-btn btn-lg" type="submit"><%= __('search.main') %></button> </form> </div> <div id="search-result-info" hidden><%- __('search.num', '<span id="search-result-num"></span>')%></div> <div id="search-output"></div> </div>
|
之后在下方增加 Script 部分代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <script> var head = document.getElementsByTagName('head')[0] || document.documentElement; var s = document.createElement('script'); s.type = 'text/javascript'; s.onload = s.onreadystatechange = function() { if (!0 || this.readyState === 'loaded' || this.readyState === 'complete') { document.getElementById('gcse').setAttribute("style", "display:block"); document.getElementById('ls').setAttribute("style", "display:none"); document.getElementsByTagName("title")[0].innerText = 'Slowly Search By Google CSE '; } }; s.src = 'https://cse.google.com/cse.js?cx=<%= theme.search.googlecse_id %>'; head.appendChild(s); </script>
|
使用 JavaScript 加载 Google CSE 所需的 JS 文件,并在加载成功后执行回调函数内容,其中状态判断部分使用 singcl 分享的方案。
效果测试如下:
在科学网络环境下:

常态:

展示效果如此,但是 Google CSE 使用效果就很不尽人意了。
Author : Rhysn
This work is licensed under a CC BY-NC-SA 4.0 International License.
Link to this article : https://ultranti.com/article/google_search_cse_hexo/