jQuery – 落园

这两天手痒痒，就把个人网站（cloudlychen.net）改版了...原来那个实在是太朴素了，完全没有HTML5和CSS3的感觉...

这次走黑色系，主要是因为网络图还是在一片暗黑的宇宙中比较闪耀。

先上效果图：

然后简单记录一下这次的变动。

其实这是v2了，V1在Photoshop里面效果图出来之后，就被我kill掉了...这次主要想营造的是星空的感觉，然后加上network的feature，突出在茫茫星海中遨游（explore）这样子。
大的框架是从某个摄影师网站抄的，runemolnes.com。不过被我kill掉了很多很炫的效果。实在是没那么多东西可以填呀。
然后最上面的banner实际上是可以“调戏”的网络图，这个是底层是HTML的canvas效果，每次刷新都会随机生成，可以鼠标调戏之～技术层面是sigma.js. 基本就是把他家的banner抄过来了，很强大的网络图HTML5可视化框架，可以加interactive效果什么的！
中间是精选了一些以前的照片，目前是博物馆系（开场图是一张很朴素的chihuly museum的墙图，主要是想要这样的风格，虽然那些更炫的照片只能压箱底了...）。底层的是COIN SLIDER. 这个本来想效仿flickr的翻页，结果看了一下源码比较难抄（话说顺便看到他们的小广告——we are hiring），所以另外找了一个基于jQuery的框架。还比较契合整体页面的黑色风格。
其他的就没什么特殊的了...那个logo是我很无奈的从网上随便拎了一个...填空而已。
移动端访问效果未知....非FF和Chrome访问效果未知...欢迎报告bug。
Css3已经强大到渐变线这种都不需要在PS里面画好另存为图片了...直接几行代码搞定，大爽！

吐槽时间：真的是太久不做前端了，完全赶不上潮流了。写个JS真的是绞尽脑汁才搞定...PS也是越来越不熟了，还好一开始想要的设计感还是多少保留了。后端能写死的都写死了，才不去调用PHP或者其他API来增加风险...

还好有那么开源的框架可以用，终于磨磨悠悠的搞定了。说明我做网页的基本功力还是在的，哈哈。

最近发现那种自动翻页的懒人模式挺好的，减少一次点击呢...所以打算给落园动动手术。

先搜了一下，找到了一篇jQuery Ajax 分页 WordPress 版，但是发现在我已然千疮百孔的落园上，显然不怎么适用。发现几年没折腾，WP已经强大到很多功能我都不认识了...比如加载个jQuery库居然可以这么简单了...

function my_init() { if (!is_admin()) { wp_enqueue_script('jquery'); } } add_action('init', 'my_init');

只是鼓捣了半天毫无反应，开始搜其他的东西（我果然是太久没有写过JavaScript和Ajax了，完全不记得这东西语法是什么了，读起来jQuery的源代码表示一片的茫然，还是另寻捷径吧）...果然有现成的WP插件——Infinite-Scroll。不知道为什么WP官网的版本比较旧，那么就用直接github上面找新的东西吧：https://github.com/paulirish/infinite-scroll/tree/master/wordpress-plugin

安装完了之后要仔细的配置一下：

https://github.com/benbalter/Infinite-Scroll/raw/develop/screenshot-1.png

然后就可以了...不过鉴于我在这里浪费了许多时间，还是简单的翻译一下这些配置选项吧。

1. 你放置所有文章内容的div，经典的twenty ** 系列都直接是#content，去找WP主题里面的循环开始之前的div就好了~
2. 导航链接所在的div，比如我这里保留了pagenavi的翻页，是因为另外加了一个层，只有一个链接指向后一页。
3. 导航链接所在的a标签——注意这个first是指第一个a标签，我傻乎乎的以为是a标签的名字，汗...没仔细看jQuery CSS 选择器指南哇..
4. 每篇文章的div，就是会自动加载进来的新的层内容，直接去找WP主题里面的循环开始之后的div就好了~

然后就可以正常的使用啦。话说，我这里顺便把首页文章篇数调到了2篇，可以加快一下加载速度嗯。