Kairyou's Blog

专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]
  • 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(); ?>}, 注意后面的","号。

  • 在VIM里 调用多种浏览器 预览html php 等文件

    / 分类: 工具,实践 / 25 Comments

    最近这段时间睡眠严重不足,脑袋发晕的时候就要放送下,so改善vim。产生个想法:把自己喜欢的editplus的功能都搞到vim上面来。这个就是其中之一:在浏览器中预览当前文件。有时间的话,可能要写点从editplus转型到VIM的东西。

    优点1:
    囊括了主要的浏览器:chrome、firefox、oprea、ie、ietester(随自己喜欢可以增加更多,比如safari),浏览器的简称:cr、ff、op、ie、ie6、ie7、ie8、ie9、iea,简称、路径以键值对方式都保存到browsers中。
    上面的简称大部分人应该都明白了,ie就是系统默认的ie,最后一个iea是在ietester中使用所有版本的ie同时预览(IE5.5-IE9)。

    IETester 的Arguments可以见 : http://www.my-debugbar.com/wiki/IETester/CommandLineArguments

    优点2:
    本地文件自动以file://开头或http://开头的两种方式预览。如果文件在htdocs就用http方式打开,否则用file方式。
    file://开头的地址预览html一般没问题,但是预览php或aspx等就显得苍白无力了。这里可以设置一个htdocs/wwwroot的文件夹地址,然后预览的时候匹配文件是否在这个文件夹内(支持子目录),如果在就用http://方式打开,否则就用file://方式。

    无论前端开发者或者程序员都及其适合。自夸完毕,下面说下使用:
    在_vimrc中加入下面的代码,然后按F4+cr - 在chrome预览,F4+ff  - 在firefox下预览……。方式就是F4+浏览器简称(应该比用F4+1234的数字形式便于记忆)。当然,这个完全可以自己diy的。

    下面fuc里面的浏览器地址需要自己修改,我的文件夹目录和你的可能是有不同的。还有htdocs文件夹、本地的预览的端口号,我使用的是8090.

    " 在浏览器预览 for win32
    function! ViewInBrowser(name)
        let file = expand("%:p")
        exec ":update " . file
        let l:browsers = {
            \"cr":"D:/WebDevelopment/Browser/Chrome/Chrome.exe",
            \"ff":"D:/WebDevelopment/Browser/Firefox/Firefox.exe",
            \"op":"D:/WebDevelopment/Browser/Opera/opera.exe",
            \"ie":"C:/progra~1/intern~1/iexplore.exe",
            \"ie6":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie6",
            \"ie7":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie7",
            \"ie8":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie8",
            \"ie9":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie9",
            \"iea":"D:/WebDevelopment/Browser/IETester/IETester.exe -all"
        \}
        let htdocs='E:\\apmxe\\htdocs\\'
        let strpos = stridx(file, substitute(htdocs, '\\\\', '\', "g"))
        if strpos == -1
           exec ":silent !start ". l:browsers[a:name] ." file://" . file
        else
            let file=substitute(file, htdocs, "http://127.0.0.1:8090/", "g")
            let file=substitute(file, '\\', '/', "g")
            exec ":silent !start ". l:browsers[a:name] file
        endif
    endfunction
    nmap <f4>cr :call ViewInBrowser("cr")<cr>
    nmap <f4>ff :call ViewInBrowser("ff")<cr>
    nmap <f4>op :call ViewInBrowser("op")<cr>
    nmap <f4>ie :call ViewInBrowser("ie")<cr>
    nmap <f4>ie6 :call ViewInBrowser("ie6")<cr>
    

    另外有同学想要linux下面的例子, 我没有环境, Mac下面这样是OK的,可以参考:

    " 在浏览器预览 for Mac
    function! ViewInBrowser(name)
        let file = expand("%:p")
        let l:browsers = {
            \"cr":"open -a \"Google Chrome\"",
            \"ff":"open -a Firefox",
        \}
        let htdocs='/Users/leon1/'
        let strpos = stridx(file, substitute(htdocs, '\\\\', '\', "g"))
        let file = '"'. file . '"'
        exec ":update " .file
        "echo file .' ## '. htdocs
        if strpos == -1
            exec ":silent ! ". l:browsers[a:name] ." file://". file
        else
            let file=substitute(file, htdocs, "http://127.0.0.1:8090/", "g")
            let file=substitute(file, '\\', '/', "g")
            exec ":silent ! ". l:browsers[a:name] file
        endif
    endfunction
    nmap <Leader>cr :call ViewInBrowser("cr")<cr>
    nmap <Leader>ff :call ViewInBrowser("ff")<cr>