站務工作紀錄 2013 年 5 月

站務公告與重要訊息存放區。
版面規則
歡迎光臨站務公告區,任何建議都可以提出討論。
回覆文章
頭像
Weberkk
LV9-見習僧侶
LV9-見習僧侶
文章: 177
註冊時間: 2013-04-03, 00:24
: 傳說中的WB

站務工作紀錄 2013 年 5 月

文章 Weberkk »

這個月不停的在改 phpBB3 風格和進行 phpBB3 SEO 優化

在 phpBB3 裡面要改造型,除了 CSS 之外,也會運用到 html 和 JavaScript
還有少量 php 語言(主要是鑲入 html 的部分,當然這語法是 phpBB 專用的
例如 <!-- IF not S_IS_BOT --> html內容 <!-- ENDIF -->

當然也可以這樣將 php 語法跟 JavaScript,html 做結合
<script type="text/javascript">
document.write(' html內容 <!-- IF not S_IS_BOT --> html內容 <!-- ENDIF -->');
</script>

BK18 從創站到現在,板面設計的部分一直持續改進
目前比較穩定也比較滿意的造型是這樣,應該也是今後固定的版型了
TwNPC201305.png
TwNPC201305.png (297.88 KiB) 已瀏覽 21828 次
很明顯的可以發現,phpBB3 版面被切成兩半,標準的 phpBB3 沒這造型,要自己改
做法是在 header 加入 <table> 然後在 footer 加入 </table>

在 IE 會碰到 table 大小錯亂的問題,可以加入 table-layout: fixed; 解決
以下是實際加在 phpBB3 header 的內容

<a name="start_here"></a>

<table style="border-collapse:collapse; border-spacing: 0px;table-layout: fixed; width: 1004px; "><tr>
<td style="width: 819px; height: 0px; "></td>
<td style="width: 185px; height: 0px; "></td>
</tr><tr><td>

<div id="page-body">

先用 table-layout: fixed; 告訴瀏覽器這個表格寬度是固定的
再弄個高度 0px 的第一行欄位,把表格大小都訂好
接下來在 footer 就可以自由發揮了,只要加入 </td><td>
就會讓這個從 header 開始,包含整個中間內容的欄位結束,並開始右邊的新欄位

當然也可以省略這行高度 0px 的欄位,直接把寬度設定在要顯示內容的表格裡

====================================

淺談一下 phpBB3 有用到的程式語言,html,JavaScript,CSS,php 之間的關係

大型的程式開發,通常會採用 MVC 架構 (Model View Controller)
把整個系統分成三個部分,而 phpBB 的設計也符合這個架構

模型(Model) = > 底層的基礎設計,資料的保存與輸出,相當於 phpBB 的 php
檢視(View) = > 最終輸出給使用者的部分,相當於 phpBB 的 CSS
控制器(Controller) = > 承接以上兩者,相當於 phpBB 的 html 和 JavaScript

只有 php 是在伺服器端運作, html, JavaScript, CSS 都是在使用者電腦上運作
例如某網站用 JavaScript 做了一個質數運算函數,計算 2~100萬的質數
每次使用者進行運算的時候,操爆的是使用者的電腦,不會對伺服器造成任何負擔

但若改用 php 進行質數運算,再把結果輸出給使用者
那麼被操爆的就是網站伺服器了...

(JustHost 會限制 CPU 使用率,絕對不能拿來幹這種事... XD)

也因為 php 是在伺服器上面運作,所以有兩個主要優點

1.原始碼不會傳給使用者,網站運作的關鍵技術可以保密

 任何人都可以在瀏覽器上檢視 Google、Facebook、Yahoo 的原始檔
 但這些 html 或 JavaScript 原始檔只是表層,最終呈現給使用者的東西
 網站真正的運作過程全部藏在 php 或其他伺服器端的代碼裡面
 就算複製一份 Facebook 的 html 跟 JavaScript,也做不出另一個 Facebook


2.可決定輸出的資料,動態生成網頁,對不同使用者產生不同的內容
 例如論壇版塊的禁止瀏覽,即使網址相同,沒權限就讀不到

 這功能也可以用在 SEO 上面,phpBB 內建 51 種搜尋引擎 Spider BOT 的判斷
 對 Spider BOT 只產生精簡的內容,對使用者產生完整的內容
 因為很多資訊(例如使用者註冊時間、發文數、暱稱)不需要給搜尋引擎知道
 而本站也針對這部分去做改進,修剪更多的內容,讓 Spider 可以直接閱讀文章

 語法<!-- IF not S_IS_BOT --> 不提供給Spider 的 html內容 <!-- ENDIF -->

====================================

但因為 php 程式碼做的事情越多,伺服器負擔也越大
所以先使用 php 讀取資料庫的各種資料,輸出成網頁之後
再由 JavaScript 執行一些美化網頁的運算,就會比全部用 php 還要節省資源

當然還有很多客戶端要執行的東西,例如右側的浮動視窗
就一定要用 JavaScript 寫,沒辦法用 php 幫使用者跑浮動視窗

所有的程式碼,各有用途,若要對 phpBB3 做調整,全部都要有概念才可以
當然最重要的關鍵,就是一開始說的,再複製貼一次,加強重點... XD

=====================================
在 phpBB3 裡面要改造型,除了 CSS 之外,也會運用到 html 和 JavaScript
還有少量 php 語言(主要是鑲入 html 的部分,當然這語法是 phpBB 專用的)

=====================================

2013.05.06
用 <table> 把 phpBB3 版面分割成兩半,也解決 IE table 的 BUG

2013.05.10
把 Facebook 粉私專頁跟 Facebook LikeBox 整合在右側

2013.05.22
省資源的 javascript 浮動視窗 div 完成
經過少部分的改寫、腳本壓縮之後,就是現在使用的代碼
回覆文章