前期已经将Ghost博客部署完成了,而且评论系统已经弄好了,但是博客还是不是很完美,就是这个主题自带一个搜索框,但是却没办法使用。无论输入什么内容,总是404页面。这是因为Ghost博客系统自身的问题,但是Ghost后台的搜索框还是很好用的,所以我们需要折腾一个自己的搜索。
1.基本想法
由于我基本不懂node.js所以说修改什么的也就是不可能的了,因此需要一个简单的方法,那就是采用JavaScript。通过JavaScript获得搜索框中的内容然后结合搜索引擎进行搜索,虽然这不是直接的站内搜索,但是这样也是有好处的:
- 搜索能力比较强;
- 服务器压力比较小;
根据这样的想法,我查询了一些资料。虽然曾经学过一点点JavaScript,但是多年不用,基本全忘了,只能是走一步看一步了。首先我们需要一个表单,然后通过JavaScript获得表单内容并跳转,这样就完成了整个搜索过程。
2.表单设置
我的主题是自带一个没用的搜索框的,因此可以直接用这个,但是也可以用下面的代码创建一个小的搜索表单:
1 2 3 |
<form method="post" onSubmit="return setHref(this)" action=""> <input type="text" name="content" id="search-input" > </form> |
注意几个设置,一个是form
的onSubmit
的值设置为调用一个JavaScript函数,并将表单内容传递过去。然后再input
中设置一个name
。后面的JavaScript需要使用这个东西。当然需要好看的话可以自定义css调整这个搜索框。或者使用主题内置的一些css也可以,定义class
就行了。
3.JS跳转设置
接着表单提交的内容,我们采用JavaScript获取表单内容,然后进行跳转:
1 2 3 4 5 6 7 |
<script type="text/javascript"> function setHref(it){ var a=it.content.value; location.href = "https://www.bing.com/search?q="+a+" site:orycho.com"; window.event.returnValue=false; } </script> |
上面的代码是先获取了表单内容,然后用locatio.herf
进行跳转。跳转的链接时将获取的表单内容拼接了bing搜索引擎,这样可以直接跳转到bing搜索引擎进行搜索。
最后将上面的JavaScript代码复制到主题的default.hbs中就可以了。
4.注意与问题
JavaScript代码中的window.event.returnValue=false;
是必须有的,不然没有办法跳转,我试过好几个代码,发现使用按钮直接跳转是可以跳转的,但是使用表单回车就不能跳转。另外这种搜索方式适用于搜索引擎已经索引了你的文章。如果没有索引的话肯定是不行的了。
5.Next-mist主题设置
如果是使用了Next-mist主题,也就是我自己用的这个主题的话,那么就没这么麻烦了,直接打开default.hbs然后拉到底,会看到一段JS代码:
1 2 3 4 5 6 7 8 9 |
<script> $("#search-input").keypress(function(key){ if (key.keyCode == 13) { window.open("https://www.bing.com/search?q=" + $(this).val()+" site:orycho.com", "_blank"); } }); </script> |
这里就是设置这个主题的跳转的地方,不需要其他那么多的设置,直接在这里设置搜索引擎就可以了,简单粗暴。
6.End小结
说好不折腾的,但是还是忍不住弄来弄去,弄了半天,发现Next-mist主题弄好这个搜索非常简单,也是晕,就把查过的资料总结总结弄上来。
关于搜索的搜索引擎设置,这里我使用的是bing,按照易用性上来说,最好是google,但是国内用户就不能使用了,那也就没有办法。及其不推荐baidu这种。我同时向这三个搜索引擎提交网站,bing和google在一个小时内就索引了,但是baidu已经过去两天了,还是没有任何索引结果。另外baidu对于https的索引并不是很好。
最后感谢一下下面网站文章的作者,没有这些文章的帮助,又要浪费生命了。