#1 2009-10-13 22:36:10
[PunBB]麥擱CODE啊，一起來美化您的 code tag
用過 PunBB 的朋友都知道，這是一套輕量級的論壇系統，早期數位天堂即透過改機將 PunBB 安裝於ASUS WL-500GP上，這段期間 PunBB 一直維持 7x24 穩定的運作毫不懈怠，主要是因為其內建功能相當精簡，並沒有太多花俏的功能，相對地，她還有很多可以加值擴充的空間，等著您動手來改。
這次要改的是 BBCode 裡的 code tag，也就是"代碼"的功能，原來預設的代碼功能實在太精簡，無法指定字體及顏色，對本站多數討論改機的文章而言，不容易閱讀，所以我比較常使用"引用"勝過"代碼"功能。
早期在瀏覽改機前輩 abintech 的部落格時，就被其文章編排所吸引，其中 CODE 及 CMD 功能讓人非常容易閱讀，而且在 abintech 部落格裡也有專文介紹如何設計程式碼區塊，所以也興起我想嘗試改一下 PunBB 裡的代碼功能。
主要修改的地方有兩個部份，一是在CSS裡新增code的定義，另一個是修改parser.php 裡的字串解譯。
首先在 \punbb\style\imports\base.css 檔案最後新增底下code CSS內容，並存檔
code {
display: block;
font-family: 'Courier New';
font-size: 10pt;
overflow: auto;
white-space: pre;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
line-height: 1.2em;
letter-spacing: 0px;
color: #ff0;
background: #000 url(../../img/codebg.gif) left top repeat-y;
}
再來是編輯 \punbb\include\parser.php 並搜尋底下三行程式碼
$num_lines = ((substr_count($inside[$i], "\n")) + 3) * 1.5;
$height_str = ($num_lines > 35) ? '35em' : $num_lines.'em';
$text .= ''.$lang_common['Code'].':
'.$inside[$i].'
';
修改成底下這一行程式碼後存檔(也可以把這三行最前面加註//，新增到最後一行即可)
$text .= ''.$inside[$i].'
';
存檔後，即可收工驗收啦。
效果如何? 相信您應該也能認同閱讀性較舊版提升了吧。
如果想修改字體顏色，可回到 \punbb\style\imports\base.css 修改 code CSS 參數，這部份保留給您自己來嘗試看看。
參考資料： http://abintech.twidv.com/2006/11/blog-post_7922.html
最後修改： Aven (2009-10-21 21:44:03)
技術問題請於論壇上集眾人之力公開討論，感恩
離線
相關討論主題
| 主題 | 回覆 | 點閱 | 最後發表 |
|---|---|---|---|
|
PunBB 首頁顯示最新文章 作者 Aven
|
3 | 22664 | 2010-08-08 17:33:04 作者 lyyzh78 |
|
sqlite/punbb 安裝失敗 作者 ecolitely
|
9 | 32189 | 2009-06-29 21:06:16 作者 Aven |
|
PunBB 推出 1.3 Beta 版 作者 Aven
|
0 | 8727 | 2008-01-30 14:37:38 作者 Aven |
|
置頂 |
0 | 29773 | 2007-12-18 22:48:28 作者 Aven |
