整合 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>

需要注意的地方：

method="get"
action="/search.html" action 的地址为 search.html 在生成的站点中的相对地址，一般是在根目录下，即 /search.html。
文本框 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：参考文章如下：