2013年1月24日星期四

為你的Blogger加入新式上一篇/下一篇文章連結

其實很多Blog Engine的previous/next->post/page都很不顯眼,即使如WordPress,很多Themes的設計都同樣冷落這兩個連結按鈕。

至於Blogger也不例外,樣式不吸引,而且所在位置是頁面的最下方,就是那麼不起眼。


當然透過CSS,你可以把它改變成大圖案大文字去吸引目光,但其實透過小小的jQuery Plugin就可以做到現在本Blog的效果。


所使用的plugin叫jcLeftRightKeyNav
可以試試官方的Demo,其中一個特色是支援Keyboard的左右鍵。

官方Demo無論連結和文字都是靜態的,
所以我還作出了少少修改 -
1. 把Blogger的Post Title,Prev/Next連結,Dynamic地連結至該Plugin。
2. 把Post的Thumbnails加上伸展標籤位置。

若覺得有點抽象,或者可以試試本站的實際使用情況,你應該會見到頁面兩旁有Previous/Next的浮動按鈕。

使用方法:
1. 下載jcLeftRightKeyNav,上傳至網絡空間或DropBox

2.在Blogger的HTML/JavaScript小工具貼上以下Code :
<!-- CDN Hosted jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/></script>
<script type="text/javascript" src="[PathTo]/jcSimpleLeftRightKeyNav.js"></script>
<link href="[PathTo]/jcLeftRightKeyNav.css" rel="stylesheet" type="text/css" />

3. 現在就到Hack的部份。跟上面同一位置,再貼上後儲存,便完成。
<script type="text/javascript">
$(document).ready(function(){
  //If the current page is posts list, exit. The script should run when viewing post.
  if ($('div.date-outer').length > 1)
   return;
  
  //variables
  var prevtitle = '', prevmeta = '', previmg = '',nexttitle = '', nextmeta = '', nextimg = '';
  //Use your favor image when the post is no thumbnail.
  var noimage = 'http://ultraimg.com/images/t36d6d.png';
  //Get the prev/next href src.
  var prevsrc = $('#Blog1_blog-pager-newer-link').attr('href');
  var nextsrc = $('#Blog1_blog-pager-older-link').attr('href');
  
  //Perform jQuery ajax to blogger mobile version and get the title and thumbnail.
  $.ajaxSetup({ cache: false, global: false,async: false });
  if (prevsrc != null)
  {
   //Append "?m=1" to blogger url to visit mobile version.
   $.get(prevsrc + '?m=1' ,{ "_": $.now() },  function(data) {
     prevtitle = $('h3.post-title.entry-title' , data).text();
     prevmeta = $("meta[itemprop='image_url']" , data);
     if ($(prevmeta).html() == undefined)
     previmg = noimage;
     else if ($(prevmeta).attr('content').indexOf('-Ic42/') > -1)
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-Ic42/");
     else if ($(prevmeta).attr('content').indexOf('-c-Ic42/') > -1)
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-c-Ic42/");
     else 
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200/");
     
   });
  }
  if (nextsrc != null)
  {
   $.get(nextsrc + '?m=1' ,{ "_": $.now() },  function(data) {
     nexttitle = $('h3.post-title.entry-title' , data).text();
     nextmeta = $("meta[itemprop='image_url']" , data);
     if ($(nextmeta).html() == undefined)
     nextimg = noimage;
     else if ($(nextmeta).attr('content').indexOf('-Ic42/') > -1)
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-Ic42/");
     else if ($(nextmeta).attr('content').indexOf('-c-Ic42/') > -1)
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-c-Ic42/");
     else 
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200/");
   });
  }
  
  //Finally, run jcLeftRightKeyNav.
  jQuery().jcNextPrev({
       prevLink: prevsrc,
       prevLinkText: "<img src='" + previmg + "' />" + "<br />" + prevtitle,
       nextLink: nextsrc,
       nextLinkText: "<img src='" + nextimg + "' />" + "<br />" + nexttitle
  });

});
</script>

其實沒有太複雜的地方,應該看comment都已經足夠說明。
唯Thumbnail(預覽圖)可以解說一下。

若你跟我都是用Picasa Web或Blogger內建的上傳做圖片連結,
Blogger的預覽圖是會自動產生,Blogger會自動抓取你Post文中第一張圖片做預覽圖Url。
故為什麼要設置NoImage,因為有機會Post中沒有圖片可抓。

若果圖片都是其他網域的話,很遺憾就沒有預覽圖了。
例如這個Post是用Facebook的,當你View Source時,你會找不到任何有關預覽圖的資料。

2013年1月16日星期三

Solved!! Illegal mix of collations for operation 'concat'

今天解決這個了MySQL Error,錯誤出現在Stored Routines (Stored Procedure)當中的Concat function

因為我公司那個MySQL DB Schema設計十分差,Database / Table /Column的collation都有不同。
所以原因已經說得很明,估都不用估肯定是collation的原因。

但我公司的Production環境是MySQL 5.0版本,並沒有這個錯誤出現。
而我今天下載XAMPP最新版本,是MySQL 5.5版本,把5.0的DB migrate至5.5就得知這個問題。

上網找了很久很久,十個解決方法,有九個都不外乎說在my.ini加入以下設定:
[client]
default-character-set = utf8
[mysqld]
skip-character-set-client-handshake
init_connect="SET collation_connection = utf8_general_ci"
init_connect="SET NAMES utf8"
collation-server=utf8_general_ci 
#collation-server=utf8_unicode_ci
character-set-server=utf8
[mysql]
default-character-set=utf8

不知道其他人怎樣,但對我來說,都是解決不到,同樣的錯誤出現。
最後找到的方法是直接在Concat語法中設定String的Collate。
用法如下 : (省略了很多沒關係的)
DECLARE Usage DOUBLE; #Variable
DECLARE ins_query VARCHAR(500); #Dynamic SQL
#MemberID  & MemberID are [IN] Parameters.

SET ins_query = CONCAT(
     CONVERT('Select @Usage:=Count(*) from Sales Where ' USING UTF8) , 
     CONVERT(CASE MemberID WHEN '' THEN '' ELSE CONCAT('MemberId="',MemberID,'" AND ') END USING UTF8), 
     ' CompanyId = ' , CompanyID , ';');

SELECT ins_query;
set @ins_query=ins_query;
PREPARE ins_query from @ins_query;
EXECUTE ins_query;

沒錯,就是那句USING UTF8了,把各個String都做一次設定就可以了。
如果還是不行,試試執行下列的Query,看看collation_server是不是跟其他的一致。
show variables like '%coll%'

2013年1月8日星期二

建立Windows Git Server 失敗記

本來現在來說,如非工作上要求,實在沒有理由不用網絡上的Git服務,而自架Git Server。
不過本著學習理由,今天花了半天去自建,最後結果可說是半失敗,得出來的Git Server是可Clone,不可Push。

2013年1月4日星期五

GSmartControl - 觀看RAID HDD的SMART狀態

我現在的電腦都用了接近4年,硬碟是用ICH9R建的RAID-1,近期硬碟開始很吵,所以想看看SMART有沒有什麼異樣。

其實這類HDD的Health Monitor軟件都很多,但不是每隻都支援RAID的子集HDD。

所以就找來一個免費軟件叫GSmartControl,可以從RAID集合中,獨立觀看個別HDD的情況。
這軟件同樣是我最愛不用安裝的Unzip & Run軟件。

官方的介紹:
  • automatically reports and highlights any anomalies;
  • allows enabling/disabling SMART;
  • allows enabling/disabling Automatic Offline Data Collection - a short self-check that the drive will perform automatically every four hours with no impact on performance;
  • supports configuration of global and per-drive options for smartctl;
  • performs SMART self-tests;
  • displays drive identity information, capabilities, attributes, and self-test/error logs;
  • can read in smartctl output from a saved file, interpreting it as a read-only virtual device;
  • works on most smartctl-supported operating systems;
  • has extensive help information.



Microsoft Ajax CDN Down Time

早在10月時我自己都經歷過一次 - Microsoft Ajax CDN NO Response

日前國外有人發現Microsoft的CDN再次出現死機情況。

Microsoft's Ajax CDN tumbles worldwide
Twitter : Dammit! http://ajax.aspnetcdn.com is down, @Microsoft any ideas when it will come back up?

現在的CDN都是寄存一些比較核心的JS,一旦有什麼問題,就導致其他Self-Host的JavaScript都不能工作。
其實自從上次"災難"後,我現在認為不要太過依賴CDN,特別是公司裡頭的Web程式,
那怕是因為CDN,或Firewall還是其他因素導致程式出現Error,
始終End User只看結果,只要見到Javascript Error就會認為是程式問題,多冤枉呢。