迷你部落格

I haven't blogging for a long time because I spend long time coding in Matlab or design some circuit.

Hard studying.

I think I have to update my blog's theme.

Good luck to me.

Xialu "霞路" is my first WordPress theme,a leading CSS3 style theme.It's based on McGeek's theme "Our Love Stories" .You can preview it by pressing "进入霞路" at default theme's navigation bar.In xialu,you can press "回到默认主题" in navigation bar to back to default theme.

This theme is powered by WordPress and Love. It has two wraps , left warp for boy, right warp for girl. First wp-admin account is set as boy defaultly. Users should create a new wp-admin account to set for girl (As this post, I create a new account. I don't have a girl to write with me yet). Between the two warp is a sidebar. This sidebar supports widget. But I write a php-sidebar myself with pages, recent comments, post categories and blog-link. So I strongly do not recommend using widget because I never use it and I haven't written any style to any widget elements in this theme.

This theme is very simple in framework. But I use a lot of CSS3 style for Box. All box-background-color is 0.90 translucent, and border-radius.When users pass the mouse over the box,the box shows a shadow and 0.95 translucent, like this box is glowing.

.box{
	border:0px;
	-moz-border-radius:10px;/* for firefox*/
	-webkit-border-radius:10px;/* for chrome or safari*/
	border-radius:10px;/* for future standard browser */
	background-color:#fff;
	filter:alpha(opacity=90); /* IE alpha filter */
	opacity:0.90;/* standard browser */
}
.box:hover{
	opacity:0.95;
	-moz-box-shadow:0 0 10px #fff; /* for firefox*/
	-webkit-box-shadow:0 0 10px #fff;/* for chrome or safari*/
	box-shadow:0 0 10px #fff;/* for future standard browser */
}

As a Web designer, I got the latest version for Firefox and Chrome in Fedora Linux Opeating System. But IE didn't support border-radius, box and text shadow. IE 6 even didn't support pseudo-class for a div, and framework will be orderless. I didn’t know how tragic this theme would be in IE, but I still factor IE into my design by just giving a fully transparency to div in case of no-background-color(fixed).

Another problem is, the width of the blog-title box will be automatically scaled by the content. Because the lenghth of the content is uncertain. But in IE, the width of the box is determined by the width of the parent element.

.blogtitle{
	width:intrinsic;/*for webkit and other?*/
	width:-moz-fit-content; /*for firefox*/
}

If you like it, leave your comments and I will send it to your mailbox.

超级简单的情侣博客主题.有很多CSS3特效,所以IE下会杯具.喜欢就留言,然后我发邮件.谢谢精兵.

这个阿凡达还是很折腾人的.
昨天写了两种方法,各有各的缺点,第一种要求对博客主题进行编辑,这个对小白要求很高.第二种办法随时都会挂掉.
所以,今天我写的办法是把两个结合起来.
我是免插件流,所以直接手工hack了.

GRAVATAR CACHE还是需要的.它提供了一个Gravatar API.下载地址：http://scott.yang.id.au/code/gravatar-cache/#toc-download

然后打开index.php,修改代码.假设我就放在我博客根目录 http://minidr.com/gravatar/ 这个路径下.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$config = array(
'gravatar' => 'http://www.gravatar.com/avatar.php',
'rating' => 'PG', //默认头像等级
'size' => 24, //默认头像宽度高度,依据博客原头像大小的最大值,也就是 get_avatar($rc_comm,$size='24') 这个函数中的那个数字中的最大值
'default' => '',
'border' => '',
'referrer' => '',
'pos_expiry' => 604800,
'neg_expiry' => 43200,
'neg_handler' => 'file',
'proxy' => '',
'basedir' => dirname(__FILE__),
'x-sendfile' => false,
'debug' => false
);

接着,在 profile 目录,创建一个名为 avatar.php 的文件，用非记事本输入以下字符:

1
2
3
4
5

<?php
$config['default'] = 'http://minidr.com/gravatar/gravatar.png'; //无头像时返回的默认头像路径,假设我放了这张照片
$config['rating'] = 'PG';//gravatar的内容级别
$config['size'] = 24;//头像尺寸
>

这个php的文件名也是API地址的一部分.可以变化.

接着打开 .htaccess 文件,修改:

1
2
3
4
5
6

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

倒数第二行改成目录 我的是

1

RewriteRule . /gravatar/index.php [L]

这样就得到了一个Gravatar地址 http://minidr.com/gravatar/avatar/ .如果搭建有困难,可以拿别人的API地址.
接下来直接篡改 WordPress 的 get_avatar() 函数里面的API地址.位于 /wp-includes/pluggable.php 1645 行.

1645
1646
1647
1648
1649
1650
1651
1652

if ( is_ssl() ) {
$host = 'https://secure.gravatar.com';
} else {
if ( !empty($email) )
$host = sprintf( "http://%d.gravatar.com", ( hexdec( $email_hash{0} ) % 2 ) );
else
$host = 'http://0.gravatar.com';
}

这个几行直接去掉,改成API地址

1645

$host = 'http://minidr.com/gravatar/avatar'; //地址后面千万不要加"/"

大概就是这样吧.具体的地址可以变动.关系到文件夹命名和新建php的文件名.

话说Gravatar挂掉了,大家都做了无头阿凡达.
我这里提供两种办法.都需要一定的php基础哦~

第一种办法:博客服务器的图片代理.

下载一个 GRAVATAR CACHE 的php程序,不是 WordPress 插件,只是一个缓存头像的程序.下载地址：http://scott.yang.id.au/code/gravatar-cache/#toc-download

然后打开index.php,修改代码.假设我就放在我博客根目录 http://minidr.com/gravatar/ 这个路径下.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$config = array(
'gravatar' => 'http://www.gravatar.com/avatar.php',
'rating' => 'PG', //默认头像等级
'size' => 24, //默认头像宽度高度,依据博客原头像大小的最大值,也就是 get_avatar($rc_comm,$size='24') 这个函数中的那个数字中的最大值
'default' => '',
'border' => '',
'referrer' => '',
'pos_expiry' => 604800,
'neg_expiry' => 43200,
'neg_handler' => 'file',
'proxy' => '',
'basedir' => dirname(__FILE__),
'x-sendfile' => false,
'debug' => false
);

接着,在 profile 目录,创建一个名为 avatar.php 的文件，用非记事本输入以下字符:

1
2
3
4
5

<?php
$config['default'] = 'http://minidr.com/gravatar/gravatar.png'; //无头像时返回的默认头像路径,假设我放了这张照片
$config['rating'] = 'PG';//gravatar的内容级别
$config['size'] = 24;//头像尺寸
>

接着打开 .htaccess 文件,修改:

1
2
3
4
5
6

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

倒数第二行改成目录 我的是

1

RewriteRule . /gravatar/index.php [L]

然后去修改主题,找到函数get_avatar(),如果皮肤比较规矩的话,应当能找到.

1

<?php echo get_avatar( $comment, 24 ); ?>

改成

1

<img src="http://minidr.com/gravatar/avatar/<?php echo md5(strtolower($comment->comment_author_email)); ?>" alt="" />

如果像我一样,皮肤不规矩,HTML代码是嵌套在php函数里面echo出来的,

1
2
3

$rc_comments .= "<li>". get_avatar($rc_comm,$size='16') ."<span class='zsnos_comment_author'>" . $rc_comm->comment_author . ": </span><a href='"
. get_permalink($rc_comm->ID) . "#comment-" . $rc_comm->comment_ID. "' title='on " . $rc_comm->post_title . "'>" . strip_tags($rc_comm->comment_content)
. "</a></li>\n";

改成

1
2
3

$rc_comments .= "<li><img src='http://minidr.com/gravatar/avatar/". md5(strtolower($comment->comment_author_email)) ."' alt='' /><span  class='comment_author'>" . $rc_comm->comment_author . ":  </span><a href='"
. get_permalink($rc_comm->ID) . "#comment-" .  $rc_comm->comment_ID. "' title='on " . $rc_comm->post_title .  "'>" . strip_tags($rc_comm->comment_content)
. "</a></li>\n";

这样返回的结果是固定大小的,但是文章下面和边栏的头像图片大小有可能不一样大,如返回24,边栏只要16.如果发现浏览时不正常,还要对博客的主题的CSS进行修改,让CSS限制图片大小.
查看图片上一层div的id或者class属性,如id="rc_comment"

那css里就加入

1
2
3
4

#rc_comment img{
height:16px;
width:16px;
}

第二种办法是直接修改 WordPress 的 get_avatar() 函数.因为https还没有挂掉,所以可以换gravatar地址.位于 /wp-includes/pluggable.php 1645 行.

1645
1646
1647
1648
1649
1650
1651
1652

if ( is_ssl() ) {
$host = 'https://secure.gravatar.com';
} else {
if ( !empty($email) )
$host = sprintf( "http://%d.gravatar.com", ( hexdec( $email_hash{0} ) % 2 ) );
else
$host = 'http://0.gravatar.com';
}

这个几行直接去掉,改成

1645

$host = 'https://secure.gravatar.com';

就这么一行,问题解决了.不过,这不是一个长远的办法~~~你懂的.

如题.
我也赶潮流,把博客弄黑白.可惜本人水品有限,只能把IE弄黑~

<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>

手中木有IE,不知道效果~

今天早上作者再次更新了博客主题.移步这里参观,下载.
但是,作者相当懒.
本来最近回复的函数在WP3.0杯具的.他增加侧边栏的widget支持,然后居然最新回复的函数去掉了,改用 WP Kit CN 插件提供的最新评论功能.
这个太邪恶了,我不喜欢widget,更加不喜欢插件.我的博客一共就3个插件,去垃圾留言,评论者浏览器信息,还有邮件回复.
于是我又自己折腾了一下函数,搞得和作者的一样,不过是直接写在sidebar.php的.
另外,作者的嵌套评论中的第二层是没有头像的,我自己重新写了函数...然后头像就出来了

还有,作者提供的和他自己页面上的样子还是不一样的.头部他自己重新写了,但是不放代码.
如果有同学需要我改造的版本,自己留言吧.我发到你们邮箱里.