hexo使用本地搜索

很多个人站长分享技术文章的时候都是在自己搭建的博客上,但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器,所以就选择了在git上写博客,hexo因为简单方便被很多博主所选择,同时就出现了一个问题,要么不想自己去写一个自己想要的主题模板,要么就是选择了一个喜欢的主题模板,但是对于提供的功能总有那么一点不满意,这篇文章呢,我就介绍一个博文本地搜索的插件使用。


hexo-search-plugin

这个插件是针对那些主题没有集成搜索功能的,我们喜欢这些主题但是又想用搜索功能,除了那些百度站内搜索以外,我们还可以本地搜索,使用hexo-generator-search插件生成搜索文档,然后自己写ccs、js来进行本地搜索。

点击下载插件

插件效果图:

1.png

配置教程

  1. 下载一个自己喜欢的主题
  2. 安装hexo-generator-search插件
  3. 配置项目的_config.yml在最后添加如下(详细配置可以去npm商店或者git仓库看文档)
search:
    path: search.xml
    field: post
    content: true
  1. 切换到自己喜欢的主题
  2. 把search.js和load.js放到主题下的source文件夹下的js目录下
  3. 然后找个公共文件,引入这俩个js(如果不会找公共的文件,可以随便搜索一个js目录下有的js文件,根据文件名字判断哪个是公共的,一般符合开发规范的都是在footer.ejs中引入)
  4. 把search.styl放到主题下的source文件夹下的css目录下
  5. 然后在style.styl中引入
  6. 把search.ejs放到layout中
  7. 然后在一个公共文件引入,可以和上面引入js的是同一个页面
  8. 配置主题下的_config.yml
local_search:
    enable: true  #搜索开关
    location: "right: 50px;top: 30px;" #搜索框位置top/left/bottom/right
    facade: ""  #搜索框样式

有疑问可联系QQ305530751

梦中程序员系列教程

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容