博客升级到3.01DarkLight 3.0 - 沉寂号-CThAo-官方站
当前位置:首页 » 资源下载 » 本页

博客升级到3.01DarkLight 3.0 On 资源下载  @2010-09-02

由于空间上的缘故,跑路闪人;只能重新换空间,顺便把博客程序升级到3.01,博客主题也换成DarkLight 3.0 。

Twenty Ten 真是一个强大的主题,DarkLight 3.0 主题的功能基本与其保持一致。外观上基本保持 DarkLight 原有风格,换了些小图标,用了 Sprites 集成图片,技术一般,有点乱,不过不影响主题使用就是了。下面来个图文并茂的介绍。

首先 Header 部分:

相对之前的主题,导航栏这次用 jQuery 实现多级菜单,样式相对改进了,增加 box-show 效果(IE 不会有这个效果),包括侧边栏,如果有多级菜单的话,也加了这个效果,当然,你不要的话可以自己去掉;主题支持 WordPress 3.0 的菜单功能,Twenty Ten 自带有了。

Header Nav Menu

其次是内容部分:

把之前使用内嵌的 wp-pagenavi 插件函数换成 willin 的 Mini Pagenavi,更加小巧,样式有轻微改动。

Mini Pagenavi

单篇文章中显示上一篇文章和下一篇文章的链接,在顶部和底部都有,这是 Twenty Ten 原来有的,我也保留了,不需要删除掉也比较简单。

Posts Navigation

相关文章本来想内嵌使用 willin 的方法,但还是放弃,不过样式还是保留在 style.css 文件里面,而且用 jQuery 实现类斑马纹样式,同样保留 js 代码,无论你用什么方法实现相关文章,只要给标题添加类 class="related_post_title",给列表 ul 或者 ol 添加类 class="related_post",那效果就类似下图:

Related Posts

作者信息栏,这个也是 Twenty Ten 自带,只要文章发布者有关于自己的描述说明,那么就会在文章底部显示作者信息,并可以点击链接查看该作者的全部文章。对于单人博客来说没啥用,如果多人参与的话,那相当有必要:

About the Author

第三是评论部分:

首先是评论样式,重新设计了评论样式,奇数评论层跟偶数层样式不同,然后内嵌回复部分使用左右对话框样式,依然只支持嵌套 3 层,复杂的样式设计多层,挺累人的,代码也会复杂;同时还有评论楼层,只显示主评论楼层,具体看图:

评论样式

然后是 Ajax comment,使用的是 willin 的版本,然后 jQuery 增加 @reply,即点击回复会自动添加 @somebody: ,还有 Ctrl+Enter 回复评论,隐藏回访用户资料框等常用功能。

最后是 sidebar 和 footer 部分:

这里似乎没什么好说的,因为用的 Twenty Ten 的结构,所以你完全可以使用主题的小工具来设置侧边栏,样式上不会存在问题,如果有那应该是我没有测试到吧。不仅侧边栏可以使用小工具,底部 footer 也可以:

页脚

至于返回顶部的 Go Top,像之前说的,我并没有打算给它加上 js 滚动效果,不过样式上做了下改动而已。

其他:

主题支持 Opera 10,Firefox 3.0,Chrome,IE8,IE7,IE6,手头没 Safari,没测试;Doctype 由 HTML5 改成 XHTML 1.0 Traditional;主题不能通过 CCS 3 验证,因为圆角和阴影效果的缘故,也不能通过 HTML 验证,因为 Twenty Ten 用了 HTML5 的 role 属性,我也懒得去全部改掉了;关于 CSS Sprites,把很多图片弄成一张,省去加载多张图片的时间;然后我又去掉了 Twenty Ten 原有支持的单栏样式;测试时间并不长,所以可能还有一些细节上或者其他问题,请 DarkLight 3.0 使用者帮忙汇报 Bug,谢谢!

最后的最后,再次声明,DarkLight 3.0 主题是基于 Twenty Ten 主题,请遵循署名-非商业性使用-相同方式共享 3.0.0 共享协议,去掉 footer 版权信息的朋友请自重,不要连 WordPress 的也搞掉吧。

  1. 2010-08-29 早上更新:居然忘记测试 404 页面,稍微修改了下,并且增加一个说明文件。
  2. 2010-08-29 下午更新:修改 IE6、IE7 下鼠标滑过文章标题时,文章背景线显示不全的问题;修改 IE6 下,鼠标滑过文章内链接时,文章分割线下滑问题,IE 实在太囧了;修改在回复评论时,第二层回复者名字的显示位置;修改成功提交评论后,增加提示评论成功的句子的左边距,保持美感,汗。
  3. 2010-9-2:给正文增加 overflow: hidden 属性,避免溢出情况。

演示:Live Demo
下载:下载 WordPress 主题:DarkLight 3.0



已经有 3 枚评论. 发表 »

我说两句 »

Ctrl+Enter