如果有什么bug，请反馈给我，谢谢！

2011.12.02:更新支持最新版的Doit.im任务打印功能。

具体点击以下页面进行查看吧。

PrintDo! Just click it!

Doit.im是一款GTD软件，它支持多平台运作，不论您在web、iPhone、Android、Windows客户端、或iPad，都能使用Doit.im管理您的待办任务。

目前功能：
添加/编辑/删除任务
添加重复任务/转发任务/提醒任务
添加联系人
添加情境/项目
双击任务列表的单条任务可以查看任务详细信息
可以对任务列表的任务进行拖拽操作
10分钟自动同步任务到服务器
…
更多更强大功能可以尝试使用Web版Doit.im

2010.12.30:发布Mac版Doit.im alpha版。 中文版下载(115网盘) Download English Version(115 rapidshare Fileape FileDude MediaFire)

2011.01.08:
1.增加空任务箱子的说明提示
2.修正愚蠢的导致联系人界面显示错误的bug
3.增加任务到期及过期任务在列表上的提示信息
4.账户设置下拉选项中增加反馈链接
5.增加时间视图下添加任务高亮任务所在箱子的动态效果
6.调整快速 添加输入框到任务列表顶部
7.修复用户-时区造成的任务显示问题
8.其他一些bug修正以及改进
9…..

1.Instruction showed when the box’s blank;
2.The stupid bug which causes error on Contact page fixed;
3.Due day,days overdue and days left showed on task bar;
4.Feedback link added;
5.Highlight effect showed on the box where task is added;
6.Quick-add column adjusted to the top of task list;
7.Other bugs fixed and performance improved.
8.Fix – Timezone task show problem
9…..
中文版下载(115网盘) Download English Version(115 FileDude )

声明：此版本并非官方版本，官方原生Mac版将于1月份左右发布，这个版本纯粹的个人兴趣项目，基于官方的Linux版本修改。@heymi界面设计，我@leeiio样式和脚本修改以及移植。

下面才进入本文正题…

用了pinboard.in后，以前记录在Read it later的记录就需要迁移过来，而他们官方没有直接提供导出的功能，但是提供了API，于是动手折腾了一个，在@cyril_liu童鞋的后端支持下，就有了Read it later exporter。导出为书签文件后，你想往拿导入都可以，可以导入pinboard.in当然也可以导入回你的浏览器书签。

Read it later exporter Just click it!

最后的PS:消失了挺长一段时间了，你知道的，我现在正在做一个很棒的产品，而且加上我比较懒，所以更新缓慢，其实很多都在草稿箱一直都没有发出去，罪过罪过。博客写不动了都，还是写微博舒畅，可以follow我的twitter:@leeiio 或者腾讯微博神马的，ID都是这个。话说，今天饭否开饭了…

靈感來自牛逼的 Shawn，他博客上面的他自己的評論都是在左側加了空心的星星，但是他的最後回覆則是綠色的星星，這樣給訪客的感覺就是作者只回覆到了這裡，或者換種理解的意思就是“已閱到這個評論”，有點類似論壇裡面可能常看到的“已閱至此樓”的插件功能。當然你也可能會覺得這個功能無足輕重，但是我覺得還是挺有意思的，可以讓訪客知道作者有多久沒來過了，因為一般來說，看到自己的博客有人評論的話肯定會先回覆的吧。

本人的 jQuery 也都是些皮毛功夫，代碼寫得不好也見笑了，歡迎批評指正。

如果還不是很明白這個功能所表達的意思的話，你可以先看看下面這個截圖。

就如截圖種的這樣，只是給某篇日誌該作者的最後評論回覆加一個標註，可以是一個圖片也可以是一些提醒文字，本文講的是用圖片來標註的。請接著往下看。

準備工作：

首先得確定你的主題中評論頁面裡面，作者的評論和訪客的評論是否具有不同的樣式，比如我的評論區域訪客的 class=”comments”，而作者的評論樣式是 class=”comments”，不然下文就不能判斷並篩選出作者的評論了。如果發現自己的主題並沒有這樣的設計，那麽你可以 google 下怎麽設計這個功能代碼，或者可以參考我提供給你的方法。

區分作者評論和訪客評論的樣式方法：
打開 comments.php 頁面，在任意処加入以下代碼(必須在評論輸出的代碼片段之前)，比如我的每一個評論都是用 li 標簽來包裹的，那麽你可以選擇加在以下代碼之前

1

<li class="<?php echo $oddcomment; ?> comments ?>" id="comment-<?php comment_ID() ?>">

修改後的代碼

1
2
3
4
5
6
7

<?php
	$isByAuthor = false;
	if($comment->comment_author_email == 'xxxxxx@gmail.com' ) {
		$isByAuthor = true;
	}
?>
<li class="<?php echo $oddcomment; ?> comments<?php if($isByAuthor ) { echo "-author"; } ?>" id="comment-<?php comment_ID() ?>">

將上面的代碼中的email地址修改為你自己的 email，代碼的作用就是判斷你填寫的 email 來區別你的評論與訪客的評論。

完成了以上的準備工作之後下面就開始進入本文的重點了。請看以下這段代碼：

1
2
3
4
5
6

<script type="text/javascript">
$(document).ready(function(){
var lastbyauthor = $('ol.thecomments').find('.comments-author:last');
$(lastbyauthor).css({"background":"#FAFAFA url(images/lastbyauthor.png) right 10px no-repeat"}).attr('name','lastbyauthor').find('div.commentcount a').attr({title:"作者最後的評論回覆"});
})
</script>

將以上的代碼加入到你模板文件的 或者 之前即可，當然你也可以加入到自己的 js文件裏。

我大致講解下這段 jQuery 代碼，我這裏定義一個變量 lastbyauthor，$(‘ol.thecomments’) 就是你的評論顯示區域的外面所包裹的標記，大部分主題都是用 ol 標記的，然後在這段 ol 所包裹著的代碼中用 find() 函數查找出最後的一個 樣式為 class=”comments-author” 的那段評論。然後對這段評論的樣式進行特殊的 css。懂的人可能看出來了我這裏還定義了一個 name 屬性，名字為 lastbyauthor，這是為了給作者最後的評論添加錨標簽用的，不用 id 是因為每一個評論都已經擁有一個數據庫生成的評述數了。

比如你可以在評論模板的任何地方添加以下代碼：

追蹤作者<a href="#lastbyauthor" style="color:red">最後的軌跡</a>!

效果：點擊後面的紅色文字追蹤作者最後的軌跡!

當然，你還需要準備一張類似如下的醒目提醒圖片：

是不是覺得很簡單。不知道對於新手的話我說得是不是夠詳細了，如果還有不明白的可以給我回復，我都將一一耐心講解回復，謝謝惠顧！

讓頁面頭部最後加載，說到底就是控制網頁內容的加載順序，好處 5key 已經在他的博文里提過了，但是我覺得好處不單單是他提到的那些，我再歸納一下吧。因為考慮到你的網頁可能會調用很多外部的 js 文件，主要來自與各大服務商的各大服務調用，比如 Feedsky 的訂閱數圖標，比如一款叫做鲜果推荐按钮的 WP 插件(以前我的 blog 經常因為鮮果網站當機而導致加載卡在一個地方好久下不來)，又比如現在很流行的 Twitter 的 Api 輸出狀態信息以及 google friend connect 的掛件等等等諸如此類的服務，因為都是外部調用的，誰也無法保證服務商隨時當機的可能性。而同時我們又知道網頁默認的加載順序都是從上至下加載的。所以這時候通過 css 絕對定位那些外部調用的服務就顯得很有用處，把那些調用寫到網頁的底部去，這樣網頁加載的時候就不會卡住了，然後通過 css 的 position:absolute 絕對定位到網頁的顯示位置去，此法不錯，這時候 Evance 同學說話了，他認為 css 的絕對定位不應該被用作排版而该用来结构内容，我的觀點是絕對定位雖然定位很精確，但是如果你需要定位的那些東西都是很零散地分佈在網頁各處的話，我想這有得你忙的了。

當然改變網頁內容的加載順序的好處還沒有說完，他同時也可以 SEO 你的頁面，可能有些同學已經抱著這個目的在各自的網站實施了，對那些還沒明白過來的同學們我這里就說說吧。

因為你知道網頁的加載順序是從上往下的，而搜索引擎爬蟲爬取你的網頁的順序也是從上往下的。
所以讓一些不想出現在網頁頭部而遮擋了頁面正文的那些網頁內容我們統統可以移到頁面底部去，這樣爬蟲爬你網頁的時候最先獲取的才有可能是你的頁面正文內容。當然你可能要說我有在 head 里加入 description 啊，並且正文標題也是 H1 標記的，搜索引擎應該會先考慮這些吧，我只想說的是任何 SEO 的技巧都是拿來參考的，并不是那麼絕對的事情，除非你是某家搜索引擎公司的核心技術開發，隨時可以掌握搜索引擎的脾氣。

目前我的博客的做法是頂部導航以及頭部 banner 因為是一整個 DIV 包著的，並且在頁面頂部，所以很容易就用 css 絕對定位搞定了。至於文章頁面的標題下面的 meta 信息(發佈時間及分類等)，我是用另外一種方法實現的。那就是 jQuery。

標題未加載完全

標題加載完全

先看這個 Demo 框架，比較簡陋，主要說說 jQuery 實現的原理。

1
2
3
4
5
6
7
8

<div id="header">啦啦啦</div>
<div id="main">
	<div class="title"></div>  
	<div class="meta"></div> //這裡是先佈局定位好，然後jQuery會將放在footer的meta複製到class="meta"的div裡面 
        </div>  
<div id="footer">  
<div class="metac">我是文章的meta信息</div>  
</div>

jQuery 代碼：

1
2
3

<script type="text/javascript">
$('.metac').children().clone().appendTo('.meta');
</script>

當然也可以這樣寫:

1
2
3
4

<script type="text/javascript">
var clonemeta = $('.metac').html();
$(clonemeta).appendTo($('.meta'));
</script>

其實，還可以寫成這種簡潔的形式( xiaorsz提供 )

1
2
3

<script type="text/javascript">
$('meta').html($('#metac').html());
</script>

當然還需要一個 css，不然底部的 class=”metac” 的 Div 圖層也會顯示出來了。

1

.metac{ display:none }

實現原理:

正如那個簡陋的 demo 代碼所示，本來在 class=”title” 的下面有個 class=”meta” 的 div，但是他是空的，他的作用就是佔位佈局並且接收放在 id=”footer” 的 div 裡面的 class=”metac” 的 div 里的內容。當然 class=”metac” 的 div 是可以隨意擺放的，這樣就達到了改變網頁內容的加載及顯示順序的目的。

是不是很簡單。只消用 jQuery 的 clone() 函數就可以搞定這個效果。

此法的弊病就是加入瀏覽器不支持 js 或者禁用 js 的話那就玩兒完了。另外改變了網頁內容的加載順序之後，可能會造成頁面加載的時候給客戶帶來不美觀的感受，畢竟一塊一塊的空白給人的感覺肯定不會很好。

本人是 jQuery 初學者，代碼寫的如果不是最好的表達方式，請指正。

任何的平鋪直敘都抵不住你我的激動人心以及非比尋常。
LOGO V1成品，此致敬礼。
敬请期待。

因為本站使用的是繁體漢字，而我們大陸的大部分人都是使用的簡體漢字，所以我在頂端導航處加了“繁簡切換”功能。考慮到更好的用戶體驗，所以我決定在正文部分加上一些警示文字。但是呢，如果來訪的用戶如果是台灣或者香港地區的，那麼警示文字顯得有些多餘且沒必要，所以需要對其進行語言判斷。網上很多用到的方法大都是對來訪的ip進行判斷，但是如果用戶使用了代理或者在外等一些情況，那麼可能會顯得有些不准確。所以我考慮了下通過瀏覽器的語言設置進行判斷，雖然說不能排除某一小部分人可能喜歡用英文的語言設置，但是大部分還是奏效的。

實現的原理：

瀏覽器發給web服務器的 HTTP Headers Information 中包含了這樣一個信息 Accept-Language這個信息就是，瀏覽器中 工具->Internet選項->常規 下的 語言，它就是用來設置瀏覽器可接受的語言首選項的， 它可以是多種可接受語言的優先排序列。
　　以PHP為例，用戶可接受的語言信息，放在$_SERVER['HTTP_ACCEPT_LANGUAGE']裏，變量信息是類似這樣的 “zh-cn”，如果是多語言列，是類似 “zh-cn,en;q=0.8,ko;q=0.5,zh-tw;q=0.3″這樣的情況。

戳我進入判斷當前使用的瀏覽器的語言設置

因為本人對php幾乎一竅不通，當時就直接用if語句寫個個判斷，如下:

1
2
3
4
5
6

<?
if($_SERVER['HTTP_ACCEPT_LANGUAGE']=="zh-cn" )
{
echo "经雷达探测，您使用的语言为新中国的简体汉字，为避免晕车，请使用顶端导航的繁简切换功能，謝謝 !";//当是簡體中文的时候
}
?>

但是你的瀏覽器可能并不是只有一種語言設置，例如firefox默認的語言設置就是zh-cn,zh;q=0.5,opera國際版的是zh-CN,en;q=0.9,fr;q=0.8,ja;q=0.7,de;q=0.6,es;q=0.5,it;q=0.4,pt;q=0.3,pt-PT;q=0.2,nl;q=0.1,sv;q=0.1,nb;q=0.1,da;q=0.1,fi;q=0.1,ru;q=0.1,pl;q=0.1,zh-TW;q=0.1,ko;q=0.1，所以此法並不可取。google了近半個小時，查到了php的preg_match()函數，大體就是可以自定義一個規則來和某一個參數進行匹配，所以判斷的語句修改成如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
error_reporting(E_ALL ^ E_NOTICE);
 
preg_match('/^([a-z\-]+)/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'], $matches);// 分析 HTTP_ACCEPT_LANGUAGE 的屬性
$lang = $matches[1];// 取第一語言設置
 
switch ($lang) {
        case 'zh-cn' :
                echo "经雷达探测，您使用的语言为新中国的简体汉字，为避免晕车，请使用顶端导航的繁简切换功能，谢谢 !";
                break;
        default:
                echo "經雷達探測，您使用的語言目前超出本站的想像範圍，您確定您看得懂中文?";
                break;
}
?>

部分瀏覽器的語言顯示大小寫可能有問題，比如我所使用的opera顯示的是zh-CN，所以我們要繼續完善它，成品如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<?php
error_reporting(E_ALL ^ E_NOTICE);
 
preg_match('/^([a-z\-]+)/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'], $matches);// 分析 HTTP_ACCEPT_LANGUAGE 的屬性
$lang = $matches[1];// 這裏只取第一語言設置 （其他可根據需要增強功能，這裏只做簡單的方法演示）
 
switch ($lang) {
        case 'zh-cn' :
                echo "经雷达探测，您使用的语言为新中国的简体汉字，为避免晕车，请使用顶端导航的繁简切换功能，谢谢 !";
                break;
        case 'zh-CN' :
                echo "经雷达探测，您使用的语言为新中国的简体汉字，为避免晕车，请使用顶端导航的繁简切换功能，谢谢 !";
                break;
        case 'zh-hk' :
                echo "經雷達探測，您使用的語言為中國傳統繁體漢字，為本站所推崇文字，祝您旅途愉快!";
                break;
        case 'zh-HK' :
                echo "經雷達探測，您使用的語言為中國傳統繁體漢字，為本站所推崇文字，祝您旅途愉快!";
                break;
        case 'zh-tw' :
                echo "經雷達探測，您使用的語言為中國傳統繁體漢字，為本站所推崇文字，祝您旅途愉快!";
                break;
        case 'zh-TW' :
                echo "經雷達探測，您使用的語言為中國傳統繁體漢字，為本站所推崇文字，祝您旅途愉快!";
                break;
        case 'en-us' :
                echo "經雷達探測，您使用的語言為英文，您確定你看得懂中文?";
                break;
        default:
                echo "經雷達探測，您使用的語言目前超出本站的想像範圍，您確定您看得懂中文?";
                break;
}
 
?>

具體的效果可見本blog的文章上端的提示文字，或者把代碼存成php放在自己網絡空間測試。如發現顯示不準確，請訪問http://guaniu.com/test/lang.php探測你的瀏覽器的語言設置，然後給我回覆，謝謝！

下面切入正題，先看看這段代碼:

1
2
3
4
5

$(document).ready(function(){
	$(".title").click(function(){
		$(".content").slideToggle("slow");$(this).toggleClass("off")
	});
});

很簡單的一段代碼，功能也能簡單。實現的原理就是當鼠標點擊樣式為.title的元素後，對樣式為.content的元素進行伸或縮的操作，並且改變原來被點擊的元素的樣式，這樣的用戶感受度就不錯了，可以讓用戶對哪些是可以點擊伸縮的元素一目了然。

下面的是一個sample的完整代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>伸縮導航</title>
<style type="text/css">
body{background:#000}
div,h2{padding:0px;margin:0}
.title{width:180px;background:#ccc;height:20px;line-height: 20px; font-size:12px;text-align:center;}
.off {background:#777;color:#fff}
.content{width:170px;height:300px;font-size:12px;background:#fff;padding:5px;}
</style>
<script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".title").click(function(){$(".content").slideToggle("slow");$(this).toggleClass("off")});
});
</script>
</head>
<body>
 
 
<h2 class="title">我是一个可点击标题</h2>
<div class="content">
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。<br />
<strong>返回值:</strong>jQuery<br />
<strong>参数:</strong><br />
speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) : (可选) 在动画完成时执行的函数
</div>
</body>
</html>

代碼很簡單，本人的處子jQuery，多謝捧場！～

只是一個flash試驗作品。僅供個人娛樂