Movable Type 截断输出文章标题

|Font Size: | No Comments | Previous

  如果文章标题如果过长的话,Movable Type 默认模板会显示多行。想把它改成超过一行的文字都改成...显示。我想到两种方法来实现截断效果。

  第一种是方法使用MT自带的trim_to功能,截取指定长度字符,然后再在后面加上...显示。MT从6.0.4开始,对这个功能做了增强,trim_to既可以从字符串左侧开始截取又可以从字符串的右侧开始截取(参数为负值)。详细使用方法参考下面日文文档里给出的示例,只需对应修改Entry Summary模板第四行H2标记内容:

<$mt:EntryTitle trim_to="5" $>
出力例: いろはにほ

<$mt:EntryTitle trim_to="5+..." $>
出力例: いろはにほ...

<$mt:EntryTitle trim_to="-3" $>
出力例: もせす

<$mt:EntryBody trim_to="5+..."$> <$mt:EntryBody trim_to="-3"$>
出力例: いろはにほ...もせす

  我要截断的是文章列表里面的文章标题,使用trim_to的话对搜索引擎似乎不太友好。所以决定使用css截断的方法。实现起来也非常简单。看下面例子:

  先写一小段CSS,放到了一个单独的css文件里:

/*截断文章标题*/
.ellipsis-text{
    text-overflow: ellipsis;
    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden; }

  在要截取内容的地方添加这个类。我修改的是 Entry Summary 模板第四行。

<h2 class="asset-name entry-title"><a href="<$mt:EntryPermalink$>" rel="bookmark"><$mt:EntryTitle$></a></h2>

  修改为:

<h2 class="asset-name entry-title ellipsis-text"><a href="<$mt:EntryPermalink$>" rel="bookmark" title="<$mt:EntryTitle$>"><$mt:EntryTitle$></a></h2>

  我增加的绿色部分是为了让鼠标悬停在被截断的标题上时,可以显示出完整的标题。效果如下:

标题截断效果图

  我在一些网站上看到还要针对opera 和firefox写单独的代码,但是在我实际测测试中,上面的css代码从Firefox 7.0.1和Opera 11.64开始都显示正常,看来都是从很古老的文章中转来的了。

本文结束。

Leave a comment