FireFox 裡長網址不能自動換行的解決方案

當文章或回響裡有很長的 URL ，在 FireFox 裡會因為無法換行而破壞 pannel 的版面，造成閱讀的困擾。這裡提供一個小小的解決方案，可以部份地解決這個問題。

這是模仿 Google Groups 的方法，把長網址置換成一個 [link] ，既美觀又不佔版面。反正 pannel 裡的最近文章和最近回響只是一個摘要而已，無妨！

方法如下：

以我的最近回響為例，原來的樣版代碼如下：

<li>
<h2>recent comments</h2>
{assign var=comments value=$recentcomments->getRecentComments()}
<ul>
{foreach from=$comments item=comment}
{assign var=commentpostid value=$comment->getArticleId()}
{assign var=commentpost value=$recentcomments->getArticle($commentpostid)}
<li><a title="View comments by {$comment->getUsername()}" href="{$url->postPermalink($commentpost)}#{$comment->getId()}">< b>{$comment->getUsername()}：</b>{$comment->getText() |truncate:100:"..."|strip_tags}</a></li>
{/foreach}
</ul>
</li>

標示部份表示先擷取前 100 個字元，過長部份以"..."取代，並去除 HTML 標籤。這樣的做法，在遇到長網址時， FireFox 裡面顯示如下圖：

我要模仿 Google Group 的做法，把長網址置換成 [link] ，這時要使用 smarty 的 regex_replace 修飾子，利用正規表示式抓出長網址來置換，結果如下圖：

修改後的樣版代碼如下(只顯示置換那一行)：

{$comment->getText()|strip_tags|truncate:100:"..." |regex_replace:"/http:[^ ]+/":"[link]"}

smarty 的 regex_replace 修飾子，實際上是調用了 preg_replace 這個 PHP 函數，正規表示法可以參考 PHP 官方網站的 PCRE Pattern Syntex 有詳細說明。我的這段正規表示式：

/http:[^ ]+/

簡單的說，就是找出 http: 及其後面非空格的所有部份，這應該就是完整的網址了。但是這樣做有個缺點，就是文章或回響裡面，長網址結尾必須要有空格，否則後面的文字會一併被取代掉。

我同時把 truncate 和 strip_tags 兩個修飾子的順序對調了。這樣做的目的，是要讓摘要能顯示多一點的內容。否則，若文章或回響的開頭就有一個長網址， truncate 修飾子擷取的前 100 個字元就大部份是 URL ，再被 strip_tags 濾掉，那就所剩無幾了。

請注意： 因為這個方法調用了正規表示式，所以理論上會增加不少系統的負擔。若網站的用戶很多或點閱數很多(我是指多到會影響效能時)，建議可以開啟 模版設定 裡的 template_http_cache_enabled 選項(最好先搞清楚這是做什麼的再做)，可以減輕一些系統負擔。