如何在 Ghost 網站上添加搜索功能

我想在自己使用 Ghost 架設的網站上添加搜索功能。

你可以在這個頁面上看到這個教程的最終效果：https://ritywool.it/ricerca/。

當你第一次開始處理這個任務時，你會覺得 “這一定很簡單”。

但不知何故 Ghost 軟件並沒有提供一個簡單的解決方案，你需要使用第三方插件並修改模板。這確實需要一位懂得處理這些的開發者。

不知道為什麼他們沒有提供一個內建的簡單解決方案，而不是需要像我這樣的開發者花時間來調整主題。

這真是奇怪，因為他們在管理面板中有搜索功能，但卻沒有解決辦法來面對公共頁面。他們官方建議使用 Google 自定義搜索，但這實際上並不是一個解決方案。

如果是一個靜態網站生成器，這也還可以理解，因為它沒有運行搜索的引擎，但 Ghost 不是一個靜態網站生成器。

我探索了一段時間的可能選項。他們文檔中建議的一個選項是 GhostHunter，但這對我來說沒有起作用。我嘗試了一下，但在控制台中出現了各種 JavaScript 錯誤，而且我沒有耐心去看問題出在哪裡。這個項目似乎也已經被停止開發了，最後一次提交是 2 年前。

然後我找到了 Ghost Finder，這個插件完美地解決了問題，所以我在這裡解釋一下如何使用。

它是一個使用 Ghost API 來搜索文章的 JavaScript 庫。

首先，我在本地創建了網站的副本（使用 npm install ghost-cli -g 和 ghost install local），並使用了在生產環境上使用的主題。我從 /ghost/#/settings/design 下載了這個主題。

接著，我下載了 Ghost Finder 庫並將其放在 assets 目錄下。

然後，我在 Ghost 管理面板中創建了一個具有 “/search” URL 別名的 search 頁面。

然後我進入了編輯器，創建了一個 page-search.hbs 文件（後面的 - 之後的文件名必須與頁面別名匹配）。

我在命令行中使用 ghost restart 重新啟動 Ghost，以使其識別到這個頁面（這只在本地需要，生產環境上不需要）。

我使用了 Casper 默認主題，這部分可能因為你使用的主題不同而有所不同，不過我在 default.hbs 文件中加入了 Ghost Finder 的 JavaScript 文件（這會載入到所有頁面，不幸的是）：

1	<script src='{{asset 'ghost-finder/dist/ghost-finder.js'}}'></script>

放在 </head> 標籤之前。

然後在 page-search.hbs 中，我複製了 page.hbs 的內容，然後將頁面內容替換為：

<div style="text-align: left;">
 <input id='search-input' type='text' placeholder='Search' style="color: black; padding: 20px" />
 <div id='search-result'></div>
</div>

<script>
 new GhostFinder({
 input: '#search-input',
 showResult: '#search-result',
 contentApiKey: 'YOURKEY',
 })
</script>

contentApiKey 是你需要從你的網站中添加的一個唯一鍵，否則它將無法正常工作。進入 Ghost Admin 中的集成面板，點擊 “添加自定義集成” 即可獲取此鍵，然後在這裡粘貼。

由於該站點不是以英語為基礎，所以我還添加了一個自定義搜索模板，以便將其翻譯為意大利語：

new GhostFinder({
 //...,
 resultTemplate: `<ul class="search-results-wrapper">
 <p>Risultati della ricerca: ##resultCount</p>
 ##results
 </ul>`
})

最後，我添加了一個導航菜單，指向搜索頁面。

就是這樣了。對於像我這樣的開發人員來說，這並不長而且也不複雜，但對於其他人來說幾乎不可能搞懂？

這是一個本應可以自動化的工作，但很可惜現在並沒有，當你在這上面浪費時間時，你真的會感到一點不值。

我希望這篇文章可以讓其他人更容易地實現這個功能。

tags: [“Ghost”, “search”, “integration”, “JavaScript”, “developer”]