利用 Panels 模組來實做 tab 效果的 block


目的:
在首頁建立一個 tab 效果的 block, 而裡面是幾個獨立的 views, 效果如下, 或參照本站首頁.
Drupal Panels Tabs

安裝步驟:
1. 安裝這些模組

  • Panels 的 Mini panels
  • Panels 的 Panels
  • Panels 的 Views panes (這個是因為我要把 views 當成 panels 的內容來源才需要裝的)
  • Tabs panel style

他是有建議也把 Panels page 裝起來, 不過在這個例子用不到, 就先不裝了.

2. 開啟適當權限

3. 執行功能表 Panels -> Mini panels -> Add, 選擇 Single column
Drupal Panels Add

4. 輸入 Mini panel name, 取個自己喜歡的名字, 按下 next
Drupal Panels Add Name

5. 把 Layout 設定改成 "Tabs"
Drupal Panels Layout

6. Double click Content 這個 tab, 並在 "+" 上面按一下以新增一個 mini panel
drupal_panels_content

7. 選擇你要放的內容, 我是選了一個之前設定好的 view
drupal_panels_content_add1

8. 這裡可以指定 title, CSS, 權限等等. 設定好之後按 Add pane 即可
drupal_panels_content_add2

9. 依照上面順序, 依序增加 3 個 pane
drupal_panels_content2

10. 最後按下 Preview, 就可以看到結果了
drupal_panels_preview

11. 這時候在 block 就可以看到一個 Mini panel: "Panel_front" 的 block 可以使用了, 把他放到首頁就可以了.

注意事項:
1. 可和 i18n 模組搭配使用
2. 請勿打開 JavaScript Aggregator, 會出現如下錯誤, 已回報 (http://drupal.org/node/230524)
Drupal Panels Javascript Aggregator
可以在 Exclude from js aggregation 設定不處理這些 JavaScript

/sites/all/modules/panels_tabs/panels_tabs.js
/sites/all/modules/panels/js/checkboxes.js
/sites/all/modules/panels/js/display_editor.js
/sites/all/modules/panels/js/edit_settings.js
/sites/all/modules/panels/js/layout.js
/sites/all/modules/panels/js/list.js
/sites/all/modules/panels/js/modal_forms.js
/sites/all/modules/panels/js/panels.js
/sites/all/modules/panels/js/lib/dimensions.js
/sites/all/modules/panels/js/lib/form.js
/sites/all/modules/panels/js/lib/mc.js

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • Lines and paragraphs break automatically.
  • Textual smileys will be replaced with graphical ones.
  • You can enable syntax highlighting of source code with the following tags: <code>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • You may link to Gallery2 items on this site using a special syntax.
  • Insert Flickr images: [flickr-photo:id=230452326,size=s] or [flickr-photoset:id=72157594262419167,size=m].
  • You may insert videos with [video:URL]

More information about formatting options