我想在自己使用 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 文件(這會載入到所有頁面,不幸的是):
<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>`
})
最後,我添加了一個導航菜單,指向搜索頁面。
就是這樣了。對於像我這樣的開發人員來說,這並不長而且也不複雜,但對於其他人來說幾乎不可能搞懂?
這是一個本應可以自動化的工作,但很可惜現在並沒有,當你在這上面浪費時間時,你真的會感到一點不值。
我希望這篇文章可以讓其他人更容易地實現這個功能。