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

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

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

(資料圖)

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

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

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

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

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

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

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