古早以前,曾替我的 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 長這樣:
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 片段:
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 事先產生好,這裡才拿來用的:
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:
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}&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