本文HTML永久地址 doc

1 概述

为了方便访问博客的用户查看相关的文章，需要给博客安装一个相关帖子的功能，在这先感谢Hei Notes指导，给blogger添加相关文章的方案有很多，例如有国内的无觅和国外的linkwithin，而我使用blogger-related-posts

选择原因：

1. 无觅需要注册(舍弃)
2. linkwithin 没有提供文字列表，只提供图片相关
3. blogger-related-posts 提供多种自定义格式，更灵活

最终效果如下：

2 生产脚本

使用https://code.google.com/p/blogger-related-posts/ 功能生产脚本 提供好几个实例 我使用Demo 1 根据自己的配置生产如下脚本

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"  src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class="related-posts-widget">
<!-- {
    blog_url:'http://blog.lihaixin.name'
    ,related_title:'相关文章'
       ,recent_title:'最近文章'
} -->
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

上面脚本包含2个部分，一部分为js,一部分为html 下面分配复制到模板里。

3 操作步骤

3.1 把JS部分复制到head中

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"  src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

复制到

</head>

之前

3.2 把html部分复制到留言系统之前，帖子最后面

由于html模板里对< > ‘不支持，所以需要修改脚本为自己

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class="related-posts-widget">
<!-- {
    blog_url:'http://blog.lihaixin.name'
      ,related_title:'相关文章'
      ,recent_title:'最近文章'
} -->
加载中...
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

添加到

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:include data='post' name='comment_picker'/>

这两句之间，意思为如何是帖子，就在后面加载相关帖子，最好为如下样式

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML --&gt;
&lt;div class="related-posts-widget"&gt;
&lt;!-- {
    blog_url:'http://blog.lihaixin.name'
      ,related_title:&#39;相关文章&#39;
      ,recent_title:&#39;最近文章&#39;
} --&gt;
加载中...
&lt;/div&gt;
&lt;!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--&gt;
 <b:include data='post' name='comment_picker'/>

3.3 修改合适自己的相关文章样式表

官方有个样式案例

我把下面样式表增加到

.related-posts-widget h2 {font-size:18px;}
ul.rpw ul {border-width:0px;}
ul.rpw strong{font-weight:normal;font-size:15px;}
ul.rpw li{border-width:0px; margin-bottom: .25em;padding-top: 0;padding-bottom: 0;}
.widget ul{list-style: disc; padding: 0 2.5em;margin: .5em 0;line-height: 1.4;}

增加到

    ]]></b:skin>

之前

3.4 优化加载(额外步骤)

可以把第一步的脚本存放在自己的服务器上，或者国内的云平台上，有三个优势：

1. 可以减少多一次DNS解析
2. 可以设置缓存时间长一点，这样以后就不需要每次访问页面都加载
3. 设置对js进行压缩，减少加载内容大小

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript" src="http://blog.lihaixin.name/file/blogger/related-posts/jquery.min.js"></script>
<script type="text/javascript"  src="http://blog.lihaixin.name/file/blogger/related-posts/jquery.related-posts-widget-2.0.min.js"></script>
</b:if>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

4 参考资料

1. http://www.blogvela.com/2013/04/related-posts-widget-for-blogger/