为Hexo添加emoji表情,同时表情使用twitter的twemoji。
使用markdown-it渲染 markdown-it 安装markdown-it 1 2 $ npm un hexo-renderer-marked --save $ npm i hexo-renderer-markdown-it --save
把原来的hexo渲染换成基于markdown-it的渲染。
安装markdown-it-emoji插件 hexo-renderer-markdown-it原装只有5个插件,分别是:
markdown-it-abbr markdown-it-footnote markdown-it-ins markdown-it-sub markdown-it-sup 没有emoji的表情插件,因此要安装
markdown-it-emoji
该插件
markdown-it-emoji 进入到markdown-it的node-modules目录下安装该插件
..hexo\very9s\node_modules\hexo-renderer-markdown-it\node_modules
1 npm install markdown-it-emoji --save
配置_config.yml
文件 在hexo的配置文件下添加markdown-it配置代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 markdown: render: html: true xhtmlOut: false breaks: true linkify: true typographer: true quotes: '“”‘’' plugins: - markdown-it-abbr - markdown-it-footnote - markdown-it-ins - markdown-it-sub - markdown-it-sup - markdown-it-emoji #用emoji插件 anchors: level: 2 collisionSuffix: 'v' permalink: true permalinkClass: header-anchor permalinkSymbol: ¶
基本配置到此结束 基本的emoji表情测试如下:
Classic markup: Shortcuts (emoticons): 使用twemoji表情 twemoji 仍然是在markdown-it插件目录下clone twemoji
1 git clone git@github.com:twitter/twemoji.git
于是目录下多了twemoji文件夹。
配置markdown-it-emoji插件 要使用twemoji还没有结束,还需要配置markdown-it-emoji的index.js
修改index.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 'use strict'; var emojies_defs = require('./lib/data/full.json'); var emojies_shortcuts = require('./lib/data/shortcuts'); var emoji_html = require('./lib/render'); var emoji_replace = require('./lib/replace'); var normalize_opts = require('./lib/normalize_opts'); var twemoji = require('twemoji') //添加twemoji module.exports = function emoji_plugin(md, options) { var defaults = { defs: emojies_defs, shortcuts: emojies_shortcuts, enabled: [] }; var opts = normalize_opts(md.utils.assign({}, defaults, options || {})); md.renderer.rules.emoji = emoji_html; md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE, opts.replaceRE)); md.renderer.rules.emoji = function(token, idx) { //修改规则 return twemoji.parse(token[idx].content); }; };
重新渲染 重新渲染
hexo g
一切OK!
twemoji样式 发现表情巨大,于是修改样式。按照markdown-it-emoji的官方说明
在我的模板中添加样式:
1 2 3 .emoji { height: 1.2em; }
这下一切都OK啦~
给点评论鼓励我把~
博主你好,请问每个标题前的那个符号怎么去掉?
回复删除谢谢博主,已经弄明白了
回复删除O(∩_∩)O很高兴对你有帮助~
回复删除您好,谢谢您的教程,我注意到您这里有个错误
回复删除“- markdown-it-emoji //用emoji插件”这句会报错,因为在yml中注释是#
谢谢你的提醒。我这个注释是写文章的时候加上去的,不是写yml的时候加上去的^_^我已改正拉~~
回复删除