Panels 教程：向 panel 頁面中添加節(jié)點(diǎn)Panels 教程：創(chuàng)建新布局頁面的基本流程Panels 教程：更改節(jié)點(diǎn)頁面的輸出布局

向 panel 頁面中添加節(jié)點(diǎn)的建立流程如下：

打開 “Panel 頁面列表”（admin/build/pages）找到你想要向其中添加節(jié)點(diǎn)的頁面，點(diǎn)擊所在列最后面的“編輯”點(diǎn)擊“上下方(Context)”面板在右側(cè)的上下文區(qū)域，選擇“節(jié)點(diǎn)”并點(diǎn)擊添加上下文(Add Context)，彈出添加節(jié)點(diǎn)窗口（如下圖）選擇你想要添加的節(jié)點(diǎn)保存點(diǎn)擊選擇窗口，彈出窗口消失保存“上下文”配置頁面點(diǎn)擊左側(cè)導(dǎo)航中的“內(nèi)容”(Content)面板，在右側(cè)任意 panel 中，點(diǎn)擊齒輪添加內(nèi)容，你將會發(fā)現(xiàn)比默認(rèn)選項(xiàng)多了一個(gè)名為“節(jié)點(diǎn)”的選區(qū)（如下圖），任何 pane 都允許在其中使用節(jié)點(diǎn)或者節(jié)點(diǎn)相關(guān)信息，通過使用“節(jié)點(diǎn)”選項(xiàng)中的“節(jié)點(diǎn)內(nèi)容(Node Content)”來添加基本的節(jié)點(diǎn)顯示

(資料圖)

Panels 是個(gè)可以實(shí)現(xiàn)簡單快速創(chuàng)建布局的強(qiáng)大工具，且可以在其中使用各種各樣的內(nèi)容。本文通過創(chuàng)建一個(gè)標(biāo)準(zhǔn)的“關(guān)于我們”頁面，來學(xué)習(xí)如何創(chuàng)建布局的基本步驟。通常，“關(guān)于我們”是一個(gè)長頁面，然而 Panels 讓我們可以將內(nèi)容分為多個(gè)部分，并以一種不同的外觀和布局方式來對其進(jìn)行展示。

打開“Panel 頁面”管理頁面(admin/build/pages)點(diǎn)擊上方的“添加自定義頁面”面板，進(jìn)入添加“自定義頁面”頁面將“管理標(biāo)題(Administrative title)”、機(jī)器名稱及路徑分別填寫為“關(guān)于我們”，"about_us" 和 "aboutus"，點(diǎn)擊“繼續(xù)”進(jìn)入“布局(Layout)”選擇頁面，從分類下拉框中選擇“3列”布局模式，并從下方出現(xiàn)的3列布局中選擇 25/50/25 的布局模式(如圖)，然后點(diǎn)擊“繼續(xù)”進(jìn)入“Panel 設(shè)置”頁面，將“管理標(biāo)題”填寫為“關(guān)于我們”，其它欄目保持默認(rèn)，然后點(diǎn)擊“繼續(xù)”進(jìn)入“Panel 內(nèi)容”頁面，將標(biāo)題類型選為“人工設(shè)置(Manually set)”，并將下方的標(biāo)題設(shè)置為“關(guān)于我們”，點(diǎn)擊“完成”點(diǎn)擊完成之后默認(rèn)選中了左側(cè)的“內(nèi)容”面板，以方便我們向右側(cè)的布局模型中添加內(nèi)容?，F(xiàn)在我們應(yīng)該想想“關(guān)于我們”頁面應(yīng)該包含哪些內(nèi)容。左列：員工信息，中列：公司愿景，右列：鏈接、聯(lián)系信息點(diǎn)擊布局左列pane中的齒輪，在彈出的小菜單中點(diǎn)選“添加內(nèi)容”在彈出的“添加內(nèi)容”窗口中，選擇“新的自定義內(nèi)容(New custom content)”我們隨便填寫一些內(nèi)容，作為左列員工信息，比如管理標(biāo)題->“員工信息1”，標(biāo)題->“員工1”，正文->“員工信息1”，然后點(diǎn)擊“完成”即可看到左列的pane中已經(jīng)添加了“員工信息1”重復(fù)第8~10步的操作，再添加一個(gè)“員工信息2”再來添加“公司愿景”的內(nèi)容，點(diǎn)擊中間列左上角的齒輪，在彈出的小菜單中點(diǎn)選“添加內(nèi)容”，在彈出的“添加內(nèi)容”窗口中選擇“新的自定義內(nèi)容”接下來添加“公司愿景”的文本，管理標(biāo)題->“關(guān)于XX公司”，標(biāo)題->“關(guān)于XX公司”，正文->“XX公司是...”，然后點(diǎn)擊“完成”完成添加接下來添加右列的鏈接。點(diǎn)擊右列左上角的齒輪，點(diǎn)擊“添加內(nèi)容”，在彈出的添加內(nèi)容窗口中選擇“新的自定義內(nèi)容”將管理標(biāo)題和標(biāo)題設(shè)置為“鏈接”，并在正文中添加一些超級鏈接，然后點(diǎn)擊“完成”完成添加最后，我們再向右列中添加一些聯(lián)系信息，點(diǎn)擊右列左上角的齒輪，點(diǎn)擊“添加內(nèi)容”，在彈出的添加內(nèi)容窗口中選擇“新的自定義內(nèi)容”將管理標(biāo)題和標(biāo)題填寫為“聯(lián)系信息”，并在正文中添加一些聯(lián)系信息，點(diǎn)擊“完成”添加Pane此時(shí)我們的布局頁面應(yīng)該如下圖所示，點(diǎn)擊“更新并保存”完成一個(gè)自定義頁面的創(chuàng)建然后我們便可以通過第3步定義的鏈接來訪問這個(gè)新建的“關(guān)于我們”頁面了

如果你希望直接導(dǎo)入這個(gè)“關(guān)于我們”的頁面，可以復(fù)制這個(gè)關(guān)于我們的代碼，通過Panel page 頁面中的“導(dǎo)入頁面(Import Page)”，將代碼粘貼到代碼粘貼區(qū)域，執(zhí)行導(dǎo)入即可。

Drupal 默認(rèn)的節(jié)點(diǎn)頁面布局適合大部分網(wǎng)站的內(nèi)容展示，但是在不少情況下，我們還是需要為特殊的節(jié)點(diǎn)類型選擇不同的頁面布局。本文檔節(jié)點(diǎn)頁面例，創(chuàng)建一個(gè)不同于默認(rèn)的頁面布局。

本文檔適用于 Panels 3 版本，Panels 2 用戶請?jiān)L問本文檔的參考教程 Panels 2: Create a node override(http://drupal.org/node/206185)

Panels 3 ，默認(rèn)提供了一些頁面布局模版，本文就將用到其中的“節(jié)點(diǎn)模板(Node Template)”

首先，打開“Panel頁面”管理頁面(admin/build/pages)說明：請注意需要啟用 page manager 模塊才存在此頁面找到標(biāo)題為“節(jié)點(diǎn)模板(Node Template)”（其路徑為 node/%node），點(diǎn)擊此列后面的“啟用”鏈接來啟用模板待“節(jié)點(diǎn)模板”啟用后，點(diǎn)擊“編輯”進(jìn)入配置頁面默認(rèn)情況下，“節(jié)點(diǎn)模板”中沒有任何“衍生布局(Variants)”，點(diǎn)擊右上方的“衍生布局(Variants)”面板，或者是下面的“添加新衍生布局(Add a new variant)”，開始添加新的“衍生布局”在“添加衍生布局(Add Variant)”頁面，將標(biāo)題填寫為“新聞(Story)內(nèi)容布局”，然后點(diǎn)擊“創(chuàng)建衍生布局”進(jìn)入“設(shè)置”頁面，選擇2列布局，并從可選布局中選擇帶頁頭和頁腳的兩列布局(如圖)，然后點(diǎn)擊“繼續(xù)”進(jìn)入“Panel 設(shè)置”頁面，將管理標(biāo)題設(shè)置為“新聞(Story)內(nèi)容布局”，點(diǎn)擊“繼續(xù)”進(jìn)入“Panel 內(nèi)容”頁面，所有項(xiàng)目保持默認(rèn)不變，點(diǎn)擊“創(chuàng)建衍生布局”。創(chuàng)建完布局后，依然停留在內(nèi)容頁面，接下來我們便開始向布局中添加內(nèi)容向頂部區(qū)域添加節(jié)點(diǎn)內(nèi)容：從右側(cè)的頁面布局中，點(diǎn)擊“頂部(Top)”區(qū)域左上角的齒輪，在彈出菜單中選擇“添加內(nèi)容”彈出“添加內(nèi)容到頂部”窗口，選擇左側(cè)的“節(jié)點(diǎn)(Node Context)”面板，然后點(diǎn)擊右側(cè)的“節(jié)點(diǎn)內(nèi)容(Node Content)”彈出窗口改變?yōu)椤芭渲眯鹿?jié)點(diǎn)內(nèi)容”，找到最下方的“構(gòu)建模式(Build Mode)”，從下拉菜單中選擇“完整節(jié)點(diǎn)”，然后點(diǎn)擊“完成”向左列區(qū)域添加節(jié)點(diǎn)評論：添加點(diǎn)擊布局左列(Left Side)左上角的齒輪，在彈出菜單中選擇“添加內(nèi)容”彈出“添加內(nèi)容到左列”窗口，選擇“節(jié)點(diǎn)”面板，點(diǎn)擊右側(cè)的“節(jié)點(diǎn)評論(Node Comments)”彈出窗口改變?yōu)椤芭渲眯鹿?jié)點(diǎn)評論”，根據(jù)需要更改其中的配置，我們這里就保持默認(rèn)值不變，點(diǎn)擊“完成”向右列區(qū)域添加自定義內(nèi)容：點(diǎn)擊布局右列(Right Side)左上角的齒輪，在彈出菜單中選擇“添加內(nèi)容”彈出“添加內(nèi)容到右列”窗口，選擇“新自定義內(nèi)容(New custom content)”彈出窗口改變?yōu)椤芭渲眯伦远x內(nèi)容”，分別填寫以下內(nèi)容管理標(biāo)題：“評論說明”標(biāo)題：“評論說明”正文：“請通過以下評論框?qū)?nèi)容進(jìn)行評論”向右列區(qū)域添加節(jié)點(diǎn)評論表單：點(diǎn)擊布局右列左上角的齒輪，在彈出菜單中點(diǎn)擊“添加內(nèi)容”彈出“添加內(nèi)容到右列”窗口，選擇“節(jié)點(diǎn)”面板，點(diǎn)擊右側(cè)的“評論表單(Comment Form)”彈出窗口改變?yōu)椤芭渲眯略u論表單”，勾選顯示注冊和登錄鏈接(Shows links to register or login)，點(diǎn)擊“完成”到此對新聞節(jié)點(diǎn)頁面布局的內(nèi)容設(shè)置就完成了（如圖），點(diǎn)擊“更新并保存(Update and Save)”保持更改保存之后，可以通過訪問任意新聞(Story)節(jié)點(diǎn)查看效果，以下(如圖)是此布局的實(shí)際顯示