化繁为简,无需后端。巧用Yql+rss,搭建我的个人网站
【本文含有大量的心理描写,没耐心的看官直接跳转到末尾即可】
前言:
最近做好了个人网站。很多人都喜欢用WordPress弄一个自己的博客之类的,但其实我觉得没这个必要,Lofter的功能、界面神马的于我而言足矣,加上CSDN单作为技术博客,GitHub作为开源仓库。自己重写这些内容在我看来没甚意义:独立的个人博客只能带给我孤独,技术文章放到互联网的某个偏僻的角落跟没公开没啥两样,开源Git仓库更不用说了,GitHub已是上上之选。所以我的需求就很简单咯:就是把我常用的几个个人主页整合起来。顺带获取我最新的文章动态,放在网站首页,ok。
正文开始:
首先,拿什么来建站?WordPress被我首先排除了,庞大臃肿+php。Ghost,嗯,别忘了我并不想做博客。想来想去,鉴于我简单的需求,还是从基础写起比较快。初期的预想是Bootstrap写前端界面,Flask负责后端处理,nginx做夹层。
那么先写界面咯。Bootstrap之前只大略看过,但仍然很快的完成了任务。因为,这玩意儿真心简单好用啊。
那么该写后端咯。等等,重点来了,我好像有更好的解决方案了!!!
先回顾需求,我并不想在个人网站上发布博客文章,个人网站就是个人网站,它不该成为个人博客、个人主页!!!我的文章仍然发表在Lofter!那么,个人网站上的文章就并不需要也不应该从服务器来获取,难道说我每发表一篇文章还得自己在服务器放一份?于是,我想到了RSS。多么美妙啊,我在Lofter上,借助现成的文本编辑器写文章,然后通过RSS来取得我的Lofter的文章概览,然后把它们转到网站里,就辣么简单!
好,现在事情很明确了,我并不需要后端,我只是需要从Lofter的RSS源拉取我的文章,把它们呈现给用户。这里就涉及到一个老大难问题了:跨域访问。第一想到的解决方法当然是由服务器访问Lofter,把数据返还给浏览器。等等,好像不太对!不是说好了不从服务器获取文章吗?这样还不如把文章预存到服务器呢。唉,没办法,谁教浏览器不允许跨域获取数据呢,不然直接让浏览器自己从Lofter获取rss源多好。等等,好像错过了什么!我跨域访问并不是想做坏事啊,不是我窃取数据,而是rss本就是为了共享数据而诞生的啊!那么,就一定有好的解决方案可以让我简单的获取到它。于是,想起了早已被墙了N久的jGFeed,于是,想到了是否有替代jGFeed的东东。于是我发现了它——雅虎的Yql。话说感觉雅虎在中国混得挺惨啊,但没关系,这关我毛事呢,毕竟在国外它仍然是一个大公司不是,它的产品为嘛不用呢。关键是,雅虎没有被墙!没有被墙!没有被墙!
事情就这么愉快的解决了。看了这么久的文字的诸君,我知道你们等的重点是这句代码:
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D"' + 'http://zhengxiaoyao0716.lofter.com/rss' + '"&format=json&diagnostics=true&callback=?', function(data) { [处理你的rss数据吧] });
需要注意的是,这样做好处是服务端完全没压力,坏处是,雅虎虽然没有被墙,但毕竟在国外,访问速度会比较慢。
最后,让最近一直写Python、Java的对坑放松警惕的我吐槽一下js的满地坑:尼玛啊,for in的坑真心烦人啊有木有,别人for in数组拿到的是值,尼玛for in拿到的是角标,劳资查了一晚上的bug就tm因为这个啊啊啊!!!(旁白,在js里,for in与for each in是两个概念。前者只是普通for语句的简化,后者才是我们喜闻乐见的迭代器遍历,然而后者却并不是ECMAScript的一部分)
我的个人网站的链接:http://xiaoyao.zheng0716.com