mk-letter-avatar's Introduction

mk-letter-avatar

mk-letter-avatar 是一个简单好用的 WordPress 字母头像插件。

WordPress 默认采用的是 Gravatar 头像，但很多人可能没有设置 Gravatar 头像，因而只能显示出默认的头像。本插件就是将无头像用户的头像显示成动态生成的昵称首字符头像。

说到字母头像，其实之前已有多种方案。本插件与其它同类插件不同的是字母头像的生成完全是在前端实现的，而且支持中文。整个插件大小只有 5kb 左右。插件启用后不会在服务器产生任何缓存文件，纯净好用！

本插件无需任何设置，直接在 WordPress 后台上传并启用即可。

插件的头像生成代码基于 https://github.com/daolavi/LetterAvatar 和 https://gist.github.com/leecrossley/6027780

在线演示

参考孟坤博客的评论区头像

常见问题

启用插件后不生效

请检查所用的主题是否使用的 WordPress 自带的评论模板或者使用 WordPress 默认函数 get_avatar() 获取头像，如若不是，请改用 get_avatar()。

启用插件后控制台多了很多 404 报错

因为插件需要根据 Gravatar 返回的状态来判断是否有头像，所以会产生这样的问题。除此之外，无任何“毒副作用”。如果觉得看着难受，可以在页面加载完成后使用 console.clear(); 清除控制台的错误输出。

更新日志

v1.1.0 `2020/2/25`

优化代码，适配更多主题
支持在后台也显示字母头像

v1.0.4 `2019/4/27`

修改为仅绘制一个字符作为头像
过滤 emoji

v1.0.3 `2019/4/14`

修复头像链接被 htmlspecialchars 后无效的 bug（感谢 @sy-records 提交反馈）

v1.0.2 `2019/4/5`

不限制生成头像的颜色列表元素个数

v1.0.1 `2019/3/25`

如果没有 alt 信息，直接返回默认头像

v1.0.0 `2019/3/24`

横空出世！

mk-letter-avatar's People

Contributors

Stargazers

Watchers

mk-letter-avatar's Issues

插件中的 js 代码未压缩版

为了精简体积，插件中的头像生成 js 代码进行了压缩处理。这里放一下未压缩的原版代码：

/**
 * 本代码出处：https://github.com/daolavi/LetterAvatar
 * 原始代码来自：https://gist.github.com/leecrossley/6027780
 * 根据 mk-letter-avatar 的需要作了部分修改
 */
(function (w, d) {
    window.mkLetterAvatar = function (name, size, color) {
        name = name || '';
        size = size || 60;
        var colours = [
                "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
                "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
            ],
            nameSplit = String(name).split(' '),
            initials, charIndex, colourIndex, canvas, context, dataURI;
        if (nameSplit.length == 1) {
            initials = nameSplit[0] ? nameSplit[0].charAt(0) : '?';
        } else {
            initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
        }
        if (w.devicePixelRatio) {
            size = (size * w.devicePixelRatio);
        }

        charIndex = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64;
        colourIndex = charIndex % colours.length;
        canvas = d.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        context = canvas.getContext("2d");

        context.fillStyle = color ? color : colours[colourIndex - 1];
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.font = Math.round(canvas.width / 2) + "px 'Microsoft Yahei'";
        context.textAlign = "center";
        context.fillStyle = "#fff";
        context.fillText(initials, size / 2, size / 1.5);
        dataURI = canvas.toDataURL();
        canvas = null;
        return dataURI;
    };
})(window, document);