文/張文博
中國政法大學(xué):基于Drupal構(gòu)建研究院院網(wǎng)
文/張文博
中國政法大學(xué)證據(jù)科學(xué)研究院舊版門戶系統(tǒng)采用的是傳統(tǒng)新聞發(fā)布平臺,僅能提供基本的信息發(fā)布功能,已經(jīng)無法滿足日益增加的對外交流、學(xué)術(shù)活動、多分類資訊等等細(xì)分的內(nèi)容方面的需求。因此,需要對原有系統(tǒng)進(jìn)行升級重構(gòu)。
從筆者參與過的項(xiàng)目來看,高校一般門戶系統(tǒng)的功能幾乎都可以通過建設(shè)者模式搭配而成,這個搭配的過程往往是相當(dāng)優(yōu)雅的,通過圖形化的配置,鼠標(biāo)點(diǎn)擊就可以實(shí)現(xiàn)豐富多彩的業(yè)務(wù)功能。選擇Drupal作為學(xué)院系統(tǒng)的技術(shù)平臺,僅需要很少的代碼開發(fā)量,事半功倍。
證據(jù)科學(xué)研究院新版院網(wǎng)系統(tǒng)在設(shè)計(jì)階段強(qiáng)調(diào)國際化,希望最終提供給訪問者的頁面系統(tǒng)可以方便地進(jìn)行語言切換,使外籍教授、學(xué)生能夠方便地查閱資訊。根據(jù)學(xué)院開設(shè)的課程,目前需要系統(tǒng)提供簡體中文和英文兩種頁面語言。
師資力量的展示與宣傳也是新版院網(wǎng)的設(shè)計(jì)重點(diǎn),希望通過詳細(xì)的院網(wǎng)師資頁面,統(tǒng)一并且規(guī)范的展示教師的中、英文簡歷。
在英文版面設(shè)計(jì)上要符合英語版式習(xí)慣,方便閱讀。
圖1
多語言架構(gòu)搭建
Drupal提供了完善的多語言體系,可以實(shí)現(xiàn)各類國際化站點(diǎn)的需求。院網(wǎng)項(xiàng)目中,不同語言(中/英)需有各自獨(dú)立的頁面風(fēng)格、菜單、欄目等等。同時,內(nèi)容頁面要能夠?qū)崿F(xiàn)對照翻譯。
根據(jù)這個總體需求,在Drupal提供的多種可選方案中,最終選擇了使用兩套獨(dú)立的主題再通過ThemeKey這個主題切換模塊來處理不同語言不通風(fēng)格欄目的需求。
圖2 界面可以漢化為中文
Drupal的境界
通過Drupal的模板系統(tǒng)建立中文主題和英文主題:
admin/appearance
在ThemeKey的配置頁面,可以建立基于語言的過濾條件:
admin/config/user-interface:為中文和英文語言指定不同的模板。
圖3
ThemeKey,提供了大量的過濾條件可以實(shí)現(xiàn)多種場景下的主題切換。
圖4
同時,ThemeKey可以設(shè)置多種匹配條件。
完成多語言的相關(guān)設(shè)置后,就可以開始制作中文版主題了。
中文版首頁搭建
Drupal提供了多種技術(shù)來實(shí)現(xiàn)首頁功能,總體來說可以通過Drupal的模板引擎系統(tǒng)來實(shí)現(xiàn),也可以通過Panels這個模塊來實(shí)現(xiàn),還可以通過Views來實(shí)現(xiàn)。
在院網(wǎng)這個項(xiàng)目中,采用了整合的方案,通過Drupal的模板引擎的復(fù)寫技術(shù),為首頁建立單獨(dú)的頁面模板。
然后,通過Panels建立一個自定義的頁面,并將這個首頁設(shè)置為默認(rèn)首頁:
admin/structure/pages:
config/system/site-information:
完成首頁的建立之后,通過Panels自帶的模板系統(tǒng)定制首頁的各個功能區(qū)塊位置:
圖5
通過Views操作數(shù)據(jù)庫,將所需的數(shù)據(jù)從數(shù)據(jù)庫中提取出來,生成區(qū)塊,再填入Panels模板中的區(qū)塊位置內(nèi)。
圖6
將所有Panels預(yù)留位置填入Views生成的數(shù)據(jù)區(qū)塊
圖7
通過上述步驟,中文版的首頁就生成了。
中文版欄目頁面搭建
Drupal有多種欄目頁的搭建方式,適用于不同的需求場景。院網(wǎng)項(xiàng)目中,采用了以Taxonomy(分類)為主體的欄目頁面生成方案。這個方案適合小規(guī)模的門戶系統(tǒng),是各類方案中較為簡單的一種。
Drupal已經(jīng)自動為每個Taxonomy自動生成了一個頁面,可以直接使用這個頁面作為欄目頁。如需進(jìn)一步個性化定制,則需要使用模板技術(shù)或者配合其他模塊來實(shí)現(xiàn)。
院網(wǎng)項(xiàng)目中,使用了Views模塊提供的擴(kuò)展功能,來接管Taxonomy生成的頁面,將頁面各項(xiàng)配置通過Views來可視化完成。
admin/structure/views:
admin/structure/views/view/taxonomy_term/
圖8
在Views的Taxonomy Page 配置頁面,可以通過“CONTEXTUAL FILTERS”來控制輸入?yún)?shù)。Views將利用的輸入?yún)?shù)作為數(shù)據(jù)庫的篩選條件,當(dāng)通過地址欄輸入一個TERM的ID,Views就可以接收到這個ID信息,并將ID用于數(shù)據(jù)庫的篩選過濾。
通過Views的配置頁面可以很容易的定制需要在欄目頁面上展示的字段。
在院網(wǎng)這個項(xiàng)目中,默認(rèn)的欄目頁面會展示兩個字段組成的列表,一個是Title(標(biāo)題),另一個是Post date(發(fā)布日期)。
中文版內(nèi)容頁面搭建
Drupal在內(nèi)容的管理上是獨(dú)特的,與一般的CMS系統(tǒng),包括WordPress、Joomla都有很大區(qū)別。Drupal通過不同字段組成了Content Type(內(nèi)容類型),建立一篇新的文章資訊時,是以內(nèi)容類型為基礎(chǔ)的,系統(tǒng)會自動生成一個屬于內(nèi)容類型的NODE頁面來呈現(xiàn)不同的文章。
在院網(wǎng)內(nèi)容頁面的呈現(xiàn)設(shè)計(jì)上,選用了Display Suite這個模塊來控制各類內(nèi)容頁面的顯示,它可以為內(nèi)容頁面建立不同的模板。
圖9
以教師簡歷這個模板為例,在模板文件中,設(shè)計(jì)Title、Row01~Row13等等區(qū)域,之后,在Manage Display中,就可以看到模板中建立的區(qū)域,通過鼠標(biāo)的拖拽將各個字段拉入對應(yīng)的區(qū)域,就可以完成內(nèi)容頁面的結(jié)構(gòu)設(shè)計(jì)。在建立資訊后,對應(yīng)字段的內(nèi)容就會呈現(xiàn)在模板的區(qū)域中。
圖10
英文版總體搭建概述
英文版本的搭建過程中在前端技術(shù)的使用上與中文版不同,采用了時下比較流行的Bootstrap響應(yīng)式布局,為手機(jī)、平板電腦、大屏主機(jī)提供更好的閱讀體驗(yàn)。
在Drupal中使用Bootstrap,可安裝Bootstrap響應(yīng)式主題,該主題已經(jīng)為Drupal的響應(yīng)式設(shè)計(jì)做好了銜接。可以通過Drupal核心生成符合Bootstrap框架要求的前端代碼。
本文從項(xiàng)目整體流程角度概述了從項(xiàng)目分析設(shè)計(jì)到開發(fā)實(shí)施的各個環(huán)節(jié),并選擇了一些技術(shù)點(diǎn)展開分析。由于篇幅有限,項(xiàng)目中還有很多有Drupal特色的技術(shù)內(nèi)容沒能呈現(xiàn)出來。Drupal可供學(xué)習(xí)研究的空間很大,學(xué)習(xí)難度也相對較大,比如Views這一個模塊,就有專門書籍來幫助技術(shù)人員進(jìn)行各類數(shù)據(jù)庫的復(fù)雜操作、篩選。可也正是因?yàn)镈rupal內(nèi)容豐富、功能強(qiáng)大,研究學(xué)習(xí)Drupal也是非常有樂趣的。
(作者單位為中國政法大學(xué)現(xiàn)代教育技術(shù)中心)