Blog工具箱分類文章　顯示方式：簡文 | 列表

2008年11月12日

挺不賴的Windows Live Writer的插件：Polaroid Picture

 

Plugin: Polaroid

 

從How to add Polariod-style pictures into your blog posts看到一個挺不賴的Windows Live Writer的插件：Polariod Picture，能把插入到編輯區的圖片以拍立得的樣式呈現，除了可以加標題，也能旋轉圖片。加標題或旋轉用許多美工工具都能簡單的完成，但Polaroid Picture的這些特效只利用CSS樣式完成的，既迅速又輕鬆。

...繼續閱讀

Posted by emisjerry at 樂多Roodo!│ 22:00 │ 回應(0) │ 引用(0)

2008年11月3日

氣象局衛星雲圖修正－討厭，怎麼又改了？

氣象局雲圖 從昨天開始中央氣象局的衛星雲圖連結圖檔都無法正確顯示，晚上檢查一下，發現圖檔檔名原本用的「時-日-月-年」格式突然變成「年-月-日-時」，修改後即告正常。完整程式如下，以自由欄位加入：

2008/11/03修改：

...繼續閱讀

Posted by emisjerry at 樂多Roodo!│ 22:48 │ 回應(0) │ 引用(0)

2008年10月4日

HighLight：程式碼顯示的美化工具

在Blog裡顯示程式碼經常都有繁瑣的程序，我使用過dp.SyntaxHighlighter、CodePress與Syntax Highlighting in JavaScript等JavaScript程式庫，功能各有高低但都必須在網站上存放JavaScript檔案，若存放的網站發生問題或不再提供服務（如Google Page Creator即是）時，原先貼入程式碼的文章就會發生問題，最後我反而覺得倒不如直接列入HTML格式的程式碼就好，如此就不會受限於外部網站或Blog的<PRE>、<XMP>的處理規則了。

HighLight的操作很簡單：指定好要操作的檔案與輸出格式後，指定輸出選項，再按〔Convert files〕就可以了。輸出選項如下圖所示有四大項：

  1. 行 號格式：要讓程式碼標上行號的話必須勾選本項設定，行號的號碼要用HTML的OL+LI格式輸出時則再將【HTML ordered list】打勾，使用OL+LI的好處是在此格式下按左鍵選取程式碼時不會選取到行號號碼，若未勾選則行號號碼會一併被選取到。

    另外在FireFox下還要自行將</LI>刪去，否則每行會多出一行空行，IE則能正確顯示。
  2. 換行處理：當一行程式超過網頁右邊界時要如何處理，在後面有簡單說明。
  3. 是否輸出表頭和表尾：若是要貼到Blog裡，一般是不需要勾選的
  4. 樣式的輸出方式：標籤樣式可以產生成外部的.CSS檔，或內嵌在標籤裡，為求簡單則勾選之以使用內嵌格式

image

按下〔Convert files〕後就會將加上.html的檔名產生在指定的資料夾裡，用記事本等文書編輯程式讀取並選取到剪貼簿後，全部貼到Blog文章的原始碼裡即可。

再來說明換行的處理對輸出造成的影響。在沒有勾選Line wrap的情況時，程式碼超過右邊界時不做任何處理。

image

勾選了【Line Wrap】，則超出右邊界的「有些」會被切到下一列開頭。由下圖可以看到並不是每行都會成功換行。

image

再勾【Intelligent Wrap】時，部份超出右邊界的程式會被切到下一列並對齊上一行的較後面位置。要採用那種換行顯示悉聽尊便。

image

HighLight是很方便的程式碼輸出工具，又是自由軟體，推薦大家多多使用。

最後貼上我的Ubiquity命令程式做為範例：

  1. /*
  2.   * V1.0.1 2008/09/01
  3.   * V1.0.2 2008/09/26 加入plurk指令
  4.   * V1.0.3 2008/09/27 改進plurk, 在開頭加入qualifier動詞
  5.   * V1.0.4 2008/09/28 改進plurk, qualifier動詞-語系, 如loves-cn, loves-en
  6.   */
  7. CmdUtils.CreateCommand({
  8.   name: "funp",
  9.   author: { name: "emisjerry"},
  10.   contributors: ["emisjerry"],
  11.   license: "GPL",
  12.   description: "選取好描述文字，把本篇文章貼上推推王",
  13.   takes: {"輸入標籤名稱": noun_arb_text},
  14.   icon: "http://funp.com/favicon.ico",
  15.   execute: function(directObject) {
  16.     var _sSelection = CmdUtils.getSelection();
  17.     //window.alert(_sSelection + ':' + context.focusedWindow.location.href);
  18.     var _aTags = directObject.text.split(" ");  // 把輸入字串分成陣列
  19.     var _sTags = "";
  20.     for (var ele in _aTags) {
  21.       _sTags += "&tags[]=" + encodeURIComponent(_aTags[ele]);
  22.     }
  23.     if (_sTags == "") _sTags = "&tags[]=科技";  // 未輸入標籤則預設為科技
  24.     else _sTags = _sTags.replace(/tech/, '科技');  // 把tech標籤換成科技, 加快輸入速度
  25.     Utils.openUrlInBrowser("http://funp.com/push/submit/?popup&url=" +
  26.       encodeURIComponent(context.focusedWindow.location.href) +
  27.       "&t="+encodeURIComponent(_sSelection)+_sTags);
  28.   }
  29. });
  30.   
  31. CmdUtils.CreateCommand({
  32.   name: "dict",
  33.   author: { name: "emisjerry"},
  34.   contributors: ["emisjerry"],
  35.   license: "GPL",
  36.   description: "Yahoo!奇摩字典",
  37.   takes: {"要翻譯的字彙": noun_arb_text},
  38.   icon: "http://tw.dictionary.yahoo.com/favicon.ico",
  39.   execute: function(directObject) {
  40.     Utils.openUrlInBrowser("http://tw.dictionary.yahoo.com/search?ei=UTF-8&p=" +
  41.       directObject.text );
  42.   }
  43. });
  44.   
  45. CmdUtils.CreateCommand({
  46.   name: "cdic",
  47.   author: { name: "emisjerry"},
  48.   contributors: ["emisjerry"],
  49.   license: "GPL",
  50.   description: "教育部國語辭典",
  51.   takes: {"要翻譯的字彙": noun_arb_text},
  52.   //icon: "http://tw.dictionary.yahoo.com/favicon.ico",
  53.   execute: function(directObject) {
  54.     Utils.openUrlInBrowser( "http://140.111.34.46/cgi-bin/newDict/dict.sh?idx=dict.idx&pieceLen=50&fld=1&imgFont=1&cond=" +
  55.  (directObject.text));
  56.   }
  57. });
  58.   
  59. /*
  60.  * Original author: http://theunfocused.net/moz/ubiquity/verbs/, Blair McBride
  61.  * Copied from http://www.plurk.com/user/fortelin
  62.  * sample: plurk loves Plurking test.
  63.  */
  64. CmdUtils.CreateCommand({
  65.   name: "plurk",
  66.   takes: {status: noun_arb_text},
  67.   
  68.   homepage: "http://theunfocused.net/moz/ubiquity/verbs/",
  69.   author: {name: "Blair McBride", homepage: "http://theunfocused.net/"},
  70.   modifier: {name: "Jerry Chien"},
  71.   license: "MPL",
  72.   
  73.   preview: function(previewBlock, statusText) {
  74.     var previewTemplate = "將要發佈的內容如下: <br/>" +
  75.                           "<b>${status}</b><br /><br />" +
  76.                           " 總字數為: <b>${chars}</b>";
  77.     var truncateTemplate = "<br />後面 <b>${truncate}</b> " +
  78.                            "個字將予以刪除!";
  79.     var previewData = {
  80.       status: statusText.text,
  81.       chars: statusText.text.length
  82.     };
  83.   
  84.     var previewHTML = CmdUtils.renderTemplate(previewTemplate,
  85.                                                     previewData);
  86.   
  87.     if(previewData.chars > 140) {
  88.       var truncateData = {
  89.         truncate: previewData.chars - 140
  90.       };
  91.   
  92.       previewHTML += CmdUtils.renderTemplate(truncateTemplate,
  93.                                                    truncateData);
  94.     }
  95.   
  96.     previewBlock.innerHTML = previewHTML;
  97.   },
  98.   
  99.   execute: function(statusText) {
  100.     if(statusText.text.length < 1) {
  101.       displayMessage("Plurk 內容不可空白");
  102.       return;
  103.     }
  104.     var _sQualifier = "says";
  105.     var _sLang = "tr_ch";  // 預設為繁體中文
  106.     var _sText = statusText.text;
  107.     var _iIndex = _sText.indexOf(" ");
  108.     var found = false;
  109.     if (_iIndex > 0) {
  110.       var _aQualifiers = ["loves","likes","shares","gives","hates","wants",
  111.         "wishes","has","will","wonders","asks","was","feels","thinks","says","is"];
  112.       var _sVerb = _sText.substring(0, _iIndex);  // 要使用的qualifier
  113.       var _iIndex2 = _sVerb.indexOf("-");  // loves, loves-tw, loves-cn, loves-en, 減號後面加語系
  114.       if (_iIndex2 > 0) {
  115.         var _sVerbLang = _sVerb.substring(_iIndex2+1).toLowerCase();
  116.         if (_sVerbLang=="tw") _sLang = "tr_ch";
  117.         else _sLang = _sVerbLang;
  118.   
  119.         _sVerb = _sVerb.substring(0, _iIndex2);  // loves-cn ==> loves
  120.       }
  121.       for (var ele in _aQualifiers) {
  122.         if (_sVerb==_aQualifiers[ele]) {
  123.           found = true;
  124.           _sQualifier = _sVerb;
  125.           _sText = _sText.substring(_iIndex+1);
  126.           break;
  127.         }
  128.       }
  129.     }
  130.   
  131.     var updateUrl = "http://www.plurk.com/TimeLine/addPlurk";
  132.     var updateParams = {
  133.       uid: 3170067,
  134.       qualifier:_sQualifier,
  135.       lang:_sLang,  // en
  136.       content: _sText
  137.     };
  138.   
  139.     jQuery.ajax({
  140.       type: "POST",
  141.       url: updateUrl,
  142.       data: updateParams,
  143.       dataType: "json",
  144.       error: function() {
  145.         displayMessage("Plurk 發佈錯誤");
  146.       },
  147.       success: function() {
  148.         displayMessage("Plurk 發佈成功");
  149.       }
  150.     });
  151.   }
  152. });

##


Posted by emisjerry at 樂多Roodo!│ 16:21 │ 回應(0) │ 引用(0)

2008年09月29日

簡單放大Plurk輸入區的方法

讀者們在打回應訊息時是否會跟我一樣老是覺得這個框實在是太小了？雖說只能打140個字，但框大一點也看得服些吧？我由這篇How to increase the size of your response box找到了解答，再順便把修改張貼內容與最下面的輸入框也加大。

首先按左上角的〔編輯〕→〔自訂外觀〕，把下列的CSS指示輸入樣式框裡：

#input_small { height: 70px;}
textarea#input_big.content { height:70px; wrap:soft}
td.td_cnt textarea { height:100px; }

 

回應輸入框變身前

回應輸入框變身後

H0505 H0506

 

訊息輸入框變身前

訊息輸入框變身後

H0507 H0508

 

修改框放大後：

H0511

讓訊息輸入框變大的另一個方法是安裝FireFox的擴充：Resizable Textarea，安裝後就能在框的邊緣用拖拉的方法動態變更框的大小。

##


Posted by emisjerry at 樂多Roodo!│ 18:31

2008年09月27日

用Ubiquity快速發佈 Plurk 訊息-改良版

2008/09/28 修改2：

動詞後面可以加-tw, -cn, -en等變更語系為繁體中文、簡體中文與英文。如：plurk loves-cn 動詞變簡體的愛。

程式請直接點http://220.134.115.15/files/ubq/ubq_jerry.js另存新檔檢視，不再張貼了。

先前的第一版只能用「說」來張貼簡訊，在這個改良版裡加入了指定Qualifier的參數，格式變成：「plurk Qualifier Message」，Qualifier與Message之間以一個空白隔開，若未指定Qualifier則預設為 says。Qualifier只能是Plurk認識的"loves","likes","shares","gives","hates","wants","wishes","has","will","asks","was","feels","thinks","says","is"這幾種。更新方法與第一版相同。

/*
* Copied from http://www.plurk.com/user/fortelin
* sample: plurk loves Plurking test.
*/
CmdUtils.CreateCommand({
  name: "plurk",
  takes: {status: noun_arb_text},
  homepage: "http://theunfocused.net/moz/ubiquity/verbs/",
  author: {name: "Blair McBride", homepage: "http://theunfocused.net/"},
  modifier: {name: "Forte Lin"},
  license: "MPL",
  preview: function(previewBlock, statusText) {
    var previewTemplate = "將要發佈的內容如下: <br/>" +      
                          "<b>${status}</b><br /><br />" +
                          " 總字數為: <b>${chars}</b>";
    var truncateTemplate = "<br />後面 <b>${truncate}</b> " +
                           "個字將予以刪除!";
    var previewData = {
      status: statusText.text,
      chars: statusText.text.length
    };
    var previewHTML = CmdUtils.renderTemplate(previewTemplate,
                                                    previewData);
    if(previewData.chars > 140) {
      var truncateData = {
        truncate: previewData.chars - 140
      };
      previewHTML += CmdUtils.renderTemplate(truncateTemplate,
                                                   truncateData);
    }
    previewBlock.innerHTML = previewHTML;
  },
  execute: function(statusText) {
    if(statusText.text.length < 1) {
      displayMessage("Plurk 內容不可空白");
      return;
    }
    var _sQualifier = "says";
    var _sText = statusText.text;
    var _iIndex = _sText.indexOf(" ");
    var found = false;
    if (_iIndex > 0) {
      var _aQualifiers = ["loves","likes","shares","gives","hates","wants",
        "wishes","has","will","asks","was","feels","thinks","says","is"];
      var _sVerb = _sText.substring(0, _iIndex);
      for (var ele in _aQualifiers) {
        if (_sVerb==_aQualifiers[ele]) {
          found = true;
          _sQualifier = _sVerb;
          break;
        }
      }
    }
    if (found) {
      _sText = _sText.substring(_iIndex+1);
    }

    var updateUrl = "http://www.plurk.com/TimeLine/addPlurk";
    var updateParams = {
      uid: 3170067,
      qualifier:_sQualifier,
      lang:"tr_ch",  // en
      content: _sText
    };
    jQuery.ajax({
      type: "POST",
      url: updateUrl,
      data: updateParams,
      dataType: "json",
      error: function() {
        displayMessage("Plurk 發佈錯誤");
      },
      success: function() {
        displayMessage("Plurk 發佈成功");
      }
    });
  }
});


Posted by emisjerry at 樂多Roodo!│ 15:06 │ 回應(0) │ 引用(0)

2008年08月31日

簡單的Mozilla Ubiquity應用2：將目前網頁貼上推推王的命令

使用Ubiquity將目前瀏覽網頁貼上推推王的命令如下。網址列會填入目前網頁的網址，選取的文字會填入「描述」欄位，命令的參數會形成標籤，若標籤為 tech則會自動轉換成「科技」，例如：funp Google Web2.0 tech。

// V1.0.1 2008/09/01修改

CmdUtils.CreateCommand({
  name: "funp",
  author: { name: "emisjerry"},
  contributors: ["emisjerry"],
  license: "GPL",
  description: "選取好描述文字，把本篇文章貼上推推王",
  takes: {"輸入標籤名稱": noun_arb_text},
  icon: "http://funp.com/favicon.ico",
  execute: function(directObject) {
    var _sSelection = CmdUtils.getSelection();
    //window.alert(_sSelection + ':' + context.focusedWindow.location.href);
    var _aTags = directObject.text.split(" ");  // 把輸入字串分成陣列
    var _sTags = "";
    for (var ele in _aTags) {
      _sTags += "&tags[]=" + encodeURIComponent(_aTags[ele]);
    }
    if (_sTags == "") _sTags = "&tags[]=科技";  // 未輸入標籤則預設為科技
    else _sTags = _sTags.replace(/tech/, '科技');  // 把tech標籤換成科技, 加快輸入速度
    Utils.openUrlInBrowser("http://funp.com/push/submit/?popup&url=" +
      encodeURIComponent(context.focusedWindow.location.href) +
      "&t="+encodeURIComponent(_sSelection)+_sTags);
  }
});

你可以把上述命令直接貼入Ubiquity Command Editor，或瀏覽我的命令網頁再訂閱它。

##


Posted by emisjerry at 樂多Roodo!│ 18:43 │ 回應(0) │ 引用(0)

2008年08月24日

如何備份Windows Live Writer的草稿與張貼內容？

一直以來Blog文章都是先用KompoZer（Nvu的非官方版）編輯好再貼到幾個同步發表的Blog上，但KompoZer無法正確斷行的問題卻始終無法解決，今天為了測試Windows Live Writer（簡稱WLW）的功能，順便試看看能否把書寫平台換到WLW時，同時可以更簡單的把文章張貼到多個Blog裡。

安裝好WLW後（安裝過程已有許多先進有寫了，請自行搜尋），再把Blog設定好，屆時即可方便的在多個Blog間切換與發佈文章；Blogger與微軟的Windows Live Spaces很容易就能設定好，別的BSP則需要額外設定。以下是樂多與博客大巴的設定摘要：

可惜Xuite尚無法遠端張貼。

使用WLW寫了幾篇文章後覺得WLW實在不錯，把Blog撰寫的常用功能彙整得相當便利，所有的功能聚焦在Blog文章的生成與發佈程序，比網頁編輯工具（如FrontPage或Nvu）簡單，功能也比BSP提供的編輯網頁強，算是介於二者之間的一個專用工具。

用了一會後想要把檔案另存到備份資料夾，但在功能表【檔案】裡卻找不到另存新檔的選項，搜尋後在Move Draft Posts Written in Windows Live Writer Across Computers一文裡找到答案：

  • 草稿存放在C:\Uses\帳號\My Documents\My Weblog Posts\Drafts（XP使用者把C:\Users換成C:\Documents and Settings即可）資料夾裡
  • 最近張貼內容則在C:\Uses\帳號\My Documents\My Weblog Posts\Recent Posts裡

張貼內容都儲存為.wpost格式，.wpost檔案原來是ZIP格式，因此能用WinZip或7-Zip來開啟，本文就在名為Content的那個檔裡。把找到的.wpost檔案複製到常用的備份資料裡就能在本機另外備份文章內容了。

##


Posted by emisjerry at 樂多Roodo!│ 20:24

2008年08月10日

和風部落格FC2有中文版了

fc2.com如果你平常就喜歡日系風格的話，告訴你一個好消息：日本的部落格提供商FC2最近推出了繁體中文與簡體中文的操作介面了。

首先申請好FC ID後再建立部落格即可，全程都是中文，照著指示很快就能建立好。FC2提供了169種樣板供使用者自行選擇，想要嘗鮮的和風受好者請自行去挑選吧，這個是我隨手選擇的少女與貓熊樣板，似乎是太可愛了點 :-) ．．．。

##

Posted by emisjerry at 樂多Roodo!│ 19:48

2008年07月6日

Blog側邊欄改用iframe以提升網頁載入速度

不知為何，最近Blog的Loading速度有時會變很慢，卡住的狀況如同天殺的 BloggerAds / 部落格觀察所描述的一般，乾脆花點時間把BloggerAds和塞標籤都改成 iframe 的方法來載入吧。

首先要找到一個可以存放外連檔案的網站，建立bloggerAds.html與sitetag.html，內容如下：
bloggerAds.html
<script src="http://ad2.bloggerads.net/showads.aspx?blogid=你的ID&charset=utf-8">
</script>

sitetag.html
<html>
<body>
</body>
</html>
<script type="text/javascript" src="http://track.sitetag.us/tracking.js?hash=你的代碼"></script>
<script type="text/javascript" src="http://pub.sitetag.us/badge.js?hash=你的代碼&extra=user& background_color=FFFFFF&border_color=999999&border_width=4&inner_background_color=FFFFCC"></script>


先在瀏覽器裡載入外部網頁測試看看，若正常再修改Blog裡的自由欄位（插入欄位）。
BloggerAds欄位
<iframe frameborder="0" width="100%" height="445px" scrolling="no" alight="middle"  marginwidth="0" marginheight=0" src="http://外連網址/bloggerads.html"> </iframe>

SiteTag欄位
<iframe src="http://外連網址/sitetag.html" frameborder="0" width="220px" height="350px" marginwidth="0" marginheight="0"></iframe>

希望這樣的修改能對網頁載入速度有幫助。另外，Xuite欄位的換行問題終於修改好，不會自作「聰明」的把所有指令都連成一行了。

##

Posted by emisjerry at 樂多Roodo!│ 9:50

2008年05月10日

解決NVu、Kompozer的換行問題

Nvu spaces 如果你仔細檢視我的文章文字，會發現有一些莫名其妙的空白出現在不應出現的句子中間，原來這都是我使用的網頁編輯軟體NVu和它的修訂版本Kompozer的自動換行問題造成的。今天在這裡（分享：Nvu/KompoZer格式化Html源碼的問題及解決）發現了解決方法，雖然並未完全克服這個問題，但結果應該會比未處理前來得好些。改善的步驟如下：
  • 下載給NVu或Kompozer使用的擴充（Extensions）：HandCoder
  • 由功能表【Tools→Extensions】安裝HandCoder
  • 再下載整理HTML內容的工具：Tidy
  • 重新啟動NVu或Kompozer後，由【Tools→HandCoder→Options...】在第二個Tidy頁籤裡指定Tidy.exe路徑
  • 在工具列空白處按右鍵選【Customize Toolbar】把「Editor」拖到工具列裡
這樣在寫完文章後按一下工具列上的Editor，它會開啟指定好的文字編輯器，並使用Tidy.exe整理好，看過沒問題後按儲存，再回到NVu或Kompozer，再複製所有內容後就可貼到Blog裡了。

 分享： Nvu/KompoZer格式化Html源碼的問題及解決作者提供最終的解決方法是功能表【Tools→JavaScriptConsole】再於輸入框裡輸入「top.opener.GetCurrentEditor().wrapWidth = 9999」按〔Evalute〕，再用「Editor」即可。同時該作者也提供了操作錄影可以參考。

下載連結

##

Posted by emisjerry at 樂多Roodo!│ 15:44
 [1]  [2]  [3]  [4]  [5]  [6]  [7]  [8]  [9]  [10]  [最終頁] 
回頁首▲