📄
hexo
  • Introduction
  • 目录
    • 前言
    • 基本介绍
      • 1.1 安装环境
      • 1.2 基本命令
      • 1.3 初始化
      • 1.4 Markdown书写
      • 1.5 文章Front-matter
      • 1.6 第一篇文章
      • 1.7 部署到Web服务器
      • 1.8 托管到Github或Coding
    • 自定义主题
      • 2.1 修改标题
      • 2.2 去Google化
      • 2.3 替换评论服务
      • 2.4 添加百度统计
      • 2.5 新浪微博挂件
      • 2.6 微信二维码挂件
      • 2.7 添加文章目录
      • 2.8 添加回到顶部按钮
      • 2.9 集成推荐模块
      • 2.10 添加计数器
      • 2.11 添加日历云挂件
      • 2.12 添加站内搜索
      • 2.13 国际化
    • 创建主题
      • 3.1 了解主题目录
      • 3.2 了解布局
      • 3.3 选择技术
    • 插件
      • 4.1 脚本
      • 4.2 插件
      • 4.3 脚本示例
      • 4.4 插件示例
    • 致谢
Powered by GitBook
On this page

Was this helpful?

  1. 目录
  2. 自定义主题

2.12 添加站内搜索

Previous2.11 添加日历云挂件Next2.13 国际化

Last updated 5 years ago

Was this helpful?

Hexo好多的主题都是默认链接到Google的搜索,并且Hexo官方的辅助函数里也有<%- search_form(options) %>,插入Google的搜索框,同样你可以自定义一个简单的链接指向百度也是可以的。

但是这里要介绍的并不是指向某个搜索引擎的搜索,这里介绍一种站内搜索的方式,同样也是要依靠第三方服务-

首先按照提示注册一个账号,注册完之后按照提示一步一步往下走。

大概过个十来分钟,在Content里就能看到抓到的站点页面。

接下来就是在站点中安装它,根据提示有两部分代码需要添加。

将上图中的一段js代码复制到after_footer.ejs文件中,如下所示:

<!-- 站内搜索-Swiftype -->
<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

  _st('install','sC-iNFrvTTNtiXEVNwo1','2.0.0');
</script>

最后修改一下搜索框的input标签即可。注意:这里使用的是的示例,并非默认主题。

 <div class="search">
  <form action="<%- url_for("search/index.html") %>" method="get" accept-charset="utf-8">
     <input type="text" id="search" class="st-default-search-input" placeholder="Search" />
  </form>
</div>

最后的最后,重新部署博客至服务器上,点击搜索,效果如下图。

该服务的实际效果是否有效,需要各位自己去验证;并且该服务并非免费的哦。

jpg
Swiftype - Site search and enterprise search
我博客
20160904147299282192067.jpg
20160904147299290972957.jpg
2016090414729929704023.jpg
jpg
20160904147299739443672.jpg