已經掛上黑米部落格工具了嗎？

有件事大家可能不知道，這些外掛工具都暗藏了些密技，我們今天將公開這些密技的用法，讓您的工具可以和部落格更搭配，也可以自己做個與眾不同的工具。

你只需要懂一點點程式的語法。不確定嗎？試試看能不能看懂下面這一段。

for (var i=0,b=array[i], i<5;i++){
  document.write('hello')
}

沒問題嗎？ 那歡迎您繼續往下讀。

以「我最近的書籤輪播」為例，從部落格工具包，我們可能會產生類似的語法讓你貼回部落格：

這時候，可以在語法裡頭加上一行

HEMiDEMi_Scriptlet_DataOnly=1;

語法變成：

<script type="text/javascript">
HEMiDEMi_Scriptlet_Action='user_bookmark_recent';
HEMiDEMi_Scriptlet_Username='garylin';
HEMiDEMi_Scriptlet_DataOnly=1;
<script type="text/javascript" 
src="http://js.hemidemi.com/javascripts/scriptlet/wrapper.js"></script>

HEMiDEMi_Scriptlet_DataOnly=1; 的意思是，要程式只輸出書籤資料，不要產生其他的html等畫面語法。你會得到一串長得像下面這樣的資料

var HEMiDEMi_Scriptlet_Objects=[ {"t":"....", "pl":"...."...}, {}...]

不用太在意那是什麼，接著，你可以透過簡單的javascript自己決定怎麼顯示書籤。

可以在剛剛那段語法下方，加上：

<script type="text/javascript">
for(var i=0,b;
        b=HEMiDEMi_Scriptlet_Objects[i], 
        i<5 && i<HEMiDEMi_Scriptlet_Objects.length;
        i++){
  document.write(b.t);
  document.write('<br/>');
}
</script>

這是用一段javascript把剛剛的資料顯示出來。我們把書籤的資料存在 HEMiDEMi_Scriptlet_Objects 裡頭，HEMiDEMi_Scriptlet_Objects[0], HEMiDEMi_Scriptlet_Objects[1] 分別代表第一和第二筆書籤。這邊用個迴圈把書籤一個個印出來，最多5則。 b.t 則是書籤的標題，這樣，就可以在頁面上顯示5則書籤的標題。

結果如下：

也可以用 ul li 列表的方式顯示

<script type="text/javascript">
document.write('<ul>');
for(var i=0,b;
        b=HEMiDEMi_Scriptlet_Objects[i], 
        i<5 && i<HEMiDEMi_Scriptlet_Objects.length;
        i++){
  document.write('<li><a href="'+b.l+'">'+b.t+'</a></li>');
}
document.write('</ul>');
</script>

結果如下：

最後一個示範，讓書籤只顯示縮圖，而且讓他排排站。

<script type="text/javascript">
for(var i=0,b;
        b=HEMiDEMi_Scriptlet_Objects[i], 
        i<5 && i<HEMiDEMi_Scriptlet_Objects.length;
        i++){
document.write('<div style="float:left;margin:5px;width:100px;
height:75px;">');
document.write('<a href="'+b.l+'">'+b.p+'</a></div>');
}
</script>

結果如下：

======
資料說明
======

b.t	書籤標題
b.pl	書籤原始網址
b.l	書籤在黑米的網址
b.d	書籤說明
b.p	書籤縮圖網址

只要是顯示書籤相關，像是我收藏的書籤，部落格最後歡迎

======
小技巧
======
1) 如果真的玩出興趣，可以把自己寫好的工具開放給別人。可以用外掛的方式，把你的javascript讀進來。

<script type="text/javascript" src="http://xxx.xxx.xxx/example.js"></script>

1) 需要額外設定 css 檔的話，可以這樣設定

<script type="text/javascript">
...
HEMiDEMi_Scriptlet_Stylesheet='http://xxx.xxx.xxx/example.css';
...
<script type="text/javascript" 
src="http://js.hemidemi.com/javascripts/scriptlet/wrapper.js"></script>

加上 HEMiDEMi_Scriptlet_Stylesheet=’http://xxx.xxx.xxx/example.css’ 指定css檔。

歡迎大家自行發揮，如果完成了新的工具想跟大家分享，不妨告訴大家一聲。
也歡迎和黑米聯絡，我們會把他加到部落格工具包，並註明您的大名，讓更多人一起使用！

HEMiDEMi