主題

【網(wǎng)站開發(fā)筆記】初探Orchard CMS

Amory | 2015-07-02 20:04:20 | 巴幣 1010 | 人氣 2679

　　初次見面的朋友初次見面，好久不見的朋友好久不見。

　　好吧，我知道這個開頭語已經(jīng)老哏了，但我還是覺得這個開頭語最好用。

　　本人其實(shí)擁有很多部落格，過去以來這座小屋都是用來發(fā)表創(chuàng)作或長篇專欄，日誌性隨筆文章則發(fā)表於其他部落格，但分散過多地方發(fā)表文章，一開始或許是有趣的，久了後我發(fā)覺其他地方都沒人氣了。所以為了凝聚人氣，我還是回到這座經(jīng)營最久的小屋，將日誌類文章發(fā)表於此。

　　首先，在過去的文章中，我有提過我正在開發(fā)一個網(wǎng)站。為什麼要開發(fā)網(wǎng)站呢？我得慚愧的說，我還真因?yàn)镽MMH開發(fā)者X-GOD詢問「洛克人博物館是否有復(fù)站的一天」，而動了開發(fā)網(wǎng)站的念頭（此洛克人博物館非目前在洛克人系列哈啦板置頂區(qū)的x17zero0發(fā)表文章。不知道洛克人博物館是什麼的，請見此篇文章）。只是，時隔十?dāng)?shù)年的現(xiàn)今，我其實(shí)已經(jīng)沒有動力再開發(fā)一個資料豐富的攻略與設(shè)定網(wǎng)站，畢竟相關(guān)資料在外國的Mega Man Knowledge Base、日本的ロックマンエグゼまとめ@wiki、臺灣的Ainamk未廣為宣傳的洛克人事典與X-GOD的RMMH已相當(dāng)豐富了，我為何要重新開發(fā)出一個輪子呢？唯一差別大概是洛克人相關(guān)資料在中文圈還是相當(dāng)匱乏的，想要找到相關(guān)資料就得先看懂英文和日文。不過轉(zhuǎn)念一想，我現(xiàn)在所擁有的是這十五年來於巴哈姆特發(fā)表的文章，這些文章有三分之二是創(chuàng)作，三分之一是介紹性文章，把這些雖不算完備但也相當(dāng)龐大的文章搬到網(wǎng)站，再稍微修飾，我想應(yīng)該是最簡單的事情。

　　然而在定位網(wǎng)站的主題時，仍讓我花了點(diǎn)時間。綜觀本小屋右側(cè)的選單上，本人鑽研的三個領(lǐng)域應(yīng)為洛克人、柯南與鍵社系列，本小屋凝聚的好友多數(shù)來自這三個領(lǐng)域的愛好者，但鮮少有愛好者是橫跨這三個領(lǐng)域，所以我算是這三個領(lǐng)域極少數(shù)的交集點(diǎn)。在這三個領(lǐng)域上，我皆有著龐大的野心，比方說開發(fā)出洛克人的角色或晶片資料庫、柯南的案件資料庫或社群網(wǎng)路關(guān)係圖、以及鍵社的什麼什麼之類，但想像總是比做到還容易，屆時是否能達(dá)成又是另一回事。在考慮自身能力的前提下，現(xiàn)階段我所擁有的文章應(yīng)該是洛克人居多，所以網(wǎng)站暫且先以洛克人為主題吧，未來再視情況拓展。

　　於是，在與盟友櫻井梅兒醬討論後，網(wǎng)站定名為……

　　在敲定網(wǎng)站名稱前，我們曾討論過網(wǎng)站名稱可以叫作……

　　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佛魯?shù)闲￡?duì)作戰(zhàn)指揮中心

　　RE5TOF - 洛克人EXE5佛魯?shù)闲￡?duì)設(shè)定資料集

　　RE5TOF - 洛克人EXE5佛魯?shù)闲￡?duì)設(shè)定資料館

　　RE5TOF - 佛魯?shù)闲￡?duì)設(shè)定資料館

　　A.R.P.G. - 超螺旋宇宙

　　A.R.P.G. - 洛克人網(wǎng)路工程宇宙

　　A.R.P.G. - 洛克人設(shè)定資料館

　　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的字首。事實(shí)上，ARPG這個縮寫並不是現(xiàn)在才想出來的，早在2007年那時洛克人博物館還未完全死透，我就已開始草擬新網(wǎng)站的架構(gòu)與名稱，只是當(dāng)時只想出ARPG這個縮寫，想不出全名要叫作什麼。

　　當(dāng)時做出來的LOGO是長這個樣子……

　　看起來解析度真小，當(dāng)時使用PhotoShop還不夠純熟，我是使用PhotoImpact來製作LOGO，結(jié)果文字的邊緣都有白邊。時隔多年的現(xiàn)今，我使用PhotoShop的能力已大幅成長，更已累積相當(dāng)多同人圖可以展示。我不希望LOGO嵌入的是官方圖，因?yàn)檫@樣會看起來跟其他網(wǎng)站沒什麼差別，為了突顯自身特色，我想嵌入同人圖是最好的，只是屆時搞不好會有人指著LOGO問那上面到底是誰！XD

　　行文至此，大概解釋了一下開設(shè)網(wǎng)站的理念。如果是看到標(biāo)題按進(jìn)來的訪客，一定覺得上面廢話太多，標(biāo)題雖然寫著Orchard，看半天還是沒提到Orchard是怎樣。所以現(xiàn)在，總算要進(jìn)入正題了！

　　網(wǎng)站草擬階段，我一直猶豫到底是全部自行開發(fā)較好，還是使用現(xiàn)成引擎較好。X-GOD有言：「要放創(chuàng)作的話使用CMS就好了！」然而，使用現(xiàn)成引擎，總有種網(wǎng)站不是自己開發(fā)的感覺。身為一位打混摸魚、程式能力不太好的資工背景工程師，使用現(xiàn)成引擎未免太遜。然而，網(wǎng)站引擎全部自己開發(fā)，可能寫得半死都還比不上人多勢眾、累積多年經(jīng)驗(yàn)的現(xiàn)成引擎的網(wǎng)頁美觀性與效能。我的老師曾說過：「工程師的壞習(xí)慣就是喜歡自己重新開發(fā)一個輪子。」這話是要說明物件導(dǎo)向的重要性，不管如何，在幾經(jīng)比較後我找到了Orchard。

　　Orchard為微軟工程師團(tuán)隊(duì)所開發(fā)，但未受微軟官方宣傳的開源CMS，它是以ASP.NET MVC所撰寫，最大特點(diǎn)為提供module和theme熱插拔，管理介面也與WordPress十分相似。Orchard於2011年推出第一版，至今已至1.9版，預(yù)估明年五月應(yīng)該會推出2.0版。

　　若提到CMS，那麼WordPress是目前普及度最高的開源項(xiàng)目……這個說法我想應(yīng)該不會有人反對吧。WordPress自2003年推出至今已越十年，有著豐富的中文文獻(xiàn)、使用者與插件。我本來也在考慮是否該使用WordPress，但最讓我排斥的是WordPress使用的是PHP+MySQL，PHP+MySQL我雖然不是沒有接觸過，但總有種用不上手的感覺，以及效能不彰的刻板印象……若PHP工程師聽到我這麼說，可能會跳出來反駁我也說不定（巴哈姆特系統(tǒng)也是PHP+MySQL）。

　　我希望能找到的CMS，是除了管理文章的基本功能外，還能讓我在上面進(jìn)行資料庫系統(tǒng)開發(fā)。為什麼要開發(fā)資料庫系統(tǒng)？過去在洛克人博物館時期，我最常做的一件事就是為了要做一個角色介紹頁面，我就得拿舊網(wǎng)頁出來加工後存成新的網(wǎng)頁，N個角色介紹頁面就有N個網(wǎng)頁，十分麻煩且容易複製錯誤。資料庫系統(tǒng)存在的情況下即可以一個網(wǎng)頁作為模板，按參數(shù)呼叫不同的資料，可大幅降低製作多重網(wǎng)頁的時間。十年前我還沒學(xué)過資料庫系統(tǒng)，所以洛克人博物館的網(wǎng)頁都是用非常陽春的HTML製作，現(xiàn)在拿出來會笑死人，但十年後的現(xiàn)今我已稍微擁有必備知識，那麼網(wǎng)頁即可設(shè)計得更為智慧化。

　　於是回到上段所言，開發(fā)資料庫系統(tǒng)我還是熟練使用SQL Server和C#。儘管可能有反微軟工程師鄙視ASP.NET+SQL Server，但我就是覺得ASP.NET+SQL Server最好用。WordPress或許前臺是可以使用jQuery呼叫包裝成WebService的SQL Server資料，但我想到撰寫插件或其他東西還是得用到PHP就覺得麻煩。不管如何，我最終找到了稍微符合我期望的Orchard。

　　跟WordPress老前輩比起來，Orchard還算新生兒，英文資料居多，但還不至於看不懂。只是中文文獻(xiàn)大陸比臺灣還多，臺灣可要加油。Orchard所使用的框架是ASP.NET MVC，不是以前學(xué)過的Web Form。MVC和Web Form雖然名字前面都掛著ASP.NET，但卻是兩種截然不同的概念。事實(shí)上我是到了2013年才看書接觸了MVC，此前都是使用Web Form。然而我雖稍微理解了MVC的基礎(chǔ)概念，但還是看不太懂MVC的程式，畢竟Web Form比較直觀，MVC看起來好像在變魔術(shù)。於是搞到現(xiàn)在，我唯一知道的大概只有……MVC是為了要三權(quán)分立，讓部門各司其職的嶄新概念，Model是資料源，View是視覺介面，Controller是前兩者的橋樑。

　　好，雖然還是摸不清楚MVC的細(xì)節(jié)，但走馬看花總還是知道每個檔案是幹嘛用的。上面又不小心扯了一大段了，訪客一定很想按上一頁並罵道：「到底什麼時候才要進(jìn)入Orchard主題？」我這就開始解釋，要怎麼安裝Orchard。

　　微軟非常好心，已幫你集成好一個懶人安裝程式，只要一鍵點(diǎn)選就可將環(huán)境全部架設(shè)好。當(dāng)然不只Orchard，其他CMS甚至是電子商務(wù)也可這麼做。

　　首先，請下載並安裝Microsoft Web Platform Installer。

　　安裝好之後打開程式，切換到第三頁的「應(yīng)用程式」，可發(fā)現(xiàn)列表上排滿了相當(dāng)多CMS與電子商務(wù)。這些電子商務(wù)只要直接點(diǎn)選便能自動安裝並設(shè)置環(huán)境，就連資料庫是使用MySQL的系統(tǒng)也是一樣，微軟服務(wù)真是週到。

　　本文講的是Orchard，當(dāng)然是點(diǎn)選Orchard。安裝好Orchard後，程式會自動將網(wǎng)頁編輯器WebMatrix安裝好，並啟動IIS打開瀏覽器至localhost的Orchard設(shè)定畫面中。

　　網(wǎng)頁目錄預(yù)設(shè)安裝於C:Users\使用者名稱\Documents的My Web Sites下。

　　第一次進(jìn)入Orchard時，畫面會是長這個樣子的。

　　網(wǎng)站名稱、帳號和密碼就不用多說了。

　　資料庫的位置，如果是在本地端測試階段，可選擇SQL Server Compact。這是一個小型SQL Server簡易版本，它會將一個名為Orchard.sdf的檔案存在網(wǎng)頁目錄下的\App_Data\Sites\Default\中。當(dāng)然，如果你想將資料庫安裝在已經(jīng)存在的SQL Server，也可選擇其它選項(xiàng)。

　　Recipe的部份，你可選擇這個網(wǎng)站日後要作為Blog還是其他用途，程式會根據(jù)你的需求將不同項(xiàng)目安裝至管理介面中。但根據(jù)他人解說，選擇其他好像會有問題，所以這裡選擇Default就好了。

　　當(dāng)上面的初始設(shè)定完畢後，理論上就不會再有機(jī)會進(jìn)入初始設(shè)定畫面。但如果你日後想將初始設(shè)定砍掉重新再來，只要將網(wǎng)頁目錄下的App_Data砍掉即可。當(dāng)然你得注意，如果你是使用SQL Server Compact，放在App_Data底下的Orchard.sdf也會一起被砍掉。

　　當(dāng)一切設(shè)定完畢後進(jìn)入網(wǎng)頁，你可以看到一個簡單的畫面。

　　我們當(dāng)然是從下方點(diǎn)選Dashboard，進(jìn)入管理介面。

　　進(jìn)入管理介面後，你可看見左側(cè)選單上有琳瑯滿目的選項(xiàng)，但是都不知道那是幹嘛用的。先從最簡單的項(xiàng)目開始……

　　Blog

　　相信大家看得出來，這是部落格。Orchard可設(shè)定一個網(wǎng)站有多個Blog，Blog下的每篇文章則叫作Post。我們可將Blog當(dāng)成是一連串文章的容器，因此有多個Blog，就有多個文章串列。

　　假如是單人使用，你可能根本不需要這麼多Blog，因?yàn)橐诸愇恼?，單純用Tag就可作到。多個Blog自然是要給多個使用者使用，才不會互相打架。

　　Content

　　這是顯示頁面一欄表，通常Page和Projection才會顯示於此列表中。你可能會分不清楚Page和Blog有啥差別，Page基本上可當(dāng)作是靜態(tài)外框頁面，Blog則是動態(tài)產(chǎn)生的頁面。這樣解釋可能還是很模糊，我想稍微使用一下應(yīng)該就可分別兩者的差異。至於Projection，我們於下面的Queries再解釋。

　　Content Definition

　　這是所有項(xiàng)目的定義，我們可以不要管它。

　　Queries

　　這是查詢，亦即將指定查詢結(jié)果顯示於列表上。一個典型的使用例子是，我希望將最新發(fā)表的十篇文章顯示於列表上，我就得使用Query。但是設(shè)置好Query還不算完成，這時就得使用Projection，將Query包裝成Projection，才能放上Page顯示。

　　Comments

　　這是留言管理，這很好理解。

　　Taxonomies

　　這是分類，其實(shí)我不知道這是幹嘛用的。

　　Widgets

　　這是工具，不過我覺得叫Layout好像比較容易理解。

　　首先Orchard預(yù)設(shè)所有頁面都是由以下區(qū)塊所組合而成：

　　你只要在指定區(qū)塊插入內(nèi)容，就可以有條理的方式完成版面配置。

　　至於介面上方有個Layer選項(xiàng)，則是讓使用者可設(shè)定，該區(qū)塊是所有頁面皆顯示、只有管理登入時才顯示、只有未登入時才顯示或只在首頁顯示。

　　Media

　　這是圖片管理，應(yīng)該不難理解。

　　Profiles

　　不知道幹嘛用的。

　　Navigation

　　設(shè)置主選單項(xiàng)目。

　　Tags

　　部落格文章的標(biāo)籤管理。

　　Layouts

　　這個跟Widgets是對應(yīng)的。Widgets介面讓使用者可將項(xiàng)目插入至指定區(qū)塊中，而Layouts則是讓使用者可設(shè)定各區(qū)塊。不過我認(rèn)為，預(yù)設(shè)的Layouts已經(jīng)夠全面，應(yīng)該不需要再更動。

　　Elements

　　不知道幹嘛用的。

　　Modules

　　這是模組管理，我們可以當(dāng)作是WordPress的插件。Orchard已預(yù)設(shè)安裝好很多有用的Module，不過有些Module是沒有enable的，必須要手動將它啟用。順道一題，如果你看到某Module右上角是寫著Enable，那並不是它已經(jīng)啟用，而是要點(diǎn)選Enable它才會啟用。換言之，右上角顯示Disable才代表已經(jīng)啟用。

　　Theme

　　這是主題管理，這應(yīng)該很好理解。我們之後再來討論這個部份。

　　Workflows

　　我不知道這是幹嘛的，看起來好像排程工作。

　　Users

　　使用者帳號管理，這很好理解。

　　Reports

　　安裝報告。安裝完成後，大概只會顯示一個Setup，不知道以後會不會有其他種訊息。

　　Settings

　　各種設(shè)定。

　　上面稍微解釋了一下管理介面左側(cè)選單上的項(xiàng)目。當(dāng)進(jìn)入管理介面，一般人會想做的事情應(yīng)該是先去改Theme，因?yàn)轭A(yù)設(shè)的Theme實(shí)在太陽春了，改個順眼的Theme再說。

　　Theme介面下，Gallery分頁可安裝網(wǎng)上各種Theme。在此推薦安裝Bootstrap，那是Twitter所推出的HTML、CSS和JS自適應(yīng)框架，以支援跨平臺瀏覽為目標(biāo)，非常好用。原本Bootstrap是不支援Orchard，但有強(qiáng)人Philip Senechal設(shè)計了給Orchard用的Bootstrap主題，所以在Gallery中也能找到Bootstrap Theme。

　　只是，按照Gallery中的下載排序，你可能會先看到Bootstrap - Version: 3.0.0.2。這個版本是舊版本，似乎只支援到Orchard 1.8，若安裝到Orchard 1.9上，儲存設(shè)定時會有問題，所以請安裝Gallery第一頁稍微下面一點(diǎn)的PJS.Bootstrap - Version: 3.3.4，這個版本才全面支援Orchard 1.9。

　　為什麼Philip Senechal不將PJS.Bootstrap統(tǒng)合到Bootstrap裡面去呀？這樣會讓人下載錯誤耶！

　　PJS.Bootstrap版本的網(wǎng)頁看起來就比較順眼了，而且支援手機(jī)瀏覽。

　　當(dāng)Theme安裝好，接下來我們會想做得事情，就是開始改Theme的設(shè)定，將Theme的外觀改成想要的模式。

　　管理介面的Settings>Theme-Bootstrap已有相當(dāng)豐富的選項(xiàng)，Bootswatch提供了17種佈景主題，真是佛心來著。下面的選項(xiàng)則供設(shè)定是否要將主選單色彩反黑或反白、主選單是否固定在網(wǎng)頁最上面、是否顯示搜尋等等。

　　事實(shí)上，Bootstrap - Version: 3.0.0.2的設(shè)定選項(xiàng)也跟PJS.Bootstrap - Version: 3.3.4相同，Bootstrap - Version: 3.0.0.2安裝好後會在資料庫內(nèi)新增一個資料表存放設(shè)定資料，但PJS.Bootstrap - Version: 3.3.4卻不會在資料庫內(nèi)存入資料。我找了半天都不知道PJS.Bootstrap - Version: 3.3.4是把設(shè)定資料存在哪裡，這真是離奇。

　　即使Bootstrap提供了多種佈景可設(shè)定，你可能還是覺得Bootstrap的配置實(shí)在太單調(diào)，非得動手修改CSS才甘願，所以接下來我們要學(xué)得是如何設(shè)計一個Custom Theme。

　　Orchard的官方文件推薦拿預(yù)設(shè)主題The Theme Machine來改就好了，但我希望Custom Theme能繼承Bootstrap的優(yōu)點(diǎn)與要素，故拿PJS.Bootstrap來改會比較好。但官方文件又說明，設(shè)計Custom Theme的良好習(xí)慣是不要直接拿現(xiàn)有Theme來改，而是先創(chuàng)建一個空白的Theme，再把其他Theme的要素複製過去。

　　這時你就需要到Modules介面中，找到一個名為Code Generation的Module，將它Enable。切記，Module的右上角如果顯示Enable並不代表它已Enable，而是它還處於Disable狀態(tài)，反之亦然。

　　Code Generation用途在於以現(xiàn)有Theme為繼承基礎(chǔ)，複製出一個新的空白Theme。首先我們需打開cmd指令碼介面，進(jìn)入網(wǎng)頁目錄下的\bin，接著輸入orchard。指令行便會進(jìn)入orchard模式，接著輸入：

　　codegen theme 新的Theme名稱 /BasedOn:欲繼承的Theme名稱

　　假如希望在Visual Studio下編輯Custom Theme，則可輸入：

　　codegen theme新的Theme名稱 /BasedOn:欲繼承的Theme名稱/CreateProject:true /IncludeInSolution:true

　　其實(shí)我不知道兩者有什麼差別啦，看起來匯出內(nèi)容都一樣！XD

　　當(dāng)指令執(zhí)行完成後，在網(wǎng)頁目錄的\Themes下，會出現(xiàn)你所輸入的新的Theme的目錄。它的檔案結(jié)構(gòu)大致是這樣子：

　　按MVC的概念，Views是視覺介面，Model是資料源，Controller是前兩者間的橋樑。不過若未使用到資料庫，則只要保留Views就好了。但若打開PJS.Bootstrap的目錄，可發(fā)現(xiàn)它有Model和Controller（Handlers），這是因?yàn)樗☉?yīng)該）有使用到資料庫，說應(yīng)該是因?yàn)槲艺也坏絇JS.Bootstrap是把資料存到哪裡。

　　至於Styles存放CSS檔，Scripts存放JS檔，相信這就不用多說了。

　　Custom Theme創(chuàng)建完成的第一步驟是，請打開該目錄下的Theme.txt，上面記載了類似以下格式的資訊。

　　Name: MyTheme

　　Author: Amory Huang

　　Website: http://www.jamesdambrosio.com/amory626

　　Description: This is a test theme inherit from PJS.Bootstrap.

　　Version: 1.0

　　BaseTheme: PJS.Bootstrap

　　這些資訊會顯示於管理介面Themes的介紹文上，其中BaseTheme代表著所繼承的Theme名稱，這行千萬不可移除，否則繼承關(guān)係就會消失。新創(chuàng)建的Custom Theme雖然看起來檔案稀少，實(shí)際上所有內(nèi)容皆繼承自BaseTheme。但是當(dāng)有同名檔案於Custom Theme之中存在時，就會以Custom Theme的版本為主。

　　你可能會有疑惑，為啥我改了PJS.Bootstrap的佈景設(shè)定，Custom Theme的佈景設(shè)定也跟著改，我只想引用PJS.Bootstrap的要素，不想PJS.Bootstrap動了我就跟著動。

　　首先，請將\PJS.Bootstrap\Styles\的內(nèi)容全部複製到Custom Theme的\Styles下，site-開頭的CSS可以不要全部複製，或是只複製一份看順眼的site-開頭CSS檔就好了，因?yàn)槲覀兊纫幌乱源朔軨SS檔為基礎(chǔ)來修改。

　　當(dāng)\Styles的內(nèi)容都複製過來後，將該份site-開頭CSS檔更名為另一個順眼的名字，假設(shè)就叫作site.css。我們需做兩件事將資源引入，才不會讓Custom Theme使用的CSS檔總是指回PJS.Bootstrap。

　　請到Custom Theme目錄下的.csproj檔中，裡面應(yīng)該只有引入少數(shù)幾個資源。但若是打開PJS.Bootstrap.csproj，就會發(fā)現(xiàn)裡面引入了一堆資源。我們不需要將PJS.Bootstrap.csproj的設(shè)定全部複製過來，因?yàn)樵诶^承關(guān)係下Custom Theme會直接取用PJS.Bootstrap的設(shè)定，除非Custom Theme這邊有新的設(shè)定覆蓋過去。

　　這樣說可能還是很模糊，總之請至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間的連結(jié)，不接收來自資料庫的資料，而是直接指定CSS檔的路徑。當(dāng)然，這樣的作法或許是種消極的作法，資料庫的來源其實(shí)都還在，但就簡易度而言，我想這是最簡單的作法了吧！

　　順道一題，這邊輸入site.css是因?yàn)槲胰〉腃SS檔名是叫作site.css，如果你想取其他名字當(dāng)然也沒關(guān)係。

　　可以自由修改CSS之後，你接下來可能會想改掉主選單上的LOGO。PJS.Bootstrap內(nèi)建是以網(wǎng)站名稱來代替主選單上的LOGO，如果想將文字更改為LOGO，那你就得將\PJS.Bootstrap\Views\Branding.cshtml複製過來，裡面只有一行：

　　<a href="@Href("~/")" class="navbar-brand">@WorkContext.CurrentSite.SiteName</a>

　　可將@WorkContext.CurrentSite.SiteName更改為圖檔或其他文字。當(dāng)然，如果你的LOGO太大，顯示起來可能會有點(diǎn)問題，這時就請慢慢去修改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這兩個名字，這是為了道德。

　　若想更加了解版面配置，務(wù)必詳加閱讀\PJS.Bootstrap\Views\Layout.cshtml，這就是版面各區(qū)塊的框架。雖然你可能不太會需要動到Layout.cshtml的內(nèi)容，但透過Layout.cshtml，將可更快找到CSS中對應(yīng)的class名稱。

　　當(dāng)LOGO和Footer都可以更改後，你接下來可能會想更改主選單內(nèi)容。只要透過管理介面上的Navigation，就可更改主選單上的項(xiàng)目。然而，若你只是放入文字和超連結(jié)，主選單看起來會很單調(diào)，你可能會想更改主選單的CSS，讓主選單看起來更美觀。

　　例如，如果想做出像這樣子的主選單，那麼主選單上每個Item的文字勢必就得換行，亦即我要先在第一行寫上中文後，輸入<br/>換到第二行再寫上英文。至於字型大小與光暈就是透過CSS來達(dá)成，這就不用多說了。

　　管理介面上的Navigation可以填入Html Menu Item，但如果在Html Menu Item中加入<div></div>似乎會有問題，所以想設(shè)定CSS請用<span></span>將欲修飾的文字包裝起來。不過一個個將Html Menu Item填入Navigation中，若Item很多，你可能會填到抓狂，所以我建議不要使用管理介面內(nèi)建的Navigation功能，而是將Navigation的原始碼複製到Widgets中的Navigation區(qū)塊內(nèi)。

　　以下為Bootstrap網(wǎng)站所提供的Navbar範(fàn)例原始碼節(jié)錄：

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

　　將上述這段複製到Widgets的Navigation內(nèi)，重新開啟一個Html Widget，並將原本的Main Menu設(shè)為Unpublish。注意，這裡跟Module一樣，右側(cè)必須顯示為Publish，才代表這個項(xiàng)目已經(jīng)Unpublish，反之亦然。

　　原始碼填入完成後，重新打開網(wǎng)站，你就會發(fā)現(xiàn)剛才打造的主選單已經(jīng)無縫接軌於天頂，取代原本內(nèi)建的主選單。不過這個作法有個缺陷，那就是使用非內(nèi)建主選單，登入選項(xiàng)會無法顯示出來。但消極而言，這也不是什麼大問題，因?yàn)橹灰诰W(wǎng)站網(wǎng)址後方加上\Admin就可進(jìn)入管理介面，就算尚未登入也會跳到登入畫面。

　　順道一題，若Navigation在theme-Bootstrap頁面中已被設(shè)為Fixed（固定於最上面），那麼在Widgets的Header區(qū)塊內(nèi)填入任何東西，其內(nèi)容也不會出現(xiàn)在Navigation上面，而會被擠到下面。這是因?yàn)镹avigation已被設(shè)為固定於網(wǎng)頁最上層，就算Header的原始碼順序是在Navigation前方也是如此。想在Navigation前方填入任何東西，就得跟Navigation擺在同一區(qū)塊內(nèi)才行。

　　可以自行修改主選單的樣式後，你可能還不會滿足，因?yàn)锽ootstrap標(biāo)準(zhǔn)的主選單就是一個死板的下拉式選單。如果想做到以下這種形式的選單，就得倚靠外掛函式庫。

　　這是採用Yamm3所設(shè)計的下拉式選單，這種選單稱為Megamenu。Philip Senechal真是佛心來著，他已將Yamm3內(nèi)建於PJS.Bootstrap中，所以我們根本不需要再額外安裝Yamm3。

　　Yamm3的使用方式大致如下：

...

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>

<li>

...

</li>

</ul>

</li>

</ul>

...

</nav>

　　基本上只要參考Yamm3網(wǎng)站上的範(fàn)例，就能操作自如了。

　　至於外觀就是CSS的事情了。

　　結(jié)束主選單後，我們再來進(jìn)入下一個功能。很多網(wǎng)站首頁都會擺設(shè)輪播式投影片，讓首頁看起來更加絢麗，Bootstrap亦有提供範(fàn)例原始碼：

</ol>

...

</div>

...

</div>

...

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

　　將這段貼到Widgets任一區(qū)塊，即可實(shí)現(xiàn)輪播式投影片，至於圖片路徑請自行修改。不過當(dāng)你將輪播式投影片……我們就稱為Carousel好了……設(shè)置完成後，調(diào)整瀏覽器大小，你會發(fā)現(xiàn)在手機(jī)瀏覽寬度下，Carousel的圖片會變得非常小。這是個棘手的問題，因?yàn)閭€人電腦螢?zāi)皇菍挼?，手機(jī)螢?zāi)皇情L的。想讓Carousel的圖片自適應(yīng)不同寬度的瀏覽環(huán)境，你可以從CSS設(shè)定在不同寬度下切換為不同圖片，但那會比較麻煩。

　　有幾個方法可以解決，其一為將Carousel的圖片設(shè)為該<div></div>內(nèi)的背景，如此一來當(dāng)瀏覽寬度發(fā)生變化時，只有Carousel容器尺寸發(fā)生變化，圖片尺寸不會有變化。但這個作法要記得將圖片內(nèi)容中重要的對象置中，否則在手機(jī)瀏覽環(huán)境下，圖片左右兩旁的內(nèi)容會被遮蔽。

　　其二是在Carousel的容器內(nèi)不要放一整張圖片，而是改放幾個浮動的物件，如此一來當(dāng)瀏覽環(huán)境發(fā)生變化時，浮動物件可自適應(yīng)調(diào)整位置。當(dāng)然，這樣還是比較麻煩，所以我認(rèn)為上面第一種方法是比較好的，只要記得圖片內(nèi)重要對象要置中。

　　上述所提基本上都是Bootstrap的內(nèi)容，把Bootstrap網(wǎng)站上的範(fàn)例多看幾次，就能發(fā)揮更多的變化。多數(shù)網(wǎng)站所具備的功能通常都是大同小異的，而Bootstrap已滿足了多數(shù)網(wǎng)站的需求，這正是為何Bootstrap會深受網(wǎng)頁設(shè)計師的喜愛。雖然設(shè)計網(wǎng)站之初，我們總是想將網(wǎng)站設(shè)計成與眾不同、標(biāo)新立異的模樣，但往長遠(yuǎn)的方向來想，太過詭異的網(wǎng)站雖可讓瀏覽者第一次感到新奇，但第二次可能就不會想進(jìn)來了。特別是視覺效果絢麗但動線混亂的網(wǎng)站更是糟糕，我們絕對要記起設(shè)計網(wǎng)站的準(zhǔn)則，使用者介面簡潔即可，絕對不要為追求新潮而弄巧成拙。

　　上面又廢話太多了，其實(shí)我還想介紹Orchard的其中一項(xiàng)功能，那就是Placement.info。Placement光看名字就知道是位置，它位於Theme的根目錄下，用來設(shè)定每個頁面的某個項(xiàng)目是否要顯示與位置的順序。舉例來說，我覺得Page的標(biāo)題有夠礙眼，我可在placement.info中輸入：

</Match>

</Match>

</Placement>

　　……即可將標(biāo)題隱藏。

　　雖是這麼說，但Placement.info的設(shè)定其實(shí)我還不是很懂，最詭異的是每次我將Placement.info的設(shè)定更改，按了好幾次重新整理或?qū)IS關(guān)掉重開，網(wǎng)頁上的設(shè)定總要過好久才會更新，實(shí)在好討厭。到底Placement.info是把快取存在哪裡，能不能像CSS一樣，只要檔案儲存，效果即時發(fā)揮。

　　管理介面Modules中有個名為Shape Tracing的Module，預(yù)設(shè)為Disable，它可協(xié)助你判斷網(wǎng)頁上各區(qū)塊的Shape名稱是什麼，以及它背後的Placement.info設(shè)定。安裝好Shape Tracing後，網(wǎng)頁的右下方便會出現(xiàn)一個方形按鈕，它的運(yùn)作外觀基本上就跟Chrome的開發(fā)人員工具差不多。

　　最後，我又忘了說一件事，上面所提多數(shù)為CSS上的設(shè)定，但如果你想將JavaScript函式庫放入Orchard中，有兩種方法：如果你只想在Theme中使用，那你將JS函式庫放在Theme根目錄的Scripts目錄下就好了；如果是要給整個Orchard使用，就得在Orchard根目錄下新開設(shè)一個Scripts目錄，將JS函式庫放入。後者我還沒有試驗(yàn)過，但前者將JS函式庫放入Scripts目錄下後，你需要至Views\Resources.cshtml中，將JS函式庫引入。

　　按照PJS.Bootstrap的設(shè)定，你可以看見Resources.cshtml的最底下有一行：

　　Script.Require("Custom");

　　你可依樣畫葫蘆，將Custom改成JS函式庫的名稱。

　　或是以這個方式載入：

　　Script.Include("custom.js");

　　順道一題，假如你將上面這行寫成：

　　Script.Include("custom.js").AtHead();

　　這樣等於是將custom.js放在<head></head>中，主控臺可能會出現(xiàn)錯誤訊息：「$ is not defined」。因?yàn)閖Query的函式庫jquery-1.11.1.min.js是放在整個網(wǎng)頁的最下面，你的custom.js不可以放在jquery-1.11.1.min.js的上面，否則瀏覽器無法辨識jQuery的函數(shù)。

　　以上，即為本文全部內(nèi)容。

　　這篇標(biāo)題雖然寫著網(wǎng)站開發(fā)筆記，但看起來好像教學(xué)文。我其實(shí)很少寫教學(xué)文的，寫到後面我都懶得抓圖，但光用文字?jǐn)⑹鑫覍?shí)在不知道會有多少人看懂?；蛟S只有你真正在使用Orchard，才會知道我在寫什麼。