SaNy's Blog

这是一条测试信息

SaNy — Mon, 05 Dec 2011 20:03:17 +0800

google appengine转正式运营后数据读写的配额严重缩水，blog最近一直处于空闲状态。现在有高人做了缓存处理。来测试下。

11.12

SaNy — Sat, 12 Nov 2011 19:31:30 +0800

换了工作，比较忙机会没怎么更新了。。。

2011.10.17

SaNy — Mon, 17 Oct 2011 17:44:24 +0800

最近忙忙碌碌的也不知道在忙的啥~blog也没更新闲暇的时候就看看新闻.人变的很懒。

上周朋友跟我说他们那招网站美工，周五跑过去面试了下然后叫我回家做个他们公司的网站首页，再然周末2天又窝在电脑前忙起来~。因为不是学这方面出身的搞起来还是蛮有压力的~毕竟我也没太多做公司网站美工的经验。也就抱着试试看的想法~。昨天晚上发了过去今天收到回复邮件，“还是不够美观细致”。哎表示鸭梨好大~

http://www.tnnde.com/static/exz/index.html

本文网址:http://www.tnnde.com/2011/10/329002.html

Micolog文章页显示当前位置之使用JS锁定

SaNy — Sun, 02 Oct 2011 10:35:31 +0800

好久没更新了说实话也不知道说些什么~国庆假期无聊来写点啥~

大家经常可以发现有的网页会显示当前你所在的位置~方便访客。我也没事搞了一下使用的是JS实现的~因为我的文章层次不多作用的话不是很明显。紧是一个不一样的思路吧。

function locate(){
	var glink= location.href;  //当前URL
	if(glink.indexOf(".html") > 0 ){  //判断URL中是否包含.html
	     lotext=$("a.locate:first").text(); //获取a.locate的第一个文本
	     lohref=$("a.locate:first").attr("href"); //获取a.locate的第一个链接
	     posttl=$(".post-title-single a").text(); //获取文章标题
		 $("#locate").html('You are here: <a href="http://www.tnnde.com/" rel="norefresh">Home</a> » <a href="'+lohref+'" rel="norefresh">'+lotext+'</a> » '+posttl+'');  //输出
	}
}

修改host翻墙上google+1

SaNy — Mon, 05 Sep 2011 02:43:08 +0800

修改C:\Windows\System32\drivers\etc\hosts文件，加入下面内容~

203.208.46.144 lh1.googleusercontent.com

203.208.46.144 lh2.googleusercontent.com

203.208.46.144 lh3.googleusercontent.com

203.208.46.144 lh4.googleusercontent.com

203.208.46.144 lh5.googleusercontent.com

203.208.46.144 lh6.googleusercontent.com

203.208.46.144 lh7.googleusercontent.com

203.208.46.144 s1.googleusercontent.com

203.208.46.144 s2.googleusercontent.com

203.208.46.144 images1-focus-opensocial.googleusercontent.com

203.208.46.144 images2-focus-opensocial.googleusercontent.com

203.208.46.144 images3-focus-opensocial.googleusercontent.com

203.208.46.144 webcache.googleusercontent.com

203.208.46.144 picasaweb.google.com

203.208.46.144 plusone.google.com

203.208.46.144 plus.google.com

如果访问不通请自己 ping google.cn 获得新的IP~

本文网址:http://www.tnnde.com/2011/09/288088.html

google+1按钮Ajax后的显示问题

SaNy — Sun, 04 Sep 2011 03:17:25 +0800

UPdate:由于之前的疏忽没有考虑到访客进入时候的地址不同~照以前的判断若不是主页进入显示的位置和返回的地址都错误做此更新

var glink= location.href;   //获取当前url
if(glink.indexOf("#") > 0 ){  //判断url中是否含有“#”，没有则跳至步骤2
	glink=glink.substring(glink.indexOf('#')); //截取“#”到最后的字符
	glink=glink.replace("#","");               //删除“#”
	if(glink.length<3){                        //如果glink小于3个字符则判定为首页
		  $("li.gjia").html('<g:plusone href="http://www.tnnde.com"></g:plusone>');
		}
	else{                                      //否则就是文章页或单页
		$("li.gjia").empty();
		  $(".singleplusone").remove();
		  $(".post-title-single,#post-title-page").append('<div class="singleplusone"><g:plusone href="http://www.tnnde.com'+glink+'"></g:plusone></div>');
			}
		}
else{ // 步骤2.URL中没有“#”跳到这
	if(glink.length<22){                      //小于22个字符为首页
		$("li.gjia").html('<g:plusone href="http://www.tnnde.com"></g:plusone>');
	}
	else{
		$("li.gjia").empty();
		$(".singleplusone").remove();
		$(".post-title-single,#post-title-page").append('<div class="singleplusone"><g:plusone href="'+glink+'"></g:plusone></div>');
	}
}

Old:在google刚出+1按钮的时候就尝试使用了，只后站内时候了Ajax，加载后不能显示按钮~也就搜索引擎进来的时候可以正常显示，后来索性也就去掉了。奈何上段时间发现这google+1按钮被墙了。估计是因为google+的社交被和谐的原因。万恶的GFW。近日忽然兴起重新加上，并且实现ajax后继续显示。当然由于经常被墙估计部分人是看不见的，有时候能穿越GFW显示出来。不过应该不少人在使用Proxy Switchy这样的自动翻墙工具，这样只要把plusone.google.com设为过滤目标~就能正常显示+1按钮了。下面来介绍下主要思路~

大家都知道google+1按钮是通过<g:plusone></g:plusone>这样的标签再挂上提供的JS。这样就会默认读取当前的url提交给google。当然google也可以让你定义这个标签的，如添加href=""指定要+1的地址而不是由JS读取当前的url。这里ajax的显示就用到了这个特点。

大家都知道ajax后的页面是不会执行ajax来页面的JS的。这就就要从ajax的js中来完成这个功能了。在ajax返回成功之后获取当前的url。

var glink= location.href;

因为ajax后为了激活返回按钮使用了hash，获得的glink是地址肯定是http://www.tnnde.com/#/xxxxx这样的。这不是真实地址。要重新构建地址这里有几个方法

//一种截取
glink=glink.substring(glink.indexOf('#'));//截取#后的字段
glink="'location.host'glink.replace("#","")";重新构建url
//二种截取
glink=glink.replace("#/","");
glink=glink.replace("/!","");

这样重新构建之后就glink就是真实的地址了。或者你也可以根据点击连接的href。var glink=$("a").href;

获得真实地址后就是输出<g:plusone></g:plusone>标签了。因为我首页和文章页的显示不同。这里还要做个判断

if(glink.length<22){   //如果地址长度小于22个字符串就执行下面
	        $("li.gjia").html('<g:plusone href="'+glink+'"></g:plusone>'); //输出到.gajia中
		    }
		else{  //如果地址长度大于22个字符串就执行下面
			$("li.gjia").empty();  //清空.gjia内容和字节点
			$(".singleplusone").remove(); //删除.singleplusone和里面的所有内容
			$(".post-title-single,#post-title-page").append('<div class="singleplusone"><g:plusone href="'+glink+'"></g:plusone></div>'); //如果在单页就输出到#post-title-page，文章页就输出到.post-title-single
		}

成功输出标签之后还是不会显示，ajax后调用的plusone的JS是不会执行的。还需要执行下JS

$.getScript("https://apis.google.com/js/plusone.js");

到这里AJAX也就完成同时完成了标签的构建和执行显示。

把Google Code搬回家

SaNy — Thu, 01 Sep 2011 08:09:08 +0800

相信有不少朋友都在使用googlecode的项目托管存储些东西~但是有没有想过在网页中调用存储的东西呢?如果你对此敢兴趣的话那接下来就带你实现它~效果的话请点击上面的 Google Code。或者Dome

如果你注意的话你会发现googlecode本身已经提供了几个选项的feed供稿,如 Project Information，Project Updates，Downloads，Wiki等基本都是Atom的供稿~这里要利用的就是downloads的，使用google feed api转换给JSON的，看到这里如果你对getJSON了解的话也就知道改怎么办了吧哈哈。其实很简单~这就不废话了赶紧来分享吧。

首先在你需要显示的位置加入下面DIV

<div id="svnlist">
<div id="svnb"></div>
</div>

下面是关键JS，在你要显示的页面插入即可

//BY Tnnde.com
var pname="sany",//GoogleCode项目ID
num="100";//最多显示数量
jQuery(document).ready(function(a)
{a.getJSON("http://ajax.googleapis.com/ajax/services/feed/load?
v=1.0&q=http://code.google.com/feeds/p/
"+pname+"/downloads/basic&num=
"+num+"&callback=?",
function(d){a(d.responseData.feed.entries)
.each(function(d,b){
var e=b.title,c=b.link,f=b.content;date=b.publishedDate;
c=c.replace("http://code.google.com/p/"+pname+"/downloads/detail?
name=","http://"+pname+".googlecode.com/files/");
date=date.substring(0,date.indexOf("-"));
a("#svnb").append("<div class='svnb'><div class='svnimg'><a href='"+c+
"' title='DownLoad'>
<img src='http://www.gstatic.com/codesite/ph/images/dl_arrow.gif'></a></div>
<div class='file'><div class='name'>
<a href='"+c+"' title=''>"+e+"</a><div class='svndate'>"+date+"</div></div><div class='info'>"+f+"
</div></div></div>")});
a("#svnb").slideDown(300);
a(".info a").remove()});return!1});

下面是本站的样式你可以发挥你的创意自己修改

#svnb{ display:none;}
.svnb{ padding:10px;}
.svnimg{float: left;padding: 5px;}
#svnb .file{padding: 3px 0 0 45px;min-height: 35px; background:#DDF8CC;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
#svnb .file:hover{ background:#DDF888;}
#svnb .name{font-weight: bold;}
#svnb .svndate{ float:right;font-weight:normal;}
#svnb .info{ height:10px;}
#svblog{ height:48px; width:48px; position:absolute; right:5px; top:-5px; background:url(images/log.png) no-repeat;}

完成这简单几部你就可以在自己的页面调用google Code的项目下载连接了~

完成代码下载 GoogleSVNJS

另外 google app engine逐渐走向收费模式早晨收到gae的一封邮件~将要启用新的收费标准。当然我这里目前访客较少应该不受什么大

本文网址:http://www.tnnde.com/2011/09/295001.html

GAE数据在不同应用之间迁移

SaNy — Wed, 31 Aug 2011 03:10:32 +0800

google appengine在 1.4.3版本的时候提供了后台数据管理Datastore Admin选项.其中比较亮眼的是数据迁移。当然之前我也没使用过~上天新建个应用测试东西的时候忽然想到把blog数据迁移过去测试下。也为micolog提供了信的备份方法而且能记录点击数次等详细信息~

界面如上图，选择你要拷贝的数据点击 Copy To Other App.

要想完成拷贝，你还需要做2步，开始目标应用的remote_api。在app.yaml中加入

builtins:

- remote_api: on

即可开始remote_api。还要在当前程序中新建 appengine_config.py 。录入

remoteapi_CUSTOM_ENVIRONMENT_AUTHENTICATION = ('HTTP_X_APPENGINE_INBOUND_APPID', ['APPSPOTID'])

把APPSPOTID改成你的ID 完成以上2步后点击 Copy To Other App后跳转页面。把

https://{TARGET_APPID}.appspot.com/_ah/remote_api 改成你的应用ID

X-URLFetch-Service-Id:APPSPOT 改成appengine_config.py中的ID

完成好继续即可完成~这样大概等个半分钟左右你的数据就会成功复制到目标程序

给你的文章页图片加上slimbox灯箱效果

SaNy — Thu, 25 Aug 2011 16:37:25 +0800

早前我直接使用的是鸣做的micolog下的lightbox插件比较方便，但是我能不用插件就尽量不用插件，更何况lightbox比slimbox确实大了点。通过自己手动添加也是很简单就能用上js紧紧只有4k的slimbox2。下面让我们动手吧。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/xxx/slimbox2.js"></script>

在</body>之前插入以上js。jquery.min.js如果已经加载了就不用再加载了。接下来是CSS。

/* SLIMBOX2 */
#lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}
#lbCenter, #lbBottomContainer{position:absolute;z-index: 9999;overflow: hidden;background-color:#fff;}
.lbLoading{background:#fff url(images/loading.gif) no-repeat center;}
#lbImage {position:absolute;left:0;top:0;border:6px solid #fff;background-repeat:no-repeat;}
#lbPrevLink,#lbNextLink{display: block;position: absolute;top:0;width:50%;outline:none;}
#lbPrevLink{left:0;}
#lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}
#lbNextLink{right:0;}
#lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}
#lbCaption,#lbNumber,#lbCloseLink,#lbBottom{display:none;}

CSS你可以直接添加到主题的style.css中，减少调用次数。然后把下载连接中的图片放在images中。这样基本的调用就结束了。下面要做的就是让文章页面的所有图片点击都是slimbox打开。

这需要你自己找文章页的div。找到包含文章内容的那个DIV后就可以动手了，一般是 <div id="content">。插入下面JS

<script type="text/javascript">
$('#content'+' img').each(function(){
            img = $(this);
            if(img.parent('a').length < 1){
                src = img.attr('src');
                img.wrap('<a href='+src+'></a>');
            }
        });
$("#content a:has(img)").slimbox();
</script>

做完这些你的文章中的图片就可以slimbox显示了，只有4k的slimox2.js。有木有心动呢。slimbox.zip(压缩包下载)

DEMO:

直接在文章中加入图片或使用<img>标签引用图片就行~然后JS会自动添加效果点击图片可以看效果

让你的PicasaWeb API相册正常访问

SaNy — Wed, 24 Aug 2011 17:59:54 +0800

起初我并没在意这个问题，因为我印象张google偶尔被墙也是正常的事。昨天到Dianso那里去逛的时候发现他的相册可以打开而我的不行。。查看了下地址才知道他用了反向代理-，-让我这服务器到期还不想再买的人情何以堪~然后我邪恶的把自己的一个picasa的图片地址重新构建在他的nginx上可以正常访问。当然我没有继续邪恶下去，再当然本文的目的也不是教你去盗用别人代理的。。有想邪恶的童鞋先看完本文你就不用邪恶了。。

我开始的想法是自己找个基于gae的webproxy程序拿来改改，专代理picasa的地址，已经修改的差不多了绑上域名测试的时候猜发现估计现在GFW已经升级了或许是根据关键字源码啥的过滤了？反正就是访问不通。这个暂时不说以后有时间继续研究。在我纠结的时候意外发现Picasa的连接地址使用的是https安全连接...你想google得多财大气粗。尝试了下连接换为http的可以正常访问。这下简单了把js获取的安全连接正则成普通连接就成了。找到你的picasa.js 。找到JS中地址变量重新给这个地址正则后赋值。

jQuery(document).ready(function(b) {
    var e = b("#toload").offset();
    $body = window.opera ? document.compatMode == "CSS1Compat" ? b("html") : b("body") : b("html,body");
    b.getJSON("https://picasaweb.google.com/data/feed/api/user/ID?fields=openSearch:totalResults&alt=json&callback=?",
    function(c) {
        for (var c = parseInt(c.feed.openSearch$totalResults.$t / 6) + 1, d = 1; d <= c;) b("#navi").append("<a href='" + d + "'></a>"),
        d++;
        b("#navi a").eq(1).addClass("current")
    });
    b("#navi a").live("click",
    function() {
        b("#items").fadeOut(500);
        b(this).addClass("current").siblings().removeClass();
        var c = b(this).attr("href") - 1;
        b.getJSON("https://picasaweb.google.com/data/feed/api/user/ID?start-index=" + (6 * c + 1) + "&max-results=6&fields=entry(title,gphoto:id,media:group(media:thumbnail))&alt=json&callback=?",
        function(d) {
            b("#items").empty();
            $body.animate({
                scrollTop: e
            },
            400);
            b(d.feed.entry).each(function(d, c) {
                var f = c.title.$t,
                g = c.gphoto$id.$t,
                e = c.media$group.media$thumbnail[0].url;
				e = e.replace("https://","http://");
                b("#items").append("<div class='item'><div class='thumb'><img src='" +
                e + "' id='" + g + "'/><br /><span>" + f + "</span></div></div>")
            });
            b("#items").fadeIn(400)
        });
        return ! 1
    });
    b("#navi a").click();
    b(".thumb img").live("click",
    function() {
        b("#items").fadeOut(500);
        var c = b(this).attr("id");
        b.getJSON("https://picasaweb.google.com/data/feed/api/user/ID/albumid/" + c + "?fields=title,subtitle,icon,gphoto:numphotos,entry(media:group(media:content,media:title))&alt=json&callback=?",
        function(d) {
            b("#items").empty();
            $body.animate({
                scrollTop: e
            },
            400);
            var d = d.feed,
            c = d.title.$t,
            h = d.subtitle.$t,
            f = d.icon.$t,
            g = d.gphoto$numphotos.$t;
			f = f.replace("https://","http://");
            b("#items").append("<div id='albums'><img src='" + f + "'><div class='des'><p>\u76f8\u518c\u540d\uff1a " + c + "</p><p>\u6570\u91cf\uff1a " + g + " \u5f20</p><p>\u8bf4\u660e\uff1a " + h + "</p></div></div>");
            b(d.entry).each(function(d, c) {
                a = c.media$group;
                var e = a.media$title.$t,
                f = a.media$content[0].url;
				f = f.replace("https://","http://");
                b("#items").append("<div class='item'><div class='thumb-1'><a href='" + f + "?imgmax=800'><img src='" + f + "?imgmax=118'/></a><br /><span>" + e + "</span></div></div>")
            });
            b("#items").fadeIn(500);
            b(".thumb-1 a:has(img)").slimbox()
        });
        return ! 1
    })
});

上面代码是在木木同学的源代码基础上简单修改了下请把其中的json地址https://picasaweb.google.com/data/feed/api/user/ID/中的ID换成自己的~

通过这样的简单正则后输出的地址为普通的http连接。反正现在访问没问题。至于以后GFW怎么样我也不知道

SaNy's Blog

这是一条测试信息

相关阅读

11.12

相关阅读

2011.10.17

Micolog文章页显示当前位置之使用JS锁定

相关阅读

修改host翻墙上google+1

google+1按钮Ajax后的显示问题

相关阅读

把Google Code搬回家

GAE数据在不同应用之间迁移

相关阅读

给你的文章页图片加上slimbox灯箱效果

相关阅读

让你的PicasaWeb API相册正常访问

相关阅读