上一篇文章介紹了umbraco的安裝和簡單的介紹，現在我將從開發一個小的公用插件開始逐步熟悉umbraco的操作，這也是我做的第一個umbraco的小插件。
需求：Umbraco MP3模塊開發計划
1. 設計Document Type: Mp3 Document Type
Speaker:Textstring
Title:Textstring
Summary:Textstring
Series:Textstring
Media:Media Picker
2.設計Document Type: Mp3 List Document Type
將Mp3 Document Type設置為Child
3. 設計cshtml宏
展現Mp3 List Document Type的Content的所有Mp3文件，並通過Mp3播放JQuery插件進行播放
現在開始具體的開發工作了，我會邊講步驟邊說明：
一、創建Document Types
進入****/umbraco/umbraco.aspx頁面，點擊Settings,然后右擊Document Types；
現在可以新建也可以引入一個Document Type,我們選擇Create(新建)，在右邊的編輯頁面的info頁中，設置name為Mp3 Document Type(該Document Type其實就是一個MP3屬性的集合，包含MP3的一些屬性，也只包含屬性)，它會自動生成alias(別名，這是umbraco 各項元素的標識，會自動保存於umbraco.config，我們在后面要操作Content的時候會用到)，選擇Icon為mediaMovie.gif(這是為了表明我們要設置的是MP3)，在Generic Properties頁，Add New Properties，下面用截圖表示操作
例如添加屬性Speaker，
用相同的方式，添加其它屬性Speaker，Title，Summary，Series，Media
那么現在Document Type: Mp3 Document Type已經創建好了，現在開始創建Document Type: Mp3 List Document Type，和上一個一樣的操作Create Mp3 List Document Type,這一個Document Type為了將所有的Mp3 Document Type組合起來的一個大的集合，Mp3 Document Type是它的子節點，他本身沒有任何的屬性，為什么這么做，就是因為一個音樂的播放列表含有很多的音樂個體。所以，這個Mp3 List Document Type只需要設置Structure就可以了，在Allowed child nodetypes中選擇Mp3 Document Type。
二、創建Template
為什么要創建Template呢，因為我們有了Document Type，只相當於有了一些model,這些東西只是決定了有什么，而不會決定怎樣展現，這里的template其實就是.NET中的master,它將會將我們需要展現的東西呈現給用戶。我們要展現的是播放列表，右擊Templates,然后Create一個Name為Mp3 List Document Type的template,會看到如下代碼：
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server"> </asp:Content>
這里，<asp:Content></asp:Content>就是我們編輯html代碼的地方，為了實現代碼的重用性，我將不會直接在這里面寫播放列表的產生代碼，我將使用到宏，然后在template中引用宏。
引用宏的操作在宏創建后，在繼續這里面的操作。
三、創建XSLT Files
為什么要創建XSLT file呢，首先我們要知道macro(宏)是什么，什么是macro，我也給不出定義，就我自己的理解，在umbraco里面，macro就是一個平台，這個平台是干什么的呢，就是分離插件（指的就是xslt files / cshtml / .NET controls）和template的，讓各插件可以獨立開發,開發后可以通過macro插入到template也體現出重用性，macro必須要包含xslt files / cshtml / .NET controls里面的一個文件，而這些文件才是可以呈現在用戶面前的內容。
XSLT是擴展樣式表轉換語言（Extensible Stylesheet Language Transformations）的簡稱，這是一種對XML文檔進行轉化的語言，XSLT中的T代表英語中的“轉換”（transformation）。它是XSL（Extensiblestylesheetlanguage）規范的一部分。------摘自 百度百科
我將會在另一片博客中詳細講解xslt。這里就不說其用法，只是說一下這個模塊涉及到的內容。
在這里，點擊Developer,右擊XSLT Files,Create 一個File name為Mp3Player，template為Clean的文件。
默認生成的代碼如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<!-- start writing XSLT -->
</xsl:template>
</xsl:stylesheet>
其實就是XML標記，我將在<!-- start writing XSLT -->下面寫代碼。
現在先不寫代碼，我們先將必須的文件全部創建好了然后在寫代碼，現在先點擊保存。
四、創建Macro
點擊Developer,右擊Macros，創建Name為Mp3 Player的macro，然后在Use XSLT file里面選擇Mp3Player.xslt，點擊保存。這樣這個macro就創建好了，可以在template中使用了。
五、編輯模版
點擊Mp3 List Document Type，進入編輯頁面，在<asp:Content></asp:Content>里面加入如下代碼：
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>這一行思維了正確解析xslt轉換過來的html,<head runat="server"></head>是為了讓在xslt文件中引入的css和jquery正常的執行。
然后將光標指向body里面，點擊macro引入的圖標，
然后選擇Mp3 Player,點擊OK。這樣就自動生成macro引入代碼，全部代碼如下：
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<umbraco:Macro ID="MacroMp3Player" Alias="Mp3Player" runat="server"></umbraco:Macro>
</body>
</html>
</asp:Content>
接下來，就是創建Content用來顯示template里面的內容。
六、創建Content
進入Content節點,右擊Content,點擊Create,如下圖創建,點擊Create.
找到App_Data下面的umbraco.config,打開查看，會發現多了Mp3ListDocumentType節點，這個節點我們將在xslt文件中操作：
<Mp3ListDocumentType id="1058" parentID="-1" level="1" writerID="0" creatorID="0" nodeType="1055" template="1056" sortOrder="1" createDate="2012-11-30T14:49:42" updateDate="2012-12-05T15:05:10" nodeName="Music" urlName="music" writerName="admin" creatorName="admin" path="-1,1058" isDoc=""/>
右擊剛才創建的Music,然后Create一個mp3文件，name可以隨便寫，然后填寫properties，如下圖：
Mp3這一項選擇的是Media中添加的mp3文件。添加后查看umbraco.config,發現在Mp3ListDocumentType 節點下多了一個子節點，如下：
<Mp3DocumentType id="1063" parentID="1058" level="2" writerID="0" creatorID="0" nodeType="1053" template="0" sortOrder="0" createDate="2012-11-30T14:51:59" updateDate="2012-12-05T14:58:24" nodeName="Grillz" urlName="grillz" writerName="admin" creatorName="admin" path="-1,1058,1063" isDoc="">
<speaker>Ali & Gipp</speaker>
<title>Grillz</title>
<summary>A very famous song</summary>
<series>Billboard</series>
<mp3>1059</mp3>
</Mp3DocumentType>
按照這種方式多添加幾個mp3文件。現在進入最重要的環節，就是如何顯示Content中的內容。
七、編寫XSLT文件
打開剛才創建的Mp3Player.xslt，然后在<!-- start writing XSLT -->后面添加如下內容：
<xsl:value-of select="umbraco.library:RegisterStyleSheetFile('uTubeCSS', '/css/mp3play/Mp3Player.css')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jquery', '/scripts/jmp3/jquery-1.7.2.min.js')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jquery_jmp3', '/scripts/jmp3/jquery.jmp3.js')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jquery_control', '/scripts/jmp3/mp3playerControl.js')"/>
<div id="music-player">
<div id="music-list">
<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::*[@level=1]/Mp3DocumentType">
<xsl:variable name="mediaId" select="mp3"/>
<xsl:variable name="media" select="umbraco.library:GetMedia($mediaId, 0)"/>
<a href="javascript:void(0);" ondblclick="playmedia('{$media/umbracoFile}')">
<li class="playerlist">
<table cellpadding="0" cellspacing="0" style="font-size:12px">
<tr>
<td class="playermini">
<img id="{$media/umbracoFile}" with="27" height="22" src="/css/mp3play/images/stop.png" onclick="playmediamini('{$media/umbracoFile}')"/>
</td>
<td>
<xsl:value-of select="title"/>---<xsl:value-of select="speaker"/>
</td>
</tr>
<tr class="hiddenlist">
<td></td>
<td>
<small>
<xsl:value-of select="series"/>
</small>
</td>
</tr>
<tr class="hiddenlist">
<td></td>
<td>
<small>
<xsl:value-of select="summary"/>
</small>
</td>
</tr>
</table>
</li>
</a>
</xsl:for-each>
</ul>
</div>
<div id="player-plugin-hidden" class="mp3player">
<iframe src="../scripts/jmp3/singlemp3player.swf?showDownload=false" id="mp3player-iframe" width="300px" height="30px" frameborder="0" scrolling="no"></iframe>
</div>
</div>
這里不詳細的講解XSLT的操作，我將在另一篇博客中詳細的介紹，現在就針對該代碼進行必要的說明。
先介紹代碼中出現的xslt語法
<xsl:param>元素用於設計一個全局的參數變量。
<xsl:value-of>元素用於選取選擇節點值。這里為了讓css和jquery能在xslt中正常使用，將才用這種方式引入。
<xsl:for-each>元素允許在XSLT里使用循環語句。這里是遍歷umbraco.config里面的Mp3DocumentType節點，為讀取每個mp3文件的相關信息。
<xsl:variable>元素用於設置局部變量。
$ 獲取變量的值
現在介紹代碼中出現的xpath語法，該語法與XSLT配套使用
ancestor 選取當前節點的所有先輩（父、祖父等）
ancestor-or-self 選取當前節點的所有先輩（父、祖父等）以及當前節點本身
child::* 選取當前節點的所有子元素
//title[@lang='eng'] 選取所有 title 元素，且這些元素擁有值為 eng 的 lang 屬性。
那么在這里，<xsl:for-each select="$currentPage/ancestor-or-self::*[@level=1]/Mp3DocumentType">就是遍歷當前Content(即Music)下面的所有Mp3DocumentType，然后選出其屬性值。
在這里，用於操作MP3播放和列表樣式顯示的jQuery和css我就不寫出來了，感興趣的可以在下面的網址中下載。
還是上兩張截圖：
文章中有什么錯誤請指出來，歡迎交流討論，umbraco新手寫的生澀的博客。
尊重原創，支持作者：http://www.codeplex.com/site/users/view/huang_bx
該模塊詳細介紹：http://mp3playerxsltplugin.codeplex.com/
該模塊安裝包下載：http://mp3playerxsltplugin.codeplex.com/releases/view/98701
該模塊源代碼：http://mp3playerxsltplugin.codeplex.com/SourceControl/changeset/view/001c55952893