这里介绍两种方式来实施获取评论头像。

第一种方法：使用 AJAX 实现

在 Typecho 中使用 AJAX 通常涉及到前端 JavaScript 代码和后端 PHP 代码之间的交互。本文的实现也是分为了 2 部分的代码：

1.在主题 js 文件中添加下面代码

  //通过焦点离开监听方法（blur）传送邮箱字符串到服务器，在服务器中处理（第二步）后，将其添加到图片的 src 属性
  $("input#mail").blur(function () {
    
    //$("input#mail") 用的jquery语法，表示的是 id 为 mail 的 input 元素；
    var _email = $(this).val();
    $.ajax({
      type: "GET",
      data: {
        action: "ajax_avatar_get",
        form: location.href,
        email: _email,
      },
      success: function (data) {
        $("#avatar").attr("src", data); // #avatar 为需要添加图片的元素的 id 属性值
      },
    }); // end ajax

    return false;
  });

注意：代码需放在 window.onload = function() {//代码部分} 或者 $(function(){ //代码部分});内部，并且，如果放在$(function(){ //代码部分});内部的话，jquery.js 的加载必须放在主题 js 文件之前。

2.在主题 functions.php 文件中添加下面代码

function themeInit($archive)
{
    //处理邮箱字符串，转化为 avatar 图像地址
    if (isset($_GET['action']) == 'ajax_avatar_get' && 'GET' == $_SERVER['REQUEST_METHOD']) {
        $host = 'https://cravatar.cn/avatar/';
        $email = strtolower($_GET['email']);
        $hash = md5($email);
        $sjtx = 'mm';
        $avatar = $host . $hash . '?d=' . $sjtx;
        echo $avatar;
        die();
    } else {
        return;
    }

}

注意：代码是放在 themeInit($archive){ //代码部分} 内部的，如果你的模板已经添加过了 themeInit ，那么只要向 themeInit 内部添加 if 部分即可。

第二种方法：直接用 javascript 函数实现

其实，两种方法的区别是：ajax 获取邮箱字符串 md5 值是在服务器，而 javascript 获取邮箱字符串 md5 值是在客户端。

javascript 获取邮箱字符串 md5 值，需要链接一个js库。

1.在 header.php 头部链接 js 库

    <!-- md5获取js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>

3.在主题 js 文件中添加下面代码

// comments 邮箱输入框焦点离开事件，获取邮箱的avatar图像
document.addEventListener("DOMContentLoaded", function () {
  const inputField = document.getElementById("mail");
  inputField.addEventListener("blur", function () {
    var md5Value = CryptoJS.MD5(this.value).toString();
    var gravatar = document.getElementById("avatar");
    gravatar.setAttribute("src", "https://cravatar.cn/avatar/" + md5Value + '?d=mm');
  });
});

mail 是邮箱输入框 input 元素的 id 值， avatar 是头像 img 元素的 id 值

效果见文章下面的评论框。