您在這裡

Panels 2.X 教學 (基礎應用篇)

Kay.L's 的頭像
Kay.L 在 2008-12-14 (周日) 19:00 發表

更新日期 : 2008-12-14 19:00

大家好! 以下是簡單的Panels 2教學。
我將教學分為四部分 (A, B, C, D), 每一部分都附圖片, 看文字外亦請留意圖片內容 (想讓大家看清楚點, 圖片較大, 抱歉!!)

在示範中, 我使用了:
Drupal 5.14
Panels 5.x-2.0-rc1a

*此教學的理論適用於Panel 2.x 任何版本
*由於Panels不穩定, 如果你使用的版本不一樣, 效果可能會有差別
*Drupal 6中, 你會發現錯誤, 或者找不到我提及的東西

教學內容:
A. 建立最簡單的Panels頁面
B. 應用ConTEXT Arguments的Panels
C. 在不同的Content type顯示不一樣的內容
D. 限制只在某些Content type應用Panels

在教程示範中, 沒有提及的設定, 直接略過就可以

A. 建立最簡單的Panels頁面

在這部分, 你會學到建立最簡單的Panles頁面

1. 增加一個Two column Panel
圖 1

1-1. 瀏覽"?q=example", 你應該看見空白頁面
圖 1-1

1-2. 在CONTENT隨便增加一些東西
圖 1-2

1-3. 再瀏覽"?q=example", 你應該看見增加的內容了
圖 1-3

以上就是最簡單的自定頁面。

B. 應用ConTEXT Arguments的Panels

你會學到如何應用ConTEXT中的Arguments, 這是令Panels達到Panels everywhere的第一步及重要的一步

2. 增加一個Two column Panel. Path設定是: node/%
圖 2

2-1. ConTEXT增加Arguments-> Node ID
圖 2-1

2-2. 在Content, 增加Node content 欄下的 Node content
圖 2-2

2-3. 再增加一個Custom欄下的Node content
圖 2-3

在這裏, 請大家特別注意, Node content 及Custom 欄下都有Node content, 但兩者是有不同分別的 !!
2-4. 你可以清楚看見, 左面是根據URL決定顯示什麼內容. 而右面是在上一步中指定的Node ID內容
圖 2-4

2-5. 現在, 我們回到ConTEXT中增加一個Arguments-> Node add form
圖 2-5

2-6. 再回到Content, 當你增加東西時, 你會發時多了Form一欄, 我們如圖增加一個General Form
圖 2-6

2-7. 瀏覽"?q=node/1"看看, 怎麼了 !! 那不是ADD FORM !!!
圖 2-7

2-8. 對!! 因為我們瀏覽了錯誤的URL, 正確應該是"?q=node/1/page", "?q=node/1/story".
圖 2-8
(抱歉, 這張圖片我截了"?q=node/2/page", 所以add form上的內容跟圖 2-7有差別)

聰明的你當然發現了:
Node ID: 在URL中就是node的id
Node add form: 就是Content type

TIPS:
- Setting中的Path: node/%
"?q=node/1/page" = "?q=node/Argument 1/Argument 2"

- Setting中的Path: node/
"?q=node/1/page" = "?q=node/Argument 1/Argument 2"

- Setting中的Path: node/%/sth/%
"?q=node/Argument 1/sth/Argument 2"

至於conTEXT中的Contexts是什麼 ?
我想亦不用像上面這樣說了. 就是設置指定的東西, 而非跟隨URL而變化.

2-9. 好了, 到現在你會發現瀏覽"node/1", "node/2"... 標題都一樣的 !!
怎麼解決 ??
其實很簡單, 我們可以在title輸入 "%node"

是不是解決了 ? 但我還知道你們會問: %node是怎麼來的?
其實就是KEYWORD, 看圖
圖 2-9

C. 在不同的Content type顯示不一樣的內容

3. 回到conTEXT, 如圖設定
圖 3

3-1. 現在你會在Layout 及 Content 中看見圖中畫上直線的選項, 隨意設定, 就能做到不同的Content type有不同的顯示
圖 3-1

D. 限制只在某些Content type應用Panels

4. 回到conTEXT, 如圖設定
圖 4
現在你會發現只有content tpye 是page的node才會執行Panels

Kay. L
2008-12-14.
https://drupaltaiwan.org/node/2876
(我會更新及修正, 請轉貼的朋友保留連結)

如果反應熱烈, 我會製成PDF / PPT 等格式, 這更加方便閱讀。

附加檔案大小
Image icon KL-Panels-1.png126.79 KB
Image icon KL-Panels-1-1.png109.03 KB
Image icon KL-Panels-1-2.png127.43 KB
Image icon KL-Panels-1-3.png119.72 KB
Image icon KL-Panels-2.png128.55 KB
Image icon KL-Panels-2-1.png146.51 KB
Image icon KL-Panels-2-2.png146.96 KB
Image icon KL-Panels-2-3.png134.86 KB
Image icon KL-Panels-2-5.png150.17 KB
Image icon KL-Panels-2-6.png163.21 KB
Image icon KL-Panels-2-7.png119.5 KB
Image icon KL-Panels-2-8.png107.76 KB
Image icon KL-Panels-2-9.png132.44 KB
Image icon KL-Panels-3.png130.74 KB
Image icon KL-Panels-3.png130.74 KB
Image icon KL-Panels-3-1.png126.14 KB
Image icon KL-Panels-4.png133.58 KB
Image icon KL-Panels-2-4.png135.35 KB

Drupal版本:

回應

感謝Kay.L的長篇教學,顯示出Panel的強大功能與彈性。老實說,真是大開tky的眼界。

不過,tk對這段話還是不太了解:

至於conTEXT中的Contexts是什麼 ?
我想亦不用像上面這樣說了. 就是設置指定的東西, 而非跟隨URL而變化.

tky原來的問題就是搞不太懂這個地方(也有可能是因為Panel 6.x不穩定而無法顯示效果的緣故)。argument會隨網址變化,這大家都知道了。tky以為Panel有那種「不隨著網址參數變化、而依照使用者輸入的參數而顯示特定內容」的功能。

比方說tky建立了顯示「公告」類型內容的views,用公告的分類詞彙作為argument。tky現在想要作個Panel page,分別在左右區塊顯示不同類別的公告。

於是乎,tky應該要設定Contexts,指定Contexts為"taxonomy vocabulary",然後指定為公告的分類。接著(這是tky自己假想的,還沒作過),就是在Panel page中的兩個pane裡頭,指定顯示公告views,但是選擇不同的分類詞作為context。

這樣的推理(想像)對吧?
(因為tky的Panel page目前沒法子正常顯示,不曉得怎麼實驗)

如果context是像tky所設想的那樣運作的,那tky就可以放心等正式版本出來再開始動手做了。

另一方面,想請教Kay.L對views中的Panel pane了解多少?是不是如tky所猜想的,一個需要搭配panel的顯示元件;還是說是一個獨立的顯示模式。

感謝

tky

tky

本來我做了不用點的, 發佈後發現在1024X768下, 圖片會被右邊的文字擋遮了,
即使我在widescreen下亦被右邊的文字擋遮了

所以想了一想, 還是轉換做成連結 ....

圖的確大了點,
但想大家看清楚內容, 及我正在的URL, 這樣找不到我說的人可以直接輸入URL去

@tky

Contexts 應該不是你想像中這樣使用
指定"taxonomy vocabulary", 你會在ConteNt -> add content 中看見多一個選項(正確點說: 應該是多了一整欄)走了出來 !!
跟下面試著去發掘一下

Contexts
-----------
小提示:
1. 你可以在conteXt中增加任何內容, 然後去ConteNt -> add content 看看彈出來的BOX多了什麼, 獨個增加試試看, 步驟跟上面的B part 差不多
2. 你在arg / contexts 增加東西, 請自定identifier, 這樣你可以清楚分別兩者
例如: 你在arg / contexts 都add node form
在conteNt 內增加General form, 在General form選項最頂頂那是可以選擇arg 還是 contexts

Views
------------
你在conteNt add views, 在選項中有一個叫"Send arguments", 將他enable.
然後在Arguments中輸入你的arg.
例如Views: /?q=taxonomy/term/1 就顯示term ID 1 的node
那你就在Panels add views 中的 Arguments中填上 1
以你的案子, 你分別在左右填上不同的Arguments, 就會有不同的顯示了 !!

Panel pane 大約如你所說

多方應用Panel的實例 : SonyBMG MyPlay
http://drupal.org/node/241344

教程的內容, 在Drupal 6 中找不到的大多己在官方的Issues page 中待修正

感謝Kay.L的熱心回應。

關於views方面,tky就是如Kay.L說得那樣去設定argument,不過就像tky原po說的問題那樣,就是撈不出任何資料。這可能是Panel 6.x的bug吧。

說到底,反倒tky原來使用argument的方式就符合tky的要求了。但如此一來,tky就越發不懂context的用途了(或許那真的很難用文字描述)。tky會去找個5.x版本的網站來試試Kay所提到的那些功能,然後回報給大家知道。

多謝Kay!

tky

tky

哦哦. 我還笨笨的在說教, 原來tky早就說了 ><""
不過不要緊 (自我安慰中.. 哈哈)

回來你的問題..
panels_views/panels_views.module
line 167 , line 476 (全文件只有兩個)
$block->content = $view->preview();
改為
$block->content = $view->preview(NULL, $args);