Hexo: local search

Local search for hexo blog

hexo 配置本地搜索

注意:
Main Tutorial: 梦中程序员

1. 進入博客根目錄， 然後下載插件

npm isntall hexo-generator-search --save

2. 下載配置文件

git clone https://gitee.com/sjclub/hexo-search-plugin.git

3. 部署配置文件複製js腳本到主題的source/js/目錄下

cp hexo-search-plugin/plugin/*.js themes/landscape/source/js/

並添加入配置中。 我的例子：編輯 themes/landscape/layout/_partial/after-footer.ejs
在最後行加入

<!-- Searche Module-->
<script src="<%- config.root %>js/search.js"></script>
<script src="<%- config.root %>js/load.js"></script>

4. 把search.styl放到主题下的source文件夹下的css目录下

cp hexo-search-plugin/plugin/search.styl themes/landscape/source/css

插入styl在themes/landscape/layout/_partial/head.ejs文件的 <%- css('css/style') %>後面， 加上

<%- css('css/search') %>

5. 插入search.ejs

這樣就就能看見了

6. 最後配置 config
   6.1 更目錄 _config.yml

search:
    path: search.xml
    field: post
    content: true

6.2 主題下的 _config.yml

local_search:
    enable: true  #搜索开关
    location: "right: 50px;top: 30px;" #搜索框位置top/left/bottom/right
    facade: ""  #搜索框样式

7. hexo g 就可以了看見了
   public 下多了一個 search.xml。 這個就是搜索的文件了。不過，我在 hexo s -g的狀態下， 搜索是無效的。上傳了以後， 反而可以了。 23333

上一張效果圖, 搜個函數試試～

最后

直接使用的話，移動版網頁是無法使用這個功能的。 猜測應該是， 作者認爲在手小屏幕的情況下彈出這個框太醜了， 所以就關掉了。如果想要打開這個功能， 只需要在 load.js中的21行，if ($('.local-search').size() && !isMobile.any()) {
把&& !isMobile.any()刪除， 手機端就也能正常使用了！