文/張文博

中國(guó)政法大學(xué):基于Drupal構(gòu)建研究院院網(wǎng)

文/張文博

項(xiàng)目描述

中國(guó)政法大學(xué)證據(jù)科學(xué)研究院舊版門(mén)戶系統(tǒng)采用的是傳統(tǒng)新聞發(fā)布平臺(tái)，僅能提供基本的信息發(fā)布功能，已經(jīng)無(wú)法滿足日益增加的對(duì)外交流、學(xué)術(shù)活動(dòng)、多分類資訊等等細(xì)分的內(nèi)容方面的需求。因此，需要對(duì)原有系統(tǒng)進(jìn)行升級(jí)重構(gòu)。

從筆者參與過(guò)的項(xiàng)目來(lái)看，高校一般門(mén)戶系統(tǒng)的功能幾乎都可以通過(guò)建設(shè)者模式搭配而成，這個(gè)搭配的過(guò)程往往是相當(dāng)優(yōu)雅的，通過(guò)圖形化的配置，鼠標(biāo)點(diǎn)擊就可以實(shí)現(xiàn)豐富多彩的業(yè)務(wù)功能。選擇Drupal作為學(xué)院系統(tǒng)的技術(shù)平臺(tái)，僅需要很少的代碼開(kāi)發(fā)量，事半功倍。

證據(jù)科學(xué)研究院新版院網(wǎng)系統(tǒng)在設(shè)計(jì)階段強(qiáng)調(diào)國(guó)際化，希望最終提供給訪問(wèn)者的頁(yè)面系統(tǒng)可以方便地進(jìn)行語(yǔ)言切換，使外籍教授、學(xué)生能夠方便地查閱資訊。根據(jù)學(xué)院開(kāi)設(shè)的課程，目前需要系統(tǒng)提供簡(jiǎn)體中文和英文兩種頁(yè)面語(yǔ)言。

師資力量的展示與宣傳也是新版院網(wǎng)的設(shè)計(jì)重點(diǎn)，希望通過(guò)詳細(xì)的院網(wǎng)師資頁(yè)面，統(tǒng)一并且規(guī)范的展示教師的中、英文簡(jiǎn)歷。

在英文版面設(shè)計(jì)上要符合英語(yǔ)版式習(xí)慣，方便閱讀。

圖1　

開(kāi)發(fā)實(shí)施

多語(yǔ)言架構(gòu)搭建

Drupal提供了完善的多語(yǔ)言體系，可以實(shí)現(xiàn)各類國(guó)際化站點(diǎn)的需求。院網(wǎng)項(xiàng)目中，不同語(yǔ)言（中/英）需有各自獨(dú)立的頁(yè)面風(fēng)格、菜單、欄目等等。同時(shí)，內(nèi)容頁(yè)面要能夠?qū)崿F(xiàn)對(duì)照翻譯。

根據(jù)這個(gè)總體需求，在Drupal提供的多種可選方案中，最終選擇了使用兩套獨(dú)立的主題再通過(guò)ThemeKey這個(gè)主題切換模塊來(lái)處理不同語(yǔ)言不通風(fēng)格欄目的需求。

圖2　界面可以漢化為中文

Drupal的境界

通過(guò)Drupal的模板系統(tǒng)建立中文主題和英文主題：

admin/appearance

在ThemeKey的配置頁(yè)面，可以建立基于語(yǔ)言的過(guò)濾條件：

admin/config/user-interface：為中文和英文語(yǔ)言指定不同的模板。

圖3　

ThemeKey，提供了大量的過(guò)濾條件可以實(shí)現(xiàn)多種場(chǎng)景下的主題切換。

圖4　

同時(shí)，ThemeKey可以設(shè)置多種匹配條件。

完成多語(yǔ)言的相關(guān)設(shè)置后，就可以開(kāi)始制作中文版主題了。

中文版首頁(yè)搭建

Drupal提供了多種技術(shù)來(lái)實(shí)現(xiàn)首頁(yè)功能，總體來(lái)說(shuō)可以通過(guò)Drupal的模板引擎系統(tǒng)來(lái)實(shí)現(xiàn)，也可以通過(guò)Panels這個(gè)模塊來(lái)實(shí)現(xiàn)，還可以通過(guò)Views來(lái)實(shí)現(xiàn)。

在院網(wǎng)這個(gè)項(xiàng)目中，采用了整合的方案，通過(guò)Drupal的模板引擎的復(fù)寫(xiě)技術(shù)，為首頁(yè)建立單獨(dú)的頁(yè)面模板。

然后，通過(guò)Panels建立一個(gè)自定義的頁(yè)面，并將這個(gè)首頁(yè)設(shè)置為默認(rèn)首頁(yè)：

admin/structure/pages：

config/system/site-information：

完成首頁(yè)的建立之后，通過(guò)Panels自帶的模板系統(tǒng)定制首頁(yè)的各個(gè)功能區(qū)塊位置：

圖5　

通過(guò)Views操作數(shù)據(jù)庫(kù)，將所需的數(shù)據(jù)從數(shù)據(jù)庫(kù)中提取出來(lái)，生成區(qū)塊，再填入Panels模板中的區(qū)塊位置內(nèi)。

圖6　

將所有Panels預(yù)留位置填入Views生成的數(shù)據(jù)區(qū)塊

圖7　

通過(guò)上述步驟，中文版的首頁(yè)就生成了。

中文版欄目頁(yè)面搭建

Drupal有多種欄目頁(yè)的搭建方式，適用于不同的需求場(chǎng)景。院網(wǎng)項(xiàng)目中，采用了以Taxonomy（分類）為主體的欄目頁(yè)面生成方案。這個(gè)方案適合小規(guī)模的門(mén)戶系統(tǒng)，是各類方案中較為簡(jiǎn)單的一種。

Drupal已經(jīng)自動(dòng)為每個(gè)Taxonomy自動(dòng)生成了一個(gè)頁(yè)面，可以直接使用這個(gè)頁(yè)面作為欄目頁(yè)。如需進(jìn)一步個(gè)性化定制，則需要使用模板技術(shù)或者配合其他模塊來(lái)實(shí)現(xiàn)。

院網(wǎng)項(xiàng)目中，使用了Views模塊提供的擴(kuò)展功能，來(lái)接管Taxonomy生成的頁(yè)面，將頁(yè)面各項(xiàng)配置通過(guò)Views來(lái)可視化完成。

admin/structure/views：

admin/structure/views/view/taxonomy_term/

圖8　

在Views的Taxonomy Page 配置頁(yè)面，可以通過(guò)“CONTEXTUAL FILTERS”來(lái)控制輸入?yún)?shù)。Views將利用的輸入?yún)?shù)作為數(shù)據(jù)庫(kù)的篩選條件，當(dāng)通過(guò)地址欄輸入一個(gè)TERM的ID，Views就可以接收到這個(gè)ID信息，并將ID用于數(shù)據(jù)庫(kù)的篩選過(guò)濾。

通過(guò)Views的配置頁(yè)面可以很容易的定制需要在欄目頁(yè)面上展示的字段。

在院網(wǎng)這個(gè)項(xiàng)目中，默認(rèn)的欄目頁(yè)面會(huì)展示兩個(gè)字段組成的列表，一個(gè)是Title（標(biāo)題），另一個(gè)是Post date（發(fā)布日期）。

中文版內(nèi)容頁(yè)面搭建

Drupal在內(nèi)容的管理上是獨(dú)特的，與一般的CMS系統(tǒng)，包括WordPress、Joomla都有很大區(qū)別。Drupal通過(guò)不同字段組成了Content Type（內(nèi)容類型），建立一篇新的文章資訊時(shí)，是以內(nèi)容類型為基礎(chǔ)的，系統(tǒng)會(huì)自動(dòng)生成一個(gè)屬于內(nèi)容類型的NODE頁(yè)面來(lái)呈現(xiàn)不同的文章。

在院網(wǎng)內(nèi)容頁(yè)面的呈現(xiàn)設(shè)計(jì)上，選用了Display Suite這個(gè)模塊來(lái)控制各類內(nèi)容頁(yè)面的顯示，它可以為內(nèi)容頁(yè)面建立不同的模板。

圖9　

以教師簡(jiǎn)歷這個(gè)模板為例，在模板文件中，設(shè)計(jì)Title、Row01～Row13等等區(qū)域，之后，在Manage Display中，就可以看到模板中建立的區(qū)域，通過(guò)鼠標(biāo)的拖拽將各個(gè)字段拉入對(duì)應(yīng)的區(qū)域，就可以完成內(nèi)容頁(yè)面的結(jié)構(gòu)設(shè)計(jì)。在建立資訊后，對(duì)應(yīng)字段的內(nèi)容就會(huì)呈現(xiàn)在模板的區(qū)域中。

圖10　

英文版總體搭建概述

英文版本的搭建過(guò)程中在前端技術(shù)的使用上與中文版不同，采用了時(shí)下比較流行的Bootstrap響應(yīng)式布局，為手機(jī)、平板電腦、大屏主機(jī)提供更好的閱讀體驗(yàn)。

在Drupal中使用Bootstrap，可安裝Bootstrap響應(yīng)式主題，該主題已經(jīng)為Drupal的響應(yīng)式設(shè)計(jì)做好了銜接?？梢酝ㄟ^(guò)Drupal核心生成符合Bootstrap框架要求的前端代碼。

本文從項(xiàng)目整體流程角度概述了從項(xiàng)目分析設(shè)計(jì)到開(kāi)發(fā)實(shí)施的各個(gè)環(huán)節(jié)，并選擇了一些技術(shù)點(diǎn)展開(kāi)分析。由于篇幅有限，項(xiàng)目中還有很多有Drupal特色的技術(shù)內(nèi)容沒(méi)能呈現(xiàn)出來(lái)。Drupal可供學(xué)習(xí)研究的空間很大，學(xué)習(xí)難度也相對(duì)較大，比如Views這一個(gè)模塊，就有專門(mén)書(shū)籍來(lái)幫助技術(shù)人員進(jìn)行各類數(shù)據(jù)庫(kù)的復(fù)雜操作、篩選?？梢舱且?yàn)镈rupal內(nèi)容豐富、功能強(qiáng)大，研究學(xué)習(xí)Drupal也是非常有樂(lè)趣的。

（作者單位為中國(guó)政法大學(xué)現(xiàn)代教育技術(shù)中心）