Web Development 的學習之旅
顯示具有 hack-blogger 標籤的文章。 顯示所有文章
顯示具有 hack-blogger 標籤的文章。 顯示所有文章

2007/07/16

幾個製作 Blogger 網頁時遇到的問題

在製作彩油的展示與選取頁面時, 遇到不少問題, 在此記錄:



* Blogger 使用的是 UTF8 格式的檔案, .js 檔案內可能會有中文資料, 若不是以 UTF8 存檔, 可能會造成執行時期的錯誤.



* Blogger 內的文章可以貼入 <script>....</script>, 但卻不可貼入 <style>...</style>, Blogger 會自動將 <style> 及其內的所有資料全部移除, 所以放了也沒用. 因此 <style> 變成只能靠修改 template 置入. 但 template 卻是所有文章共用的區域, 久了不但 template 會變得複雜混亂, 也會使整體網頁顯示變慢. 拜這個問題所賜, 讓我找到了動態讀取 css 及 javascript 檔案的方法:


function loadCSS(css_filename) {
var css=document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('href', css_filename);
document.getElementsByTagName('head')[0].appendChild(css);
}
function loadScript(script_filename) {
var js = document.createElement('script');
js.setAttribute('language', 'javascript1.2');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', script_filename);
document.getElementsByTagName('head')[0].appendChild(js);
}

呼叫上述的 code, 就可以擺脫使用 html tag 載入 css 與 js 的命運, 以 javascript 來呼叫載入.

update:沒多久就發現其實 jQuery 早已有 require 的 plugin, 真好. 不過目前暫時先用上面的方案就好了.



* 在使用 thickbox plugin 時遇上了奇怪的問題, 後來發現是 thickbox 內呼叫 jQuery 的 $("...").load 方法載入 html 檔案, 在這裡某些時候有問題. 這個方法使用形式是 load( url, params, callback ), 問題在 url 參數. 若傳入 url 是完整的, 像 "http://domain.com/html/page.html" 的話, 就會有點像當掉一樣, 停留在這裡; 若 url 只傳檔案名稱, 像 "page.html" 的話, 就可正常執行. 為什麼目前不得而知, 只好暫時避免以 ajax 的方式使用 thickbox, 改用 inline 的方式就沒問題了, iframe 的方式則還沒用過.


2007/07/06

Blogger 工作

猶豫了一天, 最後還是決定把 jQuery 等相關的檔案移到 Google Pages. 不過由於在 Google Pages 內無法建立資料夾, 所以針對檔名做了統一的修改:



圖檔 - img.jq.(plugin).(filename).(ext)

CSS - css.jq.(plugin).(filename).css

JavaScript - jq.(plugin).pack.js





將之前增加在 template 的 CSS 移至獨立的 .css 檔案內.





對 CSS 還不熟, 但為了將喜愛的圖放在上方, 還是花了一番苦心呀:


#top_background {
width: 100%;
height: 160px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
filter: alpha(opacity=20); /* for IE 濾鏡*/
opacity: 0.20; /* for CSS3 濾鏡 */
-moz-opacity: 0.20; /* for Mozilla 濾鏡*/
}


<div align="center" id="top_background">
<img width="320" src="..."/>
</div>



需要的效果是在將圖形置於右上角當底圖, 再加上圖片淡化, 嚴格來說這並不是底圖, 不過因為加了淡化效果, 所以湊和著用吧~~

不過也因此使 Title 的首頁連結失效(按不到), 最後乾脆在整個圖加上 Hyperlink 連結至首頁.

2007/06/29

Blogger Template 筆記

[隨時記錄關於 blogger template 方面的事]


基本 widget 的格式


<b:widget id="Header1" locked="true" title="孚力資訊 (標頭)" type="Header">

id 為識別名稱, locked 用於 Template-Page Elements 頁面表示此 widget 是否被鎖定, type 為 widget 的種類. widget 目前觀察的結果, 裡面都會有一個名為 <b:includable id="main"> 的 tag, 表示widget 執行的進入點.



* 在 template 加了一些像 b:if 的 code 之後, 再更換另一個內建的 template, 發現 template 已更新, 但我加的 code 卻還能保留, 實在佩服.



* <data:blog.pageType/> 在首頁值是 "INDEX", 在文章內值是 "ITEM"(xxxx.html), 在 Archive 的年份值是 "INDEX", 在月份值是 "ARCHIVE"(年份用 search, 月份則用yyyy_mm_dd.html), 在 Label Vew 值是 "INDEX"(label 使用的是 search)



* 修改 template 的過程, 有時會下載到本機做修改再上傳, 有時會直接使用"網頁元素"做修改, 若兩者交互使用時, 記得在使用"網頁元素"做修改後, 一定要下載最新的 template 至本機修改, 以免發生覆蓋的情形.



* 只要加入 b:section tag 即可在"網頁元素"內新增一塊 dockable(可停駐)的區域.




* 用來判斷是否為單一文章的頁面:

<b:if cond='data:blog.pageType == "item"'>

* 需要針對特定文章做處理的話, 可以用下面指令判斷:(nnnnnnnnnn 是指 blogID)

<b:if cond='data:post.id != "nnnnnnnnnn"'>

* 尚不知何時有值:

<data:pageTitle>






[Blogger Help]

* Google 太強了, 有些用在 code 裡的單字都翻成中文了(那怎麼用呀?), 可能會需求要對照英文版.

版面配置的網頁元素標記

版面配置的小裝置標記

版面配置資料標記

版面配置的字型和顏色標記

如何才能將第三方網頁元素加入我的版面配置?

為他人建立新的迷你組件,供他們加入其版面配置




[Blog Resource]

Template 的基本內容和結構

Beta Template 版面改造