2011年1月21日 星期五

-步驟-Blogger 較新文章 / 較舊文章連結,將連結文字變成「真正」的文章標題

English | 正體中文

-- 2011-01-28 更新:加入英文版本
-- 2011-02-19 更新:修改 CSS
-- 2011-02-21 更新:修改 javascript 語法
-- 2011-03-09 更新:製作中英切換按鈕


各大部落格平台,幾乎都會有「較新一篇 / 上一篇」「較舊一篇 / 下一篇」文章的功能,Blogger 當然也不例外。

不過,相信許多 Blogger 愛用者都發現到了,別的系統像是 Wordpress,上一篇 / 下一篇連結的文字,可以動態的顯示該篇文章的標題,不過 Blogger 卻永遠都是「較新的文章」「較舊的文章」,實在是有點遜。

Google 結果發現,許多人也有相同的需求,但是似乎沒有人提出解法,大家的答案都是「不可能」。主要的原因是,Blogger 系統利用寫在樣板中的 data:olderPageTitle 和 data:newerPageTitle 標籤,從資料庫中擷取較新/較舊頁面的標題。但是,Blogger 系統顯然還沒準備好這個動態擷取的功能,所以千篇一律的顯示成「newer post / 較新的文章」以及「older post / 較舊的文章」。

不過,菜鳥我當然不可能這樣認輸!經過一番研究,很輕鬆的用 jQuery 達成了,哇~哈哈哈哈(雙手叉腰長笑)



樣板功能:Blogger 較新文章 / 較舊文章連結,將連結文字變成「真正」的文章標題



  1. 到 Blogger 後台的 design > page elements 頁面,在最下方的 footer 區段,按下 add a gadget 新增小工具
  2. 小工具的類型選擇 html /javascript
  3. 小工具標題不要設定,內容則貼上這段文字:

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

    <script type="text/javascript">
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" h3", function() {
    var olderLinkTitle = $("a.blog-pager-older-link:first").text();
    $("a.blog-pager-older-link").text(olderLinkTitle);
    });

    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" h3", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
    $("a.blog-pager-newer-link").text(newerLinkTitle);
    });
    </script>

     -- 2011.02.21 更新:如果只想要取第一篇文章的 title 的話,請改用下面這段:(紅色字是跟上面不一樣的地方)
    <script type="text/javascript">
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
    var olderLinkTitle = $("a.blog-pager-older-link:first").text();
    $("a.blog-pager-older-link").text(olderLinkTitle);
    });

    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
    $("a.blog-pager-newer-link").text(newerLinkTitle);
    });
    </script>
    這樣的話,即使略過步驟 5 與步驟 6 ,也是可以的,因為它只會顯示出「下一頁的第一篇文章」的標題。
    -- 更新部分結束 --

    其中,第一段紅色字的部份,是引入 jQuery 的程式碼,由於之前寫的許多 blogger hack 文章都有用到 jQuery,如果妳採用的話,那麼妳的樣板中很可能已經有了這段文字了。此時,就可以把這個小工具中的這段文字刪掉,不需要重複引入。
  4. 儲存小工具後,就可以在妳的網誌中看到這個功能。
    不過,在首頁或者其他非單篇文章的頁面,由於它的上一頁或下一頁,有許多篇文章,也就有許多個文章標題,導致我們的連結文字變得很長,因為它把下一頁的全部文章標題都列出來了。
    另外一點是,如果下一篇文章的標題很長,那這個連結文字,會一直往左或往右延伸,有時候都快要跑到對面去了,整個位置看起來就很奇怪。
    要解決這個問題,只要修改 blog-pager 的 css 即可。
  5. 在 Blogger 後台的 design > edit html 頁面,按 Ctrl + F 搜尋 blog-pager ,會找到像下面這段文字:
    #blog-pager {
      font-size: 140%
    }
  6. 在下面插入另外兩段 css ,插入後看起來像這樣:(紅色字為插入的部份)

    #blog-pager {
      font-size: 140%
    }

    #blog-pager-newer-link a {
      max-width:300px;
      height:30px;
      overflow:hidden;
    }

    #blog-pager-older-link a {
      max-width:300px;
      height:30px;
      overflow:hidden;
    }

    -- 2011-02-19 更新:我用 simple 樣板測試,紅色字要要改成這樣:
    #blog-pager-older-link,
    #blog-pager-newer-link {
      width:300px;
      line-height:2em;
      height:2em;
      overflow:hidden;
    }

    -- 更新部分結束 --

    其中,max-width 最大寬度和 height 高度,可以隨妳的喜好設定。
  7. 儲存樣板後,就大功告成了。
最後提醒,如果妳的引入 jQuery 的程式碼,跟產生本效果的程式碼,是放在不同的小工具裡的話,記得一定要把引入 jQuery 的程式碼放置在比較前面的地方,否則,就不會產生作用了。

實際的效果,看本網誌的介面就知道了。只要七步驟就能完成,是不是很簡單呢?