Archive for the ‘ WebApp ’ Category

《網頁設計-愛上jQuery》讀書心得及評論

使用 Javascrip 的框架來開發網頁的程式可以加快開發的速度,其中 jQuery 也是頗受歡迎的一員。

不過目前可以買得到的 jQuery 中文書籍實在寥寥可數,以下是最近閱讀《網頁設計-愛上jQuery》這本書的心得及評論 (作者是羅子洋)。 Read more

WordPress 的錯誤訊息: You don’t have permission to access post.php ...

如果你在上傳圖片時,出現:

 Http Error

或是發表文章時,出現

You don’t have permission to access /wordpress/wp-admin/post.php on this server.

這是 Apache 的 mod_security 造成之錯誤,這時候你可以在 wp-admin 的目錄下新增 .htaccess 檔案,內容如下:

<IfModule mod_security.c>
SecFilterEngine Off
SecFilterScanPOST Off
</IfModule>

這樣應該就可以輕鬆解決了。

參考網頁

  1. 窄多之Blog: PHP post error: Forbidden - You don't have permission to access
  2. Hongkiat: WordPress 2.5 Image Upload Error [Wordpress Fix]

將 Funp 加入 Sociable 的書籤清單中

Sociable 是一個 WordPress 的外掛程式,專門用在 Blog 的文章上顯示特定的網路書籤,供訪客收藏,長得就像這個樣子:

可惜的是,Sociable 內建的 92 個書籤裡卻少了大家愛用的 Funp (幸好還有 Hemidemi MyShare),以下的方法說明如何把 Funp 加入 Sociable 的書籤清單中。
Read more

從 Blogger 轉移到 WordPress 的技巧

本站已經由 GoogleBlogger 轉移到 WordPress,這是轉移到 WordPress 之後的第一篇文章。

用過 WordPress 之後才知道 WordPress 的好,WordPress 相對於 Blogger 的優點如下:

  1. 標籤雲、搜尋、繼續閱讀、最新文章、最新留言、分頁…等等基本功能,已經內建在 WordPress 裡了,不需要辛辛苦苦去改範本、研究程式碼,而 Blogger 往往因為手動加了這些功能,而變得極為擁腫。
  2. 可以上傳圖片、影片、音樂…等檔案,以往這些在 Blogger 裡,都需要再尋找額外的網頁空間存放,並且 WordPress 上傳的圖片會自製縮圖。
  3. 對於讀取權限的控管,WordPress 可以做到完全公開、公開給特用用戶、單篇密碼保護、禁止搜尋引摯、完全隱藏。
  4. WordPress 已經內建幾個知名部落格系統的轉移工具,當然包括 Blogger。
  5. WordPress 同時有免費線上部落格(BSP)部落格架站程式
  6. WordPress 的佈景主題(Themes)更多、更漂亮。
  7. 琳瑯滿目的外掛程式,很難找不到你想要的功能。

Read more

下載本站的 Template

訪客留言要索取本站的 Template,不過他沒有留下 E-Mail,所以我就直接打包釋出給大家下載。

這是 Blogger 的 Template,而不是 WordPress 的 Template。

這個 Template 的原始版本應該是來自 DesignfruitBlogcrowds,我把這個 Template 改成 Blogger 可用,並且是 “不限寬度” 的版本,也加入了一些我自己寫的 Script,如果覺得改得還可以的,請直接取用。

安裝至 blogger 時須選取 “展開小裝置範本”,將 template.txt 的內容全部貼上即可,裡面很多連結至 http://citypig.googlepages.com/ 的項目,請自己上傳、更改至自己的網路空間,本站下次如有改版,可能就會全部刪除了。

另外,這個 Template 在 IE 下是有 Bug 的,如果螢幕不夠寬,內容的部份會跑到側邊欄的下面,就等待 CSS 能力比較強的人來解決了。

讓 FCKeditor 瀏覽圖檔時,可以顯示縮圖

FCKeditor 雖然有提供很多種程式語言的檔案瀏覽程式,讓你可以很方便地上傳及插入遠端伺服器上的圖檔,但在瀏覽檔案的同時,我們最需要用到的圖檔卻不能顯示縮圖,感覺很不方便 (應該是故意留了一手)。

雖然官方網站上有建議使用 CKFinder 這支外掛程式來管理伺服器上的檔案,但 CKFinder 卻不是免費的。

思考了一下,雖然我的 PHP 很爛,但只是要做個縮圖的功能應該還難不倒我,於是就花了幾個小時把縮圖的功能實做出來。原理很簡單,只是先在相同目錄下產生 ".thumb.gif" 的縮圖檔,在列示時將縮圖顯示出來。

Read more

解決當 Blogger 的 "隱藏全文/繼續閱讀" 功能因為點選較新或較舊的文章而失效的狀況

在 Blogger 加入 “隱藏全文/繼續閱讀” 的功能之後,會因為點選 Blogger 下方的 "較新" 或 "較舊" 的文章連結而導致功能失效!!

會失效原因是因為你在點 "較新" 或 "較舊" 的連結時,所要切換的內容會以 AJAX 的方式載入,而大家所寫的 “隱藏全文/繼續閱讀” 都是以 JavaScript 所寫的,當 AJAX 直接切換內容時,並沒有觸發到用 JavaScript 所寫的程式,所以,我們要做的就是讓 AJAX 的這個功能失效。

修改 Blogger 範本,點選 “展開小裝置範本”,找到下列原始碼,這些原始碼就是新舊文章的連結,將 “紅色” 的字串去掉,最後再存檔即可:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

將 Blogger 中的標籤改成標籤雲(Tag Cloud)

當 Blogger 中的文章一多,標籤也跟著變多,而 Blogger 的標籤元件就會變得落落長,不好看也不好搜尋。

這時候如果改成 “標籤雲” 就會是一個不錯的作法。在標籤雲中運用字體大小及顏色的變化,就可以很快的找你要的標籤。

修改步驟

  1. 編輯 Blogger 樣板,並 “展開小裝置範本”。
  2. 在 <Style> 區塊內加入:
    #Label1 ul { font-family:Arial; padding:0px; text-align:justify; }
    #Label1 li { display:inline; }
  3. 搜尋 </head>,在上一行加入:
    <script>
    function parseTag(){
      var tagA = document.getElementsByTagName('a');
      for(var i=0; i<tagA.length; i++){
        if(tagA[i].id == 'tag'){
          var tag = tagA[i];
          var width = tagA[i].title;
          tag.style.fontSize = 14 + parseInt(width/5);
          tag.style.color = 'rgb(0,0,' + width*5 + ')';
        }
      }
    }
    </script>

    其中的第 8 行可用來調整字體大小,第 9 行用來調整顏色變化。

  4. 繼續搜尋 <body>,在標籤內的 onload 事件加入:
    parseTag();
  5. 繼續搜尋:
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
      <b:else/>
        <a expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      (<data:label.count/>)
    </li>

    取代成:

    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><u><data:label.name/></u></a>
      <b:else/>
        <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><data:label.name/></a>
      </b:if>
    </li>
  6. 存檔完成。

blogger 資料整理

RSS 相關

  • blogger 的 ATOM/RSS 預設是依更新時間排序,網址為:
    • http://vixual.blogspot.com/feeds/posts/default
    • http://vixual.blogspot.com/feeds/posts/default?alt=rss

    如果要讓它依發表時間排序,網址須改為:

    • http://vixual.blogspot.com/feeds/posts/default?orderby=published
    • http://vixual.blogspot.com/feeds/posts/default?alt=rss&orderby=published
  • Label(標籤)的 RSS 網址:
    • http://vixual.blogspot.com/feeds/posts/default/-/label
    • 將上方的”label“換成 Blogger 上的標籤名稱即可。

  • blogger 的留言的 ATOM/RSS 網址為:
    • http://vixual.blogspot.com/feeds/comments/default
    • http://vixual.blogspot.com/feeds/comments/default?alt=rss

如何讓 blogger 不自動載入 ajax

    在 <body> 的下一行加上:

    <script type='text/freezescript'>
    _WidgetManager._Init=function(){};
    _WidgetManager._SetPageActionUrl=function(){};
    _WidgetManager._SetDataContext=function(){};
    WidgetManager._SetSystemMarkup=function(){};
    WidgetManager._RegisterWidget=function(){};
    </script>

如何讓版面依內文或列示載入不同項目

  • 判斷是否為內文:
    <b:if cond='data:blog.pageType == "item"'>
    載入的項目
    </b:if>
  • 判斷是否為文章列示:
    <b:if cond='data:blog.pageType != "item"'>
    載入的項目
    </b:if>

讓網頁的「外部超連結」自動開啟在新視窗

在編輯網頁時,如果要讓某個超連結 (Link) 開啟在新的瀏覽器視窗,我們可以在超連結加上「href="_blank"」屬性,但如果超連結很多,要一個一個加上去畢竟麻煩!!

以下的程式碼可以幫你把網頁內所有針對「外部」的超連結自動設為在新視窗開啟。

一般網頁

  1. 將下列程式碼加到網頁的 <head> 區段:
    <script type="text/javascript">
    function parseLink(){
      var tagA = document.getElementsByTagName( "a" );
      re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
      for( var i=0; i < tagA.length; i++ ){
        if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
      }
    }
    </script>
  2. 在 <body> 標籤內的 onload 事件加入:
    parseLink();

    Ex:

    <body onload="parseLink();">

WordPress 外掛程式

如果你的網站是用 WordPress 架設,可直接在控製台搜尋並安裝「Open external links in a new window」這個外掛程式 (版本: 1.3.1 作者: Kristian Risager Larsen),這樣就不用添加任何程式碼了。

另外需注意,如果本外掛程式與其它像 LightBox、FancyBox...之類的圖片燈箱特效的程式一起使用,有可能會造成同時顯示燈箱特效,又同時將圖片開啟於新視窗!!

return top