加了HEMiDEMi後, 又再加入了 del.icio.us 及 Technorati.com 的加入書籤功能, 利用原來的 TAG 上面, 同時放入了 HEMiDEMi, del.icio.us, Technorati 三種書籤系統的新增.
其中 HEMiDEMi 及 del.icio.us 的引述都可以利用選取原網頁反白處自動將引述帶入加入書籤的連結內(不過此欄位是非必填項目), 另外 del.icio.us 還 support 帶入 tag 的功能, 不過想要在 tattertools 上將文章的 tag 帶入, 若只在 skin.html 上著手是有困難的, 因為既無法拿到 tag div 的 id, 更不用說解析內容後再帶入新增書籤功能頁面, 看之後還有沒有時間研究這段, 可能的話再試試看囉!
今天才發現 HEMiDEMi 有個將網頁加入HEMiDEMi書籤的功能, (其實是從這個網頁發現的: http://blog.yam.com/syshen/archives/1410294.html), 於是就著手加自己的文章, 利用 HEMiDEMi來加點人氣, 並方便用戶收藏.
連上HEMiDEMi選右上角的[工具], 再選[小貼紙產生器]後, 即可進行小貼紙的產生, 由於它沒有直接 support TT 的 blog 語法, 所以就選其他囉, 不過奇怪的是其他的 href link 最後是 void((URL))這樣的語法, 想說是不是什麼新東東, 自行先測試發現並不會發生連結的結果, 於是就先手動改一下, 並改為用 onmousedown方式(不用onclick原因如後), 產生放在 TT 上用的 HEMiDEMi 的語法, 如下:
<a href=# target=_blank onmousedown="desc='';via='';if(document.referrer)via=document.referrer;
if(typeof(_ref)!='undefined')via=_ref;
if(window.getSelection)desc=window.getSelection();
if(document.getSelection)desc=document.getSelection();
if(document.selection)desc=document.selection.createRange().text;
this.href='http://www.hemidemi.com/user_bookmark/new?
title='+encodeURIComponent('[ ##_article_rep_title_## ]')+'&url='+
encodeURIComponent('https://diary.tw[ ##_article_rep_link_## ]')+
'&description=
'+encodeURIComponent(desc)+'&via='+encodeURIComponent(via);
return true;" ><img src="http://www.hemidemi.com/sticker/clipcolor_8015.gif" border="0"></a>
(以上的 onmousedown 的 javascript 皆無斷行, 因排版需要有略做調整, 另外TT為避免衝碼, 也將 [ ] 和 ## 間加上了空白, 另外 onclick 會有 selection focus 消失問題(在 IE 下不會), 而取不到 desc, 因為原來設計的引述功能只要反白就會自動帶出哦, 所以改用onmousedown來取得, 方便在產生 HEMiDEMi 標籤時, 帶出使用者反白的引述, 可參閱文章: http://www.quirksmode.org/js/selected.html)
其實重點在於最後的 http://www.hemidemi.com/user_bookmark/new 後面要帶一些東東, title, url, description, via, 分別是加入書籤的[標題](必填), [網址](必填), [引述](非必填), [referer](未出現在畫面上, 應是要做某種分析用), 上面的 javascript 對於 desc 及 via 兩個變數用了相當多的語法來產生, 尤其是 desc, 因為用 desc 所以code會比較大一些, 相對於client side也有一些code的下載負載.
另外採用 anchor + target=_blank 的語法就可以避開 browser 因 window.open 造成的阻擋.
申請了一個 HEMiDEMi 共享書籤, 也將其可匯入於個人 blog 的語法帶進來首頁, 由於其語法為單純的 javascript, 所以很容易整合到自行的 blog 中, 但在使用後, 發現呈現上有些怪怪地, 於是追蹤一下 code, 發現多了一個 </div> 的語法, 整理如下:
(function(){ var bk=[
.....
]
document.write('<div class="hemidemi-digest-title"><style type="text/css">.hemidemi-logo img {border:none}</style>');
document.write('<div class="hemidemi-digest"');
document.write('<ul></div>');
for(var i=0,b;b=bk[i], i<7 && i<bk.length;i++){
document.write('<li class="hemidemi-bookmark"><a class="hemidemi-bookmark-title" href="'+b.l+'" onclick="window.open(this.href);return false;">'+b.t+'</a>');
document.write('</li>');
}
document.write('<div class="hemidemi-more"><a href="http://www.hemidemi.com/user/timhuang/bookmark" onclick="window.open(this.href);return false;">更多..</a></div>');
document.write('<br /><div class="hemidemi-logo">powered by <a href="http://www.hemidemi.com" onclick="window.open(this.href);return false;"><img src="http://www.hemidemi.com/images/hemidemi_53_10.png" title="HEMiDEMi - 共享書籤" /></a></div>');
document.write('</ul></div>') })()
— document.write(‘<ul></div>‘); —
有沒有看到那個奇怪的 </div> 語法呢, 突然出現在不該出現的地方, 真是奇怪了, 也就造成了有一些怪異的現象囉..
[2006/6/28 10:30]
才和網站反應問題, 很快地, 就能獲得解決, 還真不是普通的快. 在這裡給他拍拍手, 鼓勵一下, 值得推薦..
目前他們已將該紅色字的不正常 </div> 移除囉..