pelican建站攻略补充(站内搜索,和标签云)

2014-09-25 by guozhongxin

pelican建站准备

参见lizherui的一步一步打造Geek风格的技术博客,不累述


添加站内搜索

由于原日志中关于添加google站内搜索的链接失效,在其他地方没有看到特别好的介绍。
我首先尝试了直接在pelicanconf.py中直接添加GOOGLE_CUSTOM_SEARCH_NAVBAR这一条属性,结果在make html之后,左上角的search框,在参考了lizhurui的博客代码后,我是这样实现的。

添加google站内搜索

修改主题:

找到这个主题(tuxlite_tbs)的templates文件夹中的base.html,在这个div(<div class="nav-collapse">)的最后,添加以下内容:

<form class="navbar-search pull-right" action="/search.html">
    <input type="text" class="search-query" placeholder="Search" name="q" id="s">
</form>

更新pelican的主题:

pelican-themes -U .../tuxlite_tbs

创建search.html

之后,在output目录下,新建一个名为search.html的文件,写入下面的内容,其中需要你自己修改的是google站内搜索的ID号,需要自己在google站内搜索的网站上自己申请。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>站内搜索</title>
</head>
  <body>
<style>
#search-box {
    position: relative;
    width: 50%;
    margin: 0;
    padding: 1em;
}

#search-form {
    height: 30px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}

#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}

#search-box input[type="text"] {
    width: 90%;
    padding: 4px 0 12px 1em;
    color: #333;
    outline: none;
}
</style>
<div id='search-box'>
  <form action='/search.html' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Search' type='text'/>
  </form>
</div>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'zh-CN', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '012191777864628038963:**********<!写入你申请的google站内搜索的ID号>)', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchResultsOnly(); 
    customSearchControl.draw('cse', options);
    function parseParamsFromUrl() {
      var params = {};
      var parts = window.location.search.substr(1).split('\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ?
            decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
            keyValuePair[1];
      }
      return params;
    }

    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
      customSearchControl.execute(urlParams[queryParamName]);
    }
  }, true);
</script>
</body>
</html>

生成html,发布

将这个html文件保存在output目录(网站的根目录)下,执行

make html
make github

这样,搜索框就出来了。

1

为了让google站内搜索功能更好的工作,你可在google站长工具中提交你的sitemap(这个可以在pelicanconf.py中配置sitemap插件,着执行make html后能自动生成)。

提交sitemap

引入sitemap插件的工程见lizherui的日志。这样在make html之后就能生成sitemap.xml文件,提交到google站长上,搜索就可以生效了。


添加百度站内搜索

虽然实现了google站内搜索的功能,但是由于GFW的原因导致实际在使用google站内搜索时加载太慢,最终,我还是无奈的选择了百度站内搜索。。。

注册

百度站长平台中注册一个账号,之后添加网站,按照提示验证网站。
之后左侧其他工具中找到站内搜索,按照提示填写基本信息,选择搜索框样式,之后点击查看代码,复制其中内容,留用。

修改主题

同样在base.html的这个个div(<div class="nav-collapse">)的最后,新建一个div,刚才注册最后复制的代码粘贴到这个div中:

<div class="navbar-search pull-right">
    <script>  
        <!略>
    </script>
</div>

更新pelican的主题:

pelican-themes -U .../tuxlite_tbs

生成html,发布

同上

2

提交sitemap

在百度站长工具里提交sitemap的过程和google的类似,需要注意的是百度有自己的sitemap格式,直接用lizherui日志中的方法生成的sitemap.xml不符合百度的要求:

3

百度sitemap要求有

<data><display></display></data>

而我们使用的sitemap工具里没有这个,需要手动的对这个插件进行修改.

配置符合百度站内搜索规则的pelican sitemap插件

找到.../pelican-plugins/sitemap/sitemap.py,找到全局变量XML_URL,将其修改为以下形式:

XML_URL = """
<url>
<loc>{0}/{1}</loc>
<lastmod>{2}</lastmod>
<changefreq>{3}</changefreq>
<priority>{4}</priority>
<data>
<display>
</display>
</data>
</url>
"""

这样,重新make html就能生成一份符合百度站内搜索的sitemap.xml。将其提交到百度站内搜索“提交数据”中,等待百度验证之后,就能体验百度站内搜索功能。

在这里吐槽一句,百度的站长工具确实不如google webmasters,同样是提交sitemap,google可以做到立即生效,百度的要等至少一个小时。如果没有GFW,才懒得用百度的呢。


添加Tags链接

在其他一些pelican主题中,看到有标签云,想到Tags的链接可能比Categories的链接更有用,通过更改主题,添加了侧栏中红框内的Tags链接框。

修改主题

还是找到base.html,找到categories部分:

{% if categories %}
<div class="well" style="padding: 8px 0; background-color: #FBFBFB;">
<ul class="nav nav-list">
    <li class="nav-header"> 
    Categories
    </li>

    {% for cat, null in categories %}
    <li><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
    {% endfor %}                   
</ul>
</div>
{% endif %}

看到这一部分的代码之后,很容易仿写tags链接框的部分:

{% if tags %}
<div class="well" style="padding: 8px 0; background-color: #FBFBFB;">
<ul class="nav nav-list">
    <li class="nav-header"> 
    Tags
    </li>

{% for name, tag in tags %}
    <li><a href="{{ SITEURL }}/{{ name.url }}">{{ name }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}

将tags代码添加到categories框之后。执行

pelican-themes -U .../tuxlite_tbs
make html
make github

这时,你就能看到左侧栏出现的TAGS链接框了。
4

实际上这不是一个能体现tag出现频次的tag云,小弟实在没学过前端技术,大神看到有感兴趣的可以提出解决的方法。


Comments

Fork me on GitHub