bigfa 的 Typecho Puma 主題調整記錄 ,

在免費空間的 Typecho 上啟用了 bigfaPuma主題 ,感覺超贊。

根據自己需要,調整了一些東西。 特意記下,以免忘記。

  1. 首頁 more 標籤 CSS 定義 和 text-shadow。

    codep.more {
    text-align: center;
    padding-top: 25px;
    }
    p.more a {
    border: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    padding: 5px 10px;
    }
    p.more a:hover {
    background-color: #3B5998;
    color: #FFF;
    }
    .textShadow {
    text-shadow: 1px 1px 2px #666;
    }
    
  2. 頂部距離調整:

    code.surface-content {
    margin: 10px auto 100px;
    max-width: 900px;
    background-color: #FFF;
    }
    
  3. 博文頁面的上一頁,下一頁, 合適的位置增加:

    code<ul class="post-near">
    <li>上一篇: <?php $this->thePrev('%s','沒有了'); ?></li>
    <li>下一篇: <?php $this->theNext('%s','沒有了'); ?></li>
    </ul>
    

--EOF--

[模板]MT下最簡單的實現CSS壓縮的辦法 ,

MT下最簡單的實現CSS壓縮(優化)的辦法

大家都知道。 CSS壓縮可以給網站訪問提速, 這個也是 Google Yahoo 等大網站對於網站優化提出的標注之一。
但是,CSS壓縮對於網站開發者來說,也意味著可讀性降低,也意味著需要保留兩份代碼,一份正常的可讀性高的,一份壓縮的的供網站使用。
對於業餘站長,壓縮CSS是個可愛又可恨的東西,需要第3方工具來完成。
其實,對於 MT 程序來說,利用一點點模板變通可以實現 CSS的自動壓縮。
簡單的來說就是利用 MT 模板 Tag 自身的幾個全局過濾函數的過濾/替換功能:

  1. strip_linefeeds
    strip_linefeeds 很好理解,就是把Tag內所有的換行去掉,讓他變成一行。 使用辦法 <$MT:tag strip_linefeeds="1" $>

  2. strip
    strip 過濾則是用特定字符替換掉 Tag 內的就空白(1個或者多個連續空格),比如我要把這些空白替換成一個空格則是用 <$MT:tag strip=" " $>

  3. 正則方式regex_replace=["正則表達式匹配部分","要替換成的內容"]
    這是最強大的功能,我們用它來替換掉原始CSS 的註釋部分。 當然為了表達式簡單,我只替換/*[註釋內容]*/ 方式,而不處理 //[註釋內容] 樣式,這個就需要你的原始CSS 的註釋必須是 /*[註釋內容]*/ 方式,而不是 //[註釋內容],但是修改所有的 //[註釋內容]/*[註釋內容]*/ 並不是太繁瑣的事情。如果要處理 //[註釋內容]方式,必須在 strip_linefeeds 之前使用。我的使用辦法 <$MT:tag regex_replace="/\/\*.+?\*\//g","" $>
    注意,正則表達式兼容 Perl 正則,但是只識別 /../模式。

  4. trim
    trim 很好理解,就是把Tag內開頭和結尾的空白去掉。 使用辦法 <$MT:tag trim="1" $>

[隨筆]MT4 模板的變化和3.x系列風格移植的注意事項

不知道 6A 出於什麼考慮。從 MT3.3x到 MT4,MT 模板的一些定義變化了。導致舊的CSS沒有辦法直接移植到新的系統(如果你使用新系統帶的模板的話)。

主要變化在 頁面佈局 的變化,基本上對應關係如下:

layout-two-column-right -> layout-wt
layout-two-column-left -> layout-tw
layout-three-column -> layout-wtt(寬-窄-窄) 或者 layout-twt (窄-寬-窄)

另外, 模塊Class 名字原來 叫 module 現在改成了 widget , 原來所有以 module 的元素名字也改成了 以 widget 開頭。

大概變化就這樣,如果要使用舊風格,直接把 CSS 按照上面的進行替換,然後再修改細部就可以了。

--EOF--

網頁設計,別片面追求tableless

今天無意中看了一篇文章,作者顯然是CSS+Div的崇拜者,對 含有 table 的網頁特別不屑一顧,甚至說了 tableless 是 Web2.0的重要標誌,含table 的網頁就是上個世紀的老古董之類的話:)

恩,tableless 是 Web2.0的重要標誌這個我倒不反對,我理想中的網頁在脫掉CSS外衣後應該有很好的可讀性,這一點 tableless 的確值得推廣,網頁設計我不專業,但是我也盡量讓自己的頁面在邏輯上可讀性高一點,CSS+ DIV 的確是個好主意。

但是是不是要把 table 一稈子打死呢? 我覺得到也未必。table還是必要的。只要不影響可讀性,table 依然可以用,並不是什麼上個世紀的老古董之類。
如果單純為了追求 TableLess 所謂的Web2.0而不使用table而用 DIV +大量的CSS來嵌套模擬的話,似乎就有點鑽牛角的感覺了:)
只要網頁中不使用 table 來定義寬度,顏色等應該用CSS定義的東西,而table只用來做單純的"Table"就可以了:)
就像這樣:
原來的代碼是這樣的

<table align="center" border="1" bordercolor="color1" cellpadding="x" cellspacing="y" height="xxx" width="xxx"> <tr> <td align="center" background="xxxx" bgcolor="xxx" width="xxx"><b>狀態</b></td> <td align="center" background="xxxx" bgcolor="xxxx" width="*"><b>主 題</b></td> <td align="center" background="xxx" bgcolor="xxx" width="xx"><b>作 者</b></td> <td align="center" background="xxx" bgcolor="xx" width="xx"><b>回復</b></td> <td align="center" background="xxxx" bgcolor="xx" width="xx"><b> 最後更新</b></td> </tr> </table>

改後的代碼是這樣的


<table id="posttable">
<tr>
<td id="state">狀態</td>
<td id="topic">主題</td>
<td id="author">作 者</td>
<td id="reply">回復</td>
<td id="last_reply_time">最後更新</td>
</tr>
</table>

加上針對 table 的 CSS

#posttable { .... } #state ,#topic,#author,#reply,#last_reply_time {.....}

這樣就足夠了:) 也滿足了可讀性 :P 而不必要去為了追求Tableless 而去花大量的時間重寫 :)

PS: 一家之談。。。

--EOF--

[SiteLog]界面調整為適宜1024x768分辨率觀看

This is a SiteLog of Easun's WebBlog。
通過 Google Analytics 顯示(見下圖),來訪者的 屏幕分辨率 大於等於 1024x768 的已經達到了 93% ,聯繫實際,現在的電腦顯示器似乎最基本的就是支持 1024x768 吧?
我的WebBlog一直是按照 800X600 設計的,現在看來有的過期了,新的 MT4.0b 模板默認就是 1024x768的,看來我也要小修改一下了:)