初次見面的朋友初次見面，好久不見的朋友好久不見。
好吧，我知道這個開頭語已經老哏了，但我還是覺得這個開頭語最好用。
本人其實擁有很多部落格，過去以來這座小屋都是用來發表創作或長篇專欄，日誌性隨筆文章則發表於其他部落格，但分散過多地方發表文章，一開始或許是有趣的，久了後我發覺其他地方都沒人氣了。所以為了凝聚人氣，我還是回到這座經營最久的小屋，將日誌類文章發表於此。
首先，在過去的文章中，我有提過我正在開發一個網站。為什麼要開發網站呢？我得慚愧的說，我還真因為RMMH開發者X-GOD詢問「洛克人博物館是否有復站的一天」，而動了開發網站的念頭（此洛克人博物館非目前在洛克人系列哈啦板置頂區的x17zero0發表文章。不知道洛克人博物館是什麼的，請見此篇文章）。只是，時隔十數年的現今，我其實已經沒有動力再開發一個資料豐富的攻略與設定網站，畢竟相關資料在外國的Mega Man Knowledge Base、日本的ロックマンエグゼまとめ@wiki、台灣的Ainamk未廣為宣傳的洛克人事典與X-GOD的RMMH已相當豐富了，我為何要重新開發出一個輪子呢？唯一差別大概是洛克人相關資料在中文圈還是相當匱乏的，想要找到相關資料就得先看懂英文和日文。不過轉念一想，我現在所擁有的是這十五年來於巴哈姆特發表的文章，這些文章有三分之二是創作，三分之一是介紹性文章，把這些雖不算完備但也相當龐大的文章搬到網站，再稍微修飾，我想應該是最簡單的事情。
然而在定位網站的主題時，仍讓我花了點時間。綜觀本小屋右側的選單上，本人鑽研的三個領域應為洛克人、柯南與鍵社系列，本小屋凝聚的好友多數來自這三個領域的愛好者，但鮮少有愛好者是橫跨這三個領域，所以我算是這三個領域極少數的交集點。在這三個領域上，我皆有著龐大的野心，比方說開發出洛克人的角色或晶片資料庫、柯南的案件資料庫或社群網路關係圖、以及鍵社的什麼什麼之類，但想像總是比做到還容易，屆時是否能達成又是另一回事。在考慮自身能力的前提下，現階段我所擁有的文章應該是洛克人居多，所以網站暫且先以洛克人為主題吧，未來再視情況拓展。
於是，在與盟友櫻井梅兒醬討論後，網站定名為……
 |
在敲定網站名稱前，我們曾討論過網站名稱可以叫作……
Rockman Network Engineering Universe
Rockman Theory of Bonds(Kizuna)
Rockman Theory of Everything
Theory of Rockman
Rockman Satellite Police Server
Rockman EXE Team of Forte Command Center
Rockman EXE Doujin Universe
Amory's Doujin Universe
Amory Portal
RE5TOF - 洛克人EXE5佛魯迪小隊作戰指揮中心
RE5TOF - 洛克人EXE5佛魯迪小隊設定資料集
RE5TOF - 洛克人EXE5佛魯迪小隊設定資料館
RE5TOF - 佛魯迪小隊設定資料館
A.R.P.G. - 超螺旋宇宙
A.R.P.G. - 洛克人網路工程宇宙
A.R.P.G. - 洛克人設定資料館
A.R.P.G. - 第十與第十一次元之間
A.R.P.G. - 四維超正方體
A.R.P.G. - Amory's Rockman Portal
A.R.P.G. - Rockman Network Universe
A.R.P.G. - Amory's Rockman Planet Gravity
A.R.P.G. - Amory's Rockman Portal GX
A.R.P.G. - Amory's Rockman Parallel Galaxies
A.R.P.G. - Amory's Rockman Professional Guidelines
A.R.P.G. - Association of Rockman Professional Guides
各種怪異的名稱。最終敲定ARPG真是個好名字，又剛好符合Amory和Rockman的字首。事實上，ARPG這個縮寫並不是現在才想出來的，早在2007年那時洛克人博物館還未完全死透，我就已開始草擬新網站的架構與名稱，只是當時只想出ARPG這個縮寫，想不出全名要叫作什麼。
當時做出來的LOGO是長這個樣子……
 |
看起來解析度真小，當時使用PhotoShop還不夠純熟，我是使用PhotoImpact來製作LOGO，結果文字的邊緣都有白邊。時隔多年的現今，我使用PhotoShop的能力已大幅成長，更已累積相當多同人圖可以展示。我不希望LOGO嵌入的是官方圖，因為這樣會看起來跟其他網站沒什麼差別，為了突顯自身特色，我想嵌入同人圖是最好的，只是屆時搞不好會有人指著LOGO問那上面到底是誰！XD
行文至此，大概解釋了一下開設網站的理念。如果是看到標題按進來的訪客，一定覺得上面廢話太多，標題雖然寫著Orchard，看半天還是沒提到Orchard是怎樣。所以現在，總算要進入正題了！
網站草擬階段，我一直猶豫到底是全部自行開發較好，還是使用現成引擎較好。X-GOD有言：「要放創作的話使用CMS就好了！」然而，使用現成引擎，總有種網站不是自己開發的感覺。身為一位打混摸魚、程式能力不太好的資工背景工程師，使用現成引擎未免太遜。然而，網站引擎全部自己開發，可能寫得半死都還比不上人多勢眾、累積多年經驗的現成引擎的網頁美觀性與效能。我的老師曾說過：「工程師的壞習慣就是喜歡自己重新開發一個輪子。」這話是要說明物件導向的重要性，不管如何，在幾經比較後我找到了Orchard。
Orchard為微軟工程師團隊所開發，但未受微軟官方宣傳的開源CMS，它是以ASP.NET MVC所撰寫，最大特點為提供module和theme熱插拔，管理介面也與WordPress十分相似。Orchard於2011年推出第一版，至今已至1.9版，預估明年五月應該會推出2.0版。
若提到CMS，那麼WordPress是目前普及度最高的開源項目……這個說法我想應該不會有人反對吧。WordPress自2003年推出至今已越十年，有著豐富的中文文獻、使用者與插件。我本來也在考慮是否該使用WordPress，但最讓我排斥的是WordPress使用的是PHP+MySQL，PHP+MySQL我雖然不是沒有接觸過，但總有種用不上手的感覺，以及效能不彰的刻板印象……若PHP工程師聽到我這麼說，可能會跳出來反駁我也說不定（巴哈姆特系統也是PHP+MySQL）。
我希望能找到的CMS，是除了管理文章的基本功能外，還能讓我在上面進行資料庫系統開發。為什麼要開發資料庫系統？過去在洛克人博物館時期，我最常做的一件事就是為了要做一個角色介紹頁面，我就得拿舊網頁出來加工後存成新的網頁，N個角色介紹頁面就有N個網頁，十分麻煩且容易複製錯誤。資料庫系統存在的情況下即可以一個網頁作為模板，按參數呼叫不同的資料，可大幅降低製作多重網頁的時間。十年前我還沒學過資料庫系統，所以洛克人博物館的網頁都是用非常陽春的HTML製作，現在拿出來會笑死人，但十年後的現今我已稍微擁有必備知識，那麼網頁即可設計得更為智慧化。
於是回到上段所言，開發資料庫系統我還是熟練使用SQL Server和C#。儘管可能有反微軟工程師鄙視ASP.NET+SQL Server，但我就是覺得ASP.NET+SQL Server最好用。WordPress或許前台是可以使用jQuery呼叫包裝成WebService的SQL Server資料，但我想到撰寫插件或其他東西還是得用到PHP就覺得麻煩。不管如何，我最終找到了稍微符合我期望的Orchard。
跟WordPress老前輩比起來，Orchard還算新生兒，英文資料居多，但還不至於看不懂。只是中文文獻大陸比台灣還多，台灣可要加油。Orchard所使用的框架是ASP.NET MVC，不是以前學過的Web Form。MVC和Web Form雖然名字前面都掛著ASP.NET，但卻是兩種截然不同的概念。事實上我是到了2013年才看書接觸了MVC，此前都是使用Web Form。然而我雖稍微理解了MVC的基礎概念，但還是看不太懂MVC的程式，畢竟Web Form比較直觀，MVC看起來好像在變魔術。於是搞到現在，我唯一知道的大概只有……MVC是為了要三權分立，讓部門各司其職的嶄新概念，Model是資料源，View是視覺介面，Controller是前兩者的橋樑。
好，雖然還是摸不清楚MVC的細節，但走馬看花總還是知道每個檔案是幹嘛用的。上面又不小心扯了一大段了，訪客一定很想按上一頁並罵道：「到底什麼時候才要進入Orchard主題？」我這就開始解釋，要怎麼安裝Orchard。
微軟非常好心，已幫你集成好一個懶人安裝程式，只要一鍵點選就可將環境全部架設好。當然不只Orchard，其他CMS甚至是電子商務也可這麼做。
首先，請下載並安裝Microsoft Web Platform Installer。
安裝好之後打開程式，切換到第三頁的「應用程式」，可發現列表上排滿了相當多CMS與電子商務。這些電子商務只要直接點選便能自動安裝並設置環境，就連資料庫是使用MySQL的系統也是一樣，微軟服務真是週到。
本文講的是Orchard，當然是點選Orchard。安裝好Orchard後，程式會自動將網頁編輯器WebMatrix安裝好，並啟動IIS打開瀏覽器至localhost的Orchard設定畫面中。
網頁目錄預設安裝於C:Users\使用者名稱\Documents的My Web Sites下。
第一次進入Orchard時，畫面會是長這個樣子的。
網站名稱、帳號和密碼就不用多說了。
資料庫的位置，如果是在本地端測試階段，可選擇SQL Server Compact。這是一個小型SQL Server簡易版本，它會將一個名為Orchard.sdf的檔案存在網頁目錄下的\App_Data\Sites\Default\中。當然，如果你想將資料庫安裝在已經存在的SQL Server，也可選擇其它選項。
Recipe的部份，你可選擇這個網站日後要作為Blog還是其他用途，程式會根據你的需求將不同項目安裝至管理介面中。但根據他人解說，選擇其他好像會有問題，所以這裡選擇Default就好了。
當上面的初始設定完畢後，理論上就不會再有機會進入初始設定畫面。但如果你日後想將初始設定砍掉重新再來，只要將網頁目錄下的App_Data砍掉即可。當然你得注意，如果你是使用SQL Server Compact，放在App_Data底下的Orchard.sdf也會一起被砍掉。
當一切設定完畢後進入網頁，你可以看到一個簡單的畫面。
我們當然是從下方點選Dashboard，進入管理介面。
進入管理介面後，你可看見左側選單上有琳瑯滿目的選項，但是都不知道那是幹嘛用的。先從最簡單的項目開始……
Blog
相信大家看得出來，這是部落格。Orchard可設定一個網站有多個Blog，Blog下的每篇文章則叫作Post。我們可將Blog當成是一連串文章的容器，因此有多個Blog，就有多個文章串列。
假如是單人使用，你可能根本不需要這麼多Blog，因為要分類文章，單純用Tag就可作到。多個Blog自然是要給多個使用者使用，才不會互相打架。
Content
這是顯示頁面一欄表，通常Page和Projection才會顯示於此列表中。你可能會分不清楚Page和Blog有啥差別，Page基本上可當作是靜態外框頁面，Blog則是動態產生的頁面。這樣解釋可能還是很模糊，我想稍微使用一下應該就可分別兩者的差異。至於Projection，我們於下面的Queries再解釋。
Content Definition
這是所有項目的定義，我們可以不要管它。
Queries
這是查詢，亦即將指定查詢結果顯示於列表上。一個典型的使用例子是，我希望將最新發表的十篇文章顯示於列表上，我就得使用Query。但是設置好Query還不算完成，這時就得使用Projection，將Query包裝成Projection，才能放上Page顯示。
Comments
這是留言管理，這很好理解。
Taxonomies
這是分類，其實我不知道這是幹嘛用的。
Widgets
這是工具，不過我覺得叫Layout好像比較容易理解。
首先Orchard預設所有頁面都是由以下區塊所組合而成：
你只要在指定區塊插入內容，就可以有條理的方式完成版面配置。
至於介面上方有個Layer選項，則是讓使用者可設定，該區塊是所有頁面皆顯示、只有管理登入時才顯示、只有未登入時才顯示或只在首頁顯示。
Media
這是圖片管理，應該不難理解。
Profiles
不知道幹嘛用的。
Navigation
設置主選單項目。
Tags
部落格文章的標籤管理。
Layouts
這個跟Widgets是對應的。Widgets介面讓使用者可將項目插入至指定區塊中，而Layouts則是讓使用者可設定各區塊。不過我認為，預設的Layouts已經夠全面，應該不需要再更動。
Elements
不知道幹嘛用的。
Modules
這是模組管理，我們可以當作是WordPress的插件。Orchard已預設安裝好很多有用的Module，不過有些Module是沒有enable的，必須要手動將它啟用。順道一題，如果你看到某Module右上角是寫著Enable，那並不是它已經啟用，而是要點選Enable它才會啟用。換言之，右上角顯示Disable才代表已經啟用。
Theme
這是主題管理，這應該很好理解。我們之後再來討論這個部份。
Workflows
我不知道這是幹嘛的，看起來好像排程工作。
Users
使用者帳號管理，這很好理解。
Reports
安裝報告。安裝完成後，大概只會顯示一個Setup，不知道以後會不會有其他種訊息。
Settings
各種設定。
上面稍微解釋了一下管理介面左側選單上的項目。當進入管理介面，一般人會想做的事情應該是先去改Theme，因為預設的Theme實在太陽春了，改個順眼的Theme再說。
Theme介面下，Gallery分頁可安裝網上各種Theme。在此推薦安裝Bootstrap，那是Twitter所推出的HTML、CSS和JS自適應框架，以支援跨平台瀏覽為目標，非常好用。原本Bootstrap是不支援Orchard，但有強人Philip Senechal設計了給Orchard用的Bootstrap主題，所以在Gallery中也能找到Bootstrap Theme。
只是，按照Gallery中的下載排序，你可能會先看到Bootstrap - Version: 3.0.0.2。這個版本是舊版本，似乎只支援到Orchard 1.8，若安裝到Orchard 1.9上，儲存設定時會有問題，所以請安裝Gallery第一頁稍微下面一點的PJS.Bootstrap - Version: 3.3.4，這個版本才全面支援Orchard 1.9。
為什麼Philip Senechal不將PJS.Bootstrap統合到Bootstrap裡面去呀？這樣會讓人下載錯誤耶！
PJS.Bootstrap版本的網頁看起來就比較順眼了，而且支援手機瀏覽。
當Theme安裝好，接下來我們會想做得事情，就是開始改Theme的設定，將Theme的外觀改成想要的模式。
管理介面的Settings>Theme-Bootstrap已有相當豐富的選項，Bootswatch提供了17種佈景主題，真是佛心來著。下面的選項則供設定是否要將主選單色彩反黑或反白、主選單是否固定在網頁最上面、是否顯示搜尋等等。
事實上，Bootstrap - Version: 3.0.0.2的設定選項也跟PJS.Bootstrap - Version: 3.3.4相同，Bootstrap - Version: 3.0.0.2安裝好後會在資料庫內新增一個資料表存放設定資料，但PJS.Bootstrap - Version: 3.3.4卻不會在資料庫內存入資料。我找了半天都不知道PJS.Bootstrap - Version: 3.3.4是把設定資料存在哪裡，這真是離奇。
即使Bootstrap提供了多種佈景可設定，你可能還是覺得Bootstrap的配置實在太單調，非得動手修改CSS才甘願，所以接下來我們要學得是如何設計一個Custom Theme。
Orchard的官方文件推薦拿預設主題The Theme Machine來改就好了，但我希望Custom Theme能繼承Bootstrap的優點與要素，故拿PJS.Bootstrap來改會比較好。但官方文件又說明，設計Custom Theme的良好習慣是不要直接拿現有Theme來改，而是先創建一個空白的Theme，再把其他Theme的要素複製過去。
這時你就需要到Modules介面中，找到一個名為Code Generation的Module，將它Enable。切記，Module的右上角如果顯示Enable並不代表它已Enable，而是它還處於Disable狀態，反之亦然。
Code Generation用途在於以現有Theme為繼承基礎，複製出一個新的空白Theme。首先我們需打開cmd指令碼介面，進入網頁目錄下的\bin，接著輸入orchard。指令行便會進入orchard模式，接著輸入：
codegen theme 新的Theme名稱 /BasedOn:欲繼承的Theme名稱
假如希望在Visual Studio下編輯Custom Theme，則可輸入：
codegen theme新的Theme名稱 /BasedOn:欲繼承的Theme名稱/CreateProject:true /IncludeInSolution:true
其實我不知道兩者有什麼差別啦，看起來匯出內容都一樣！XD
當指令執行完成後，在網頁目錄的\Themes下，會出現你所輸入的新的Theme的目錄。它的檔案結構大致是這樣子：
按MVC的概念，Views是視覺介面，Model是資料源，Controller是前兩者間的橋樑。不過若未使用到資料庫，則只要保留Views就好了。但若打開PJS.Bootstrap的目錄，可發現它有Model和Controller（Handlers），這是因為它（應該）有使用到資料庫，說應該是因為我找不到PJS.Bootstrap是把資料存到哪裡。
至於Styles存放CSS檔，Scripts存放JS檔，相信這就不用多說了。
Custom Theme創建完成的第一步驟是，請打開該目錄下的Theme.txt，上面記載了類似以下格式的資訊。
Name: MyTheme
Author: Amory Huang
Website: http://home.gamer.com.tw/amory626
Description: This is a test theme inherit from PJS.Bootstrap.
Version: 1.0
BaseTheme: PJS.Bootstrap
這些資訊會顯示於管理介面Themes的介紹文上，其中BaseTheme代表著所繼承的Theme名稱，這行千萬不可移除，否則繼承關係就會消失。新創建的Custom Theme雖然看起來檔案稀少，實際上所有內容皆繼承自BaseTheme。但是當有同名檔案於Custom Theme之中存在時，就會以Custom Theme的版本為主。
你可能會有疑惑，為啥我改了PJS.Bootstrap的佈景設定，Custom Theme的佈景設定也跟著改，我只想引用PJS.Bootstrap的要素，不想PJS.Bootstrap動了我就跟著動。
首先，請將\PJS.Bootstrap\Styles\的內容全部複製到Custom Theme的\Styles下，site-開頭的CSS可以不要全部複製，或是只複製一份看順眼的site-開頭CSS檔就好了，因為我們等一下要以此份CSS檔為基礎來修改。
當\Styles的內容都複製過來後，將該份site-開頭CSS檔更名為另一個順眼的名字，假設就叫作site.css。我們需做兩件事將資源引入，才不會讓Custom Theme使用的CSS檔總是指回PJS.Bootstrap。
請到Custom Theme目錄下的.csproj檔中，裡面應該只有引入少數幾個資源。但若是打開PJS.Bootstrap.csproj，就會發現裡面引入了一堆資源。我們不需要將PJS.Bootstrap.csproj的設定全部複製過來，因為在繼承關係下Custom Theme會直接取用PJS.Bootstrap的設定，除非Custom Theme這邊有新的設定覆蓋過去。
這樣說可能還是很模糊，總之請至Custom Theme的.csproj檔中，在<itemGroup>下加入：
<Content Include="Styles\site.css" />。
但這樣還無法完全將CSS檔引入，所以請將\PJS.Bootstrap\Views\Resource.cshtml複製到Custom Theme中，並找到下列這一行：
Style.Include("site-" + settings.Swatch + ".min.css");
將其改為：
Style.Include("site.css");
如此一來即可阻斷Model與Views間的連結，不接收來自資料庫的資料，而是直接指定CSS檔的路徑。當然，這樣的作法或許是種消極的作法，資料庫的來源其實都還在，但就簡易度而言，我想這是最簡單的作法了吧！
順道一題，這邊輸入site.css是因為我取的CSS檔名是叫作site.css，如果你想取其他名字當然也沒關係。
可以自由修改CSS之後，你接下來可能會想改掉主選單上的LOGO。PJS.Bootstrap內建是以網站名稱來代替主選單上的LOGO，如果想將文字更改為LOGO，那你就得將\PJS.Bootstrap\Views\Branding.cshtml複製過來，裡面只有一行：
<a href="@Href("~/")" class="navbar-brand">@WorkContext.CurrentSite.SiteName</a>
可將@WorkContext.CurrentSite.SiteName更改為圖檔或其他文字。當然，如果你的LOGO太大，顯示起來可能會有點問題，這時就請慢慢去修改CSS檔吧。
同理，如果你看Footer上的Powered by Orchard ©PJS.Bootstrap 2015這行字不順眼，可以將\PJS.Bootstrap\Views\BadgeOfHonor.cshtml複製過來，裡面只有一行：
<div class="credits"><span class="poweredby">@T("Powered by <a href=\"{0}\" target=\"_blank\">Orchard</a>", "http://www.orchardproject.net")</span> <span class="copyright">@T("©PJS.Bootstrap") @DateTime.Now.Year</span></div>
可以將它改成想要的語句。但奉勸你至少要保留Orchard和PJS.Bootstrap這兩個名字，這是為了道德。
若想更加了解版面配置，務必詳加閱讀\PJS.Bootstrap\Views\Layout.cshtml，這就是版面各區塊的框架。雖然你可能不太會需要動到Layout.cshtml的內容，但透過Layout.cshtml，將可更快找到CSS中對應的class名稱。
當LOGO和Footer都可以更改後，你接下來可能會想更改主選單內容。只要透過管理介面上的Navigation，就可更改主選單上的項目。然而，若你只是放入文字和超連結，主選單看起來會很單調，你可能會想更改主選單的CSS，讓主選單看起來更美觀。
例如，如果想做出像這樣子的主選單，那麼主選單上每個Item的文字勢必就得換行，亦即我要先在第一行寫上中文後，輸入<br/>換到第二行再寫上英文。至於字型大小與光暈就是透過CSS來達成，這就不用多說了。
管理介面上的Navigation可以填入Html Menu Item，但如果在Html Menu Item中加入<div></div>似乎會有問題，所以想設定CSS請用<span></span>將欲修飾的文字包裝起來。不過一個個將Html Menu Item填入Navigation中，若Item很多，你可能會填到抓狂，所以我建議不要使用管理介面內建的Navigation功能，而是將Navigation的原始碼複製到Widgets中的Navigation區塊內。
以下為Bootstrap網站所提供的Navbar範例原始碼節錄：
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
將上述這段複製到Widgets的Navigation內，重新開啟一個Html Widget，並將原本的Main Menu設為Unpublish。注意，這裡跟Module一樣，右側必須顯示為Publish，才代表這個項目已經Unpublish，反之亦然。
原始碼填入完成後，重新打開網站，你就會發現剛才打造的主選單已經無縫接軌於天頂，取代原本內建的主選單。不過這個作法有個缺陷，那就是使用非內建主選單，登入選項會無法顯示出來。但消極而言，這也不是什麼大問題，因為只要在網站網址後方加上\Admin就可進入管理介面，就算尚未登入也會跳到登入畫面。
順道一題，若Navigation在theme-Bootstrap頁面中已被設為Fixed（固定於最上面），那麼在Widgets的Header區塊內填入任何東西，其內容也不會出現在Navigation上面，而會被擠到下面。這是因為Navigation已被設為固定於網頁最上層，就算Header的原始碼順序是在Navigation前方也是如此。想在Navigation前方填入任何東西，就得跟Navigation擺在同一區塊內才行。
可以自行修改主選單的樣式後，你可能還不會滿足，因為Bootstrap標準的主選單就是一個死板的下拉式選單。如果想做到以下這種形式的選單，就得倚靠外掛函式庫。
這是採用Yamm3所設計的下拉式選單，這種選單稱為Megamenu。Philip Senechal真是佛心來著，他已將Yamm3內建於PJS.Bootstrap中，所以我們根本不需要再額外安裝Yamm3。
Yamm3的使用方式大致如下：
<nav class="navbar yamm navbar-default " role="navigation">
...
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
...
</li>
</ul>
</li>
</ul>
...
</nav>
基本上只要參考Yamm3網站上的範例，就能操作自如了。
至於外觀就是CSS的事情了。
結束主選單後，我們再來進入下一個功能。很多網站首頁都會擺設輪播式投影片，讓首頁看起來更加絢麗，Bootstrap亦有提供範例原始碼：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
將這段貼到Widgets任一區塊，即可實現輪播式投影片，至於圖片路徑請自行修改。不過當你將輪播式投影片……我們就稱為Carousel好了……設置完成後，調整瀏覽器大小，你會發現在手機瀏覽寬度下，Carousel的圖片會變得非常小。這是個棘手的問題，因為個人電腦螢幕是寬的，手機螢幕是長的。想讓Carousel的圖片自適應不同寬度的瀏覽環境，你可以從CSS設定在不同寬度下切換為不同圖片，但那會比較麻煩。
有幾個方法可以解決，其一為將Carousel的圖片設為該<div></div>內的背景，如此一來當瀏覽寬度發生變化時，只有Carousel容器尺寸發生變化，圖片尺寸不會有變化。但這個作法要記得將圖片內容中重要的對象置中，否則在手機瀏覽環境下，圖片左右兩旁的內容會被遮蔽。
其二是在Carousel的容器內不要放一整張圖片，而是改放幾個浮動的物件，如此一來當瀏覽環境發生變化時，浮動物件可自適應調整位置。當然，這樣還是比較麻煩，所以我認為上面第一種方法是比較好的，只要記得圖片內重要對象要置中。
上述所提基本上都是Bootstrap的內容，把Bootstrap網站上的範例多看幾次，就能發揮更多的變化。多數網站所具備的功能通常都是大同小異的，而Bootstrap已滿足了多數網站的需求，這正是為何Bootstrap會深受網頁設計師的喜愛。雖然設計網站之初，我們總是想將網站設計成與眾不同、標新立異的模樣，但往長遠的方向來想，太過詭異的網站雖可讓瀏覽者第一次感到新奇，但第二次可能就不會想進來了。特別是視覺效果絢麗但動線混亂的網站更是糟糕，我們絕對要記起設計網站的準則，使用者介面簡潔即可，絕對不要為追求新潮而弄巧成拙。
上面又廢話太多了，其實我還想介紹Orchard的其中一項功能，那就是Placement.info。Placement光看名字就知道是位置，它位於Theme的根目錄下，用來設定每個頁面的某個項目是否要顯示與位置的順序。舉例來說，我覺得Page的標題有夠礙眼，我可在placement.info中輸入：
<Placement>
<Match DisplayType="Detail">
<Place Parts_Title="-"/>
<Place Parts_Common_Metadata="-"/>
</Match>
<Match DisplayType="Summary">
<Place Parts_Title="-"/>
<Place Parts_Common_Metadata="-"/>
</Match>
</Placement>
……即可將標題隱藏。
雖是這麼說，但Placement.info的設定其實我還不是很懂，最詭異的是每次我將Placement.info的設定更改，按了好幾次重新整理或將IIS關掉重開，網頁上的設定總要過好久才會更新，實在好討厭。到底Placement.info是把快取存在哪裡，能不能像CSS一樣，只要檔案儲存，效果即時發揮。
管理介面Modules中有個名為Shape Tracing的Module，預設為Disable，它可協助你判斷網頁上各區塊的Shape名稱是什麼，以及它背後的Placement.info設定。安裝好Shape Tracing後，網頁的右下方便會出現一個方形按鈕，它的運作外觀基本上就跟Chrome的開發人員工具差不多。
最後，我又忘了說一件事，上面所提多數為CSS上的設定，但如果你想將JavaScript函式庫放入Orchard中，有兩種方法：如果你只想在Theme中使用，那你將JS函式庫放在Theme根目錄的Scripts目錄下就好了；如果是要給整個Orchard使用，就得在Orchard根目錄下新開設一個Scripts目錄，將JS函式庫放入。後者我還沒有試驗過，但前者將JS函式庫放入Scripts目錄下後，你需要至Views\Resources.cshtml中，將JS函式庫引入。
按照PJS.Bootstrap的設定，你可以看見Resources.cshtml的最底下有一行：
Script.Require("Custom");
你可依樣畫葫蘆，將Custom改成JS函式庫的名稱。
或是以這個方式載入：
Script.Include("custom.js");
順道一題，假如你將上面這行寫成：
Script.Include("custom.js").AtHead();
這樣等於是將custom.js放在<head></head>中，主控台可能會出現錯誤訊息：「$ is not defined」。因為jQuery的函式庫jquery-1.11.1.min.js是放在整個網頁的最下面，你的custom.js不可以放在jquery-1.11.1.min.js的上面，否則瀏覽器無法辨識jQuery的函數。
以上，即為本文全部內容。
這篇標題雖然寫著網站開發筆記，但看起來好像教學文。我其實很少寫教學文的，寫到後面我都懶得抓圖，但光用文字敘述我實在不知道會有多少人看懂。或許只有你真正在使用Orchard，才會知道我在寫什麼。
目前網站其實是長這個樣子，只完成主選單和輪播式投影片而已。
首頁下方的排版我還在考慮，到底該怎麼擺設才好。
相關連結：
下回預定解說，Windows Azure的使用心得。
