added unicode support

This commit is contained in:
CRIMX 2016-12-23 01:02:51 +08:00
parent b20ba676ac
commit 7ebe2e558d
2 changed files with 38 additions and 5 deletions

View file

@ -1,7 +1,5 @@
# hexo-filter-github-emojis # hexo-filter-github-emojis
[![Build Status](https://travis-ci.org/crimx/hexo-filter-github-emojis.svg?branch=master)](https://travis-ci.org/crimx/hexo-filter-github-emojis)
[![Coverage Status](https://img.shields.io/coveralls/crimx/hexo-filter-github-emojis.svg)](https://coveralls.io/r/crimx/hexo-filter-github-emojis?branch=master)
[![Npm Version](https://img.shields.io/npm/v/hexo-filter-github-emojis.svg)](https://npmjs.org/package/hexo-filter-github-emojis) [![Npm Version](https://img.shields.io/npm/v/hexo-filter-github-emojis.svg)](https://npmjs.org/package/hexo-filter-github-emojis)
[![Npm Downloads Month](https://img.shields.io/npm/dm/hexo-filter-github-emojis.svg)](https://npmjs.org/package/hexo-filter-github-emojis) [![Npm Downloads Month](https://img.shields.io/npm/dm/hexo-filter-github-emojis.svg)](https://npmjs.org/package/hexo-filter-github-emojis)
[![Npm Downloads Total](https://img.shields.io/npm/dt/hexo-filter-github-emojis.svg)](https://npmjs.org/package/hexo-filter-github-emojis) [![Npm Downloads Total](https://img.shields.io/npm/dt/hexo-filter-github-emojis.svg)](https://npmjs.org/package/hexo-filter-github-emojis)
@ -26,6 +24,7 @@ githubEmojis:
enable: true enable: true
className: github-emoji className: github-emoji
localEmojis: localEmojis:
unicode: false
``` ```
The filter will try to download the latest version of [Github Emojis][ghemojis] list. If the network is unavailable or too slow it will use the backup version. The filter will try to download the latest version of [Github Emojis][ghemojis] list. If the network is unavailable or too slow it will use the backup version.
@ -47,4 +46,26 @@ The filter will try to download the latest version of [Github Emojis][ghemojis]
arrow_right: https://path/tp/arrow_right.png arrow_right: https://path/tp/arrow_right.png
``` ```
- **unicode** - If you set this option to true, the filter will generate something like this:
```html
<span class="github-emoji" title=":sparkles:" data-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png">&#x2728;</span>
```
Then you can fallback to image with JavaScript. For example, with jQuery:
```javascript
$('span.github-emoji').each(function (i, emoji) {
var $emoji = $(emoji)
var codepoint = $emoji.html()
$('<img height="20" width="20">')
.prop('src', $emoji.data('src'))
.prop('alt', $emoji.attr('title'))
.on('error', function () {
// image loading failed
$emoji.html(codepoint)
})
.appendTo($emoji.empty())
})
```
[ghemojis]: https://api.github.com/emojis [ghemojis]: https://api.github.com/emojis

View file

@ -5,6 +5,7 @@ var _ = require('lodash')
var options = _.assign({ var options = _.assign({
enable: true, enable: true,
unicode: false,
className: 'github-emoji' className: 'github-emoji'
}, hexo.config.githubEmojis) }, hexo.config.githubEmojis)
@ -45,9 +46,20 @@ if (options.enable !== false) {
hexo.extend.filter.register('before_post_render', function (data) { hexo.extend.filter.register('before_post_render', function (data) {
data.content = data.content.replace(/:(\w+):/ig, function (match, p1) { data.content = data.content.replace(/:(\w+):/ig, function (match, p1) {
if (githubEmojis[p1]) { if (githubEmojis[p1]) {
return '<img class="' + options.className + // unicode code point
'" title="' + match + '" alt="' + match + '" src="' + var codepoint = /\/(\w+)\.\w+$/.exec(githubEmojis[p1].split('?')[0])
githubEmojis[p1] + '" height="20" width="20" />' codepoint = codepoint && codepoint[1]
if (options.unicode && codepoint) {
return '<span class="' + options.className +
'" title="' + match +
'" data-src="' + githubEmojis[p1] +
'">&#x' + codepoint + ';</span>'
} else {
return '<img class="' + options.className +
'" title="' + match + '" alt="' + match + '" src="' +
githubEmojis[p1] + '" height="20" width="20" />'
}
} else { } else {
return match return match
} }