功能強大的 Live Writer 外掛：Dynamic Template Plugin

基本上，Heresy 現在在寫網誌，或是要寫簡單的 HTML 語法，都是使用微軟的 Windows Live Writer（參考）來做的；尤其是針對寫部落格這一塊，Live Writer 算是一個相當的離線編輯器了～（雖然總覺得 2011 版有不少 bug…）

而這次要介紹的，則是一個有點年紀、用於 Live Writer 的外掛，叫做「Dynamic Template」（動態樣板，官網）。

他和之前介紹過的 Source Code Formatter 一樣，都是針對 Live Writer 所開發的外掛程式，可以用來加強 Live Writer 的實用性；不過和大部分的外掛不同的一點是，Dynamic Template 本身是一個相當彈性、可程式式化的外掛！

Dynamic Template 的安裝程式和原始碼，都可以在 CodePlex 上下載，雖然最新版還是停留在 2007 年的 1.0.3，但是要在最新的 Live Writer 2011 上使用式沒問題的；而由於程式開發者有提供原始碼，所以如果自己有興趣的話，甚至可以考慮自己下載他的原始檔下來，再做修改。

而他的使用基本概念有點類似在這個外掛裡，去定義許多巨集來方便快速地輸入、修改文章的內容；而由於它除了可以輸出 HTML 語法外，更可以接受 C# 的語法、就像在寫 ASP 動態網頁一樣，所以在可客製化的程度上，可謂相當地高！也因此如果願意的話，Dynamic Template 絕對會是 Live Writer 最強的 plugin 之一！不過相對的，它的使用門檻也比一般的 plugin 高。使用者至少要會 HTML，才能做到比較複雜的輸出（當然，用複製的也可以啦～）；而如果要做進一步的處理的話，則是要有 ASP / C# 這類的程式開發知識，才會比較容易上手了。

下面就是一些對於 Dynamic Template 的介紹了～

基本介紹

Dynamic Template 在安裝好、透過 Live Writer 叫出來之後，基本上會是像右上角這樣的小視窗（如果都沒有建立過 template 的話，就會是全空的）；而如果是要進行新增、或是編輯現有的 template 的話，只要按下「Wdit Template」就可以把他擴展成管理介面了～（右圖）

這時候，這個對話框的右側會多出管理 template 的按鈕，可以用來加入新的 template，或是管理現有的 template。

而如果是新增或編輯 template 的話，他也提供了一個介面，可以用來做程式碼、HTML 的編輯；他的樣子基本上就是像下面的截圖。

這個介面分為上下兩部分，上方是可以定義 template 的變數（template variables），而這個變數是可以要求使用者在套用這個 template 時輸入的；而下方則是 template 的主體（template body），是用來輸入 HTML 或程式碼用的。

在 template 主體的部分，基本上就是類似 ASP 的寫法。一般輸入的內容，就是會直接會被插入到 Live Writer 裡的東西，所以在這邊可以直接輸入文字，或是 HTML 語法；而如果是要編寫程式的部分，則是要用 <% … %> 來把程式碼包起來，這樣才會被當作程式來執行。

簡單範例

基本上，Dynamic Template 如果只是要輸出文字或是 HTML 的話，使用上相當地簡單。基本上不用管上面的變數部分，只要直接在 template body 的部分，直接輸入要插入的內容就好了～

比如說，可以直接在 template body 裡面輸入「<a href="https://kheresy.wordpress.com/&quot;>Heresy’s Space</a>」，這樣以後使用這個 template 時，他就會把這段含有超聯結的文字，插入到 Live Writer 目前滑鼠游標所在的地方，變成一個超連結了～（範例 link 下載）

這項功能對於常常要在網誌裡插入固定內容的來說，應該算是相當實用的！而這樣的操作，在官方網站也有提供示範的影片可以做參考，有興趣的人可以連到這裡看看（Flash 的 swf 格式）。

使用選取區域

而在進一步呢，實際上 Dynamic Template 也是可以處理選取區域的！也就是說，我們可以先在 Writer 裡面，選取了某段內容後，讓這段內容透過 Dynamic Template 做處理再輸出。

一個很簡單、也很實用的應用例子就是在 Live Writer 裡並沒有提供「縮排」的功能，所以如果要把文章裡的段落縮排的話，要就是用「引用段落」（<blockquote>），不然就只能自己切換到「程式碼」模式去修改 HTML / CSS 語法了。

而透過 Dynamic Template 的話，則可以輕鬆地做到縮排的功能！基本寫法呢，還是一樣無視上方的變數，直接在 template body 輸入：「<div style="margin-left: 20px;"><%=_selection%></div>」就可以了！其中，「 <%=_selection%> 」就是代表選取範圍的內容；而這邊的寫法就是用 <div> 標籤把選取的內容包住，再透過 CSS 設定左邊界為 20px，來做到縮排的功能。（範例 indent 下載）

而實際上，其他要對文章內容加上比較簡單的格式的話，這種寫法大多也都可以直接套用。所以在使用上，只需要知道 HTML / CSS 的語法，就可以輕鬆地搭配「<%=_selection%>」來使用了。

要求使用者輸入

延續上面縮排的例子。上面的寫法，基本上是把縮排的距離寫死為 20 的像素，但是如果希望不要寫死，到要用的時候再輸入呢？Dynamic Template 也是可以做到的！而這時候，就要用到上面一直沒有用到的 template 變數（template variables）了～

基本上，Dynamic Template 的變數要輸入三項資料：變數名稱（variable Name）、資料型別（Data Type）以及標籤（Label）。

第一項的變數名稱是在程式碼中要用的名字，這邊 Heresy 把這個變數叫做「pos」；而由於他的值會是幾個像素，所以資料型別會是一個整數，也就是選「Integer」。

而標籤的部分呢，則是在套用這個 template 時，他所跳出的對話框裡所顯示的文字，是用來告訴使用者現在要輸入什麼資料用的，所以比較自由，只要自己看得懂就好了～Heresy 這邊是輸入「indent width」。

在 template 變數設定好之後，以後在套用這個 template 的時候，就會顯示左邊的對話框，要求使用者輸入一個數值。

當然，template body 的部分也是要針對新加入的變數做一定程度的修改的！不過其實也相當地簡單，只要把本來的「<div style="margin-left: 20px;"><%=_selection%></div>」裡的「20」，改成我們自己定義的變數 pos 就可以了～而寫法呢，則是和選取區類似，寫成「<%=pos%>」。所以，也就是，在 template body 的內容會是：「<div style="margin-left: <%=pos%>px;"><%=_selection%></div>」。如此一來，套用這個 template 的時候，就可以輸入要縮排的距離，而不用每次都固定縮排 20 個像素了！（範例 indent_user 下載）

而實際上，要在 Dynamic Template 裡使用更多的變數，也是沒問題的～不過這樣雖然可以讓使用的彈性更大，但是相對的使用時要輸入的資料也會變多，所以要怎麼寫，就是要自己斟酌了。

加入程式處理

前面幾個例子，基本上都還算單純，都算是單純的文字輸出。而實際上，Dynamic Template 由於可以在裡面寫 C# 的程式，所以是可以做到更多、更複雜的處理的！

像是作者在官方網頁上，就提供了一個簡單、可以插入目前時間的範例。這個範例的內容如下：

<%
string currentTime = DateTime.Now.ToString("HH:mm:ss");
%>
<b><%= currentTime.ToUpper() %></b> 

基本上，他就是透過 DateTime 這個物件，來取得現在的時間，並把他輸出成字串，然後再用粗體字輸出了～

當然，這個例子是非常簡單的，比較特別的只是他有用到 DateTime 這個物件。如果要善加運用的話，也是可以寫出很複雜的功能的！像是目前在 WordPress.com 上，Heresy 用 Source Fomatter 輸出的程式碼在排版上都會出問題，導致無法正確使用，其實這種問題也可以透過 Dynamic Template 做第二階段的處理，來做一定程度的修正。Heresy 目前的 template 是寫成：

<%
string[,] ReplaceTerm = new string[,]
{
 { HtmlDecode( "<PRE style=\"BACKGROUND-COLOR: #ffffff; MARGIN: 0em; WIDTH: 100%; FONT-FAMILY: consolas,'Courier New',courier,monospace; FONT-SIZE: 12px\">" ), "" },
 { HtmlDecode( "<PRE>" ), "" },
 { HtmlDecode( "</PRE>" ), "" }
};
string rs = _selection;
for( int i = 0; i < ReplaceTerm.Length / 2; ++i )
{
	rs = rs.Replace( ReplaceTerm[i,0], ReplaceTerm[i,1] );
}
%>
<PRE style="font-family: Consolas; margin-left: 20px; background-color: #CACACA; width: auto; border: #AAAAAA 1px dotted;"><%= rs %></pre>

基本上，這個程式主要是用來在選取的內容裡，找到特定的文字把它用別的文字取代掉的；透過這樣的處理，可以把 Source Fomatter 產生的 HTML 語法作一定程度的簡化，把他的巢狀 pre 標籤給刪除掉，並修正一些 CSS 語法造成的排版上錯誤（當然，這樣做也會少了某些功能）。（範例 Rip SFCode 下載）

這裡 Heresy 是先宣告一個二維陣列，每一筆資料有兩欄，第一欄是要取代的項目，第二欄則是要用來寫入的新資料（不過這邊都是空字串）；這樣寫的目的是方便以後的修改、或是要增減要取代的項目。而之後呢，則就是透過一個迴圈，來把所有的條件都跑過，完成所有的取代過程，最後再加上自己定義的格式做輸出。

而寫好這個 template 後呢，就可以快速地對現有的 Source Formatter 結果作調整了！對 Heresy 自己來說，算是一個很方便的功能了～

類似的問題，也發生在 Visual Studio 透過 Productivity Power Tools 複製出來的程式碼上，所以 Heresy 也有另一個 Rip VSCode，是針對的這種內容來做處理的～不過由於寫法基本上是一樣的，所以在這邊就不特別貼了，有興趣的就請自己下載回去玩看看吧～ :)

附註：

• 要取代 HTML 語法的時候，要注意大小寫。建議可以先透過 <%=HtmlEncode(_selection)%> 輸出在 Dynamic Template 內處理時的內容來做參考。（大小寫和在 Writer 裡直接用程式碼模式看到的不一樣）
• 除了 _selection 是內建的變數，代表選取區域的內容外，Dynamic Template 還有提供幾個內建、用來處理 HTML 特殊字元、以及網址的函式，包括了：
  • HtmlEncode( string )、HtmlAttributeEncode( string )、HtmlDecode( string )
  • UrlEncode( string )、UrlPathEncode( string )、UrlDecode( string )
• 很可惜，Dynamic Template 裡似乎沒辦法用 regular expression，不然應該可以寫得更彈性…

備份、分享、使用寫好的 template

Dynamic Template 的每一個 template，都會是一個副檔名是「wlwtemplate」的檔案，這些檔案都會在使用者目錄下的「Application Data\WLWTemplates」目錄裡；以 Heresy 的 Windows 7 來說，確實的路徑會是在「C:\Users\Heresy\AppData\Roaming\WLWTemplates」這個目錄下（應該會是隱藏目錄，使用者名稱請自行更換，Windows XP 或 Vista 的路徑可能會有點不一樣就是了）；或者，也可以試著直接在檔案總管的網址列內輸入「%AppData%\WLWTemplates」，應該也可以直接進入該資料夾。

而像上面 Heresy 提供的範例，在下載後放到這個資料夾裡後，就可以使用、修改了～如果想要備份、或是把自己寫好的 template 給別人用，也只要把這些檔案複製出來就可以了～

結語

基本上，Dynamic Template 這個 plugin 已經滿久了，其實網路上也可以找到不少其他人的介紹。不過，由於 Heresy 真的覺得他滿好用、功能也很強大，所以還是決定自己也來寫一篇了！ :p

Heresy 個人是非常建議有在用 Live Writer 寫網誌，同時又會寫點 HTML、CSS 的人，應該要玩看看這個外掛！相信上手後，應該可以減少不少寫部落格文章的時間～

廣告