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


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

image而這次要介紹的,則是一個有點年紀、用於 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 的介紹了~

基本介紹

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

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

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

image

這個介面分為上下兩部分,上方是可以定義 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%>」來使用了。

要求使用者輸入

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

基本上,Dynamic Template 的變數要輸入三項資料:變數名稱(variable Name)、資料型別(Data Type)以及標籤(Label)。

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

image而標籤的部分呢,則是在套用這個 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 的人,應該要玩看看這個外掛!相信上手後,應該可以減少不少寫部落格文章的時間~

對「功能強大的 Live Writer 外掛:Dynamic Template Plugin」的想法

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.