用Windows Live Writer寫部落格的一些配置

在園子裡逛的時候發現可以用Windows Live Writer用戶端來寫園子博，雖然以前用過WLW，但感覺不是很好用，但偏偏我又是個軟體狂，喜歡玩各種軟體，這次WLW升級到了2011 Beta版，正好嘗嘗鮮，吼吼吼~~

 安裝Windows Live Writer

安裝包下載（http://explore.live.com/windows-live-essentials-beta）。新版使用了Windows 7的Ribbon介面，如下：

Windows Live Writer的配置

過程就不詳述了，步驟參見園子協助頁：http://space.cnblogs.com/forum/topic/8550/，雖然WLW版本不一樣，介面發生了變化，但配置步驟還是一樣的。

 高亮代碼外掛程式

寫技術博最重要的當然是清淅的代碼了，在插入（Insert）選項卡下最右邊有添加外掛程式（Add Plug-in）按鈕，點擊後會連結到微軟官方網站，到那裡去下載想要的外掛程式到本地，然後運行安裝，一路下一步就OK了。這裡要提醒下，要卸載外掛程式時也要運行安裝檔案來卸載，所以最好保留安裝檔案。

這裡介紹兩個比較簡潔的外掛程式：

Paste from Visual Studio

猛擊這裡進入下載，得到一個名為vspaste.msi的安裝包，一路安裝，最後可以看到外掛程式已成功添加，見。使用時先在Visual Studio中複製要插入的代碼，然後點擊WLW中外掛程式框中的VSPaste按鈕就行了，代碼有框有背景色，關鍵字有高亮，比較簡潔。但是這樣有個問題，這個外掛程式只適用於VS，不是VS中的代碼怎麼辦，於是還有下面一個外掛程式。此外，此外掛程式還隱含支援類名為code的類樣式，可以在部落格設定頁面的樣式中自己定義，具體的在下面介紹。

代碼插入外掛程式

從官網下載點這裡，最新版下載及使用逛作者部落格，這個外掛程式的代碼高亮基於SyntaxHighighter，並且提供程式碼摺疊功能，安裝完後。

使用時，可以在設定框中自訂顯示模版。但是感覺它自訂的樣式跟我的主題不是很搭調，所以自己改了個樣式，並且把樣式的class設為code，以便與前面的VSPaste在使用時樣式統一，兩個外掛程式共用一個顯示樣式。

這是展開視圖代碼模版，樣式為code

<div class="code"><pre><%hcode%></pre></div><br>

這是可摺疊程式碼檢視模版，展開時樣式還是code，摺疊起來後樣式為code_t，具體樣式見下文。

可摺疊程式碼檢視模版
<div class="code"><pre><img id="Code_Closed_Image_<%guid%>" height="16" width="11" align="top" src="http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif" onclick="this.style.display='none'; document.getElementById('Code_Closed_Text_<%guid%>').style.display='none'; document.getElementById('Code_Open_Image_<%guid%>').style.display='inline'; document.getElementById('Code_Open_Text_<%guid%>').style.display='inline';"/><img id="Code_Open_Image_<%guid%>" height="16" width="11" align="top" src="http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif" onclick="this.style.display='none'; document.getElementById('Code_Open_Text_<%guid%>').style.display='none'; getElementById('Code_Closed_Image_<%guid%>').style.display='inline'; getElementById('Code_Closed_Text_<%guid%>').style.display='inline';" style="display: none;"/><span id="Code_Closed_Text_<%guid%>" class="code_t"><%displayname%></span><br/><span id="Code_Open_Text_<%guid%>" style="display: none;"><%hcode%></pre></div><br>

部落格園後台設定頁面的自訂CSS樣式框

我在裡面自訂的樣式如下

.code{    background: #FAFBFD;    border: #c0c0c0 1px solid;    padding: 2px;    margin: 2px 4px 2px 0px;    font-family: Consolas, Courier New, Calibri, "微軟雅黑", "宋體", sans-serif;}.code_t{    background: #FFFFFF;    border: #c0c0c0 1px solid;    padding: 1px;    margin: 0px 0px 0px 6px;}.postBody p, .postCon p, p{    text-indent: 2em;}

在自訂CSS樣式中可以看到有如下樣式

.postBody p, .postCon p, p{    text-indent: 2em;}

這就是下面要說的段落自動縮排。

 在WLW中設定段落縮排

很遺憾的是，WLW裡面還沒有這個功能，O.O，但是又不想在網頁裡面寫，網上查到可以用樣式控制，太牛了，又是樣式，不過我把所有的段落標籤 P 都設為自動縮排卻沒有成功。於是偷偷在firebug裡瞄了一下，哈哈，發現了，原來是標籤選取器沒找對，改了之後便成了上面的樣式，經實驗，在WLW裡不用管縮排，所有的隨筆裡的段落在發布到部落格上後都自動縮排了，成功，本文的縮排都是這樣設的。

 

新補充一個好用的外掛程式http://gallery.live.com/liveItemDetail.aspx?li=10d724ab-0d28-4c78-8310-a6e2cfdef891&bt=9&pl=8

 

總結

經過這樣一番折騰，終於基本上可以滿足用戶端寫技術部落格的要求了，不過還是有些不足的地方，以後技術強了學到新招再補充，希望能對想折騰的XX有所協助。

參考頁面：
http://www.cnblogs.com/lyj/archive/2008/11/30/1344463.html
http://www.cnblogs.com/yaoshiyou/archive/2009/11/25/1610901.html