Typecho主题评论原生表情实现方法

本篇文章由@Rich提供 表情放在主题目录img/smilies下。 首先添加functions.php自定义评论回调部分的代码，自定义评论回调部分可以参考Typecho更简单的解决Gravatar被墙提到的方法。 然后再在functions.php将回调函数的content(); ?>修改为content); ?> 接着在functions.php下面加入代码：

/** 解析表情 */
function convertSmilies($widget)
{
    $smiliesTrans = array(
    ':?:'        => 'icon_question.gif',
    ':razz:'     => 'icon_razz.gif',
    ':sad:'      => 'icon_sad.gif',
    ':evil:'     => 'icon_evil.gif',
    ':!:'        => 'icon_exclaim.gif',
    ':smile:'    => 'icon_smile.gif',
    ':oops:'     => 'icon_redface.gif',
    ':grin:'     => 'icon_biggrin.gif',
    ':eek:'      => 'icon_surprised.gif',
    ':shock:'    => 'icon_eek.gif',
    ':???:'      => 'icon_confused.gif',
    ':cool:'     => 'icon_cool.gif',
    ':lol:'      => 'icon_lol.gif',
    ':mad:'      => 'icon_mad.gif',
    ':twisted:'  => 'icon_twisted.gif',
    ':roll:'     => 'icon_rolleyes.gif',
    ':wink:'     => 'icon_wink.gif',
    ':idea:'     => 'icon_idea.gif',
    ':arrow:'    => 'icon_arrow.gif',
    ':neutral:'  => 'icon_neutral.gif',
    ':cry:'      => 'icon_cry.gif',
    ':mrgreen:'  => 'icon_mrgreen.gif',
    '8-)'        => 'icon_cool.gif',
    '8-O'        => 'icon_eek.gif',
    ':-('        => 'icon_sad.gif',
    ':-)'        => 'icon_smile.gif',
    ':-?'        => 'icon_confused.gif',
    ':-D'        => 'icon_biggrin.gif',
    ':-P'        => 'icon_razz.gif',
    ':-o'        => 'icon_surprised.gif',
    ':-x'        => 'icon_mad.gif',
    ':-|'        => 'icon_neutral.gif',
    ';-)'        => 'icon_wink.gif',
    '8)'         => 'icon_cool.gif',
    '8O'         => 'icon_eek.gif',
    ':('         => 'icon_sad.gif',
    ':)'         => 'icon_smile.gif',
    ':?'         => 'icon_confused.gif',
    ':D'         => 'icon_biggrin.gif',
    ':P'         => 'icon_razz.gif',
    ':o'         => 'icon_surprised.gif',
    ':x'         => 'icon_mad.gif',
    ':|'         => 'icon_neutral.gif',
    ';)'         => 'icon_wink.gif',
    );
    $imgUrl = Typecho_Widget::widget('Widget_Options')->themeUrl . '/img/smilies/';
    foreach($smiliesTrans as $smiley => $img) {
        $smiliesTag[] = $smiley;
        $smiliesReplace[] = "<img src=\"$imgUrl$img\" alt=\"\" class=\"smiley\" />";
    }   
    $output = '';
    $textArr = preg_split("/(<.*>)/U", $widget, -1, PREG_SPLIT_DELIM_CAPTURE);
    $stop = count($textArr);
    for ($i = 0; $i < $stop; $i++) {
        $content = $textArr[$i];
        if ((strlen($content) > 0) && ('<' != $content{0})) {
            $content = str_replace($smiliesTag, $smiliesReplace, $content);
        }
        $output .= $content;
    }
    $output = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/e', '"<img src=\"$1\" alt=\"" . basename("$1") . "\" />"', $output);
    echo $output;
}

接下来，在主题目录新建inc目录，然后新建smiley.php文件内容如下：

<?php $imgUrl = $this->options->themeUrl . '/img/smilies/'; ?>
<span id="smiley">
<a href="javascript:Smilies.grin(':?:')"      ><img src="<?php echo $imgUrl; ?>icon_question.gif"  alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':razz:')"   ><img src="<?php echo $imgUrl; ?>icon_razz.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':sad:')"    ><img src="<?php echo $imgUrl; ?>icon_sad.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':evil:')"   ><img src="<?php echo $imgUrl; ?>icon_evil.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':!:')"      ><img src="<?php echo $imgUrl; ?>icon_exclaim.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':smile:')"  ><img src="<?php echo $imgUrl; ?>icon_smile.gif"     alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':oops:')"   ><img src="<?php echo $imgUrl; ?>icon_redface.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':grin:')"   ><img src="<?php echo $imgUrl; ?>icon_biggrin.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':eek:')"    ><img src="<?php echo $imgUrl; ?>icon_surprised.gif" alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':shock:')"  ><img src="<?php echo $imgUrl; ?>icon_eek.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':???:')"    ><img src="<?php echo $imgUrl; ?>icon_confused.gif"  alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':cool:')"   ><img src="<?php echo $imgUrl; ?>icon_cool.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':lol:')"    ><img src="<?php echo $imgUrl; ?>icon_lol.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':mad:')"    ><img src="<?php echo $imgUrl; ?>icon_mad.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':twisted:')"><img src="<?php echo $imgUrl; ?>icon_twisted.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':roll:')"   ><img src="<?php echo $imgUrl; ?>icon_rolleyes.gif"  alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':wink:')"   ><img src="<?php echo $imgUrl; ?>icon_wink.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':idea:')"   ><img src="<?php echo $imgUrl; ?>icon_idea.gif"      alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':arrow:')"  ><img src="<?php echo $imgUrl; ?>icon_arrow.gif"     alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':neutral:')"><img src="<?php echo $imgUrl; ?>icon_neutral.gif"   alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':cry:')"    ><img src="<?php echo $imgUrl; ?>icon_cry.gif"       alt="" class="smiley" /></a>
<a href="javascript:Smilies.grin(':mrgreen:')"><img src="<?php echo $imgUrl; ?>icon_mrgreen.gif"   alt="" class="smiley" /></a>
</span>

然后编辑comments.php文件，在评论框<textarea>上面加入<p><?php include('inc/smiley.php'); ?></p> 最后是JS部分，直接丢进主题的JS里即可：

// Smilies v1.0.4 for Typecho Comments - by willin kan - URI: http://kan.willin.org/typecho/
Smilies = {
 dom : function(id) {
   return document.getElementById(id);
 },

 grin : function (tag) { // 表情
   tag = ' ' + tag + ' '; myField = this.dom('comment');
   document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
 },

 insertTag : function (tag) { // 插入评论中
   myField = Smilies.dom('textarea');
   myField.selectionStart || myField.selectionStart == '0' ? (
     startPos = myField.selectionStart,
     endPos = myField.selectionEnd,
     cursorPos = startPos,
     myField.value = myField.value.substring(0, startPos)
                   + tag
                   + myField.value.substring(endPos, myField.value.length),
     cursorPos += tag.length,
     myField.focus(),
     myField.selectionStart = cursorPos,
     myField.selectionEnd = cursorPos
   ) : (
     myField.value += tag,
     myField.focus()
   );
 }
}

注：convertSmilies可以用再不同的地方上，如 或者是实现文章表情修改content(); ?>到content); ?>甚至是公告。侧边栏最新评论表情如此类推。 因为我的主题暂时并不打算加入评论表情功能，所以没有整理一套表情，请自行整理并修改文件名。