半成品博客皮肤(不知有没有继续下去的必要)

在博客园也有些日子了却也是腾不出一点时间写博客，却在浏览些什么……天天上班至少10-30分钟的初略浏览博客园，有时间的时候浏览的时间就长了……虽然有些东西看不懂，却也在mark，在赞！！！确定没错过不少大神的博客，优化很是棒。勾起了个人冲动。以下调整：

1.导航栏

借鉴于：轩枫阁资源合集 

其实就是在鼠标划过A的时候对A标签的before进行操做具体看这里 : 标题栏效果

我隐藏了博客园原来的标题栏，让后用html5的元素<header><nav>...从新改造一个标题栏，没有对其绑定事件直接是URL

 2.改变页面布局

博客园的布局是把每一篇“摘要文章”用 class='day'的div包裹的，对此进行调整

这个思路来源于好几个大神的博客：好比 from one 这个大神深深让我明白了前端的乐趣，还有上面的阅读和评论量是来自于：博客园大神（地址我实在找不到了），先说说css方面，这个也是在鼠标划过的时候调节before和after，其实图片颜色没这么深而是在上面加了一个透明度为0.4的div而已，具体看这里: demo

我对整个class='day' 绑定了click事件，因此点击day里面的任何位置均可以跳转到文章具体内容页面。这里有个小插曲，我没有申请开通js权限，我本觉得我申请过的，让后绑定事件F12后死活找不到个人代码，后来从新申请了下就能够找到了，能够调试。一开始我是这么写的

$("#main .day").on("click",function(index,el){
    window.location.href = $(this).find('.postTitle a').attr("href");
})

发现仍是不跳转，后来换成了这样

$(".day").bind("click",function(index,el){
    var url =  $(this).find('.postTitle a').attr("href");
    location.assign(url);
})

我不懂为何不支持 window.location.href ，难道博客园屏蔽了？(知道的朋友告知下)

还有就是上面的阅读和评论了，其实就是正则表达式，满满的都是泪啊，之前没玩过这么高大上的东西，竟然好几周才知道怎么玩……

$("#main .day .postDesc").html(function(index, el) {
            var amount = [];
            el.replace(/\((\d+)\)/g, function() {
                amount.push(arguments[1]);
            });
            var apphtml = "<span class='comments commentsleft'>阅读:" + amount[0] + "</span><span class='comments commentsright'>评论:" + amount[1] + "</span>";
            return apphtml;
        });

/\((\d+)\)/g

这玩意一开始就写对了，我一直取的arguments[0], arguments[0]是带着括号的，得多苦B啊，就没看后面参数，否认写错了，别提有多D疼了……

3.具体页面内容

这个内容模拟的  from one 的页面 

这里是让内容页全屏，让后加了个“按钮”，其实就是让他  history.go(-1); 

这里因为博客园自己对div命名的习惯首页和具体内容页的div好几个名字同样我酒吧这个内容用一个div包裹起来 

$(".forFlow > div").wrapAll("<div id='divSelfPage' class='animated'></div>");

 让后对这个div作了一系列的调整……

这里有个D疼的问题尚未解决：在google浏览器下进入内容也滚动条无法用滚轮操做是怎么回事？F12后好了（哭晕在测试的节奏啊）有朋友知道的麻烦告知！

4.评论

这里我发现博客园把园友的头像是提供了的（不显示的缘由多是主题+没上传头像的朋友）……

就在span里面，拿出来用就行了

$(".feedbackCon").prepend('<img class="userImg" src="http://images.cnblogs.com/cnblogs_com/cyclone77/682571/o_20150508132526.png" />');
            if ($(".feedbackCon span").length){
                var userimgUrl = $(".feedbackCon span").text();
                $(".feedbackCon img").attr("src",userimgUrl);
            }

没有头像的应该是没有这个span，让后处理下没有的默认一个就OK啦

发布了发现有东西没说

5.加载的进度条

在看大神：刘哇勇的部落格 的时候发如今最上面有网页加载的进度因而就发现他的文章：为你的Web程序加个启动画面 故此有了这个加载页面，又想起玩wow的时候界面加载的时候能够看到舒适提示，因而就搞了个“文雅句子”……好像有80多条把,具体精度条的显示看刘哇勇的博客这里是： demo

 这应该才作了一半，还想作下去，上面的标题栏还有好几个栏目呢。。。有时间就作一点

园友帮忙测试下，这前端真是细活得慢慢来，IE9如下就算了放弃...

最后发布文章的时候发现没图片啊，没图片只好借用from one的了......

还有在加载页面想用html5+css3作个动画但是不知道要作个什么，或者用canvas画个什么……园友们提点想法。