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); ?>甚至是公告。侧边栏最新评论表情如此类推。 因为我的主题暂时并不打算加入评论表情功能，所以没有整理一套表情，请自行整理并修改文件名。