Ghost搜索设置

ghost

前期已经将Ghost博客部署完成了,而且评论系统已经弄好了,但是博客还是不是很完美,就是这个主题自带一个搜索框,但是却没办法使用。无论输入什么内容,总是404页面。这是因为Ghost博客系统自身的问题,但是Ghost后台的搜索框还是很好用的,所以我们需要折腾一个自己的搜索。

1.基本想法

由于我基本不懂node.js所以说修改什么的也就是不可能的了,因此需要一个简单的方法,那就是采用JavaScript。通过JavaScript获得搜索框中的内容然后结合搜索引擎进行搜索,虽然这不是直接的站内搜索,但是这样也是有好处的:

  • 搜索能力比较强;
  • 服务器压力比较小;

根据这样的想法,我查询了一些资料。虽然曾经学过一点点JavaScript,但是多年不用,基本全忘了,只能是走一步看一步了。首先我们需要一个表单,然后通过JavaScript获得表单内容并跳转,这样就完成了整个搜索过程。

2.表单设置

我的主题是自带一个没用的搜索框的,因此可以直接用这个,但是也可以用下面的代码创建一个小的搜索表单:

注意几个设置,一个是formonSubmit的值设置为调用一个JavaScript函数,并将表单内容传递过去。然后再input中设置一个name。后面的JavaScript需要使用这个东西。当然需要好看的话可以自定义css调整这个搜索框。或者使用主题内置的一些css也可以,定义class就行了。

3.JS跳转设置

接着表单提交的内容,我们采用JavaScript获取表单内容,然后进行跳转:

上面的代码是先获取了表单内容,然后用locatio.herf进行跳转。跳转的链接时将获取的表单内容拼接了bing搜索引擎,这样可以直接跳转到bing搜索引擎进行搜索。

最后将上面的JavaScript代码复制到主题的default.hbs中就可以了。

4.注意与问题

JavaScript代码中的window.event.returnValue=false;是必须有的,不然没有办法跳转,我试过好几个代码,发现使用按钮直接跳转是可以跳转的,但是使用表单回车就不能跳转。另外这种搜索方式适用于搜索引擎已经索引了你的文章。如果没有索引的话肯定是不行的了。

5.Next-mist主题设置

如果是使用了Next-mist主题,也就是我自己用的这个主题的话,那么就没这么麻烦了,直接打开default.hbs然后拉到底,会看到一段JS代码:

这里就是设置这个主题的跳转的地方,不需要其他那么多的设置,直接在这里设置搜索引擎就可以了,简单粗暴。

6.End小结

说好不折腾的,但是还是忍不住弄来弄去,弄了半天,发现Next-mist主题弄好这个搜索非常简单,也是晕,就把查过的资料总结总结弄上来。

关于搜索的搜索引擎设置,这里我使用的是bing,按照易用性上来说,最好是google,但是国内用户就不能使用了,那也就没有办法。及其不推荐baidu这种。我同时向这三个搜索引擎提交网站,bing和google在一个小时内就索引了,但是baidu已经过去两天了,还是没有任何索引结果。另外baidu对于https的索引并不是很好。

最后感谢一下下面网站文章的作者,没有这些文章的帮助,又要浪费生命了。


7.Reference

  1. javascript读取表单数据
  2. JS中设置window.location.href跳转无效

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注


Are you human? Click the Pineapple...