排序的藝術
如果您還沒聽說，Meilisearch v0.22 已經發布，並且它帶有一個廣受期待的新功能：在搜尋時排序。
搜尋時排序是指根據查詢時決定的參數對結果進行排序。預設情況下，Meilisearch 會根據其相關性來排序結果，但您可以設定讓使用者在搜尋時決定他們想先看到哪些結果。
讓我來向您展示此功能有多強大。如果我想搜尋 MacBook 並按價格升序排列結果，我會發送以下查詢
curl -X POST 'http://127.0.0.1:7700/indexes/computers/search' --data '{ "q": "MacBook", "sort": [ "price:asc" ] }'
我可以反過來，按價格降序搜尋。我只需要在我的請求中將 asc 替換為 desc。
舊方法
在 Meilisearch v0.22 之前，您只能使用自訂排名規則來排序搜尋結果。
感謝自訂排名規則，我們可以按選擇的數字屬性對搜尋結果進行排序。但是，排序不是在搜尋時進行的，排序順序是在我們的索引設定中決定的。
為了更改使用者介面中搜尋結果的排序順序，我們必須複製索引並為每個索引設定不同的自訂排名規則。
這就是我幾個月前為我們的 MoMA 示範所做的事情。對於那些錯過的人，MoMA 示範是一個使用 現代藝術博物館在其 GitHub 儲存庫中提供的藝術品資料集創建的 Meilisearch 示範。您可以在這篇部落格文章中了解有關該示範的更多資訊，我想讓使用者能夠按日期排序藝術品，所以我不得不創建三個索引
- artWorks 具有預設的內建排名規則
- artWorksAsc 具有升序排序的自訂排名規則
- artWorksDesc 具有降序排序的自訂排名規則
// Get or create indexes const artWorksIndex = await client.getOrCreateIndex('artWorks', { primaryKey: 'ObjectID' }) const artWorksAscIndex = await client.getOrCreateIndex('artWorksAsc', { primaryKey: 'ObjectID' }) const artWorksDescIndex = await client.getOrCreateIndex('artWorksDesc', { primaryKey: 'ObjectID' }) const defaultRankingRules = [ 'typo', 'words', 'proximity', 'attribute', 'exactness' ] const rankingRulesAsc = [ 'typo', 'words', 'proximity', 'attribute', 'exactness', 'asc(DateToSortBy)' // ascending sort ] const rankingRulesDesc = [ 'typo', 'words', 'proximity', 'attribute', 'exactness', 'desc(DateToSortBy)' // descending sort ]
複製或三重複製給人一種在搜尋時排序的印象，因為 Meilisearch 非常快。
當時，排序在我們的路線圖中，「正在考慮」標籤頁中，並且是最受歡迎的功能之一（86 票）。
我們有一個公開路線圖，您可以在其中提交功能或整合想法，並為現有的想法投票。
使用新的 v0.22 排序功能
今天，它已成為現實。我已經更新了示範以整合此功能。讓我們看看發生了哪些變化。
幕後花絮
首先，我已將以下行添加到設定中
sortableAttributes: ['DateToSortBy']
此新增是必要的，因為我們需要通知 Meilisearch 我們想要用於排序的屬性。
我們只需要一個索引（而不是三個）和預設的排名規則。這大大減少了後端程式碼。您可以更改 sort 規則的位置，以根據您的需求調整搜尋結果的相關性。預設情況下，sort 規則在排名規則的第五個位置，以推廣與使用者搜尋相關的結果。
您可以在這裡了解有關排名規則及其如何影響相關性的更多資訊。
如果您好奇為什麼 sort 規則預設位於第五個位置，您可以查看這個 GitHub 問題，其中我們的產品經理解釋了這個選擇。
透過這些修改，上面的大型程式碼塊已簡化為以下行
// Get or create the index const index = await client.getOrCreateIndex('artWorks', { primaryKey: 'ObjectID' })
很簡單，對吧？但是，前端呢？
成為焦點
對於這個示範，我使用了 Vue InstantSearch，結合 Instant Meilisearch。這將 Meilisearch 實例與開源 InstantSearch 前端工具連接起來，讓我們可以輕鬆自訂搜尋環境。
先前的程式碼如下所示
<ais-sort-by :items="[ { value: 'artWorks', label: 'Featured' }, { value: 'artWorksAsc', label: 'Date asc.' }, { value: 'artWorksDesc', label: 'Date desc.' } ]" :class-names="{ 'ais-SortBy': 'MyCustomSortBy' }" />
我只需要將其轉換為這樣
<ais-sort-by :items="[ { value: 'artWorks', label: 'Featured' }, { value: 'artWorks:DateToSortBy:asc', label: 'Date asc.' }, { value: 'artWorks:DateToSortBy:desc', label: 'Date desc.' } ]" :class-names="{ 'ais-SortBy': 'MyCustomSortBy' }" />
如您所見，我們不需要使用 3 個不同的索引（artWorks、artWorksAsc 和 artworksDesc），只需要將屬性的名稱附加到 artWorks 索引，後跟所需的排序順序 asc 或 desc。
'artWorks:DateToSortBy:asc' 'artWorks:DateToSortBy:desc'
就是這樣。流暢且簡單。您可以在這裡進行測試。
以「Magritte」查詢，按日期升序然後降序排序的網路介面 GIF
終端使用者可能不會注意到差異，但資源方面效率更高。
v0.22 的另一個巨大優勢是新的索引器。它比以前快得多，因此如果您仍然使用較舊版本的 Meilisearch，我強烈建議您升級它。
示範的原始碼可在GitHub上找到。我邀請您試玩它，只要它們是字串或數字值，您就可以新增其他屬性來排序。如需排序的更深入說明，請查看文件的專門章節。
圖片由 Héctor J. Rivas 在 Unsplash 上提供
如何將 AI 驅動的搜尋新增到 React 應用程式
使用 Meilisearch 的 AI 驅動搜尋建立 React 電影搜尋和推薦應用程式。
使用 Blazity 建立您的 Next.js Shopify 店面
了解如何使用 Next.js 和 Blazity 商業入門套件建立 Shopify 店面。
