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

在博客园也有些日子了却也是腾不出一点时间写博客,却在浏览些什么……每天上班至少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画个什么……园友们提点想法。

时间: 2024-11-13 01:51:04

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

分享个人博客皮肤【兼容移动端】

我真正开始写博客也有一年了,记得最开始写博客之前做的第一件事就是自定义皮肤样式,还为此写过一篇博文<博客园页面设置>.当然从现在的我看那个时候的我是那么的菜,也许一年之后看现在的我也会同样的想法(其实这样也挺好的,证明自己进步了).为什么要自定义皮肤样式?当然是为了编写出来的博文让人更有阅读欲,自己看着也舒服.很多时候没有一个好的皮肤样式也会成为我们不写博文的一个借口<我们为什么应该坚持写博客>. 其实,很多时候我是很懒的.不是实在看不下去了一般我也不会去动原来的样式.早就有写这篇

[新手报到] 对博客皮肤BlueSky的一些细微CSS调整;

大家好, 我是编程领域的新手(现主要是javaweb/winfrom这块),大家多多关照哈!最近发现cnblogs的交流氛围相当不错, 也来凑个热闹, 同时也学着写写博客, 让大家见笑了!博客的皮肤是基于 BlueSky,对一些局部细节做了细微调整; (由于时间关系,改动不大,代码也没继续优化,再次让各位大大见笑了!) 下面是针对BlueSky的页面定制CSS: (也当是备个份吧) * {font-family:"微软雅黑"; border-radius:2px;} #main {ba

我的博客皮肤

页面定制CSS代码 /************************************************** 第一部分: **************************************************/ #EntryTag { margin-top: 20px; font-size: 9pt; color: gray; } .topicListFooter { text-align: right; margin-left: 10px; margin-top:

博客皮肤

<style><!-- #cnblogs_post_body p { font-size: 14px; margin: 5px auto 5px auto; } #cnblogs_post_body ul { margin: 5px 10px; font-size: 13px; } #cnblogs_post_body h3 { background: gray; color: #fff; border-radius: 5px; padding: 5px 0 5px 5px; margi

博客园小技巧

1.博客园小技巧 2.半成品博客皮肤(不知有没有继续下去的必要)

自定义博客园皮肤:暗色流体响应式布局

博客园的皮肤模板虽然有100多套,但我需要的作品却没几套,从布局上看,大多是固定布局,有的使用表格布局,有的将侧边栏在HTML页面的代码顺序放在主内容的前面.这些布局方式不利于页面缩放和不同屏幕尺寸与分辨率的设备浏览,尤其是在当今网页浏览设备屏幕尺寸与分辨率多样化的时代,流体与响应式布局才是最佳的选择.从配色上看,博客园有3款还不错的暗色皮肤,但不符合我布局的要求. 我想要自己的博客皮肤满足以下要求: 模版选择:不能使用表格布局,侧边栏在HTML页面的代码顺序放在主内容 的后面,页面结构和样式简

公告:博客新皮肤上线啦

各位亲爱的博主: 之前在博客对博客皮肤进行了小调查,现已上线3款新皮肤:技术工厂,科技星空和编程工作室,大家可在博客配置中来选择体验. 各位博主如对CSDN博客频道新推出的皮肤有任何意见.建议,欢迎发送邮件至webmaster(at)csdn.net反馈 .感谢大家对CSDN博客的支持! CSDN博客产品研发团队

博客园皮肤美化

以下是全站css代码: 1 .topicListFooter{text-align: right;margin-right: 10px;margin-top: 10px} 2 *{margin: 0;padding: 0} 3 html{height: 100%} 4 body{ background: url(https://i.screenshot.net/p/59q7gu4?3e4d445686cb8ab334d4a44c649df999); 5 -webkit-background-si

博客美化——Silence主题皮肤

介绍 ??一款专注阅读的博客园主题,主要面向于经常混迹 博客园 的朋友.其追求大道至简的终极真理,界面追求简洁.运行追求高效.部署追求简单. 博客皮肤源码地址 预览地址 如何部署.使用皮肤 Silence作者的友链 特点 简洁优雅.精致漂亮的 UI 设计 提供多种风格主题以便适应各类用户的偏好 响应式设计,兼容手机端浏览器 提供事无巨细的部署文档 源码结构清晰并且注释完整,方便扩展 开发 ??请先确保您正在使用的机器已经安装 Node.js 和 Git 客户端. git clone https: