Hello World
Spiga

正在构建一个新的版式

2009-05-20 20:55 by 老赵, 21291 visits

老赵对目前博客园中的模板都不太满意:样式单调,元素不够丰富,不容易Hack,不够“标准”,不够充分利用屏幕横向距离等等。因此和dudu商量后,准备为博客园新增一个模板。新模板以Minyx 2.0 Lite为蓝本进行一些调整,如把固定宽度修改为右边固定,左边自适应的满屏宽度,还有把字体设为更适合中文的样式等等。经过几个小时努力,结果如下图:

新版式

这个版式可以保证在1024宽度下没有横向滚动条,最佳浏览宽度为1280至1650,基本上适合目前主流显示器分辨率。此外定义了各种标准元素,如各级标题,图片嵌入,代码样式,列表,引用等等。左侧为文章主体,可以让读者打开后直接阅读。右侧分一大栏和两小栏,充分利用屏幕宽度展示更多内容。

看过老赵blog的朋友一定发现老赵对于博客的修改还是较为投入的,例如调整模块顺序,集成“相关文章”和Twitter等内容,不过使用起来还是觉得不够顺手。因此这个版式更重要的特点便是易于Hack,可以有充足及优雅的方式让用户调整自己的博客。具体方式还在思考,最终老赵也会以“教程”的方式来介绍这个版式的使用方法。

最后便是要移植到博客园的版式上了,希望会顺利——老赵对Minyx 2.0 Lite进行了较大幅度的修改,精简了许多HTML与样式,集成起来应该没有问题。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

53 条回复

  1. MHL
    *.*.*.*
    链接

    MHL 2009-05-20 20:59:00

    呵。看上去 怎么这么像我的 wordpress 的样式呢?
    :)

  2. 地狱门神
    *.*.*.*
    链接

    地狱门神 2009-05-20 21:00:00

    支持

  3. 老赵
    admin
    链接

    老赵 2009-05-20 21:01:00

    @MHL
    不知道呢,不过本来就是基于一个wordpress的模板修改的。
    找一个合适的样式真难,这个的确不错。

  4. 缘易姿姿
    *.*.*.*
    链接

    缘易姿姿 2009-05-20 21:02:00

    @MHL
    同意。

    期待老赵这个版式!

  5. Nick Wang (懒人王)
    *.*.*.*
    链接

    Nick Wang (懒人王) 2009-05-20 21:03:00

    not bad!

  6. 不错[未注册用户]
    *.*.*.*
    链接

    不错[未注册用户] 2009-05-20 21:10:00

    不错不错,老赵就是厉害啊

    http://blog.csdn.net/lovezj123

  7. 过客007[未注册用户]
    *.*.*.*
    链接

    过客007[未注册用户] 2009-05-20 21:19:00

    最佳浏览宽度为1280至1650
    ====================
    这个比较反对,尽管显示器支持,但是字太小,比较费眼。
    建议最佳浏览宽度还是1024,这样显示器字体可调大一些。

  8. 李永京
    *.*.*.*
    链接

    李永京 2009-05-20 21:24:00

    期待老赵的模板~~

  9. Grove.Chu
    *.*.*.*
    链接

    Grove.Chu 2009-05-20 21:28:00

    支持,期待老赵的新模板……

  10. James.Ying
    *.*.*.*
    链接

    James.Ying 2009-05-20 21:28:00

    赞一个 样式不错的说~

  11. 漫笔者
    *.*.*.*
    链接

    漫笔者 2009-05-20 21:45:00

    老赵竟然也是爱美之人,呵呵。

  12. zhaorui
    *.*.*.*
    链接

    zhaorui 2009-05-20 21:47:00

    比较喜欢这个看上去很干净的模版,如果移植成功的话,我也打算采用这个模版。
    至于用户自己的调整,是不是只需要修改CSS即可?最近刚刚看完《CSS禅意花园》

  13. *天天向上*[未注册用户]
    *.*.*.*
    链接

    *天天向上*[未注册用户] 2009-05-20 22:05:00

  14. Arthraim[未注册用户]
    *.*.*.*
    链接

    Arthraim[未注册用户] 2009-05-20 22:05:00

    看到老赵twitter上说过这事情,看来最后还是没有忍住…………

  15. 老赵
    admin
    链接

    老赵 2009-05-20 22:14:00

    --引用--------------------------------------------------
    过客007: 最佳浏览宽度为1280至1650
    ====================
    这个比较反对,尽管显示器支持,但是字太小,比较费眼。
    建议最佳浏览宽度还是1024,这样显示器字体可调大一些。
    --------------------------------------------------------
    听不懂,这个和字体大小有什么关系?你觉得现在的字体很小?
    这里宽度只是一行字数多少的问题,不影响文字大小。

  16. 老赵
    admin
    链接

    老赵 2009-05-20 22:16:00

    --引用--------------------------------------------------
    *天天向上*: 反对!
    看看这个吧:http://www.williamlong.info/archives/1757.html
    --------------------------------------------------------
    有啥反对?反对什么?反对我做版式?
    我觉得我的版式几乎完全符合你给的这篇文章:
    1、1024可以正常浏览。
    2、1280及以上宽屏下显示更佳。

    事实上,我就是根据我的blog实际访问情况决定这个策略的,呵呵。

  17. 老赵
    admin
    链接

    老赵 2009-05-20 22:21:00

    --引用--------------------------------------------------
    漫笔者: 老赵竟然也是爱美之人,呵呵。
    --------------------------------------------------------
    对于blog我花的心思可多了,呵呵。

  18. 老赵
    admin
    链接

    老赵 2009-05-20 22:23:00

    @zhaorui
    CSS是一个,JavaScript也是Hack的必备。

  19. 潘安+宋玉
    *.*.*.*
    链接

    潘安+宋玉 2009-05-20 22:23:00

    很漂亮啊,期待中....

  20. chegan
    *.*.*.*
    链接

    chegan 2009-05-20 22:33:00

    http://themepreview.amazingwordpressthemes.com/
    文中的这个连接看不到内容??

  21. 杜建宇
    *.*.*.*
    链接

    杜建宇 2009-05-20 22:35:00


    其实如果字体还是那么多字体的话,屏幕宽了,行就少了,然后很难看的说,哈哈

  22. 老赵
    admin
    链接

    老赵 2009-05-20 22:45:00

    --引用--------------------------------------------------
    @杜建宇:其实如果字体还是那么多字体的话,屏幕宽了,行就少了,然后很难看的说,哈哈
    --------------------------------------------------------
    没事,我的文章够分量,篇幅大,怎么放都好看。而且这个版式文字略大,行间距略高,很撑篇幅的——远比我现在用的模板来的饱满。
    我现在比较那个的就是,以前一些文章的样式需要改一下了,以前为了在一些难看的版块下显示正常,内嵌了很难看的样式。

  23. 老赵
    admin
    链接

    老赵 2009-05-20 22:45:00

    --引用--------------------------------------------------
    chegan: http://themepreview.amazingwordpressthemes.com
    文中的这个连接看不到内容??
    --------------------------------------------------------
    最近DNS有问题,估计是这个原因,发文章时还是好的。

  24. Leem
    *.*.*.*
    链接

    Leem 2009-05-20 23:29:00

    没想到老赵还有这一腿,不过感觉中文字体也不咋的阿

  25. 老赵
    admin
    链接

    老赵 2009-05-20 23:45:00

    --引用--------------------------------------------------
    Leem: 没想到老赵还有这一腿,不过感觉中文字体也不咋的阿
    --------------------------------------------------------
    对于网页来说,中文字体比英文字体可选择地余地要少太多,英文就是丰富,没有办法。
    所以,中文字体,就还是最简单的了。

  26. 辛勤的蜜蜂
    *.*.*.*
    链接

    辛勤的蜜蜂 2009-05-21 00:00:00

    很漂亮!

    外国的网站总是比国内的网站漂亮点. 设计理念也是如此..

  27. 老赵
    admin
    链接

    老赵 2009-05-21 00:09:00

    @辛勤的蜜蜂
    设计理念是指什么?

  28. ~_~[未注册用户]
    *.*.*.*
    链接

    ~_~[未注册用户] 2009-05-21 00:27:00

    偶觉得, 弄一个 图片的 自适应和查看脚本(比如集成个Lightbox)最实在.
    现在大多数的模板都是图片一大,就非常难看.

  29. 老赵
    admin
    链接

    老赵 2009-05-21 00:41:00

    @~_~
    这个和版式又没有关系,需要的话自己在文章里放图片放LightBox没有任何问题啊。

  30. TerryLee
    *.*.*.*
    链接

    TerryLee 2009-05-21 01:09:00

    嘿嘿,老赵还是忍不住自己要做一个模版了 :)

  31. ~_~[未注册用户]
    *.*.*.*
    链接

    ~_~[未注册用户] 2009-05-21 01:46:00

    @Jeffrey Zhao
    我是说弄个图片自适应的脚本比弄个新版式更有普遍意义.
    那的确不应该跟版式有什么关系, 就像discuz这样的论坛系统, 不管你换哪一个模板, 图片都是有自适应和查看特效的.
    至于版式嘛, 萝卜青菜各有所爱, 不过你挑的这个模板, 我倒也蛮喜欢的. 不知道啥时候才能出炉呢?

  32. 老赵
    admin
    链接

    老赵 2009-05-21 01:52:00

    @~_~
    我不要普遍意义,我是为我自己做的,呵呵。
    这个星期我搞版式,下个星期dudu移植,再下个星期应该就好了吧。
    我和dudu都不是闲人,所以进度估计快不了。
    其实我也很期望这个模板赶快发布的,哎哎。

  33. 老赵
    admin
    链接

    老赵 2009-05-21 01:53:00

    --引用--------------------------------------------------
    TerryLee: 嘿嘿,老赵还是忍不住自己要做一个模版了 :)
    --------------------------------------------------------
    好马配好鞍,好博配好版。

  34. caedmon
    *.*.*.*
    链接

    caedmon 2009-05-21 08:33:00

    期待中。。。

  35. 妖居
    *.*.*.*
    链接

    妖居 2009-05-21 09:29:00

    不错不错。看来老赵在美学方面也很有造诣么……

  36. LanceZhang
    *.*.*.*
    链接

    LanceZhang 2009-05-21 09:29:00

    嗯呐,是该改改了,老赵博客样式老土了

    建议使用微软雅黑字体,英文用Calibri字体,圆润细腻,很和谐

  37. 麒麟.NET
    *.*.*.*
    链接

    麒麟.NET 2009-05-21 09:39:00

    这个字体看着不错啊,是什么字体?

  38. 老赵
    admin
    链接

    老赵 2009-05-21 09:51:00

    @LanceZhang
    我还是喜欢宋体和Vendana,字正腔圆。
    当然,如果纯英文博客,Vendana就退居二线了。

  39. 老赵
    admin
    链接

    老赵 2009-05-21 09:58:00

    --引用--------------------------------------------------
    麒麟.NET: 这个字体看着不错啊,是什么字体?
    --------------------------------------------------------
    宋体

  40. 老赵
    admin
    链接

    老赵 2009-05-21 09:58:00

    --引用--------------------------------------------------
    妖居: 不错不错。看来老赵在美学方面也很有造诣么……
    --------------------------------------------------------
    美学?就看个顺眼不顺眼,没有那么高的高度。

  41. 麒麟.NET
    *.*.*.*
    链接

    麒麟.NET 2009-05-21 10:03:00

    @Jeffrey Zhao
    hehe,看着不像宋体,感觉怪怪的,难道是截图后的效果?

  42. 老赵
    admin
    链接

    老赵 2009-05-21 10:11:00

    @麒麟.NET
    不是宋体吗?我不懂哎,其实就是自然的默认字体。

  43. ~_~[未注册用户]
    *.*.*.*
    链接

    ~_~[未注册用户] 2009-05-21 10:47:00

    --引用--------------------------------------------------
    Jeffrey Zhao: @~_~

    我不要普遍意义,我是为我自己做的,呵呵。

    这个星期我搞版式,下个星期dudu移植,再下个星期应该就好了吧。

    我和dudu都不是闲人,所以进度估计快不了。

    其实我也很期望这个模板赶快发布的,哎哎。
    --------------------------------------------------------
    呃, 我只是说的观点, 没说让你来做, 那不是你的事情, 如果特别需要, 自然有人向dudu提出的, 不是吗?
    PS: 似乎你最近 "一根筋" 比较严重, 按说你其实没敌意, 但说出来的话常给人感觉有点带刺儿. 如果说的不对, 不要见怪哈.

  44. 老赵
    admin
    链接

    老赵 2009-05-21 11:00:00

    @~_~
    没看出哪里有刺……我没有觉得你有啥恶意,我就更没有恶意了。
    最近“常带刺”吗?我还有哪些话带刺?如果其他朋友看到也不妨指出,我设法改进一下,呵呵。

  45. 飘风之鹰
    *.*.*.*
    链接

    飘风之鹰 2009-05-21 12:24:00

    期待中,希望有更多更好的模板,要清爽、要有美感、要...

  46. 陈超群
    *.*.*.*
    链接

    陈超群 2009-05-21 13:06:00

    请问老赵,hack是什么意思?css hack?
    推荐一个我觉得最漂亮的wordpress皮肤,
    淘宝的前端开发玉伯的博客:http://lifesinger.org/blog/
    这个博客我找到过英文原版,但是是960px宽的,他应该是自己修改过的,在任何大小浏览器上看着都很舒服。自适应的,不过有最小宽和最大宽度限制。

  47. 老赵
    admin
    链接

    老赵 2009-05-21 14:01:00

    @陈超群
    嗯,我也是自适应,最小950宽度,最大1600宽度。
    hack就是在现有模板基础上,通过定义CSS和插入JS得到修改的效果。

  48. CoolCode
    *.*.*.*
    链接

    CoolCode 2009-05-25 00:01:00

    留给记号,期待快点可以使用。

  49. 老赵
    admin
    链接

    老赵 2009-05-25 00:29:00

    --引用--------------------------------------------------
    CoolCode: 留给记号,期待快点可以使用。
    --------------------------------------------------------
    上周五已经提交给dudu了,我也希望可以尽快使用。:)

  50. 天生俪姿
    *.*.*.*
    链接

    天生俪姿 2009-05-25 21:14:00

    决定去引用下。
    呵呵
    好久没有来了。支持下 老赵。

    老赵的新照片蛮Man的。呵呵。

  51. 麒麟.NET
    *.*.*.*
    链接

    麒麟.NET 2009-06-05 16:31:00

    老赵,新博皮已经出来了,不过在我的1024*768的分辨率下用着很不爽,呵呵。文字部分仅占页面的一半,看着很单薄。
    赶快换上新皮吧,书拖系列赶紧更新吧!

  52. CoolCode
    *.*.*.*
    链接

    CoolCode 2009-06-05 19:30:00

    呵呵!你的新皮肤我已经用上了。很好,但是我想问一个:怎么两边不流一点位置? 测试环境:分辨率1280 ,IE8。 而且竟然IE下面还跑个scroll出来,不知何故?

  53. 老赵
    admin
    链接

    老赵 2009-06-05 19:33:00

    @CoolCode
    不应该,我提交的版式是宽度自适应的,在1024宽度上也不会出现滚动条才对。
    估计制作模板的时候有些差错吧,我检查一下。

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我