[教學]PhpBB - BBCode研究

文章由 **shihchieh** » 2004-08-29 20:36

BBCode研究入門

一、首先要了其功用並了解基本架構檔案
語系　language/lang_chinese_traditional_taiwan/lang_main.php
發表文章php　posting.php
主要控制php　includes/bbcode.php
發表文章html　templates/your_temp/posting_body.tpl
主要控制html　templates/your_temp/bbcode.tpl

二、對應關系\r
lang_main.php <--> posting.php <--> posting_body.tpl
bbcode.php <--> bbcode_body.tpl

三、我們舉例以粗體字功能來示範文章修改的部份
1.首先在語系檔lang_main.php內新增 bbcode功能說明
$lang['bbcode_b_help'] = '粗體: [b]text[/b] (alt+b)';
此段程式碼指定語系鍵或稱變數 'bbcode_b_help' 的內容為 '粗體: [b]text[/b] (alt+b)'
各個變數名稱不可重覆僅能唯一一個，如果重覆的話，後者將取代前者，所以在新增時要先查一下是否重覆了

2.接著來到 posting.php 將語系新增的變數指定給html要用的變數
找到\r
//
// Output the data to the template
//
$template->assign_vars(array(
這段並加在其後，而這段的用意在指名，將往後的變數要傳給html中使用至於傳給什麼檔用呢\r
你在後面還可以找到這段 $template->pparse('body'); 也就是將posting的名字加上body就變成了posting_body.tpl
ok，回到前面，再後面加入\r
'L_BBCODE_B_HELP' => $lang['bbcode_b_help'],
大家一定很奇怪，為什麼名稱會相似，為什麼不可以用別的名稱，而這個答案是肯定的，你不一定要用 L_BBCODE_B_HELP
而在語系中也不一定要用 $lang['bbcode_b_help']，而之所以會如此命名是因為一眼看去就知道是作bbcode的功用而主要
代表功能是b，而help就表示是說明之意，而會使用 L_BBCODE_B_HELP ，當然也是方便區分及辨識，不過指定變數給tpl就\r
是所謂的html頁面時，通常是採用大寫所以就不會是 l_bbcode_b_help 在html中變數大小寫不是規定的很仔細且視為同意
而這段就是將變數 $lang['bbcode_b_help'] 配給 L_BBCODE_B_HELP 這個新變數，這時 L_BBCODE_B_HELP 變數的內容就\r
等於是$lang['bbcode_b_help'] = '粗體: [b]text[/b] (alt+b)'，在tpl檔內是使用{L_BBCODE_B_HELP}來代入此變數;
你可以想成是這樣 L_BBCODE_B_HELP = $lang['bbcode_b_help'] = '粗體: [b]text[/b] (alt+b)';
為什麼不直接在lang_main.php中指定?如果直接在lang_main.php指定的話，那不就被限定在只能給特定的tpl檔用了嗎
在posting.php中設定或是在其他php中設定的話如此就可以分給不同的頁面使用這個變數，也就是phpbb的延伸及擴充性\r

3.接著對應到posting_body.tpl
首先找到這裡 // Helpline messages 這裡是所有bbcode help所設定的區塊，你可以在下面看到許多的bbcode help
接著我們在底下加入\r
b_help = "{L_BBCODE_B_HELP}";
在這裡是要把變數應用在javascript來產生效果，也就是當你的滑鼠鍵移到bbcode功能按鈕時會在說明欄說明其功用的部份

4.再下來看到 // Define the bbCode tags 這裡，這裡是設定bbcode功能鈕的基本資料
bbcode = new Array();
上面這個指令此將bbcode這個變數變更形態為陣列，裡面是空的資料，接著在指定資料給這個陣列，如果沒有這個指令，
那下面這行指令變無法執行。

bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]','[fade]','[/fade]','[scroll]','[/scroll]','[flash width=100 height=100]','[/flash]','[flipv]','[/flipv]','[fliph]','[/fliph]','[stream]','[/stream]','[left]','[/left]','[right]','[/right]','[php]','[/php]','[hide]','[/hide]','[iframe width=500 height=420]','[/iframe]','[rainbow]','[/rainbow]','[real]','[/real]','[blur]','[/blur]','[qt]','[/qt]','[strike]','[/strike]','[wave]','[/wave]','[mod]','[/mod]');
而上面這個指令是將這些bbcode功能的碼存在bbtags這個陣列變數中，到時作為bbcode判斷文章內如何取得開始bbcode效果的作用\r
前一個[b]為bbcode功能b的啟始，而後一個[/b]為bbcode功能b的結尾\r
所以在文章中便以 [b] 文章 [/b]來顯示，bbcode才能了解是什麼功能的bbcode，並且從那開始，至那裡結束
每一個功能都是一對的以 [功能代碼] [/功能代碼]的樣式存在bbtags陣列變數裡，所以在下面的指定功能代號時便是以2位數作間隔
在數字中是以1為開始，但電腦是以0為第一個位置，所以bbcode的功能b的代號就是0，而下一個bbcode功能i代號便是2，依此類推\r
往後要增加新的bbcode時就看自已高興要加在那裡，只要算好位置並知道其代號即可，後面都是類推，但有時為了方便，就直接在後
面增加，因為程式碼用插入的方式新增會比在後面新增要困難，要修改的地方也較多，所以通常是在);之前加入\r
另外，通常外掛的作者會要求你用find replace，這時要小心，如果你的find這段與外掛作者的不同時就得要比對，到底是要新增什麼\r
在自已加在最後面即可，不然改完出錯的機率是百分百的，所以這段回前面來說我們就是要加上 '[b]', '[/b]' 這段到bbtags變數裡
而在變數中，[b]或是[/b]就是所謂的變數其中的一個值，你不能直接用 [b], [/b]放入，必須用 ' 包住後放入，參考下面說明
舉例: bbtags = ('第一個值', '第二個值', '第三個值', '第四個值', .....依此類推\r
imageTag = false;
這個部份是按鈕不使用圖示\r

5.接下來是顯示的部份要了解的話你必須仔細研究並且了解html的框架結構，這段比較長，請用心看吧~.~"
(tr代表垂直分割，就像一行一行的樣子，而td代表橫向分割，就像一列一列，所按鈕要由左至右排當然是用td，而換行就是用tr囉)
搜尋這段 <input type="button" class="button" accesskey="b" name="addbbcode0" value=" 找到下面的這塊，因為版面的關系把
部份重覆的區段縮減或是刪除\r

BBCODE按鈕的顯示區塊由此啟始
<td class="row2" valign="top">
<table width="450" border="0" cellspacing="0" cellpadding="2">
這裡是第一行按鈕的位置，由tr與/tr組成
第一行(按鈕群)開始
<tr align="center">
你所要改的部份由此開始，每一個按鈕由一組td、/td包含一個input所組成，重覆這個樣式來產生下一個按鈕，如下所示\r
第1個按鈕開始
<td>
<input type="button" class="button" accesskey="b" name="addbbcode0" value="粗體" style="font-weight:bold; width: 52px" onclick="bbstyle(0)" onmouseover="helpline('b')" />
輸入的型式、類別為button按鈕而bbcode的功能代碼是b 在bbtags中的變數名稱0 在按鈕顯示的內容為粗體，接著是設定按鈕的樣式寬度為 52像素，然後當滑鼠移到名稱為0的按鈕上時啟動說明b
也就是會將b_help(L_BBCODE_B_HELP => $lang['bbcode_b_help'] = '粗體 [b] test [/b]')的內容顯示在下面\r
</td>
第1個按鈕結束
第2個按鈕開始
<td>
<input type="button" class="button" accesskey="i" name="addbbcode2" value="斜體" style="font-style:italic; width: 52px" onclick="bbstyle(2)" onmouseover="helpline('i')" />
前面的不說了同上，在value的部份就是在按鈕上顯示斜體，接著一樣是按鈕的寬度 52px，而當滑鼠移到此按鈕上時啟動i_help的說明顯示在下面\r
</td>
第2個按鈕結束
</tr>
第一行(按鈕群)結束，當太多按鈕超過時你可以將多的按鈕移到下一個tr&/tr之中，變成第二行、第三行或甚至更多行，但必須以tr、/tr包住喔
第二行(按鈕群)開始
<tr align="center">
<td>
<input type="button" class="button" accesskey="e" name="addbbcode18" value="褪色" style="width: 52px" onclick="bbstyle(18)" onmouseover="helpline('e')" />
</td>
</tr>
第二行(按鈕群)結束

第三行(按鈕群)開始，在此部份是將一些可設定色碼的bbcode改成表單的樣式，方便使用，如[xxx="xxx"]text[/xxx]可以自行定義\r\n<tr>
<td colspan="9">
因為要使用表單，所以要在使用一個table，這部份可以不要管他，除非你的跟我不一樣\r

<table width="100%" border="0" cellspacing="0" cellpadding="0">
這裡不同的是表單可直接連續顯示而不用td、/td區別，或稱作(下拉式)選單\r
而這裡是這個table的第一個按鈕群開始
<tr>
<td nowrap="nowrap" class="genmed">
第一個選單開始，第一個原本是font_color太長我把他去掉了，我順便簡述一下好了
{L_FONT_SIZE}:
上面這行是在選單左邊顯示該選單的功能名稱\r
下面是選單的部份
<select name="addbbcodefontsize" onchange="bbfontstyle('[size=' + this.form.addbbcodefontsize.options[this.form.addbbcodefontsize.selectedIndex].value + ']', '[/size]');this.selectedIndex=0;" onmouseover="helpline('f')">
這個有機會再說我們直接看到[size=' + 取得你游標所在位置或是選取的部份加上bbcode代碼 ']', '[/size]'，然後;this.selectedIndex=0;是選完選單上的功能時，自動回到第一個選項
後面的那個自然就是啟動該bbcode功能的說明囉
<option value="{T_BODY_TEXT}">{L_COLOR_DEFAULT}</option>
<option value="7">{L_FONT_TINY}</option>
上面這二行就是選單的內容一直到下面這行結束一個選單\r
</select>
第一個選單結束
第二個選單開始
{L_ALIGN}:
<select name="addbbcode54" onChange="bbfontstyle('[align=' + this.form.addbbcode54.options[this.form.addbbcode54.selectedIndex].value + ']', '[/align]');this.selectedIndex=0;" onMouseOver="helpline('d')">
<option value="{T_BODY_TEXT}">{L_COLOR_DEFAULT}</option>
</select>
第二個選單結束
</td>
<td nowrap="nowrap" align="right" class="genmed"><a href="javascript:bbstyle(-1)" onmouseover="helpline('a')">{L_BBCODE_CLOSE_TAGS}</a> </td>
上面這行跟最上面的bbcode很像，不過他的功能就是關掉bbcode功能\r
</tr>
而這裡是這個table的第一個按鈕群結束

而這裡是這個table的第二個按鈕群開始
<tr>
<td nowrap="nowrap" class="genmed">
{L_GLOW_COLOR}:
<select name="addbbcode56" onChange="bbfontstyle('[glow=' + this.form.addbbcode56.options[this.form.addbbcode56.selectedIndex].value + ']', '[/glow]');this.selectedIndex=0;" onMouseOver="helpline('g')">
<option style="color:black; background-color: {T_TD_COLOR1}" value="{T_FONTCOLOR1}" class="genmed">{L_COLOR_DEFAULT}</option>
</select>
</td>
</tr>
而這裡是這個table的第二個按鈕群結束
</table>

</td>
</tr>
第三行(按鈕群)結束

而這個算是第四行(按鈕群)開始前的外加語法設定部份，這個功能就是color bar所以你會看到有設定檔案名稱叫color.js
下面這段一直到table前是使用javascript語法，部份已省略去\r
<SCRIPT language=JavaScript src="templates/fisubsilversh/color.js"></SCRIPT>
第四行(按鈕群)開始
<TR>
<TD colSpan=12>
這裡是color bar變化顯示小格子的開始
<TABLE id=ColorPanel cellSpacing=0 cellPadding=0 align=left
border=0>
<TBODY>
</TBODY>
</TABLE>
這裡是color bar變化顯示小格子的結束
</TD>
</TR>
<tr>
<td colspan="9">
下面這行就是那條長長的color bar了
<input type="text" name="helpbox" size="45" maxlength="100" style="width:450px; font-size:10px" class="helpline" value="{L_STYLES_TIP}" />
</td>
</tr>
第四行(按鈕群)結束
第五行(按鈕群)開始
<tr>
<td colspan="9">
下面這行就是bbcode按鈕啟動的說明help顯示的地方\r
<textarea name="message" rows="15" cols="35" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MESSAGE}</textarea>
</td>
</tr>
第五行(按鈕群)結束
</table>
</td>
BBCODE按鈕的顯示區塊由此結束

四、接下來是bbcode執行的部份修改\r
1.首先看到bbcode.php
在原始的bbbcode共有二段判斷式，而如果安裝hide的話會再加第三個funtion()

2.裡面就是被posting呼叫後判斷文章內有沒有使用bbcode然後將[x] 包含此區段的內容 [/x]這段作處理
接下來先看到處理的函式有二個，分別是下面這二個一個是\r
function prepare_bbcode_template($bbcode_tpl)
上面這個是在bbcode使用時代入bbcode.tpl指定的語法所用的函式，不管有沒有用bbcode功能都會啟用\r
*function bbencode_second_pass($text, $uid)
// [b] and [/b] for bolding text.
$text = str_replace("[b:$uid]", $bbcode_tpl['b_open'], $text);
$text = str_replace("[/b:$uid]", $bbcode_tpl['b_close'], $text);
*function bbencode_first_pass($text, $uid)
// [b] and [/b] for bolding text.
$text = preg_replace("#\[b\](.*?)\[/b\]#si", "[b:$uid]\\\1[/b:$uid]", $text);
接下來上面這二個函式就是處理內容的部份
一般修改只會動到下面二個函式，在這二個函式增加要使用的bbcode處理程式，但這部份暫省略不說明

3.再來看到bbcode.tpl
上面的函式會截取tpl的內容，來取代被bbcode代碼包覆的那段
<span style="font-weight:bold">
</span>
當你使用 [b] text [/b]使，經過函式的處理就會變成
<span style="font-weight:bold"> text </span>的樣式來顯示，而該文章的內容不變，只是顯示的方式改變
所以你重新編輯內容時仍然是[b] text [/b]而不是上面那段

五、結束，不知這樣是否比較了解了呢，雖然寫的不是很好，不過，相信也對phpbb-bbcode有些了解了吧，也希望對大家有些幫助\r
如果那邊有錯誤歡迎指正喔~