我干什么去了?

最近都没更新文章,实在是太忙了,又是期中考又是做主题。

这次做的主题可以说是一个准商业的CMS主题,是帮上海某家游戏门户网站做的,首页上全部调用分类文章,首页数据库查询次数达到了惊人的80+,May God Bless Their Server~

先把首页图片放出来给大伙看看把,布局什么的都是按照客户的意思做的。

  这次也是我首次写模板后台,参照了无数模板的后台代码终于在磕磕绊绊中写出来了,也放张图给大伙看下吧。

  汇报完毕,实在想不出还写些啥了,我还是去洗衣服吧。

WordPress微博主题ZXT-Battlenet公开发布

  这个主题是我很久很久以前基于zxt的微博主题修改而来,呃,到底有多久呢?各位可以去看这篇文章,自从那篇文章写出来后,有不少人想要,但我只给了部分几个,这就是为什么我把标题写成公开发布的原因。

  好了,废话不多说了,上下载链接。
http://iskeee.googlecode.com/files/zxt-battlenet.zip
  DEMO看这里:http://athere.cn/

主题释疑

  为什么叫ZXT-Battlenet?
  因为原作者发布的时候主题是叫ZXT,而我修改后使用了战网(Battlenet.com.cn)的背景图片,所以我就直接组合了名称。

  主题Banner上的图片是我去年中秋节做的,所以看起来很河蟹(河蟹社会嘛,哈哈),估计99.999%的人会不用这图片,所以不用的请打开主题文件夹中的style.css,搜索#header,把

background:url("images/header.gif") no-repeat scroll 0 0 #C73A25;

删了,如果你想换张其他图片,请打开主题文件夹中的images文件夹,把header.gif替换之。

  主题左上方的导航修改是在header.php内,请搜索#menu,然后依葫芦画瓢,注意,由于IE6实在二逼,所以,我对IE6做了hack,在IE6中是看不见左上方导航的,倔强的IE6用户不必感到疑惑。

  主题已经内置翻页,无需再使用翻页插件。

  主题中数据统计上一行是显示友情链接的地方,如果你不想使用,请打开index.php查找

<div id="index_links">
<div class="index_links_content">
<?php get_links('2', '<span>', '</span>', '', FALSE, 'id', FALSE, FALSE, -1,
FALSE); ?>
</div>
</div>

全部删除之,如果你想使用但却没显示出链接来,请修改

<?php get_links('2', '<span>', '</span>', '', FALSE, 'id',
FALSE, FALSE, -1, FALSE); ?>

中’2’的数字,把2修改成你想显示链接表的id,具体数字请到后台链接分类目录中查看,如果还不明白,那请把2删除。

  哦了,暂时就说这么多,有其他问题的请留言。

自动显示回头访客的Gravatar头像

  细心的同学可能发现了,当你准备第二次在本博发表评论时你的Gravatar头像已经自动显示出来了,其实这也不是什么高端技术,三四行的代码即可实现,废话不多说,上代码:

<?php if ( $comment_author_email ) {echo get_avatar($comment_author_email,'64');}?>

64是表示Gravatar头像的尺寸,可以自行修改。

  你可能会说如果我已经登入了,想回复别人的评论时却看不见自己头像,恩,这非常好办,把代码稍微修改一下即可:

<?php if ( is_user_logged_in() ) : ?>
<?php echo get_avatar('[email protected]','64'); ?>//输出电邮对于的头像,电邮地址请改为自己的
<?php else : ?>
<?php if ( $comment_author_email ) {echo get_avatar($comment_author_email,'64');} ?>//输出Cookies中的电邮对于的头像
<?php endif; ?>

这样一来就可以再你登录后看见自己的头像了。呃,代码我是放置在在评论者信息输入框下面,当然,你想把它扔到header也是可以的。

  什么?你放置代码后评论框区域错位的像整容出院后的凤姐般惨不忍睹?请出门左拐找CSS的麻烦去吧,至于怎么找麻烦我就不多说了,既然能有颗玩Wordpress的心,那么也必须有一颗能从Google中探索出知识的心。

  最后祝大家愚人节快乐,在整人的同时也别忘了自己也会被别人整,我可是被我们这个外教一个鸡蛋爆头了。

利用jQuery实现文章部分内容收缩

  记得以前写过一篇名叫利用Collapsible Elements实现文章内容折叠效果的文章,当时Willin大师说过可以用jQuery来实现,无奈当时对jQuery毫无一点研究,只能硬着头皮用插件解决,这短时间稍微研究了下jQuery后,发现实现起来其实很简单,无非就是使用slideDown和slideUp俩函数,但下面代码和demo里面默认的是FadeIn和FadeOut两个函数,效果是渐显和渐隐,为什么不用收缩效果呢?因为在IE里面用收缩函数会不完美,在此再次鄙视IE。

  结合Willin大师思路做出来的精简版:

$(document).ready(function() {
var botton='<span  style="cursor: pointer; color:#CC0033;background:#000;">点我</span>';
$('#box-botton').append(botton);
//向#box-botton内添加上面定义的按钮
$('#box-botton>p').addClass('box');//为#box-botton内的<P>...</P>内添加class=botton
$('.box').insertAfter('.botton');
//把按钮放在展开内容之前,因为默认会把按钮放在展开内容之后
$('.botton').click(function() {
$(this).siblings().slideToggle(500);return false;});
//使用siblings是为了选择全部包含class=box的段落,如果使用next或prev的话只能选择相邻的同辈元素,也就是上面的一个或下面的一个,如果存在多个段落的话就会失效。
});

  现在这个应该算是比较完美的版本了,解决了按钮会落在展开内容下面的缺陷,但效果只有展开,如果需要更多效果,请参照后面的代码修改。

  使用方法:在需要使用的地方用<div id=box-botton></div>包起来,如果你嫌字母太多的话,那就换个字母少的单词定义元素。

  Demo:http://leo-n.com/demo/demo2.html

  之前的代码如下: 继续阅读利用jQuery实现文章部分内容收缩

利用jQuery改变网页元素加载顺序

  在上一篇介绍副标题处显示嘀咕消息的文章中,我是把嘀咕的js放在header.php中,这是一个常规的方法,简单方便易实现,但这方法也存在一个很大的弊端,因为网页是按从上到下的顺序进行加载,引用了一段外部js在头部后,自己博客首页打开速度就会受到影响,还有就是在外部js失效后,博客首页也就会卡在那打不开了,极大的降低了访客体验度,有没有其他方法可以解决呢?

  我首先想到的方法就是把嘀咕的代码单独保存为一个php文件,加载到index.php的底部中,再利用css的绝对定位absolute把其定位到博客副标题处来显示,用top和left调整好位置后,在我笔记本屏幕上显示没有问题,但换到其他分辨率下,错位问题也就随之而来了, 具体原因请看absolute的定位原理:

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

所以,这个方法被否决了,Google之后,我发现了另外的一个方法,就是本文标题所述的内容:利用jQuery改变网页元素加载顺序,下面就以副标题处显示嘀咕消息为例来介绍如何利用jQuery来改变网页元素的加载顺序。 继续阅读利用jQuery改变网页元素加载顺序