2012年10月29日 星期一

透過 CSS 實現「標題過長以省略符 (點點點) 替代」

origin: https://github.com/QueenbyeR/blog-text/blob/master/%E9%80%8F%E9%81%8E%20CSS%20%E5%AF%A6%E7%8F%BE%E3%80%8C%E6%A8%99%E9%A1%8C%E9%81%8E%E9%95%B7%E4%BB%A5%E7%9C%81%E7%95%A5%E7%AC%A6%20(%E9%BB%9E%E9%BB%9E%E9%BB%9E)%20%E6%9B%BF%E4%BB%A3%E3%80%8D/page-001.md




通常一個網站最基本的功能便是「最新消息」之類的訊息公告欄，卻總有一個老問題糾纏著。通常公告欄每條消息的標題只會佔用一行文字，如果標題過長變成兩行，這下可便扭了。
自動換行
為了讓它們能夠自動帶有 ... 這類點點點型的省略號，對前端開發不熟的後端開發者們，便想出了一個土法煉鋼的方法。
function cnSubStr($string, $sublen) {
    if ($sublen >= strlen($string)) {
        return $string;
    }
    // 略...
    // 略...
}
現在，時代在進步**(IE瀏覽器在進步)**，有一種透過純 CSS 來實現這效果的作法。要說缺點的話，就是只能替「單行」替換省略號，若是區塊型的描述文字串，則無法實現替換省略號。
單行替換省略號
關鍵的三個屬性
  • text-overflow : ellipsis;
  • white-space : nowrap;
  • overflow : hidden;
支持 IE8, Firefox, Chrome
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <div class="no_title_over_length">
        <h2>What is Ember.js?</h2>
        <p>Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.</p>
    </div>
</body>
</html>

.no_title_over_length{
    width            : 250px;
    border           : 5px solid black;
    padding          : 0 5px;
    background-color : pink;
}

.no_title_over_length p{
    text-overflow : ellipsis;
    white-space   : nowrap;
    overflow      : hidden;
}
張貼者： 於 沒有留言:
標籤： ,

CSS Sprites 實現方法

origin: https://github.com/QueenbyeR/blog-text/blob/master/CSS%20Sprites%20%E5%AF%A6%E7%8F%BE%E6%96%B9%E6%B3%95/page-001.md



CSS Sprites
早已技術存在很久，最大的亮點就是節約 Http request 等同於節約網頁連線耗時，加快網頁載入，其重點在於將各個小圖標大圖示密集地集中在一張 image 裡；不再浪費唇舌，這裡僅記錄 CSS 的實現方式。
支持 Chrome、Firefox 以及 IE。
最大的麻煩
就是每個圖標按鈕得一個一個調整 position，如果image之中的所有圖標排列具有規則邏輯性的話，倒可採用LESS來撰寫，會方便許多。
採用的圖片為：
CSS Sprites buttons
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>
<body>
    <div class="menu">
        <span class="button link-home"></span>
        <span class="button link-game"></span>
        <span class="button link-esport"></span>
    </div>
    <div style="clear: both;"></div>
</body>
</html>

body{
    background-color: black;
}

.button{
    background-image : url(http://tw.battle.net/sc2/static/images/layout/menu-tabs.jpg?v=2);
    display          : inline-block;
    float            : left;
    width            : 105px;
    height           : 76px;
    cursor           : pointer;
}

.link-home{background-position        : 0 0; }
.link-home:hover{background-position  : 0 -76px; }
.link-home:active{background-position : 0 -152px; }

.link-game{background-position        : -105px 0; }
.link-game:hover{background-position  : -105px -76px; }
.link-game:active{background-position : -105px -152px; }

.link-esport{background-position        : -210px 0; }
.link-esport:hover{background-position  : -210px -76px; }
.link-esport:active{background-position : -210px -152px; }
張貼者： 於 沒有留言:
標籤： ,

2012年8月13日 星期一

解決 Codeigniter-Smarty 與 Discuz X 2.5 相衝突的問題.


origin: https://github.com/QueenbyeR/blog-text/blob/master/%E8%A7%A3%E6%B1%BA%20Codeigniter-Smarty%20%E8%88%87%20Discuz%20X%202.5%20%E7%9B%B8%E8%A1%9D%E7%AA%81%E7%9A%84%E5%95%8F%E9%A1%8C/page-001.md


目錄環境

  • PHP 5.4
  • Apache 2.2
  • CodeIgniter 2.1.2
  • CodeIgniter-Smarty
  • Discuz X2.5 (2012年4月7日繁體中文UTF8)
  • CodeIgniter 在 /
  • Discuz 在 /bbs/ (程式碼會因路徑而稍微有所不同)

問題

使用 Smarty 時，在各別樣版首次執行時，\smarty_compile_dir 內若無已存在的樣版的話，會造成以下錯誤：
Discuz! System Error
Oops! System file lost: class/smarty/smarty_internal_templatecompilerbase.php

解決

打開 \www\bbs\source\class\class_core.php
找到 throw new Exception('Oops! System file lost: '.$filename);
在前一行加入
    if ( ! strpos($_SERVER['REQUEST_URI'], 'bbs') ) return true;
張貼者： 於 沒有留言:
標籤： , , ,

2012年8月1日 星期三

xampp 1.8 之中的 db 連接變得很慢？

origin: https://github.com/QueenbyeR/blog-text/blob/master/xampp%201.8%20%E4%B9%8B%E4%B8%AD%E7%9A%84%20db%20%E9%80%A3%E6%8E%A5%E8%AE%8A%E5%BE%97%E5%BE%88%E6%85%A2%EF%BC%9F/page-001.md



xampp1.8控制台
今天把xampp一口氣換到了版本 1.8，但是 db 的 curd 操作，卻變得異常的緩慢，光是5個queries，就使得頁面等了3秒才渲染完成。
抽絲剝繭後發現，若將 $db['hostname'] = 'localhost'; 改為 $db['hostname'] = '127.0.0.1'; 情況可獲得改善，但仍有1秒的等待時間；這匙實在不合理啊，我的伺服器可是本地端的呀，這不能忍。
果然又拜 GOOGLE 大神所賜，終於在這篇文章之中找到了解決方法。
造成此種情況的主因就是 IPv6 這東西；然而由於我所開發的專案，都用不上 IPv6，所以直接透過微軟所提供的fix關閉 IPv6 就恢復正常了。
關閉後，執行時間由1秒，恢復到正常的0.1秒。
張貼者： 於 沒有留言:
標籤： , , ,

2012年7月10日 星期二

在 Sublime Text 2 上，啟用 Smarty 語法高亮。



在 Sublime 中，貌似沒有簡單的方式(例如安裝Package或調改setting)能夠啟用 PHP-Smarty 語法高亮；爬了谷歌大神之後，在官方論壇中發現了一點線索。
具體作法 (Windows 7)：

1. 打開 Package 所在目錄。

Package所在目錄

2. 找到 Packages\HTML\HTML.tmLanguage 檔案

Packages\HTML\HTML.tmLanguage

3. 搜尋 <!-- 字元，你應該會發現有兩處與 Smarty 相關的代碼被註解起來了，解放它們。

4. 下載 Smarty.plist 檔案 (副本)。

5. 變更**副檔名**為 tmLanguage。

6. 將 Smarty.tmLanguage 檔案放置到 Sublime text 的 package 目錄中，例如Packages\Smarty\Smarty.tmLanguage。

Packages\Smarty\Smarty.tmLanguage

7. 或許預設的 coloru-scheme 不支持 Smarty，所以你可以試試看其它的 Scheme，例如Tomorrow Colour-Scheme

Packages\Smarty\Smarty.tmLanguage
Packages\Smarty\Smarty.tmLanguage
ps:(在預設安裝的 Sublime Text 2 中，你應該只需要以下幾個步驟，就能啟用 Smarty 語法高亮。)
張貼者： 於 沒有留言:
標籤： , ,

2012年7月2日 星期一

解決 Codeigniter 的 display_override hook 與 Disucz X2.5 衝突

為了能夠在 CI 中，取得 Discuz $_G 這個超級變數，我把 /source/class/class_core.php 直接載入了 CI 作為一個 Librarries。

在 CodeIgniter 中整合 Discuz X2.5, 引用超級變數 $_G 來獲取用戶名, uid等資訊.


但由於 Discuz X2.5 有自己的一套 input、output 機制，導致於我為 CI 所撰寫的  $hook['display_override']​  會沒有反應。


這是因為 discuz 把 ob_start 設為 NULL 了，使得 $CI->output->get_output() 取不到半點字串。

為了讓它能夠正常運作，採用了一個較直接的思路：
「如果目前沒有瀏覽著論壇，則不呼叫 disucz 的 _init_output 方法」

if ( ! strpos($_SERVER['REQUEST_URI'], 'bbs') ) $this->is_in_bbs = false;​
...
if ($this->is_in_bbs) $this->_init_output();​

再觀察看看有沒有其它問題...
張貼者： 於 沒有留言:
標籤： , ,

2012年6月24日 星期日

在 CodeIgniter 中整合 Discuz X2.5, 引用超級變數 $_G 來獲取用戶名, uid等資訊.

origin: https://github.com/QueenbyeR/blog-text/blob/master/%E5%9C%A8%20CodeIgniter%20%E4%B8%AD%E6%95%B4%E5%90%88%20Discuz%20X2.5%2C%20%E5%BC%95%E7%94%A8%E8%B6%85%E7%B4%9A%E8%AE%8A%E6%95%B8%20%24_G%20%E4%BE%86%E7%8D%B2%E5%8F%96%E7%94%A8%E6%88%B6%E5%90%8D%2C%20uid%E7%AD%89%E8%B3%87%E8%A8%8A/page-001.md



環境:
  • CodeIgniter 2.1.2
  • Discuz X2.5 (2012年4月7日繁體中文UTF8)
目錄:
  • CodeIgniter 在 /
  • Discuz 在 /bbs/ (程式碼會因路徑而稍微有所不同)
這次是我第一次使用 Discuz 也是第一次使用 CI。主要網站應用程式用 CI 寫，另外架了個 Discuz 作論壇以及網站會員管理。所以我必須要能夠在 CI 程式中，取得用戶從 Discuz 登入後的用戶資訊 (當前用戶名、uid等)。
試過了 UCenter 來取得資訊，行不通 (一定是我太蠢了)，而且網路上都找不到良好的解決方案。
要透過 UCenter 來取得用戶資訊，必須先取得用戶名或其uid，但我就是卡在無法從 cookie 上解密 Discuz 的用戶名出來；網上找了一下，應該是 Discuz 的加密方法不一樣，爬了一些 Disucz 核心，還是找不到好的方法，只好以最少的核心改動來兼容 CI。

改動檔案

本改動未經測試過安全性、性能等指標。僅供參考。
打開 \www\bbs\source\class\discuz\discuz_application.php
找到
    class discuz_application extends discuz_base{
在之後加入
var $is_in_bbs = true;
找到
public function __construct() {
在之後加入
if ( ! strpos($_SERVER['REQUEST_URI'], 'bbs') ) $this->is_in_bbs = false;
找到
    $this->_init_env();
    $this->_init_config();
    $this->_init_input();
    $this->_init_output();
取代為
    $this->_init_env();
    $this->_init_config();
    $this->_init_input();
    if ($this->is_in_bbs) $this->_init_output();
找到
define('IS_ROBOT', checkrobot());

foreach ($GLOBALS as $key => $value) {
    if (!isset($this->superglobal[$key])) {
        $GLOBALS[$key] = null; unset($GLOBALS[$key]);
    }
}
取代為
define('IS_ROBOT', checkrobot());

if ($this->is_in_bbs) {
    foreach ($GLOBALS as $key => $value) {
        if (!isset($this->superglobal[$key])) {
            $GLOBALS[$key] = null; unset($GLOBALS[$key]);
        }
    }
}
張貼者： 於 沒有留言:
標籤： ,

2012年6月22日 星期五

為 CodeIgniter 掛載 hook 將網頁所有 img tag 自動補足 alt 屬性

此操作引用了 simple_html_dom 類庫。

本 hook 將可以為 CI 中，所有輸出的網頁裡的 <img> 自動作補足 alt 屬性的操作，提升 SEO 效果。例如原始 view 中的程式碼為：
    <div class="img_slide">
        <img src="a1.png" alt="第一章">
        <img src="a2.png" alt="">
        <img src="a3.png" alt="呵呵">
        <img src="a4.png" alt="第四章 - 你的網站名稱">
    </div>
透過此 hook 後，用戶及搜尋引擎將會在瀏覽器中見到如下：
    <div class="img_slide">
        <img src="a1.png" alt="第一章 - 你的網站名稱">
        <img src="a2.png" alt="你的網站名稱">
        <img src="a3.png" alt="呵呵 - 你的網站名稱">
        <img src="a4.png" alt="第四章 - 你的網站名稱">
    </div>

1.
打開檔案：
    \application\config\config.php
搜尋：
    $config['enable_hooks']
確保它為：
    $config['enable_hooks'] = TRUE;​


2.
打開檔案：
    \application\config\hooks.php
任意空白處插入程式碼：
    // 處理<img>缺省alt=""
    $hook['display_override'][] = array(
        'class'    => '',
        'function' => 'images_auto_set_alt',
        'filename' => 'output.php',
        'filepath' => 'hooks',
        'params'   => array( 'output_display' => TRUE )
    );​


3.
新增檔案： \application\hooks\output.php
    /**
     * 將輸出的 圖片(<img>) 進行處理；自動配置 alt 屬性。
     *
     * @param array   $setting=array() 設定
     *                $setting['output_display'] => 是否直接輸出給瀏覽器。FALSE代表不直接輸出，僅回存至buffer。
     * @return NULL                    不會回傳東西。
     */
    function images_auto_set_alt( $setting=array() ) {
        $CI =& get_instance();
        $CI->load->library( 'simple_html_dom' ); // require_once APPPATH . 'libraries/simple_html_dom.php';
        $buffer = $CI->output->get_output();

        $DOM = str_get_html( $buffer );
        foreach ( $DOM->find( 'img' ) as $key => $img ) {
            if ( empty( $img->alt ) && ! strpos( $img->alt, $CI->config->item( 'site_name' ) ) ) {
                $img->alt = $CI->config->item( 'site_name' );
            }
            else {
                $img->alt .= ' - ' . $CI->config->item( 'site_name' );
            }
        }

        $CI->output->set_output( $DOM->save() );

        if ( $setting['output_display'] ) {
            $CI->output->_display();
        }
    }


4.
完成！
張貼者： 於 沒有留言:
標籤： , , ,
訂閱： 文章 (Atom)