logo of Shuibaco

替换“较新的帖子”“较早的帖子”链接为文章标题

2013. / 890字 / 1,134阅 / 0评

2013-10-23补充:6月26日的问题解决方法有三:
一、 (newerLinkTitle + " }")("{ " + olderLinkTitle) 中的箭头不能省略,建议用 < > 或者 { },标签(Label)页面就能显示箭头帮助导航;
二、突破20篇文章限制;
三、用页码代替“上一篇”“下一篇”。详情可参考建立 Blogger 存档页面(二)


2013-06-26补充:由于发现替换标题之后,标签(Label)页面无法显示“较新的帖子”、“较早的帖子”链接,导致只能显示该标签(Label)以下的前20篇文章。这可能与我更改了标签(Label)页面的显示方式有关,所以把此功能撤下。


回到了久违的 Blogger,又开始马不停蹄地折腾起来。就像跟小三离婚后又找回结发妻子复婚一样充满怀念却又不失激情。这几天为了修复这段“感情”付出了不少努力,情郁于中,不得不发泄,所以接下来就让我把“新仇旧账一起算”,像当初刚搬到 WordPress 洋洋洒洒了一系列新手笔记一样,这次定得好好总结一番,以启后人。今天要记录的是如何使 Blogger 能够拥有如 WordPress 般靓丽的上下篇文章导航。

也不知道是不是众所周知,Blogger 的“较新的帖子”和“较早的帖子”链接就像隔着衣服瘙痒一样,有是有,但力道不够。既然都给出链接,为什么不再友好一些直接给出对应标题,也好让人知道文章内容。难道是刻意保持神秘,希望能吸引点击?总之,就我个人而言,我还是喜欢能显示标题,这样更符合用户体验。如果你跟我想得一样,那么就接着往下看吧。

开始干活

一、加载 jQuery

由于实现这项功能得靠这货,所以请到 jQuery 官方主页引用最新的地址。目前最新的是1.10.1:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' type='text/javascript'/>

进入后台,选择 Template > Edit HTML,将以上代码粘贴至 </header> 前面。注意:如果你的模板里已经有类似代码,要不就替换为最新的,要不就不要变,不需要重复引用。

二、添加代码

在后台 Layout 界面最下方添加小工具,选择 HTML/JavaScript,复制以下代码在内容框,标题留空:

<script type="text/javascript">
  $(document).ready(function(){
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
      var newerLinkTitle = $("a.blog-pager-newer-link").text();
      $("a.blog-pager-newer-link").text(newerLinkTitle + " }");
    });
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
      var olderLinkTitle = $("a.blog-pager-older-link").text();
      $("a.blog-pager-older-link").text("{ " + olderLinkTitle);//rgt
    });
  });
</script>

其中 (newerLinkTitle + " }")("{ " + olderLinkTitle) 中的 }{ 是标题边上的箭头,可以自行替换,比如 。鼠标悬停在标题上时,会显示“较新的帖子”或“较早的帖子”以帮助访客确认。

最终效果

最终效果
最终效果

参考文章

  1. Replace Older & Newer post links with post titles
  2. Customizing blog pager (Home, Newer Post & Older Post links)(如果你想要进一步修改“较新的帖子”、“较早的帖子”和“主页”链接样式)
1,131°
Blogger 的评论系统
Comments
Write a Comment
点击加载Disqus