Mythsman


乐极生悲,苦尽甘来。


hexo-douban插件的开发过程

背景

前几天在逛博客的时候发现两个用hexo的很厉害的博客:yikun,raysmond,发现他们不仅内容牛x,而且他们都有一个读书页面,能够同步自己在豆瓣的账户,将自己的阅读经历放在博客中。我觉得这个idea非常有意思,原来博客不仅可以分享技术、分享感悟,还可以当作读书笔记,更加方便的记录自己的学习历程。
于是我就想了,反正最近临近期末考试,闲着也是闲着,不如捣鼓捣鼓这个玩意,顺便学学Nodejs。本来打算花几个小时搞一搞的,结果摊子铺的有点大,搞了两三天搞出了个能同步豆瓣读书跟电影的hexo插件,也算是个意外收获吧。

踩坑

第一坑

我参考了raysmond的网页源码,发现其实他做的事情很简单,就是用xhr调用豆瓣API,然后把结果渲染给页面。于是我就新建了一个page,将源码改了改放了进去,发现并不能用,因为很多浏览器禁止xhr的跨域访问,raysmond的博客使用的是七牛云的cdn,所以不存在这个问题。而我没搞这个cdn,所以在我的chrome里报了错,加载失败。

第二坑

既然不允许跨域请求,那我干脆就在部署前用python脚本手动调用api,先把返回的结果存在服务器,然后再用xhr访问这个不跨域的本地数据。显然,这会导致数据不是实时更新,需要自己手动去同步,不过好处就是这样可以解决之前的问题,同时也不会受豆瓣API的调用限制的影响,况且由于这些数据本身就不常更新,手动调用api也不难,因此不太影响体验。
搞完之后发现基本能用,正当我打算完工的时候突然发现在github上有一个插件叫hexo-generator-douban,没错,这个插件就是yikun弄的。我试了试的确能用,不过布局没有raysmond的好看。于是我就想着要不我也搞个插件吧,毕竟直接在page中写html代码实在是太丑了,不方便身边的同学重用,也不方便自己搬运,倒不如写成个插件用起来方便。。。

第三坑

于是我就端起了hexo-generator-douban的源码开始研究,研究hexo的api,学着创建npm帐号,创建npmjs项目,发布npm项目。。。不过当我想把代码按照套路填在里面的时候,我发现在插件中是不能直接用script和style标签来引用其他文件的,因为我们引用的使用所采用的相对路径与调用的时候的路由是完全不一样的。也就是说我不能在代码中写入运行时的路径,只能写入编译时的路径。这样我只能直接把js和css写进nodejs文件里了。。。可这也太丑了吧。。。

第四坑

研究了一会发现其实我应该可以ejs这样的模板引擎,毕竟这是编译时就处理的,于是我就倒腾了一会ejs,搞了搞发现成,终于可以把html(ejs)文件与控制(nodejs)文件分开搞了,代码好看了很多,调理也清楚了。
忽然,我想既然我们可以同步读书,那么为什么不同步电影呢???翻了翻豆瓣的api,发现他竟然没有提供“获取用户喜欢的电影”这类的接口。。。不知道他们是怎么想的,不过看了看豆瓣自己的网页都报了一堆error,我感觉这也正常。。。

第五坑

既然不能掉用api,那有没有其他方法获得这个信息呢?忽然我灵机一动,发现自己豆瓣主页的rss能够提供读书跟电影的信息。不错,就拿这个搞了。
于是我捣鼓了半天的xpath,xmldom来解析这个rss,照着之前的html模板写了半天,终于搞定了电影的获取。正当我写完打算庆功的时候,突然发现我忘记了rss只能获取最近的信息,当我收藏新的电影时,旧的就会被顶走。。。这特么就很坑了。。。

第六坑

好吧,既然这样也不行,那我就只能手动写个爬虫了。。。于是我就照着豆瓣的源码,写了半天的爬虫,总算是成功获取到了数据,放到之前的代码中,成功显示。
正当我又以为成功的时候,突然发现了一个bug,我在读书页面中使用yilia的smart menu的时候,发现返回的时候页面就消失不见了。。。难道是兼容性问题???那我还要去看yilia的源码喽???想想就蛋疼。。。

未完待续

这个bug找了一个晚上,忽然发现竟然是我自己写的一个叫hide的样式跟yilia的样式重名了。。。这下我总算意识到了名空间的重要性,于是我在所有我自己定义的样式前面加了hexo-douban-前缀,成功debug。。。

总结

项目托管在了我的github上,同时注册在了npmjs里,而且发布在了hexo.io的插件列表里,算是对开源界作出了一点点小贡献吧。
整个项目到目前前前后后花了半个礼拜时间,版本一改再改,就先告一段落吧,以后什么分页啊排序啊什么的有空再搞吧,开始期末复(预)习喽。

ps:为防止以后页面失效,先存个截图:

hexo-douban

pss:有什么问题欢迎在github上题issue,加QQ什么的比较麻烦啊。。。