您正在查看: Typecho相关 分类下的文章

Typecho文章评论时评论者头像引发的性能问题

Overview

最近在阅读博客中的文章时发现一个奇怪的现象,就是有评论的文章加载速度特别慢,代码块的颜色渲染也要等很久才能显示出来。这让我很困惑,因为我将代码块高亮渲染的代码也放在了本地。最初我以为是代码块中的代码太多,导致渲染时间久。后来发现只有有评论的文章才会出现这种情况,使用了Chrome发现,有评论的页面会出现http://www.gravatar.com/avatar/#####链接请求失败。#####是我省略的一串不可读字符串,后面会说这些字符串是什么。
因为http://www.gravatar.com/avatar这个服务不可用,所以导致页面一直在等待这个网址的回复,直到超出响应时间,才会运行接下来的动作,比如渲染代码块高亮颜色

评论者头像提供服务

其实blog在显示评论者图片时,并不是显示本地的图片或者评论者自己设定的图像,而是用用头像提供网站服务给评论者一个特定的头像,想知道具体细节,就需要查看下面的文件。
打开blog/var/Typecho/文件夹中的Common.php文件,找到下面的代码:

$url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
$url .= '/avatar/';

这里定义了取头像的地址,即https://secure.gravatar.com/avatar或者https://gravatar.com/avatar

总不能所有的评论者都用一样的图片吧,继续查看紧接着下面的代码:

if (!empty($mail)) {
        $url .= md5(strtolower(trim($mail)));
}

原来Typecho根据评论者提供的邮箱,进行md5转化,形成一串字符串,就可以形成一个新的请求链接:http://www.gravatar.com/avatar/#####,这里的#####就是这个md5编码之后的字符串。但是这个请求不只有邮箱md5之后这一个字符串,还有下面几个参数:

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

这三个参数从在后台设置->评论中的选项中读取数据,比如$rating取的数据就是 启用Gravatar头像服务, 最高显示评级为## 的头像,这里的##有一下选项:

G - 普通
PG - 十三岁以上
R - 十七岁以上成人
X - 限制级    

知道了这些以后,我们要做的就很简单了,只需要修改头像服务提供站点就可以了。将Common.php中的

$url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
$url .= '/avatar/';

替换为

$url = 'http://cdn.v2ex.com/gravatar/';

我们这里使用的是国内很好的一个程序员社区V2EX提供的CDN服务,速度很快。
如果你想在评论时显示一个自定义头像,去 www.gravatar.com 注册一个账号,并上传一张自己喜欢的头像,就可以了。如果你没设置过,这个网站也会给你返回一个默认头像。
现在评论之后,就可以出现评论者的头像了,而且速度非常快。

怎么找到Common.php

可能有人会好奇,我怎么恰好知道在Common.php里面修改呢。这其实是个通用的方法:

  1. 在我用Chrome查看完页面之后,就知道http://www.gravatar.com的网站服务提供方出现了问题,既然后台没办法设置这个,那一定是在代码中哪个地方设置的。

  2. blog的根目录,使用下面的linux命令查找所有包含gravatar.com的文件:

    grep -nr gravatar.com .
    

    输出下面的结果:

    ./admin/profile.php:14:                <p><a href="http://gravatar.com/emails/" title="<?php _e('在 Gravatar 上修改头像'); ?>"><?php echo '<img class="profile-avatar" src="' . Typecho_Common::gravatarUrl($user->mail, 220, 'X', 'mm', $request->isSecure()) . '" alt="' . $user->screenName . '" />'; ?></a></p>
    ./var/Typecho/Common.php:939:        $url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
    ./var/Widget/Options/Discussion.php:54:            'commentsAvatar'        =>  _t('启用 <a href="http://gravatar.com">Gravatar</a> 头像服务, 最高显示评级为 %s 的头像'
    

    可以看到,有三个文件包含了gravatar.com,分别是./admin/profile.php的第14行,./var/Typecho/Common.php的第939行,./var/Widget/Options/Discussion.php的第54行,./表示当前搜索的位置。
    查看这三个文件,会发现profile.phpDiscussion.php对应后台管理界面的两个页面,Common.php就是定义头像服务网址的地方。

小结

这个问题本身非常小,但是给网站本身带来的性能影响是非常大的,而且当管理员登陆后台,进入管理菜单下的评论页面时,居然会直接导致站点宕机,需要重启Apache服务器才可以。因此小的细节对整体的影响还是很大的,自己写代码的时候也要多多注意。

Typecho博客的速度优化

Overview

由于在写笔记的时候会用到公式,因此使用了一个插件MathJax,可以很漂亮显示公式,但是发现用了这个插件之后,有公式显示的页面加载特别慢,使用Chrome查看了链接请求,发现了问题所在:这个插件会请求 cdn.mathjax.com 上的js代码,而 cdn.mathjax.com 的服务器非常不稳定,因此经常需要等待很久,网页才能正常显示。
好在因为Chrome会缓存jscss,图片等信息,因此通常这种情况会发生在用户第一次访问或者定期清理了缓存之后。
为了有更好的用户体验和加载速度,我把插件MathJax插件用到的库放到了我们自己的服务器上。
修改之后,发现还有外链,干脆直接一起给放到服务器上了。

MathJax公式插件

下载MathJax开源库

这里的MathJax库是指插件用到的开源库,可以在github上下载到:https://github.com/mathjax/MathJax

上传到服务器

下载之后解压缩,重命名为MathJax,我放在了blog的一个目录下:blog/usr/uploads/js

修改代码

blog/usr/plugins中找到MathJax.phpMathJax.php就是插件MathJax的所有文件,编辑MathJax.php,找到下面这行代码:

echo '<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [[\'$\',\'$\'], [\'\\\\(\',\'\\\\)\']]}});</script><script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>';

可以看到src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML",修改为src="http://####/blog/usr/uploads/js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"就可以了。
这里的http://####/blog就是我们博客的地址,可以看得出来,我们修改插件,让他指向了放在服务器上的MathJax库。

现在重新打开网站涉及公式的文章,瞬间响应。

font-awesome

修改了MathJax插件之后,发现还是有外链存在,借助Chrome看了下博客的外链请求,发现下面的外链指向:http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css,想了下还是放在自己的服务器上吧,一来是可以加速访问,二来可以防止哪天别人不提供服务了,我们就没办法加载这个css文件了。

下载font-awesome.min.css

直接从http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css就可以打开这个css,右键另存就可以了。

上传到服务器

我们把自己保存的font-awesome.min.css上传到blog所在的文件夹下blog/usr/themes/jianshu/css,因为我们使用了jianshu主题,为了方便,我直接放在了jianshucss文件夹中。

修改代码

找到 ,将下面这句代码:

<link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css">

修改为

<link rel="stylesheet" href="<?php $this->options->themeUrl('css/font-awesome.min.css'); ?>">

就可以访问到我们服务器上的font-awesome.min.css了。

下载font-awesome资源文件

重新加载网页,发现网站上的小图标都没了!我开始去了解下font-awesome是什么,找到下面的解释:

Font Awesome 是为 Twitter Bootstrap 设计的图标字体。通过Web Font的方式来显示一些图标,好处是图标可以被任意缩放、改变颜色,你需要做的只是像修改文字样式那样修改图标样式。

清楚它的作用之后,再仔细查看font-awesome.min.css文件,发现里面有几处代码,举一例说明:

src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') 

原来font-awesome.min.css定义的样式中用到的素材库我们没有放在服务器上。
github上下载下来完整的font-awesome库:https://github.com/FortAwesome/Font-Awesome。下载之后解压缩,把其中的font文件夹上传到blog/usr/themes/jianshu文件夹中,跟这个文件夹中的css文件夹一个层级。

现在访问,就可以正常使用我们的网站了。

latex公式插件的使用

Overview

在读论文或者写作的过程中,免不了有大量的公式推导,因此需要在博客里添加对LaTeX公式的支持。
我们找到了一个支持typecho博客的插件MathJax,下载地址和对这个插件的使用说明都可以参考原作者的博客:MathJax 插件

1.插件的安装

和所有其他typecho博客的插件一样,将下载下来的MathJax解压缩后,上传到你的blog目录的usr/plugins中即可。与其他插件稍有不同的是,解压缩后不是一个文件夹,而是一个MathJax.php文件。

2.插件的使用

使用管理员账户进入后台,在插件管理中就可以看到,点击启用就可以了。MathJax插件不需要设置,直接使用就可以了。这里面有几个问题值得记录一下。

2.1 在文章中如何使用MathJax排版公式

MathJax采用在Latex公式的前一行和后一行跟添加两个$$就可以了,下面是一个写作示例:

$$
e_j = -k \sum_{i=1}^m (P_{ij} \ast \ln { P_{ij} } )
$$

显示效果如下:
$$
e_j = -k \sum_{i=1}^m (P_{ij} \ast \ln { P_{ij} } )
$$

需要注意的是,MathJax排版公式并不是Markdown的内置语法,所以不能即时看到公式的排版效果(预览界面也不行),只有发布文章之后,查看博客内容页面才能看到效果

2.2 调节MathJax排版公式的大小

默认情况下,当我们书写了下面的公式时:

$$
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
$$

显示效果为:
$$
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
$$

可以通过下面的方式调节公式的大小:

$$
\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
$$

显示效果为:
$$
\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
$$

2.3 Markdown语法给公式带来的麻烦

到这里为止,公式的排版显示非常完美,但是我们注意到,Latex公式的书写里面包含了大量的特殊字符,会让Markdown解析时产生混淆,导致公式排版出现问题。
看下面这个公式:

$$
A\times B=\begin{vmatrix}
\hat{i} & \hat{j} & \hat{k}\\
A_0 & A_1 & A_2\\
B_0 & B_1 & B_2 
\end{vmatrix}
$$

显示效果如下:
$$
A\times B=\begin{vmatrix}
\hat{i} & \hat{j} & \hat{k}\
A_0 & A_1 & A_2\
B_0 & B_1 & B_2
\end{vmatrix}
$$

一个方便且通用的解决方法是在公式外面加上 <div> 或者 <p>,隔离Markdown对公式内部字符的转义,如下:

<div>
$$
A\times B=\begin{vmatrix}
\hat{i} & \hat{j} & \hat{k}\\
A_0 & A_1 & A_2\\
B_0 & B_1 & B_2 
\end{vmatrix}
$$
</div>

显示效果如下:

$$ A\times B=\begin{vmatrix} \hat{i} & \hat{j} & \hat{k}\\ A_0 & A_1 & A_2\\ B_0 & B_1 & B_2 \end{vmatrix} $$

因此,我们在书写公式时,都最好应该添加<div></div>。但是由于<div></div>是网页标记语言的语法,使用要谨慎。
比如,我在刚才书写的时候将一个</div>缩进弄错了,整个这个页面的显示布局都乱了...

2.3 给公式编号

在公式太多的情况下,我们可以为公式添加编号,便于在文中引述。
如下书写:

<div>
$$
A\times B=\begin{vmatrix}
\hat{i} & \hat{j} & \hat{k}\\
A_0 & A_1 & A_2\\
B_0 & B_1 & B_2 
\end{vmatrix}
.................公式1
$$
</div>

显示效果如下:

$$ A\times B=\begin{vmatrix} \hat{i} & \hat{j} & \hat{k}\\ A_0 & A_1 & A_2\\ B_0 & B_1 & B_2 \end{vmatrix} .................公式1 $$

3.Latex公式的学习使用

初次接触Latex以及Latex公式,都会觉得有点复杂和不直观,其实和Markdown一样,一旦习惯了这种写作方法,效率会极大地提升。
对于不太熟悉Latex公式写作的人来说,可以先从互联网上查看一下Latex公式的规范,了解之后,可以通过一些Latex公式在线编辑器,如http://www.codecogs.com/latex/eqneditor.php
编辑需要的公式,这些编辑器会生成Latex公式代码,将这些代码拷贝过来就可以直接使用了。

Typecho博客相关

Overview

本文记录了在使用Typecho的过程中,遇到的一些小问题以及解决方法。

1.添加置顶插件

  1. 首先去Typecho的官网插件页面http://docs.typecho.org/plugins下载Sticky插件,下载结束后,解压缩,将此文件夹放至服务器上Typecho的plugin文件夹中,具体地址为blog/usr/plugins/中。

  2. 使用超级管理员admin登陆到后天,进入管理插件页面,就可以看到所有plugins文件夹中已经有的插件。如下图:
    plugin1.png

  3. 刚把插件放到plugin文件夹中的时候,默认是在禁用的插件中,没有启用的。点击启用,就会变成启用的插件。然后点击设置, 出现下图:
    sticky1.png

    注意其中的置顶文章的cid,用来设置需要置顶的文章,文章编号的获取方式看下图:
    Stciky2.png
    我们需要将jeesite中hibernate的应用这篇文章置顶,只需要像上图一样,将网址中标记的文章ID号56放在置顶文章的cid中即可。

  4. index.php$this->title(); 前面加上 $this->sticky(); 就会变成这段html代码:

    <h2 class="title"><a href="<?php $this->permalink() ?>"><?php $this->sticky(); $this->title() ?></a></h2>。
    

    如果你使用了主题,那么要修改的就是主题文件夹下面的index.php

2.添加代码高亮插件

  1. Typecho的官网插件页面http://docs.typecho.org/plugins下载Google Code Prettify插件。
  2. 使用方法同上,不再给出详细步骤。
  3. 效果如下图:
    google_pretty_code.png

3.去掉页面中代码框的滚动条

刚用上代码高亮插件,显示效果明显提升了一个档次,还没开心多久,发现当代码段太长的时候,代码段不会完整的显示出来,而是会出现滚动条,读代码非常的不方便。按以下步骤进行修改:

  1. 进入tpyecho文件夹的主题文件夹下,blog/usr/themes/default,找到style.css,查看该页面的代码,发现以下代码:

     pre{padding:0;border:1px solid #ccc;overflow:auto;max-height:400px;}
    
  2. 很明显,当代码段太长的时候,最大显示高度为400px,超过这个长度就会出现滚动条。

  3. 直接全部删掉这句代码即可。或者只删掉max-height:400px;

  4. 完成。可能需要重启服务器。PS:在做了如下修改之后,其他人看到的就没有滚动条了,我这边还是有滚动条,最后清空了浏览器缓存,才效果正常了。

4.博客首页文章自动截断

typecho的首页默认是将文章以列表的形式展示,每篇文章都会完整展示,如果文章太长的话,就很难一次看到很多篇文章,查找起来很不方便。

修改方法:

  1. 进入tpyecho文件夹的主题文件夹下,blog/usr/themes/default,找到index.php,查看该页面的代码,发现以下代码:

     <div class="post-content" itemprop="articleBody">
         <?php $this->content('- 阅读剩余部分 -'); ?>
     </div>
    
  2. 将上诉代码完整改为以下代码:

     <div class="post-content" itemprop="articleBody">
             <p><?php $this->excerpt(200, '...'); ?><a href="<?php $this->permalink() ?>" rel="bookmark" title="详细阅读关于<?php $this->title(); ?>">阅读全>文...</a></p>
     </div>
    
  3. 完成。可能需要重启服务器。

  4. 效果如下图:
    mainBrowser.png

5.添加文章内容的扫码阅读

  1. 直接去http://forum.typecho.org/viewtopic.php?f=6&t=8253下载文件QRCode.zip。解压之后,将QRCode文件夹上传到博客的plugins目录blog/usr/plugins中就可以了。
  2. 使用管理员账号登入,点击管理插件,启用QRCode就可以了,QRCode的配置选项可以配置生成的二维码大小,默认是200,有点大,我改为了100,看起来更美观,不过也别太小,不然网址太长了显示不正确。