2003年11月22日

BLOG版面稍作更改

雖說是稍作,但其實花了一番功夫。首先,所有單篇、分類、按時彙整的頁面全給改成二欄的了,其中最困擾的部份是月曆,首先我參考了這一篇「日曆相關問題」,但其中仍不是全然適用,像是在單篇彙整中就不能正常作用,花了我不少時間。這次我把模板中的side部分(兩側選單)再次common化,以後只需要用MTInclude module=blahblah即可。

還有一個我急於和大家分享的,就是留言表單的部份。



之前拜訪他人BLOG的經驗中,有一環是最討厭的,那便是留言時選擇記憶個人資料的部份,我常常會忘記選取,以致於下次還要很麻煩的填個人資料,可能也會有很多人有這樣的經驗。
然而這次我決定自己改改看,就著我學過PHP的能力來亂改JS一番,想不到我居然更改成功而且毫髮無傷!
這次的更改中,我決定不做簡單的更改,意思是說把記憶個人資料部分「要」的那個按鈕預設值改成已點選,那太好改了,其方法我也分享出來:只要放個checked的值進去「要」的那個input標籤裏面和把以下這四行刪掉即可。
if (getCookie("mtcmtauth")) {
document.comments_form.bakecookie[0].checked = true;
} else {
document.comments_form.bakecookie[1].checked = true;
}
但是我要的是不用選單的。其實更改的步驟很簡單,只要看看下面的步驟並領略一下意思就可以知道為什麼要這樣做了。
1.版面的修改:把以下這些東西刪掉
<div style="width:30%; padding-right:15px; margin-right:15px; float:left;
text-align:left; border-right:1px dotted #bbb;">
</div>
要自動記住您的個人資訊嗎?<br />
<input type="radio" id="bakecookie" name="bakecookie" style="border:0px;"
/><label for="bakecookie">要</label><input type="radio" id="forget" name="bakecookie"
onclick="forgetMe(this.form)" value="Forget Info" style="border:0px;margin-left:
15px;" /><label for="forget">不要</label><br style="clear: both;" />

2.執行JS指令的部份:找到以下部分
onsubmit="if (this.bakecookie[0].checked) rememberMe(this)"
接著把if (this.bakecookie[0].checked) 刪掉,引號裡面不能留空白,也就是說變成這個樣子。
onsubmit="rememberMe(this)"
然後找到以下部分並且刪掉
if (getCookie("mtcmtauth")) {
document.comments_form.bakecookie[0].checked = true;
} else {
document.comments_form.bakecookie[1].checked = true;
}

3.加上一個清除Cookie的按鈕:在發表按鈕的旁邊加上以下文字
<input type="button" value="&nbsp;清除並遺忘個人資料&nbsp;" onclick="forgetMe(this.form)" />
大功告成!
我發現這樣的好處是很適合懶人的。

2 則留言:

  1. Dowba:
    那你單篇的怎麼變成兩欄的?
    有語法可以借來參考嗎?謝謝喔!

    回覆刪除
  2. 其實網路上的東西都是可以直接自取的,那麼我來講解一下好了。
    1:點滑鼠右鍵打開原始檔;
    2:找到有月曆兩個字而且是在選單裡面的;
    3:研究看看他被哪一個div包起來,結果發現是包在leftmenu裡面的sidetitle;
    4:到http://blog.twblog.net/dowba/styles-site.css 這裡找找看leftmenu是什麼樣子;
    5:看看文章部分是被什麼包起來,搜尋BLOG版面稍作更改並且選擇文章部份而不是RDF DATA部分;
    6:研究看看他被哪一個div包起來,結果發現是右內而外依序是blogbody、blog、content_for2c這些;
    7:到http://blog.twblog.net/dowba/styles-site.css 這裡找找看content_for2c是什麼樣子;
    8:接著就Do It Yourself 吧。

    回覆刪除