专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

sablog

  • html5、css3模版 K Blue for typecho、sablog-x、wordpress

    / 分类: 开发,实践 / 56 Comments

    sablog转换成typecho了。sablog仍然保留,感觉sablog的速度那是相当的快,舍不得啊,就是加独立页面麻烦些。typecho虽然慢了点,但是制定比较方便。两个都是优秀的程序,两个都用。

    新制作的模版用html5、css3,使用了css3的很多效果: Border Radius、Box Shadow、Text Shadow、RGBA、Transitions、Gradients,还有目前只有webkeit内核支持的text-stroke。

    基于蓝色调的,所以命名:K Blue
    特点:
    1、基于html5、css3,使用了很多css3的特性。在实现css3效果的同时尽可能的让其他浏览器保持效果一致。
    2、此风格没有使用一张图片,一个小图标是base64存在css里面,令一个是头部的高亮,cr、ff可以直接渲染,op需要svg,但是还是不能打到满意的效果,所以为ie9/8、op准备了一个base64的图。由于ie6/ie7不支持data uri,MHTML在这里也显得没必要,就设置ie6/ie7使用默认样式了,效果差距不太大。所以这个模版,无论那种浏览器,加载页面的样式只有一个css的连接数。
    3、由于各浏览器对css3的支持不同,按显示效果由好到差:chrome/safari>firefox3+>oprea>ie9>ie8>ie6/ie7
    G1、G2这样的比较绚的效果只做了chrome/safari下的,原因:ff也可以实现这个效果,但是渲染不流畅。其他浏览器只能尽可能实现类似的感觉了。
    4、html用的html5,但ff2不支持html5标签,所以ff2下会变形,解决方法也是有的,只是比较麻烦,用ff的人应该也不会像IE6那么根深蒂固,该升级的应该都升级了吧。再者这个是个人博客,不是大众网站,所以不考虑ff2了。
    5、经过检测的浏览器:chrome10、safari5、firefox3.6、ff4、k-meleon、ie9、ie8、ie7、ie6
    6、很多细节都做了,不全部阐述了,用chrome/safari浏览你会发现那是相当滴帅气。

    注意:
    首页调用了指定分类的内容,如果没有该分类肯定就有问题,index.php
    <h2 class="tit"><?php _e('开发'); ?></h2>
    <h2 class="tit"><?php _e('工具'); ?></h2>
    这两行下面的<ul>...</ul>里面的php语句。我这里调用的是mid= 6、7分类下面的文章(Widget_Archive@7、"mid= 7")。你的应该和我的不同,需要自己修改自己的分类id。令需要安装随机日志插件

    K Blue、K Blue G1、K Blue G2的区别:
    K Blue :基础简洁版,背景色是灰色的过度,背景无彩色圆。
    K Blue G1 : 跟"K Blue"类似,背景色加上了26个彩色的圆。
    K Blue G2 : 暗色调,背景色是黑色加上了26个彩色的圆。

    演示:
    K blue 基本版演示
    K blue G1演示
    K blue G2演示
    G1、G2还有几种显示方式,演示页面有说明(请用chrome、safari体验)。所以这次相当于发布了几个模版了。。

    下载:

    K blue 基本版for Typecho 0.8 (2011-01-06更新)
    地址2 mega
    K blue 基本版for Sablog-x 2.0 Beta(20100802) (2011-02-17更新)
    K blue 基本版for WordPress 3.0.5 (2011-02-20更新)
    Change: 链接文字、底部列表动画;数字分页动画;增加sablog、wordpress版。
    Note: te、sa、wp的sidebar请自己diy。

    非常感叹css3的强大,用chrome/safari看下面的K blue G2演示链接,就明白了,背景里的那些渐变的圆都是css3的效果,而且按照百分比排列。以前做到这样的效果需要做一张很大的图去实现,这张图要足够大,否则宽屏下面就有问题,但是这里无论你的显示器多宽,它们还是按照比例排列。可惜目前只有webkeit支持的比较好,firefox虽然也可以,但是滚动页面时很不流畅。另外,头部的高亮也是css3的效果。

    G1、G2的背景那里我做了很久,一共添加了26个渐变的圆形,而且尽量做出随机的感觉。其实是一个一个排出来的。喜欢前端开发的同学可以看看。

    另外我下的svn最新打包版0.8 | 10.8.15,附件不能上传。看了下是js报错,解决办法:编辑admin/file-upload-js.php,编辑:142行,post_params: {"cid" : <?php $fileParentContent->cid(); ?>}, 注意后面的","号。

  • sablog 升级完毕..

    / 分类: 生活 / No Comments

    升级还是比较艰难的。以前升级到了sablog plus,所以还要把数据库下下来对比,好累。。。

    记录下遇到的问题

    1.blog乱码,以前这里有个解决乱码的方法

    2.出现Duplicate entry 1 for key 1的错误,discuz这里有

    3.善用upgrade8.php

    4.templates 内 show.php里面的email.gif 那里要改。

    新版与之前版本数据库的不同:
    1.articles
    多余的:cid,keywords,trackbacks
    新增的:pingurl
    2.comments
    新增的:type enum('comment','trackback')
    3.links
    多余的:displayorder
    新增的:home
    4.searchindex
    多余的:tatols,searchfrom
    5.sessions
    多余的:ipaddress,agent
    6.statistics
    多余的:cate_count,attachment_count,all_view_count,today_view_count,trackback_count,user_count,curdate,online_robot,online_user
    7.stylevars
    新增的:description
    8.多余表:categories,tags,trackbacklog,trackbacks
    trackback整合到comments,categories、tags整合到metas、relationships

    过年期间就下了最新的sablog,本地装上对比我用的版本,发现angle改动了不少地方,有些地方都做了优化。本来想升级的,因为那时事情多,就没升级。昨天看了angle的blog才发现重大更新,索性升级吧。

    查看后台的记录,发现有其他IP登录了,不过没做什么,可能觉得没啥价值吧。。

    最近也在思考是否把域名和blog都转移到国外,或者在国外注册个新域名(it?me?org?还是什么呢,还没想好...)

  • Sablog-X Hack:字体大中小选择 for1.6

    / 分类: 开发,实践 / No Comments

    之前妹妹曾经对我说BLOG字体太小了,只是当时没心思去改,不过这件事到还放在心上~因为这个意见是的确不错的。把用户体验放首位,做站的都应该知道,而这个字体大小选择也就是其中的一小方面吧。。修改方法比较简单,没什么技术含量,就是用javascript。提供2种方法,都能够支持IE及Firefox、opera等浏览器。

    方法一:编辑模板目录下的show.php

    1.查找:ajax.js"></script>,下面加:

    JavaScript代码
    1. <script language="javascript" type="text/javascript">
    2.     function FontZoom(fsize){
    3.         var ctext = document.getElementById("sa_content");
    4.         ctext.style.fontSize = fsize +"px";
    5.     }
    6. </script>

    2.查找:$article[cname]</a>,后面加:

    XML/HTML代码
    1. 字体:[<a href='javascript:FontZoom(16)'></a> <a href='javascript:FontZoom(14)'></a> <a href='javascript:FontZoom(12)'></a>]  
    3.查找<div class="content">修改为:<div class="content" id="sa_content">

    方法二:编辑模板目录下的show.php

    1.查找:ajax.js"></script>,下面加:

    JavaScript代码
    1. <script language="javascript" type="text/javascript">   
    2. //更改字体大小  
    3. var curfontsize=14;   
    4. function fontZoomA(){   
    5.   if(curfontsize>8){   
    6.     document.getElementById('sa_content').style.fontSize=(--curfontsize)+'pt';   
    7.   }   
    8. }   
    9. function fontZoomB(){   
    10.   if(curfontsize<20){   
    11.     document.getElementById('sa_content').style.fontSize=(++curfontsize)+'pt';   
    12.   }   
    13. }   
    14. </script>      

    2.查找:$article[cname]</a>,后面加:

    XML/HTML代码
    1. 字体:<a href="javascript:fontZoomB();"></a>  <a href="javascript:fontZoomA();"></a>  

    3.同方法一的第3步。

  • 解决Sablog数据恢复时出现的1193错误

    / 分类: 开发 / No Comments

    把备份的mysql4里的sablog数据导入到mysql5里面一切正常。但是把顺序颠倒过来,就出现了1193错误。
    Error: Unknown system variable 'NAMES'
    Errno.: 1193

    网上有个GBK编码的(忘记什么程序了)出现这个错误解决办法:1、删除SET NAMES 'gbk',2、找到ENGINE=MYISAM DEFAULT CHARSET=gbk,替换为:TYPE=MYISAM,3、找到ENGINE=HEAP DEFAULT CHARSET=gbk,替换为:TYPE=HEAP,4、character set gbk collate gbk_bin,删除,5、重新恢复即可。

    而sablog备份的mysql5数据,恢复时只要把SET NAMES 'utf8';删除,再恢复就可以了。

  • 开始使用SaBlog-X1.0

    / 分类: 生活 / No Comments

    速度是没的说,模板也比以前的2.8PL 许多,希望以后加上[CODE]代码[/CODE] 运行/复制 代码的功能.

    5/1日到咯~ 是个值得纪念的日子,决定全新安装SaBlog-X1.0,把5/1作为我的BOLG的生日,2.8的数据重新导入``

    祝大家节日快乐~