九月
18

颠覆你的wordpress体验–ajaxPaled(全站ajax,杂志型布局)

一直在酝酿这一款颠覆创意的主题,看了腾讯的新版QQ阅读,灵感终于来了,于是诞生了这款全新版主题——ajaxPaled。ajaxPaled

目前完成度应该说还不到我计划中的50%,仅仅是实现了无刷新阅读。其实主题很简单,仅仅四个文件:index.php、function.php、base.js、style.css,但是也很复杂,要考虑的问题很多。

因为基于杂志型布局,每一页的文章数目不固定(从一篇到七篇不等),所以如何请求文章数据,如何设置翻页,需要靠率很清楚。这个问题我足足思考了两天,最后终于有了思路。我设定每次请求五页的文章数量,每页的文章数量通过随机数获得,然后五页文章数相加,得到总的文章数。然后通过ajax发送请求,返回json格式数组的数据。然后格式化json数据,按照每页的文章数生成每页的html代码显示。如果这五页用完,需要再次发送请求,返回的json数组与之前的进行合并,再次进行格式化操作。其实这里用到了队列的思想,因为我其实只是一直在维护显示当前所需五页内容的数据,队头和队尾指针就是标记当前json数组中显示在当前五页的开始和结束。

其实这之间还有很多问题要考虑,比如向前翻页等。。

如果你留心,会发现其实翻页时是即时显示的,包括点击文章标题后显示全文内容,这些数据其实都是一次性都请求下来的。一次文章数据请求最多可以请求7*5篇文章,这三十五篇文章都是以json格式存储在一个数组中的,在需要时调用。

点击文章标题进入全文显示时,右侧会显示评论。评论是动态加载的,按由新到旧顺序显示。初始时只加载10条评论,每次点击更多评论,会再加载10条。

暂时还没有做发表评论的功能。因为评论在右边,很窄,不可能显示嵌套模式,所以我在考虑到底还要不要嵌套评论了。如果还要支持嵌套,那么做起来难度就更大了。因为评论全部都是我自己直接从数据库中取得,然后再嵌套通过js格式化后显示的,如果还要嵌套,使用js生成评论就更麻烦了。

最后,透漏一点,这个主题php代码仅仅不超过二百行,JS代码目前已经1600行。我预计整个下来JS估计要写超过三千行了。。。比我现在的SimPaled的js代码还要多。

最后,我还有一点考虑,目前大家可以点击我的博客的左上角的“阅读模式”来进入这一主题模式。为什么我把这个入口地址叫做“阅读模式”呢?因为我觉得其实也可以把这个主题做成一个插件,其实我上面说了php部分仅仅不到二百行,我也没有用任何wordpress的默认循环,一切数据都是直接从数据库中取得,所以基本上已经脱离了wordpress的主题系统结构。将它放入插件目录,后台启用照样是可以用的。而且我觉得它可以作为当前主题的一个特殊模式,就像我目前把它当做“阅读模式”。如果真的这样,那么发表评论部分就不需要做了,呵呵,仅仅用来翻阅文章。

有些细节东西稍微提一下:

1。翻页按钮,每个小圆球代表一页。最左或最右是下一组(下五页)文章链接。

12123

2。完整阅读时文章标题所在部分是可以点击拖动整个文章显示面板的。

4354

3。评论是动态加载,点击“显示更多评论”可以加载未显示的评论。4343

预览主题,可以从我的博客左上角的“阅读模式”链接进入,或者直接点击此链接http://www.qiqiboy.com/?preview_theme=ajaxPaled

有好的意见、建议,欢迎提出。再次说明,此主题目前未完成,仅仅不到50%,有bug很正常,勿惊。有问题直接点击博客标题返回正常模式即可。

本文标签: , , , ,

分享

本文短网址: http://qiqi.boy.im/8l

这篇文章已经有 101 条评论

Comments (98) Trackbacks (3)
You can leave a response or Trackback this entry .
  1. 大鲨鱼 -#41

    我感觉你现在的主题已经很好了!

  2. 学夫子 -#42

    我始终感觉有点乱也,不像博客的风格了

  3. LOO2K -#43

    这个效果做得真不错
    SEO应该有影响吧,
    总感觉内容部分的字体太小,行距太小了。

  4. lostab -#44

    真的很震撼啊。想起来就觉得复杂。

  5. 优趣 -#45

    很强悍!WP版QQ阅读

  6. 菠萝 -#46

    QiQi,你的主题一向很乱,哈哈!但技术含量很高!评论这里的输入邮箱就自动调用头像功能如何实现?有教程没?没有话,就来个吧,我是代码菜鸟,不懂这些。你写得容易点,我学习学习。

  7. 凡明 -#47

    博主,你好,我一直在找一种适合阅读的插件,因为我本人不会写代码的。我认为别人来博客看你的文章如果内容很好的话是一种享受,但是如果内容很好却因为失败的阅读方式让人的体验很失败,如果能在首页显示文章的一部分,比如开头的或者自定义的,或者摘要。然后如果点击继续阅读,网页很平滑的下拉,而不是打开新页面,就把文章的其他部分呈现,点击标题或者是链接到原文,如果能用上延迟加载就更棒了和下拉时有动画,比如下拉到底了有个反弹的动作。

  1. 颠覆你的wordpress体验

    [...] 2010年09月26日,LOO2Ksay: 这个效果做得真不错 SEO应该有影响吧, 总感觉内容部分的字体太小,行距太小了。 [...]

  2. 颠覆你的wordpress体验

    [...] 2010年09月26日,学夫子say: 我始终感觉有点乱也,不像博客的风格了 [...]

  3. JOSEPH

    -1…

    below are some links I found useful…

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: