[BlogEngine.NET] 改造工程 - 整合 FunP 推推王

古早以前，曾替我的 BLOG 加上推推王的小貼紙，不過當時也僅止於把 CODE 加上去而以，成效不大好...。這次搬家搬到 BlogEngine 後，又開始一樣的循環了..，要不要加上這些共用書籤? 要加那一套? 目前台灣用的最多就是黑米跟推推王了。

原本挑了黑米，只因為它有提供 [黑米卡]，正好取代掉 BlogEngine 右邊那塊 [關於作者] .. 不過試用的情況不怎麼理想，除了速度有點慢之外，同一頁放太多 (幾十個) 的速度也很慢，也許跟 BlogEngine 我選用的樣板有點不合，速度太慢時有時整個版面就毀了，下載到一半就掛掉...

相對之下，看了看 FunP 提供的 SCRIPT，看起來 CODING STYLE 比較合我的胃口，速度也快一些，沒碰到會讓我版面掛掉的問題。另外使用上的流程 FunP 也簡單一點，本來想兩家的書籤都放的，到最後就決定支持一下交大的學弟，就全力跟 FunP 推推王整合好了。

動手前先計劃了一下，毫無目的的把一堆 CODE 加上去，我最忌誨這樣弄了，看起來一點主題都沒有。常看到別人的 BLOG 滿滿一堆標籤，從國內的 FunP，黑米，MyShare，到國外的DELICIUS，還有一堆叫不出名字的，一字排開落落長...

BlogEngine 原本也有內建一些，不過被我拿掉了。底下列出我調整的前後差異:

捨棄內建的 Rating 機制，直接用推文就好。
版面我希望類似原有 CS 的樣式，正好拿推文按鈕來取代原本的計數器
就鎖定一個共用書簽就好，把原有左下方的其它都拿掉
Tags 我也決定捨棄不用，以分類為主。因此左下的 Tags 就移掉了
分類放右下很礙眼，移到右上
不爽被盜文，加上一段智財權的聲明
加上自己補的計數器... (說來話長，請見下一篇)
推文時自動帶出文章的基本資訊，如標題，內文，標簽等等

原 CS 的樣式:

修改前:

修改後:

看了一下推推王的工具，不外乎都是插入一段 <SCRIPT> 標簽，然後用 document.write( ) 或是 eval 等等 client side script 的方式產生片 HTML Code, 缺點就是繞了一大圈，出了問題也常讓人搞不清楚問題在那裡。花了點時間追一下，追出最後插在網頁的 HTML CODE 長這樣:

[copy code]

    <IFRAME	width=60 	height=55	marginWidth=0 	marginHeight=0 	frameBorder=0 	scrolling=no 	src="http://funp.com/tools/buttoniframe.php?url=xxxxxxxxxxxxxx&s=1" mce_src="http://funp.com/tools/buttoniframe.php?url=xxxxxxxxxxxxxx&s=1">    </IFRAME>

   1:    <IFRAME

   2:  width=60

   3:  height=55

   4:  marginWidth=0

   5:  marginHeight=0

   6:  frameBorder=0

   7:  scrolling=no

   8:  src="http://funp.com/tools/buttoniframe.php?url=xxxxxxxxxxxxxx&s=1">

   9:    </IFRAME>

看起來就是直接產生一個帶著指定參數的 <IFRAME ...>，於是我在 BlogEngine Themes 版面就直接產生 <IFRAME> ...底下是 BlogEngine THEME 目錄下的 PostView.ascx 片段:

在 PostView.ascx 顯示推文按鈕的片段[copy code]

    <%        Regex _stripHTML = new Regex("<[^>]*>", RegexOptions.Compiled);        string PostTextContent = _stripHTML.Replace(Post.Content, "");        int maxLength = 70;                    string EncodedAbsoluteLink = Page.Server.UrlEncode(Post.AbsoluteLink.ToString());        string EncodedPostTitle = Page.Server.UrlEncode(Post.Title);        string EncodedPostBody = Page.Server.UrlEncode((PostTextContent.Length > maxLength) ? (PostTextContent.Substring(0, maxLength) + "...") : (PostTextContent));        string TagsQueryString = "";        foreach (BlogEngine.Core.Category cat in Post.Categories)        {            TagsQueryString += string.Format("&tags[]=" + Page.Server.UrlEncode(cat.Title));        }    %>        <IFRAME	width=60 	height=55	marginWidth=0 	marginHeight=0 	frameBorder=0 	scrolling=no 	src="http://funp.com/tools/buttoniframe.php?url=<%=EncodedAbsoluteLink %>&s=1">    </IFRAME>

   1:    <%

   2:        Regex _stripHTML = new Regex("<[^>]*>", RegexOptions.Compiled);

   3:        string PostTextContent = _stripHTML.Replace(Post.Content, "");

   4:        int maxLength = 70;

   5:        string EncodedAbsoluteLink = Page.Server.UrlEncode(Post.AbsoluteLink.ToString());

   6:        string EncodedPostTitle = Page.Server.UrlEncode(Post.Title);

   7:        string EncodedPostBody = Page.Server.UrlEncode((PostTextContent.Length > maxLength) ? (PostTextContent.Substring(0, maxLength) + "...") : (PostTextContent));

   8:        string TagsQueryString = "";

   9:        foreach (BlogEngine.Core.Category cat in Post.Categories)

  10:        {

  11:            TagsQueryString += string.Format("&tags[]=" + Page.Server.UrlEncode(cat.Title));

  12:        }

  13:    %>

  14:    <IFRAME

  15:  width=60

  16:  height=55

  17:  marginWidth=0

  18:  marginHeight=0

  19:  frameBorder=0

  20:  scrolling=no

  21:  src="http://funp.com/tools/buttoniframe.php?url=<%=EncodedAbsoluteLink %>&s=1">

  22:    </IFRAME>

這是推文的部份，如果要張貼的話就不一樣了，要放的是把文章的預設資訊都帶過去，免的到時要重新輸入一次... 這部份的 CODE 比較囉唆，不過產生出來的 CODE 比較單純，就是個 <A> LINK 而以，不過因為帶的資訊比較多，所以部份 CODE 是由上面的 CODE 事先產生好，這裡才拿來用的:

產生推文按鈕的部份[copy code]

    <a href="http://funp.com/push/submit/add.php?url=<%=EncodedAbsoluteLink %>&s=<%=EncodedPostTitle %>&t=<%=EncodedPostBody %><%=TagsQueryString %>&via=tools" title="貼到funP">
	<img src="http://funp.com/tools/images/post_03.gif" border="0"/>
    </a>

   1:    <a href="http://funp.com/push/submit/add.php?url=<%=EncodedAbsoluteLink %>&s=<%=EncodedPostTitle %>&t=<%=EncodedPostBody %><%=TagsQueryString %>&via=tools" title="貼到funP">

   2:  <img src="http://funp.com/tools/images/post_03.gif" border="0"/>

   3:    </a>

果然效果好多了，也不會再碰到版面掛掉等等鳥問題，只不過載入 [封存] 頁面時，一次四五百個 <IFRAME> 同時在跑，IE也是跑的很吃力....

同樣的技巧也拿來修改 ~/archive.aspx 這頁。這頁原本是把所有的文章按照分類一篇一篇列出來，捨棄原有的 RATING 機制不用，直接用推文的機制取代。因此這頁原本顯示 RATING 分數的地方就被我改成推推王的推薦次術了。我的文章有兩百多篇，出現過的地方都列一次，加一加總共會出現近五百個推文按鈕 @_@，自然也不可能用原本官方的作法產生按鈕，直接用上面挖出來的方法，修改 archive.aspx.cs:

~/archive.aspx.cs 顯示推文按鈕的片段程式[copy code]

          if (BlogSettings.Instance.EnableRating)          {              HtmlTableCell rating = new HtmlTableCell();              rating.InnerHtml = string.Format(                @"<IFRAME   marginWidth=0   marginHeight=0   src='http://funp.com/tools/buttoniframe.php?url={0}&amp;s=12'   frameBorder=0   width=80   scrolling=no   height=15></IFRAME>",                 (post.AbsoluteLink.ToString()));              rating.Attributes.Add("class", "rating");              row.Cells.Add(rating);          }

   1:            if (BlogSettings.Instance.EnableRating)

   2:            {

   3:                HtmlTableCell rating = new HtmlTableCell();

   4:                rating.InnerHtml = string.Format(

   5:                  @"
   6:  <IFRAME 

   7:    marginWidth=0 

   8:    marginHeight=0 

   9:    src='http://funp.com/tools/buttoniframe.php?url={0}&amp;s=12' 

  10:    frameBorder=0 

  11:    width=80 

  12:    scrolling=no 

  13:    height=15>

  14:  </IFRAME>",

  15:                  (post.AbsoluteLink.ToString()));

  16:                rating.Attributes.Add("class", "rating");

  17:                row.Cells.Add(rating);

  18:            }

嗯，看起來效果好多了，至少我自己看起來順眼多了 :D

下一篇預告一下，下一篇會推出我自己寫的 PostViewCounter Extension，主要就是拿來作每篇文章的點閱率。BlogEngine 沒內建，找來的現成的又不是很合用，索性就自己寫了一個，請期待續篇 :D

安德魯的部落格

[BlogEngine.NET] 改造工程 - 整合 FunP 推推王

安德魯部落格 GPTs

Facebook Pages

Edit Post (Pull Request)

Post Directory