整合 Google 自定义搜索到 Pelican

总感觉好像我搭建 Blog 的目的跟别人不太一样,小伙伴们都在正儿八经的写出一些有价值有意义的文章,我却在那折腾怎么实现这个功能,怎么实现那个功能。可问题是自己又不会整,只能到处搜寻答案然后慢慢试结果。好在人品不错,虽然浪费不少时间,但折腾出结果的满足感确实挺爽。本文记录一下将 Google 自定义搜索整合到 Pelican 的过程。

说是整合到 Pelican,其实只是通过 jinja2 的一些规则将 Google 自定义搜索代码插入到主题的“搜索页面.html”中。

第一步:注册并获取 Google 自定义搜索代码

先通过访问 https://www.google.com/cse/ 创建自定义搜索引擎。创建完毕后进入“外观”面板,选择“全宽”的布局模式。保存后进入“获取代码”,获得 Google 自定义搜索代码。

<script>
  (function() {
    var cx = '012467883927724485227:eaoxbeaeyty';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

第二步:创建搜索结果页

为了让搜索结果在博客内部显示,我们需要在主题的 templates 中创建一个新的页面,用来显示搜索结果。新建一个文件,命名为 search.html。我是直接复制 page.html,重命名为 search.html 并相应修改文件中的 title 及 description,然后插入第一步中得到的 Google 自定义搜索代码到相应的位置。至此搜索结果页创建就完成了。

第三步:修改当前主题的搜索提交表单

这里算是最关键的一步啦,当用户点击你博客上任意页面的站内搜索按钮的时候,可以将用户引导到刚刚创建的搜索结果页上。我们需要在主题文件夹中找到搜索框所在的文件,每个主题都不同,一般是在 header.html 中,找到类似以下的代码:

<form method="get" action="/search.html" >
<input type="text" name="s" class="textfield" placeholder="Press enter to search ..." />
</form>

需要注意的地方:

  1. method="get"
  2. action="/search.html" action 的地址为 search.html 在生成的站点中的相对地址,一般是在根目录下,即 /search.html。
  3. 文本框 name="s" 不管主题搜索框的 name 等于什么,都将引号内的字母改成 q,即 name="q"。

第四步:使用 javascript 让搜索结果页的 title 中显示搜索关键字(可选)

由于静态页面不能从数据库获取输入的关键字,所以只能从搜索结果页的 URL 下手了,假设搜索结果页的 URL 为:https://lusir.me/search.html?q=solidworks。我们想得到参数 q 的值,则可以通过以下函数调用。

var reg = new RegExp("(^|&)" + "q" + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
var context = "";
    if (r != null)
        context = r[2];
    if(context.length>0)
        {document.title = "║" + decodeURIComponent(context) +"║" + "的搜索结果 - 擼sirの避風港";}

上面那段的具体意思我也不太清楚,大概就是使用正则式将 url 分为 3 部分,以 q 为分界点,我们需要的就是 q= 之后的那部分(即 context)。匹配成功之后利用 context 给 title 赋值,但是这样赋值之后的 title 不能正确显示中文字符,所以需要使用关键字 decodeURIComponent 来将 context 还原成中文字符。

第五步:调整 CSS

功能实现了之后就是美化了。按照自己的意愿调整CSS即可。

大功告成,此后就可以在主题原始的搜索框上使用 Google 自定义搜索了。

PS:参考文章如下:

文章作者
发布时间
分类
标签