这两天写NewRealm5的时候，因为首屏需要设置成高度占满全屏，一直很纠结，NewRealm2的时候，我是用的是JS方式，但是这个方式响应式效果不是很理想，每次窗口更改高度都要刷新页面才能看到效果，于是抛弃掉这个方案。

<script type="text/javascript">
function onresize(){ 
var len = document.documentElement.clientHeight;$("#header").css("height",len + 'px');
}; 
onresize();
</script>

较早时间接触过“vh”这个单位，这个单位是吧屏幕分成100个部分，100vh就是占满屏幕高度了，这个方法超级方便，也能较好的支持响应式，在电脑端一切准备就绪之后，在手机端打开瞬间就失望了，手机浏览器好像并不支持vh这个单位，于是求助于

利用强大的搜索引擎，在一番筛选之后，找到了一个超级简单的解决方案，利用CSS方案，就是直接在CSS初始部分加上 html,body{height:100%;}剩下的便是安心的为容器加height:100%;了

上篇文章由于技术拙计，使用了非常痴呆的修改源文件去解决Gravatar被墙的问题，一旦程序更新，那么一切又要重新修改，相对来说还是很麻烦的，于是，更简单的方法来了。 将下方代码粘贴进入主题文件夹下的function.php内：

//自定义评论列表区域
function threadedComments($comments, $options) {
    $commentClass = '';
    if ($comments->authorId) {
        if ($comments->authorId == $comments->ownerId) {
            $commentClass .= ' comment-by-author';
        } else {
            $commentClass .= ' comment-by-user';
        }
    }

    $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
?>

<li id="li-<?php $comments->theId(); ?>" class="comment-body<?php 
if ($comments->levels > 0) {
    echo ' comment-child';
    $comments->levelsAlt(' comment-level-odd', ' comment-level-even');
} else {
    echo ' comment-parent';
}
$comments->alt(' comment-odd', ' comment-even');
echo $commentClass;
?>">
    <div id="<?php $comments->theId(); ?>">
        <div class="comment-author">
            <?php
            //头像CDN by Rich
            $host = 'https://secure.gravatar.com'; //自定义头像CDN服务器
            $url = '/avatar/'; //自定义头像目录,一般保持默认即可
            $size = '32'; //自定义头像大小
            $rating = Helper::options()->commentsAvatarRating;
            $hash = md5(strtolower($comments->mail));
            $avatar = $host . $url . $hash . '?s=' . $size . '&r=' . $rating . '&d=';
            ?>
            <img class="avatar" src="<?php echo $avatar ?>" alt="<?php echo $comments->author; ?>" width="<?php echo $size ?>" height="<?php echo $size ?>" />
            <cite class="fn"><?php $comments->author(); ?></cite>
        </div>
        <div class="comment-meta">
            <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a>
            <span class="comment-reply"><?php $comments->reply(); ?></span>
        </div>
        <?php $comments->content(); ?>
    </div>
<?php if ($comments->children) { ?>
    <div class="comment-children">
        <?php $comments->threadedComments($options); ?>
    </div>
<?php } ?>
</li>
<? }

OK，评论区域的头像问题就可以更简单的解决了，更新程序也不用重新修改源文件了。 头像源清参考：

“https://secure.gravatar.com”可以改成其它源。

多说的源：http://gravatar.duoshuo.com

七牛镜像源：http://avacdn.qiniudn.com

七牛镜像SSH源：https://dn-avacdn.qbox.me

当然自己搭建七牛镜像，或者反向代理Gravatar也是比较简单的，就不再赘述。

如果使用“评论墙”功能，请参考 >上一篇文章<

本篇文章代码来自 @Rich

前两天Gravatar突然被墙，本来也没怎么在意，但是网站速度被拖得实在是难以忍受的地步，无奈，只好想一下解决方法，于是昨晚睡觉前百度了下，发现那些解决方案都是Wordpress的，例如@大发最新的解决方案：

function get_ssl_avatar($avatar) {
$avatar = preg_replace('/.*/avatar/(.*)?s=([d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2" />',$avatar); return $avatar; }
add_filter('get_avatar', 'get_ssl_avatar');

但是Typecho并没有相关的文档，本想把大发的代码修改到TE，但是我不会PHP，看了好半天，翻了下程序源文件，怎么改都不行，于是我只好苦逼的修改源文件去了，希望好基友们看到后帮我鼓捣下。 好了，修改源文件其实也超级简单，只需要一行就可以了，方法如下： 打开

varWidgetAbstractComments.php 文件 在第413行找到$url = $host . '/avatar/';修改为：//$url = $host . '/avatar/'; $url = 'https://secure.gravatar.com/avatar/'; 然后保存就行了，就是把上面那个注释掉然后手动加一个链接。

最新版（1.0-14.10.10）的解决方法，同样是打开Comments.php，第397行，将下方代码：

$url = Typecho_Common::gravatarUrl($this->mail, $size, $rating, $default, $this->request->isSecure()); 修改为：

$mailHash = NULL; if (!empty($this->mail)) { $mailHash = md5(strtolower($this->mail)); }
$url = 'https://secure.gravatar.com/avatar/';
if (!empty($this->mail)) {$url .= $mailHash;}
$url .= '?s=' . $size; $url .= '&r=' . $rating;
$url .= '&d=' . $default; //$url = Typecho_Common::gravatarUrl($this->mail, $size, $rating, $default,$this->request->isSecure());

“https://secure.gravatar.com”可以改成其它源。

多说的源：http://gravatar.duoshuo.com

七牛镜像源：http://avacdn.qiniudn.com

七牛镜像SSL源：https://dn-avacdn.qbox.me

当然自己搭建七牛镜像，或者反向代理Gravatar也是比较简单的，就不再赘述。

另外，如果你正在使用“评论墙”功能，那么可以在插件或者主题的function.php中找到如下代码：

$mostactive .= '<img class="avatar" src="http://'.$my_array[rand(0,3)].'.gravatar.com/avatar/'.md5(strtolower($value['mail'])).'?s=40&d=&r=G" /></a></li>';

将其修改为如下：

//$mostactive .= '<img class="avatar" src="http://'.$my_array[rand(0,3)].'.gravatar.com/avatar/'.md5(strtolower($value['mail'])).'?s=40&d=&r=G"/></a></li>';
$mostactive .= '<img class="avatar" src="https://secure.gravatar.com/avatar/'.md5(strtolower($value['mail'])).'?s=40&d=&r=G"/></a></li>';

同样是将默认的注视，然后修改，源地址参考上面的自行修改即可。 另外，我的Wordpress的主题从GoodNice版本后就支持在设置中修改avatar的源了，方法如下：

主题兼容主流浏览器，支持IE8+浏览器，往有下没做测试，理论上可以勉强阅读，Chrome浏览效果最佳。

响应式设计，采用了双导航设计，手机浏览会有非常好玩的侧滑导航哟，电脑上能够阅读的内容都尽可能的做到不隐藏了。

侧边栏保留了3个，放置页面底部位置，既保证了更多的内容，又不占用阅读空间，广告同样放在了页脚部分，不影响阅读

上图预览

NewRealm 2下载

本方法依托jQuery

<script type="text/javascript">
    jQuery(document).ready(function(){jQuery("a[rel='external'],a[rel='external nofollow']").click(function(){window.open(this.href);return false})});
</script>

将上方代码丢进主题的任意部分（丢在页脚吧），然后刷新页面，就能很完美的体验了。

由于TE默认使用的是MD编辑器，添加链接的时候无法像WP用户一样选择让文章内的链接在新窗口打开，那么我们其实也可以用JS让文章内的链接在新窗口打开的。

<script type="text/javascript">
    jQuery(document).ready(function($){$('.post-content a').attr({ target:"_blank"})});
</script>

把上面代码一起丢进主题里就行了，Class一般不用修改，如果主题修改程度过大，那么就修改一下.post-content为你主题文章部分的Class吧 OK，愉快的使用吧。