糖醋排骨 » dev

Windows 上使用 Github 手记

interjc — Mon, 05 Sep 2011 07:52:02 +0000

本准备玩一下 Google Code 上的 Git ，孰料 Google 提供的这个服务极其蛋疼，也许是本人才疏学浅吧，那个莫名其妙的 .netrc 文件就是不能让我免于在 pull/push 时输入密码，各种文档和解释也是含糊其辞，忍无可忍，纵然作为一名 Google 粉丝，我也只有投入 Github 的怀抱了（当然，该使用 SVN 的地方还是继续）。直接进入正题吧，首先是环境的搭建（本人使用的是 Git + msysgit + TortoiseGit + Putty 的组合）：

1. 先下载所需要的安装程序：Git、msysgit、TortoiseGit（32bit，64bit）、Putty （以上均为官方下载链接，如担心有毒请自行Google）；
2. 顺序安装以上下载的程序（先关闭所有的窗口，360会报不安全，信任就好），基本就是一路Next了，这个没啥好说的；
3. 注册一个Github帐号：https://github.com/plans，不必理会那些Plans，免费账号就可以创建无限制的开源项目了，只是容量小点（300M，不知道是每月还是总共，反正小项目来说是够用了）；
4. 创建一个新的项目：https://github.com/repositories/new；
5. 在开始菜单中找到Putty的文件夹，打开PuTTYgen（密钥生成器），点击生成，然后出来一个类似于这样的东西（公钥）：

点击保存私钥，随便起个名字随便放在哪（无视关于叫你填写密码的提示）；将图中显示的公钥复制，打开Github中Account Setting页面里的SSH Public Key 选项卡，选择 Add another public key ，将刚才复制的公钥复制进去，随便起个名字，提交；
6. 在开始菜单中找到Putty的文件夹，打开 Pageant ，选择增加密钥，把刚才保存的那个后缀名为 ppk 的私钥导进去；
7. 在 Dashboard 页面的 Your Repositories 栏目下可以找到自己创建的那个项目，点击进去。能得到该项目的 Git 地址，比如我创建的 Shadowblue 地址就是：

git@github.com:interjc/ShadowBlue.git

找到你要放置项目的地方，右键选择 Git Clone , Url 处填入刚才那个地址，点击 “OK” ，项目就应该在本地成功建立了。

然后就是使用了：

1. 在本地项目目录中添加或进行改动以后需要先 Commit（你也可以用命令行，不过我这里示范时使用右键菜单中的 Git Commit -> “master” ）,选择需要提交的改动，点击“OK”，这个时候项目的版本就在本地维护起来了；
2. 选择右键菜单中的 Git Sync .. ，在出现的界面中先选择 Pull，然后 Push，全部顺利的话，就会将本地的版本管理与服务器上的同步了。
3. 使用的时候稍显蛋疼的是每次开机或退出Pageant以后都要重新打开它并导入密钥以后，Git的验证才能通过，不像TortoiseSVN是自动保存的（可能是我没研究透彻吧）在TortoiseGit -> Setting -> Remote -> origin 下的 Putty 项中通过浏览加载先前保存的 ppk 文件并保存，Sync 的时候勾选 Autoload Putty key 选项，每次就会自动打开pageant载入key了；
4. 当服务器上的代码有变更以后，本地必须先 Pull 以后才可以 Push ，有效地避免了 SVN 上你刚上传一个东西，就被别人覆盖掉的坑爹情况，麻烦就麻烦一点吧，习惯就好；
5. 推荐使用 WinMerge 取代 TortoiseGit 自带的 Merge 工具，因为自带那个太蛋疼了。WinMerge 安装以后，在 TortoiseGit -> Settings 中，将 External Programs 下的 Diff Viewer 及 Merge Tool 中的 TortoiseMerge 改为 External ，下面填写 WinMergeU.exe 的路径即可，比如：

D:\Program Files\WinMerge\WinMergeU.exe

当然你如果觉得自带的 Merge 工具更好那就当我这条没说吧～
6. Have fun with Git ~

PS：这里不想讨论 SVN 与 Git 孰优孰劣的问题，有此兴趣的朋友请绕道。

2011/09/13, Louis Han 说: 好一个折腾的过程啊
2011/12/14, 依云说: 我想知道中文编码问题怎么办？commit messages 和文件名，有没有办法在 Windows 上也使用 UTF-8 编码？
2011/12/15, interjc 说: @依云, 没有遇到过这种问题啊。我就经常使用中文message和文件名
2011/12/15, 依云说: @interjc, 我是说，跨平台的时候，以及在 github 上显示的时候，你那边都正常？嗯，还有跨平台 clone 带中文的路径的时候。
2011/12/15, interjc 说: @依云, 这么复杂的情况还真没试过，我一般不使用中文路径
2011/12/15, sooyoo 说: Git和msysgit，难道是不一样的啊。我试了很多次，都没能clone成功
2011/12/15, 依云说: @interjc, 我也不常用。不过有人用了，而且悲剧了。。。
2011/12/15, 依云说: @sooyoo, 一个生活在自己亲生父母身边的孩子，和一个后爹后娘养的，不一样是正常的。
2011/12/15, sooyoo 说: 泪奔，终于可以clone push了谢谢
2011/12/15, sooyoo 说: 你的微博是多少啊？
2011/12/15, sooyoo 说: 找到了，你的微博是：糖醋排骨涅
2011/12/19, interjc 说: @sooyoo, 对的
2011/12/21, Leo 说: 只需要一个msysgit就够了啊，习惯了命令行其实很爽的。
2012/01/12, 独自流浪说: 总觉得Github这玩意在win下面很难驾驭~平时在win里面习惯了可视化操作~ 教程不错，很多新概念了解了~

延展阅读:

图片预读

interjc — Fri, 01 Apr 2011 12:32:46 +0000

尽管我们可以使用CSS Sprites等各种CSS手段来避免页面交互时图片加载延时的问题，但有些情况下依然需要使用JS脚本的手段来实现图片预读。

以下是基于jQuery实现图片预读的方法（用jQuery只是为了方便，你也可以使用原生js或者其他类库），以下代码请放入js文件中或者而无需载入库文件 shadowblue的下一个版本会考虑加入这个功能，自己不想弄的话敬请等待，呵呵。

2010/05/04, Jest 说: @interjc, 嗯用的shadowblue 之前修改的时候打开header.php 看到已经载入"jQuery.js"了也就仅仅只加了载入loading.js的代码我再自己捣鼓一下

2010/06/04, king2z 说: 用上了，但是用上了发现和willin的ajax回复评论有点冲突，那个提交loading按钮一直显示出来，又无奈去掉了。

2010/06/04, 天天天蓝说: 好文章，好好学学下……

2010/06/04, interjc 说: @king2z, 下次修改下代码，弄个更能适应恶劣代码环境的出来

2010/06/27, 凡小爱说: 打开每一页都有着效果？岂不是每一页都要这样做？

2010/06/28, interjc 说: @凡小爱, 动态网页只用添加一处就行了

2010/08/09, 开源博客 · Blog的页面载入效果说: [...] 默默觉得需要一个点击就立刻取消遮罩的功能，可以照顾到网速慢的用户… [...]

2010/08/09, Richard 说: 使用后发现网站展示图片另外一组无法拉动，求解。就是网站第一块使用后无法拉动

2010/08/09, interjc 说: @Richard, 实在看不懂你的意思

2010/08/11, snowxh 说: 请问下这个和Ajax-comment的冲突怎么解决呢 loading的按钮会一直出现恶

2010/08/17, 方丈说: @snowxh, 嘿嘿嘿……被我发现了哇……

2010/08/17, snowxh 说: @方丈, 我贴了传送门的好不好~

2010/08/17, 方丈说: @snowxh, 完了……没有看见……类目……

2010/08/17, interjc 说: @snowxh, 最简单直接的办法是在加上 onload="javascript:document.getElementById('loading').style.display='none';" 既：

这种问题我也不知道是那里引起的，我这也装了不少插件啊，也没这个问题

2010/08/17, snowxh 说: @interjc, 已经解决了~是跟一个 id重名了囧

2010/09/07, 关于本Blog的页面载入效果 - 堕落∮木头's BLOG 说: [...] 默默觉得需要一个点击就立刻取消遮罩的功能，可以照顾到网速慢的用户… [...]

2010/09/09, Fanr 说: 必须得收藏！超级实用，嘿嘿 ~~

2010/10/15, Dawnson 说: 看着不错，试一下去，谢了！

2010/11/01, Weitian Zhao 说: 测试下回复会不会一直loading...

2011/03/18, leaves 说: 很喜欢这个效果，用了，谢过。

2011/04/13, 张衡说: 这个效果，学习了。。。

2011/06/02, 雨丸说: 太厉害了！！！！果然很华丽

延展阅读:

使用jquery和cookies控制select表单

interjc — Mon, 30 Nov 2009 09:56:18 +0000

问题源于一个群里面的提问，在一个网页上添加一个select表单，当用户选择表单的时候，内容区会显示不同的内容，并在该用户下次打开此网页的时候记住这个设置。
像这样的东东一般都会想到要用Cookies来存储设置，方便起见，对于DOM的操作就想到了jQuery（直接写js执行效率会更高，只是，人都是很懒的嘛，呵呵..）。记录下来也算是个笔记吧(Demo)。

首先写这么一个Select下拉表单，以及用来输出被选中项相应内容的块：

然后是用来处理Cookies的函数，其实jQuery有个插件是干这个的，不过貌似有点小Bug，所以我用的是以下函数：

//这一大段代码你没有必要知道它的确切意思，只要复制粘贴就可以了，他们是用来提供操作Cookies的支持的
function setCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function dropCookie(name) {
	setCookie(name,"",-1);
}

然后是用来操作表单和Cookies的js：

$(function(){
    //以下部分是提取Cookie并对网页内容进行预设的过程
	var cityChosen = getCookie('citychosen');  //取得cookie中保存的值
	if(cityChosen!=null && cityChosen!=''){    //如果有这个cookie值
		var chosen = $('#choose option[value="'+cityChosen+'"]');  //绑定cookie中保存的那个城市所对应的选项
		chosen.attr('selected',true);  //使此选项变为选定状态
		$("#output").removeClass().addClass(cityChosen).html("你上次选择了
" + chosen.text());  //为id为output的div添加class为相应城市名称的类，以便在css中分别定义样式，并输出相应文字
	}
    //以下部分是用户对下拉菜单进行选取的时候，将设置存到Cookie，并对相应内容部分进行设定
	$("#choose").change(function(){
		var selected = $("#choose option:selected");  //浏览者选中一个选项	
		var output = "";
		if(selected.val() != 0){  //如果选项的值不为0
			setCookie('citychosen',selected.val(),365);  //将被选中选项的value值存在名为citychosen的cookie里面，有效期一年
			output = "你这次选择了
" + selected.text();  //设定output中的内容
		}
		$("#output").removeClass().addClass(selected.val()).html(output);  //在id为output的div里面输出相应的内容
	});
});

想要效果看得更清楚明白一点，写了一点点小CSS：

*{ margin:0; padding:0;}
body{ font:24px Verdana, Geneva, sans-serif; margin:100px;}
#output{ color:#fff; margin:20px 0; padding:50px; height:200px; width:200px;}
.default{ background:#CCC;}
.beijing{background:red;}
.shanghai{background:blue;}
.wuhan{background:orange;}
.shenzhen{background:plum;}

它们整合起来以后，大概就是如下代码了：


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//[CDATA[
$(function(){
	var cityChosen = getCookie('citychosen');
	if(cityChosen!=null && cityChosen!=''){
		var chosen = $('#choose option[value="'+cityChosen+'"]');
		chosen.attr('selected',true);
		$("#output").removeClass().addClass(cityChosen).html("你上次选择了
" + chosen.text());
	}
	$("#choose").change(function(){
		var selected = $("#choose option:selected");		
		var output = "";
		if(selected.val() != 0){
			setCookie('citychosen',selected.val(),365);
			output = "你这次选择了<br />" + selected.text();
		}
		$("#output").removeClass().addClass(selected.val()).html(output);
	});
});
//以下是用来处理Cookies的函数
function setCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function dropCookie(name) {
	createCookie(name,"",-1);
}
//]]>
</script>
<title>选择表单</title>
</head>
<body>
  <select id="choose">
		<option value="0">请选择城市</option> 
		<option value="beijing">北京</option> 
		<option value="shanghai">上海</option> 
		<option value="wuhan">武汉</option> 
		<option value="shenzhen">深圳</option> 
  </select>
<div id="output" class="default"></div>
</body>
</html>

效果演示可以看这个：Demo

PS：Chrome的安全工作做得可真够彻底的，本地文件居然不可以操作Cookies，害我测试了好久..

2009/11/30, 刀哥说: 很好，俺收下了，只是个中的原理很是不清楚。
2009/11/30, interjc 说: @刀哥, 写的时候急着出门没写说明，以后有时间加上。

延展阅读:

CMS.txt – 超简易的内容管理系统

interjc — Sat, 28 Nov 2009 11:54:41 +0000

CMS并不是一种离我们遥远的东西，从字面上(Content Management System)就可以知道，他只是一个用来管理网页内容的东东而已，比如我现在所使用的Wordpress就是其中的一种，这里我要介绍的是一个核心程序2K不到，即便加上所有示例文件和模板打包起来也才442K的CMS系统，他的名字叫做 CMS.txt 。
使用起来也很简单，根目录的index.php是核心文件基本不用修改，CMS.txt是配置文件，用来管理网站的结构，内有两个文件夹pages和thems，前者用来存放内容，后者存放模板，如果你只是要发布一些内容的话，只需要动配置文件和pages文件夹里的内容就可以了。
如此简洁的东东，最适合用来制作内容不多的小网站了。

废话不多说，马上做了一个，有兴趣的可以到这里看看，以下是截图：

PS：安装和使用CMS.txt需要PHP以及mod_rewrite组件的支持(一般的PHP空间服务商都会提供此功能)。

2009/11/29, FORRSS 说: 不错，我也喜欢简约清爽的东西。
2009/11/29, Louis Han 说: 内容比较少的话这个还是不错的，txt存储配置简单
2009/11/29, interjc 说: @FORRSS, 恩，化繁为简是一种态度
2009/11/29, interjc 说: @Louis Han, 呵呵，用来做小项目的homepage会很不错
2009/12/30, test 说: 为啥子我用了之后how这些页都是404错误呢？我是在本机测试的！没研究过php所以不太会！
2009/12/31, interjc 说: @test, 是不是mod_rewrite组件没有打开.. php.ini里面看看..
2010/01/16, 动漫360 说: Parse error: syntax error, unexpected '&', expecting T_VARIABLE or '$' in /home/xxx/index.php on line 1 这个是怎么回事啊?我的主机支持rewrite的啊！为啥子不能用啊？
2010/01/16, 动漫360 说: 有人碰到和我一样的问题吗？谁能帮忙解决一下？
2010/01/16, interjc 说: @动漫360, 没遇见过这个问题
2010/01/16, 动漫360 说: 我很想用你这个程序！不过报错用不了啊！郁闷死我了！现在特需要这个程序！
2010/01/16, interjc 说: @动漫360, 你确定你用的是PHP主机么？LAMP？
2010/01/16, interjc 说: @动漫360, 我用的很正常哦，LAMP主机..
2010/01/18, 动漫360 说: 我用的是php主机，我上面还有其他的网站呢！而且那些网站也都在使用Rewrite功能，我是学.net的初学者对php不是很懂
2010/01/18, interjc 说: @动漫360, 那我就帮不了你了..
2010/01/18, interjc 说: @动漫360, 你重新下载一个源程序试试，到他官网下载 http://cms.thewikies.com/
2010/01/18, macfee 说: 让我想到了tsys
2010/01/18, 动漫360 说: @interjc, 非常感谢！我自己在研究一下吧！
2010/01/21, interjc 说: tsys是什么呢？

WordPress主题：Grey Cover

interjc — Mon, 26 Oct 2009 09:31:31 +0000

做了一个Wordpress主题，根据其配色方案起名为Grey Cover，顾名思义就是灰不隆咚的一主题，颜色不大鲜艳，侧边栏还是左侧的，还用的是直角，应该算是比较小众吧，希望喜欢这种风格主题的人能够喜欢。

点击下载 | 预览

这个主题有几个特点：

1. 主题内置分类Widget模块，后台小工具(widgets)面板中有可重复使用的模块“分类 Widget”，可以任意拖放至左中右三个Widget Bar中使用，这样就算是一个可随意定制的CMS主题了；

2. 首页及分类、Tag、存档页都使用幻灯片来展示文章列表，这样就可以把下面的大片区域让出来放置更丰富的内容；

3. 幻灯片中可以为每篇文章分别配图(最佳规格为200×100，单位为PX)，添加方法为：在该文章的自定义域添加一个名为 simg 的域，值为你要显示的图片地址；

4. 简单SEO优化、留言回复支持Ctrl+Enter、Widget Ready、通过标准…… 等等必要特性都是有的。

有任何意见和建议欢迎在此或在本主题开发页面留言。

有图有真相：

点击下载 | 预览

PS：欢迎任意转载此主题，但不要修改制作者信息或用于商业用途。

2009/10/28, Louis Han 说: 这个主题比较怪异
2009/10/28, interjc 说: 呵呵，也不算是怪异吧，有点小众吧。

延展阅读:

Wibiya

interjc — Sat, 10 Oct 2009 10:19:00 +0000

Wibiya是一个华丽的blog挂件（~~如我blog底部所示~~），其注册貌似是需要人工审核并由工作人员邀请的。

今天装了一个之后发现其与我所用的jQuery类库有所冲突。找到所有写有jQuery语句的代码，将其中 $ 全部替换为 jQuery ，问题解决。

BTW：这个工具条貌似很好的解决了腿特和脸书翻不过墙的问题。

2009/10/11, Louis Han 说: 太华丽了，拖累速度
2009/10/11, interjc 说: 这玩意儿特意放在了所有js的最后面，即使拖速度也是他自己出不来罢了，呵呵。
2009/10/26, voasia 说: 那个中文名叫作"非撕不可"
2009/11/07, 同城说: 目前刚装上去，速度感觉还可以吧，因为是门户型的网站，所以一些功能去掉了，目前因为Wibiya还不支持GB2312编码，而网站已经成型，整站改成UTF-8比较麻烦，所以语言选择了英文。如果以后速度比较慢的话可以用jQuery的ready等所有DOM对象加载完毕再加载他的脚本，这样应该就不会太影响速度了，当然这需要我们自己再加载一次jQuery脚本，这个也会影响点速度，不过对本身就有用到jQuery的应该没什么太大影响，实在不行也可以把里面的ready函数提取出来单独使用，这样影响会更小吧。台州同城派送（ http://www.tztcps.com ）网站已经装上了Wibiya工具条，欢迎大家围观
2009/11/07, 骨头软件工作室说: 我换新域名了,换下新链接!
2009/11/07, interjc 说: 呵呵，和我用的方法差不多，我是用jQuery在DOMReady以后才在页尾插入这个Wibiya代码的..
2009/11/07, interjc 说: 抱歉，你以前的网址是？还有你貌似没有链接到我把
2009/11/09, 城市之岛说: 写的文章不错。互访中

一个jQuery+CSS幻灯片播放器

interjc — Thu, 08 Oct 2009 15:48:34 +0000

写了一个幻灯片播放器，是用纯jQuery+CSS写的，如果你不喜欢Flash幻灯片播放器可以试试这个。其主要特点是高度宽度可以自由重新设定，幻灯片的数量也可以自由增减（当然也不能过于离谱..），使用jquery+css节省了代码，使载入更迅速..等等..

效果是这样的，请点击这里。

安装方法很简单，首先在合适的地方（你想要插入幻灯片的地方）插入以下代码：

然后找到你的header.php（假设你使用Wordpress），在/head标签之前添加如下代码：