分享 - Hybrid 开发将博客园集成到自己的网站中 - 效果高大上 :)

其实问题很简单: 我的产品页面在 http://www.gdtsearch.com/products.spiderstudio.docapi.htm, 这是一个静态页面; 而我所有的技术博客都在博客园中. 为了让访问者能够直接在产品页面中看到我最新的技术博客, 我将博客页面用IFrame嵌入到了产品页面中:

<script>
var doclist = null;

$(document).ready(function() {
$("#selDocListSortType").change(function() {
var skey = $("#selDocListSortType").val();
var fkey = $("#txtFilterKeyword").val();
bindDocList(skey, fkey);
});

$("#txtFilterKeyword").keypress(function() {
var skey = $("#selDocListSortType").val();
var fkey = $("#txtFilterKeyword").val();
bindDocList(skey, fkey);
});

$.ajax({
type:"get",
dataType:"jsonp",
url:"http://wsoa-mini.cloudapp.net:31337",
success: function (data) { doclist = data; bindDocList('Title:asc'); },
error: function(a, b, c) {
//alert("error: " + a + " b:" + b + " c:" + c);
}
})
});

function bindDocList(sortKey, filterKey) {
var data = doclist;
if(sortKey) {
data = sortByKey(data, sortKey);
}
if(filterKey) {
data = data.filter(function(item) {
return item.Title.toUpperCase().indexOf(filterKey.toUpperCase()) != -1;
});
}
$("#lnkDocApi").text("文档库 (共" + data.length + "篇)");
var html = "<ol>";
for( idx in data ) {
html += "<li><span>" + idx + ".</span><a href='" + data[idx].Url + "' target=_blank>" + data[idx].Title + "</a><p>" + data[idx].Summary + "</p></li>";
}
html += "</ol>"
$("#lstDoc").html(html);
}

function sortByKey(array, key) {
return array.sort(function(a, b) {
var temp = key.split(":");
var mode = temp[1];
var x = a[temp[0]]; var y = b[temp[0]];
if(mode == 'asc')
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
else
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
</script>

View Code

okay, 大功告成!

再次打开页面: http://www.gdtsearch.com/products.spiderstudio.docapi.htm

有没有几分惊艳的赶脚? 呵呵, 反正我认为终于有点高大上了:)



到此我的目的终于达到了, 今后只要在园子里面发文, 就会自动同步到产品页面中, 妥妥的!

本例中用到的工具:

SS - http://www.gdtsearch.com/products.spiderstudio.docapi.htm

NodeJS - http://nodejs.org/

Edge.js - http://tjanczuk.github.io/edge/#/

Express.js - http://expressjs.com/

另需服务器一台host WebApi.

怎么样, 不错吧? 你也动手试试吧!