九18 2011 ∞

WordPress 加入自动判断外部链接功能

关于 target=”_blank” 的争论充斥着互联网，很多人提倡不要使用 target=”_blank” 因为这个不符合 XHTML-strict 和 XHMTL 1.1 的标准。但是我真的不太想让人一点击文章中的外部链接就离开原网站了。解决的方法是使用 rel=”external”。另一个问题是，每次手动加这个标签都比较繁琐，这里介绍一种方法能自动判断文章里的链接是指向站外还是站内，如果是站外则添加一个小箭头指示，并自动加上 rel=”external” 标签，不用手动一个一个去加。

一、添加 da_auto_external_link() 函数

在 functions.php 文件中添加以下内容

1
2
3
4
5
6
7
8
function da_auto_external_link($text) {
    $newtext = str_replace('<a href=', '<a class="external" rel="external" href=', $text);
    $newtext = str_replace('<a class="external" rel="external" href="'.home_url(), '<a href="'.home_url(), $newtext);
    $newtext = str_replace('<a class="external" rel="external" href="#', '<a href="#', $newtext);
    return $newtext;
}
add_filter('the_content', 'da_auto_external_link');   //应用于文章区域
add_filter('comment_text', 'da_auto_external_link');   //应用于评论区域

这个函数先把文章里的所有链接加上 external 的标识，然后再把站内链接的 external 标识给去掉。

二、添加 rel=”external” 识别

在模版文件 header.php 中的 head 区域内添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" >

    /* External Links */
    function externalLinks() {
     if (!document.getElementsByTagName) return;
     var anchors = document.getElementsByTagName("a");
     for (var i=0; i<anchors.length; i++) {
       var anchor = anchors[i];
       if (anchor.getAttribute("href") &&

           anchor.getAttribute("rel") == "external")
         anchor.target = "_blank";
     }
    }
    window.onload = externalLinks;
   
</script>

三、添加小图标及其样式

在样式表文件 style.css 中添加以下内容

1
2
3
4
.external {
    padding-right: 11px;
    background: url('img/external-link.png') no-repeat right top;
}

然后上传一个文件名为 external-link.png 小图标到主题目录下的 img 子目录。当然路径和文件名你可以自己改。

折腾 InfoTech 架站 WebDev 259 views
七27 2011 ∞

Mac OS X 上开启 Apache 的 URL 静态重写功能

URL 重写 (Rewriting) 简单来讲就是将动态网页地址规则化便于人们访问，例如某网页的原始地址是 http://www.abc.com/index.php?year=2011&month=01&day=02，通过重写使得人们看到和访问该页的地址变为 http://www.abc.com/2011/01/02。
重写网页地址的规则是人编写的，这种规则被称为正则表达式 (Regular Expression, RE)。

Mac OS X 下的 Apache HTTP Server 默认并没有配置好 URL 重写功能。下面是开启和配置重写功能的步骤：

  1. 打开 Apache 主配置文件 —— 位于 /private/etc/apache2 下的 httpd.conf 文件；
  2. 搜寻以下内容并将前面的 # 号去掉：
    1
    #LoadModule rewrite_module libexec/apache2/mod_rewrite.so
  3. 打开用户配置文件 —— 位于 /private/etc/apache2/users 下的 [你的用户名].conf 文件，将内容修改成下面的样子（其中的 [你的用户名] 要替换成你自己 Mac OS 的账户名）。
    1
    2
    3
    4
    5
    6
    <Directory "/Users/[你的用户名]/Sites/">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>

    其中的 AllowOverride 就是负责开启 URL 静态重写的；

  4. 重启 Apache：在终端里输入以下内容，然后输入密码回车；
    1
    sudo apachectl restart
  5. 这时 .htaccess 文件就生效了，在里面写入相应的重写规则就可以用了。例如，一个常用的 WordPress 重写规则如下
    1
    2
    3
    4
    5
    6
    7
    8
    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.php$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.php [L]
    </IfModule>

References

折腾 InfoTech 架站 WebDev 294 views
四02 2011 ∞

中文网页排版须知

之前有很多中文排版的疑问，在知乎问了一个关于中文和英文之间空格的问题，得到不少有用的答案。

@lianghai 的回答中给出了 @Livid 的一篇 2006 年的文章《中文 Web 阅读体验》，看了以后感觉收获颇大，至少有个比较的起点。

知乎还真是不错啊。

折腾 InfoTech 架站 WebDev 441 views
四01 2011 ∞

HTML 5 视频

HTML 5 都放出来快一年了，现在才关注一下。

现在的问题是这样的，的确不用安装任何插件如 Flash、Silverlight就可以看视频，但是视频格式标准还没确定。目前最流行的是 H.264。但是这个不是自由的，有专利权，要用得像专利所有者购买使用权，很多大公司都购买了这个专利权，并且从中收益。后来 HTML 5 video 开发者自己做了一个 Theora，但是这个没人来负专利责任，万一你们用了以后有公司出来说你侵犯了它们某些技术的专利权，你就自己负责（不像 Flash 等，如果有专利权问题，肯定是 Adobe 负责）。

所以以后的标准是怎样的，还不得而知。

References

折腾 InfoTech 架站 WebDev 422 views
四01 2011 ∞

衬线体与无衬线体

今天终于搞清楚了一堆字体概念。越来越觉得字体排印很有意思了。刚学做网页的时候就被一堆字体搞糊涂，今天有心看了一下维基百科，了解了不少以前不明白又没心思去看的内容。

衬线体 (serif)，其实就是那种笔画末梢带勾的字体，最著名的是 Times New Roman。中文里叫白体，比如宋体、仿宋什么的，日文叫明朝体，韩文里是 Batang。LaTeX 默认字体 Computer Modern 也是 serif。

  • This is serif: Times New Roman.
  • This is serif: Century.
  • This is serif: Georgia.

无衬线体 (sans-serif)，就是笔画末梢不带勾的。”sans” 法语里代表“无”。著名的 sans-serif font 有 Arial, Tahoma, Verdana, Helvetica。Windows 7 默认英文字体 Segoe UI、Office 2010 默认字体 Calibri 和 Mac OS X 默认字体 Lucida Grande 也都属于 sans-serif。中文里的黑体就是典型的无衬线体，日文里是哥特体，韩文里是 Dotum。

  • This is san-serif: Arial.
  • This is san-serif: Tahoma.
  • This is san-serif: Verdana.
  • This is san-serif: Helvetica.
  • This is san-serif: Segoe UI.
  • This is san-serif: Calibri.

普遍认为电脑屏幕上的无衬线体比衬线体更美观。Mac OS X 一直使用无衬线体。Windows 以前中文都用衬线体宋体，后来改成无衬线体微软雅黑就是出于这种考虑。

可以看到电脑上的无衬线体的数量种类比衬线体要多得多。

衬线体比较细，印刷在书面上看起来比较正式，多用于文章正文。无衬线体比较容易辨别，用于标题，公共场所的警示等。

另外，IEEE 的 paper 都是使用的 serif，IET 的似乎都是 san-serif。

References

  1. CSS Fonts Module Level 3
  2. http://en.wikipedia.org/wiki/Serif
  3. http://en.wikipedia.org/wiki/Sans-serif
折腾 InfoTech 架站 WebDev 655 views
123