ExSearch – 為Typecho帶來實(shí)時(shí)搜索體驗(yàn)的插件

Type-cho 中沒有單獨(dú)的搜索頁，絕大多數(shù)主題的所謂「搜索頁」只是為搜索框單獨(dú)寫了一個(gè)樣式，具體的搜索還是靠頁面跳轉(zhuǎn)。我對 Type-cho 的搜索從來沒有滿意過，因此這次我想辦法將其增強(qiáng)。

• 插件介紹：詳情
• 插件下載：WordPress

我需要為 Type-cho 添加搜索實(shí)時(shí)響應(yīng)、高亮與預(yù)覽功能。澤澤的搜索插件通過 hack Type-cho 的內(nèi)部方法實(shí)現(xiàn)了高亮與過濾功能，但是仍然不能實(shí)現(xiàn)實(shí)時(shí)響應(yīng)。其實(shí)也能理解，如果跟隨輸入實(shí)時(shí)響應(yīng)的話，數(shù)據(jù)庫的壓力大大增加，而且網(wǎng)絡(luò)壓力也大大增加。必須另辟蹊徑。

Hexo 這樣無后端的博客為我提供了新的思路：將內(nèi)容靜態(tài)化，使搜索在前端進(jìn)行。這樣不僅降低了數(shù)據(jù)庫壓力，節(jié)省了網(wǎng)絡(luò)請求數(shù)，同時(shí)也不用與 Type-cho 的內(nèi)部方法作斗爭。唯一的缺點(diǎn)是對內(nèi)容過多的站點(diǎn)來說需要傳輸一定數(shù)量的內(nèi)容到前端，但這通過緩存靜態(tài)化與前端長緩存也能緩解。

使用

• 下載頁底提供的文件
• 解壓文件夾，并將文件夾重命名為 ExSearch。
• 上傳至插件目錄，在后臺(tái)啟用
• 保存一次插件設(shè)置，并點(diǎn)擊重建索引。

在主題中，在任何可點(diǎn)擊的元素上加上?class="search-form-input"，點(diǎn)擊即可喚起搜索框。

自定義 hook

默認(rèn)的，點(diǎn)擊搜索結(jié)果時(shí)會(huì)直接跳轉(zhuǎn)至對應(yīng)的頁面，但是若你的主題使用了 AJAX 或者 PJAX 技術(shù)，你可能需要使用自定義的鉤子來處理點(diǎn)擊事件（例如發(fā)起一次 PJAX 操作）。在頁面中插入一個(gè)函數(shù)如下：

<script>
function ExSearchCall(item){
    // your code
}
</script>

其中，item?是一個(gè) JQuery 對象。舉例：

function ExSearchCall(item){
    if (item && item.length) {
        $('.ins-close').click(); // 關(guān)閉搜索框
        let url = item.attr('data-url'); // 獲取目標(biāo)頁面 URL
        $.pjax({url: url, 
            container: '#pjax-container',
            fragment: '#pjax-container',
            timeout: 8000, }); // 發(fā)起一次 PJAX 請求
    }
}

可能的問題

如果你的站點(diǎn)內(nèi)容過多導(dǎo)致建立索引失敗，請?jiān)?Plugin.php 第 136 行左右的位置，取消下面兩行的注釋：

$sql = 'SET GLOBAL max_allowed_packet=4294967295;';
$db->query($sql);

注意，這需要高級權(quán)限。你也可以手動(dòng)對數(shù)據(jù)庫執(zhí)行：

mysql > SET GLOBAL max_allowed_packet=4294967295;

Credit

本項(xiàng)目靈感來源于?Wikitten?與?PPOffice，感謝。

補(bǔ)充：

• 文本來源：詳情

插件具體的實(shí)現(xiàn)原理是：

1. 插件中生成整個(gè)數(shù)據(jù)庫文章的json數(shù)據(jù)（并使用typecho的鉤子可以保證在發(fā)表新文章、修改文章中時(shí)候同步更新數(shù)據(jù)），這個(gè)數(shù)據(jù)有兩種方式存儲(chǔ)（文件形式，數(shù)據(jù)庫）
2. 博客打開的時(shí)候就會(huì)加載到這個(gè)json數(shù)據(jù)到前端
3. 搜索的時(shí)候直接拿這個(gè)json數(shù)據(jù)進(jìn)行匹配就可以了

但我把代碼用到我的博客上的時(shí)候，出現(xiàn)了一些問題。

當(dāng)文章數(shù)目很多的時(shí)候（我的博客目前是217篇文章），生成的json數(shù)據(jù)大小是很大的，我生成之后是1.9M的大小，使用jquery的 getjson方法很耗時(shí)（我測試是19s，和服務(wù)器有關(guān)，雖然不阻礙頁面渲染）

于是產(chǎn)生兩個(gè)問題：

1. 在json數(shù)據(jù)在請求的這個(gè)過程中，搜索功能是沒辦法用的
2. json數(shù)據(jù)過大造成的流量問題

（熊貓小A是一打開博客就開始請求這個(gè)json文件，我個(gè)人覺得搜索其實(shí)并不是一個(gè)常用功能，所以我是點(diǎn)擊搜索框才開始請求這個(gè)json數(shù)據(jù)）

當(dāng)然上面兩個(gè)問題不是特別大的問題。

但是如果你的博客的文章非常之多！這個(gè)json數(shù)據(jù)會(huì)很大，導(dǎo)致的請求讀取時(shí)間就可能非常長了，而且造成不必要的流量加載。

我的解決方法是：前端不要一次性加載整個(gè)文章的json數(shù)據(jù)，而是通過php使用SEESION變量存儲(chǔ)讀取緩存的json數(shù)據(jù)。

if ($_SESSION['search_cache'] === false){
            $object['status'] = false;
            //這部分如果數(shù)據(jù)是存儲(chǔ)在數(shù)據(jù)庫中，就從數(shù)據(jù)庫中讀取，我這里是從緩存文件中讀取
            $filePath = __TYPECHO_ROOT_DIR__ . __TYPECHO_PLUGIN_DIR__ . DIRECTORY_SEPARATOR.'Handsome'.DIRECTORY_SEPARATOR.'cache'.DIRECTORY_SEPARATOR.'search.json';
            $file = file_get_contents($filePath);
            if ($file === false){
                $fail = "{}";
                $_SESSION['search_cache'] = $fail;
                echo $fail;
            }else{
                $_SESSION['search_cache'] = $file;
            }
        }else{
            $object['status'] = true;
        }
        
        //處理搜索數(shù)據(jù)，返回結(jié)果
        ...

通過監(jiān)控輸入框的值，不斷發(fā)起ajax請求，后端直接使用SEESION變量的值進(jìn)行返回結(jié)果就可以。

優(yōu)點(diǎn)： 多次搜索，只需要一次讀取文件的消耗（之后使用SEESION變量）
缺點(diǎn)： 多次搜索會(huì)有多次ajax請求（但這個(gè)ajax請求不會(huì)讀數(shù)據(jù)庫，也不會(huì)讀文件，總體來說消耗是非常小的，所以速度也是很快的）

（之前實(shí)現(xiàn)也是監(jiān)控輸入值發(fā)起ajax請求，只不過每次ajax請求都會(huì)操作數(shù)據(jù)庫，這個(gè)速度很慢）

當(dāng)然這種方法也只是一種權(quán)衡罷了，畢竟ajax請求再快也會(huì)受服務(wù)器是否阻塞和網(wǎng)絡(luò)原因影響，而一開始就加載好全部的json數(shù)據(jù)則真正達(dá)到“即時(shí)搜索”。

關(guān)于搜索的問題，也許這個(gè)Typecho插件能夠幫助到您：

Soso – 搜索增強(qiáng)Typecho插件

Muze

• 20年2月17日
• 喜歡：0
• 瀏覽：1.1k