先来开心一下{icon=开心}开心不起来
给爷笑一个{icon=smile} ，再笑一个{icon=smile}，再笑一个{icon=smile}，再笑一个{icon=smile}
三种动物：{icon=cat} {icon=man} {icon=woman}
搞笑一下{icon=搞笑}，悲伤一下{icon=悲伤}
h2字体小了{icon=愤怒}
h3字体{icon=生气}
另外一条指令 {fa-icon=home color=#f00}
这是一个无法显示的图标 {fa-icon=随便写点 color=#f00}
这是一栋会旋转的绿色大房子{fa-icon=home color=#0f0 spin=true}
我们让它旋转90度{fa-icon=home rotate=90 }
翻转一下{fa-icon=home flip=vertical}
效果
运行效果上。
后台编辑效果：
cnblog部署
css
/*hover */ .cmd-para-err{ color: #b10000; } .cmd-para-err-parent{ text-align: center; cursor: pointer; } .cmd-para-err-parent { margin-right: 15px; border-color: #fff; -webkit-transition: 0.2s ease; transition: 0.2s ease; position: relative; font-size: 1.2em; } .cmd-para-err-parent:hover { color: #c447ed; } .cmd-para-err-parent:hover:after { left: 50%; top: -48px; color: #fff; background: #c447ed; font-size: 14px; content: attr(tips); display: block; padding: 5px 15px; position: absolute; white-space: nowrap; border-radius: 2px; text-transform: uppercase; box-shadow: 0 0 2px rgba(0,0,0,0.2); z-index: 10; } .cmd-para-err-parent:hover:before { top: -17px; left: 50%; border: solid; border-color: #c447ed transparent; border-width: 5px 5px 0 5px; content: ""; display: block; position: absolute; z-index: 20; } /* emoji*/ .myjoypixels128-parent { display: inline-block; height: 0px; vertical-align: top; text-align: center; } .myjoypixels128 { display: inline-block; width: 128px; height: 128px; font-size: 0; text-indent: -999em; /* background: url(https://xunhanliu.gitee.io/images/qqface.png) 0 0 no-repeat; */ }
cnblog后台侧边栏公告
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://xunhanliu.gitee.io/js/md5.js">script> <script src="https://blog-static.cnblogs.com/files/xunhanliu/d3.v4.min.js">script> <script> let config={ instructions: ['icon', 'fa-icon',] }; String.prototype.firstUpperCase = function () { let arr = this.split(/\s+/); let uppserCase = ([first, ...rest]) => first.toUpperCase() + rest.join(''); let result = ''; arr.forEach((val) => { result += uppserCase(val) + ' '; }) return result.trim(); } $(function () { console.log('调试，用于找文件位置'); //post-body id $("#cnblogs_post_body") 其内部都是一些分立的标签 //head $('.postTitle') function shuffle(arr) { var len = arr.length; for (var i = 0; i < len - 1; i++) { var index = parseInt(Math.random() * (len - i)); var temp = arr[index]; arr[index] = arr[len - i - 1]; arr[len - i - 1] = temp; } return arr; } let instructions = config.instructions; let eleAggregate = {} for (let i in instructions) { eleAggregate[instructions[i]] = []; //[{node,para:{main:'',color:'#f00'}}] main参数是必须的 } let commonCmdReg = /\{\s*(\S{4,100}\s*)+\s*}/; function ParseCmdAndReplaceNodes(dom, parent) { //dom 的Tag=text //查找指令，并定位位置（可能有多个） // let str = "{icon=sdfafdasd}{icon=dddd}{icon=aaaa}"; //用于测试 let str = dom.textContent; let patt = new RegExp(/\{\s*(?\S{2,10})\s*=\s*(? /, "g"); let result; let replacer = document.createElement("span"); let lastStart = 0; let start = str.length; while ((result = patt.exec(str)) != null) { start = result.index; let end = patt.lastIndex; //end 是"}"的后面一个字符 if (start != lastStart) { //中间有未被匹配的元素 replacer.appendChild(document.createTextNode(str.substring(lastStart, start))); } let iconNode = document.createElement("span"); replacer.appendChild(iconNode); //解析otherPara let otherParaMap = {}; let otherPara = result.groups.otherPara; if (otherPara) { let l = otherPara.trim().split(/\s+/); for (let i in l) { let e = l[i].split('='); otherParaMap[e[0]] = e[1]; } } let cmd = result.groups.cmd; if (cmd in eleAggregate) { eleAggregate[cmd].push({ node: iconNode, para: { main: result.groups.main, ...otherParaMap }, cmd, text: result[0] }) } lastStart = end; } if (str.length != lastStart) { //中间有未被匹配的元素 replacer.appendChild(document.createTextNode(str.substring(lastStart, str.length))); } parent.replaceChild(replacer, dom); //使用前面的替换后面的 } function domTree(dom, parent) { //入口是他们的父亲节点 if (dom.nodeType == 3 && dom.nodeName == '#text') { //这里是对child进行处理 //查找，并可能会插入一些元素 //处理中，需要此元素的父元素。可能会使整个text升级成span元素 if (commonCmdReg.test(dom.textContent)) { //包含指令 ParseCmdAndReplaceNodes(dom, parent); } } else { let childs = dom.childNodes; for (let i = 0; i < childs.length; i++) { domTree(childs[i], dom); } } } if (commonCmdReg.test($('.postTitle').text())) { //匹配到指令，需要做点什么 let $postTitle = $('.postTitle'); for (let i = 0; i < $postTitle.length; i++) { domTree($('.postTitle')[i], null); } } if (commonCmdReg.test($('#cnblogs_post_body').text())) { domTree($('#cnblogs_post_body')[0], null); } //指令已经解析完毕，eleAggregate存储node和指令的参数。而且原来指令的位置已经被span元素给替代了！ //通过instructions调用相应的指令处理函数 for (let i in instructions) { let eleList = eleAggregate[instructions[i]]; try { eval(`Cmd_${instructions[i].firstUpperCase().replace(new RegExp("[`\\-~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]", 'g'), '_')}Handel(eleList)`); } catch (e) { if (e.name == 'ReferenceError') { console.error('博客中有知指令：' + instructions[i] + '; 你可能需要在后台追加此指令对应的处理函数！') } } } function Cmd_Fa_iconHandel(eleList) { //对fa-icon指令进行处理 let nameArr = ["glass", "music", "search", "envelope-o", "heart", "star", "star-o", "user", "film", "th-large", "th", "th-list", "check", "times", "search-plus", "search-minus", "power-off", "signal", "cog", "trash-o", "home", "file-o", "clock-o", "road", "download", "arrow-circle-o-down", "arrow-circle-o-up", "inbox", "play-circle-o", "repeat", "refresh", "list-alt", "lock", "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", "list", "outdent", "indent", "video-camera", "picture-o", "pencil", "map-marker", "adjust", "tint", "pencil-square-o", "share-square-o", "check-square-o", "arrows", "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward", "step-forward", "eject", "chevron-left", "chevron-right", "plus-circle", "minus-circle", "times-circle", "check-circle", "question-circle", "info-circle", "crosshairs", "times-circle-o", "check-circle-o", "ban", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "share", "expand", "compress", "plus", "minus", "asterisk", "exclamation-circle", "gift", "leaf", "fire", "eye", "eye-slash", "exclamation-triangle", "plane", "calendar", "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder", "folder-open", "arrows-v", "arrows-h", "bar-chart", "twitter-square", "facebook-square", "camera-retro", "key", "cogs", "comments", "thumbs-o-up", "thumbs-o-down", "star-half", "heart-o", "sign-out", "linkedin-square", "thumb-tack", "external-link", "sign-in", "trophy", "github-square", "upload", "lemon-o", "phone", "square-o", "bookmark-o", "phone-square", "twitter", "facebook", "github", "unlock", "credit-card", "rss", "hdd-o", "bullhorn", "bell", "certificate", "hand-o-right", "hand-o-left", "hand-o-up", "hand-o-down", "arrow-circle-left", "arrow-circle-right", "arrow-circle-up", "arrow-circle-down", "globe", "wrench", "tasks", "filter", "briefcase", "arrows-alt", "users", "link", "cloud", "flask", "scissors", "files-o", "paperclip", "floppy-o", "square", "bars", "list-ul", "list-ol", "strikethrough", "underline", "table", "magic", "truck", "pinterest", "pinterest-square", "google-plus-square", "google-plus", "money", "caret-down", "caret-up", "caret-left", "caret-right", "columns", "sort", "sort-desc", "sort-asc", "envelope", "linkedin", "undo", "gavel", "tachometer", "comment-o", "comments-o", "bolt", "sitemap", "umbrella", "clipboard", "lightbulb-o", "exchange", "cloud-download", "cloud-upload", "user-md", "stethoscope", "suitcase", "bell-o", "coffee", "cutlery", "file-text-o", "building-o", "hospital-o", "ambulance", "medkit", "fighter-jet", "beer", "h-square", "plus-square", "angle-double-left", "angle-double-right", "angle-double-up", "angle-double-down", "angle-left", "angle-right", "angle-up", "angle-down", "desktop", "laptop", "tablet", "mobile", "circle-o", "quote-left", "quote-right", "spinner", "circle", "reply", "github-alt", "folder-o", "folder-open-o", "smile-o", "frown-o", "meh-o", "gamepad", "keyboard-o", "flag-o", "flag-checkered", "terminal", "code", "reply-all", "star-half-o", "location-arrow", "crop", "code-fork", "chain-broken", "question", "info", "exclamation", "superscript", "subscript", "eraser", "puzzle-piece", "microphone", "microphone-slash", "shield", "calendar-o", "fire-extinguisher", "rocket", "maxcdn", "chevron-circle-left", "chevron-circle-right", "chevron-circle-up", "chevron-circle-down", "html5", "css3", "anchor", "unlock-alt", "bullseye", "ellipsis-h", "ellipsis-v", "rss-square", "play-circle", "ticket", "minus-square", "minus-square-o", "level-up", "level-down", "check-square", "pencil-square", "external-link-square", "share-square", "compass", "caret-square-o-down", "caret-square-o-up", "caret-square-o-right", "eur", "gbp", "usd", "inr", "jpy", "rub", "krw", "btc", "file", "file-text", "sort-alpha-asc", "sort-alpha-desc", "sort-amount-asc", "sort-amount-desc", "sort-numeric-asc", "sort-numeric-desc", "thumbs-up", "thumbs-down", "youtube-square", "youtube", "xing", "xing-square", "youtube-play", "dropbox", "stack-overflow", "instagram", "flickr", "adn", "bitbucket", "bitbucket-square", "tumblr", "tumblr-square", "long-arrow-down", "long-arrow-up", "long-arrow-left", "long-arrow-right", "apple", "windows", "android", "linux", "dribbble", "skype", "foursquare", "trello", "female", "male", "gratipay", "sun-o", "moon-o", "archive", "bug", "vk", "weibo", "renren", "pagelines", "stack-exchange", "arrow-circle-o-right", "arrow-circle-o-left", "caret-square-o-left", "dot-circle-o", "wheelchair", "vimeo-square", "try", "plus-square-o", "space-shuttle", "slack", "envelope-square", "wordpress", "openid", "university", "graduation-cap", "yahoo", "google", "reddit", "reddit-square", "stumbleupon-circle", "stumbleupon", "delicious", "digg", "pied-piper-pp", "pied-piper-alt", "drupal", "joomla", "language", "fax", "building", "child", "paw", "spoon", "cube", "cubes", "behance", "behance-square", "steam", "steam-square", "recycle", "car", "taxi", "tree", "spotify", "deviantart", "soundcloud", "database", "file-pdf-o", "file-word-o", "file-excel-o", "file-powerpoint-o", "file-image-o", "file-archive-o", "file-audio-o", "file-video-o", "file-code-o", "vine", "codepen", "jsfiddle", "life-ring", "circle-o-notch", "rebel", "empire", "git-square", "git", "hacker-news", "tencent-weibo", "qq", "weixin", "paper-plane", "paper-plane-o", "history", "circle-thin", "header", "paragraph", "sliders", "share-alt", "share-alt-square", "bomb", "futbol-o", "tty", "binoculars", "plug", "slideshare", "twitch", "yelp", "newspaper-o", "wifi", "calculator", "paypal", "google-wallet", "cc-visa", "cc-mastercard", "cc-discover", "cc-amex", "cc-paypal", "cc-stripe", "bell-slash", "bell-slash-o", "trash", "copyright", "at", "eyedropper", "paint-brush", "birthday-cake", "area-chart", "pie-chart", "line-chart", "lastfm", "lastfm-square", "toggle-off", "toggle-on", "bicycle", "bus", "ioxhost", "angellist", "cc", "ils", "meanpath", "buysellads", "connectdevelop", "dashcube", "forumbee", "leanpub", "sellsy", "shirtsinbulk", "simplybuilt", "skyatlas", "cart-plus", "cart-arrow-down", "diamond", "ship", "user-secret", "motorcycle", "street-view", "heartbeat", "venus", "mars", "mercury", "transgender", "transgender-alt", "venus-double", "mars-double", "venus-mars", "mars-stroke", "mars-stroke-v", "mars-stroke-h", "neuter", "genderless", "facebook-official", "pinterest-p", "whatsapp", "server", "user-plus", "user-times", "bed", "viacoin", "train", "subway", "medium", "y-combinator", "optin-monster", "opencart", "expeditedssl", "battery-full", "battery-three-quarters", "battery-half", "battery-quarter", "battery-empty", "mouse-pointer", "i-cursor", "object-group", "object-ungroup", "sticky-note", "sticky-note-o", "cc-jcb", "cc-diners-club", "clone", "balance-scale", "hourglass-o", "hourglass-start", "hourglass-half", "hourglass-end", "hourglass", "hand-rock-o", "hand-paper-o", "hand-scissors-o", "hand-lizard-o", "hand-spock-o", "hand-pointer-o", "hand-peace-o", "trademark", "registered", "creative-commons", "gg", "gg-circle", "tripadvisor", "odnoklassniki", "odnoklassniki-square", "get-pocket", "wikipedia-w", "safari", "chrome", "firefox", "opera", "internet-explorer", "television", "contao", "500px", "amazon", "calendar-plus-o", "calendar-minus-o", "calendar-times-o", "calendar-check-o", "industry", "map-pin", "map-signs", "map-o", "map", "commenting", "commenting-o", "houzz", "vimeo", "black-tie", "fonticons", "reddit-alien", "edge", "credit-card-alt", "codiepie", "modx", "fort-awesome", "usb", "product-hunt", "mixcloud", "scribd", "pause-circle", "pause-circle-o", "stop-circle", "stop-circle-o", "shopping-bag", "shopping-basket", "hashtag", "bluetooth", "bluetooth-b", "percent", "gitlab", "wpbeginner", "wpforms", "envira", "universal-access", "wheelchair-alt", "question-circle-o", "blind", "audio-description", "volume-control-phone", "braille", "assistive-listening-systems", "american-sign-language-interpreting", "deaf", "glide", "glide-g", "sign-language", "low-vision", "viadeo", "viadeo-square", "snapchat", "snapchat-ghost", "snapchat-square", "pied-piper", "first-order", "yoast", "themeisle", "google-plus-official", "font-awesome", "handshake-o", "envelope-open", "envelope-open-o", "linode", "address-book", "address-book-o", "address-card", "address-card-o", "user-circle", "user-circle-o", "user-o", "id-badge", "id-card", "id-card-o", "quora", "free-code-camp", "telegram", "thermometer-full", "thermometer-three-quarters", "thermometer-half", "thermometer-quarter", "thermometer-empty", "shower", "bath", "podcast", "window-maximize", "window-minimize", "window-restore", "window-close", "window-close-o", "bandcamp", "grav", "etsy", "imdb", "ravelry", "eercast", "microchip", "snowflake-o", "superpowers", "wpexplorer", "meetup"]; console.log(eleList); for (let i in eleList) { let e = eleList[i].node; let para = eleList[i].para; e.classList.add('fa'); nameArr.includes(para.main) ? e.classList.add(`fa-${para.main}`) : e.classList.add('fa-ban'); if (para['rotate'] && parseInt(para['rotate']) == para['rotate']) { e.classList.add(`fa-rotate-${para['rotate']}`); } if (para['flip'] && (para['flip'] == 'horizontal' || para['flip'] == 'vertical')) { e.classList.add(`fa-flip-${para['flip']}`); } if (para['spin']) { e.classList.add(`fa-spin`); } //把其他参数加入到e的style中 $(e).css(para); e.setAttribute('title', "动画spin,旋转rotate,镜像flip"); } } function Cmd_IconHandel(eleList) { /** * eleList=eleAggregate['icon']; eleList内部的结构： [{node,para:{main:'',color:'#f00'}}] main参数必须有 */ let joypixelsNameList = ["alien-monster", "alien", "angry-face-with-horns", "angry-face", "anguished-face", "anxious-face-with-sweat", "astonished-face", "baby-angel", "baby", "backhand-index-pointing-down", "backhand-index-pointing-left", "backhand-index-pointing-right", "backhand-index-pointing-up", "backpack", "bald", "ballet-shoes", "beaming-face-with-smiling-eyes", "bikini", "billed-cap", "bone", "boy", "brain", "breast-feeding", "bride-with-veil", "briefcase", "briefs", "bust-in-silhouette", "busts-in-silhouette", "call-me-hand", "cat-with-tears-of-joy", "cat-with-wry-smile", "child", "clapping-hands", "closed-umbrella", "clown-face", "clutch-bag", "coat", "cold-face", "confounded-face", "confused-face", "construction-worker", "couple-with-heart-man-man", "couple-with-heart-woman-man", "couple-with-heart-woman-woman", "couple-with-heart", "cowboy-hat-face", "crossed-fingers", "crown", "crying-cat", "crying-face", "curly-hair", "deaf-man", "deaf-person", "deaf-woman", "detective", "disappointed-face", "diving-mask", "dizzy-face", "downcast-face-with-sweat", "dress", "drooling-face", "ear-with-hearing-aid", "ear", "elf", "exploding-head", "expressionless-face", "eye", "eyes", "face-blowing-a-kiss", "face-savoring-food", "face-screaming-in-fear", "face-vomiting", "face-with-hand-over-mouth", "face-with-head-bandage", "face-with-medical-mask", "face-with-monocle", "face-with-open-mouth", "face-with-raised-eyebrow", "face-with-rolling-eyes", "face-with-steam-from-nose", "face-with-symbols-on-mouth", "face-with-tears-of-joy", "face-with-thermometer", "face-with-tongue", "face-without-mouth", "fairy", "family-man-boy-boy", "family-man-boy", "family-man-girl-boy", "family-man-girl-girl", "family-man-girl", "family-man-man-boy-boy", "family-man-man-boy", "family-man-man-girl-boy", "family-man-man-girl-girl", "family-man-man-girl", "family-man-woman-boy-boy", "family-man-woman-boy", "family-man-woman-girl-boy", "family-man-woman-girl-girl", "family-man-woman-girl", "family-woman-boy-boy", "family-woman-boy", "family-woman-girl-boy", "family-woman-girl-girl", "family-woman-girl", "family-woman-woman-boy-boy", "family-woman-woman-boy", "family-woman-woman-girl-boy", "family-woman-woman-girl-girl", "family-woman-woman-girl", "family", "fearful-face", "flat-shoe", "flexed-biceps", "flushed-face", "folded-hands", "foot", "footprints", "frowning-face-with-open-mouth", "frowning-face", "genie", "ghost", "girl", "glasses", "gloves", "goblin", "goggles", "graduation-cap", "grimacing-face", "grinning-cat-with-smiling-eyes", "grinning-cat", "grinning-face-with-big-eyes", "grinning-face-with-smiling-eyes", "grinning-face-with-sweat", "grinning-face", "grinning-squinting-face", "guard", "hand-with-fingers-splayed", "handbag", "handshake", "high-heeled-shoe", "hiking-boot", "hot-face", "hugging-face", "hushed-face", "index-pointing-up", "jack-o-lantern", "jeans", "kimono", "kiss-man-man", "kiss-mark", "kiss-woman-man", "kiss-woman-woman", "kiss", "kissing-cat", "kissing-face-with-closed-eyes", "kissing-face-with-smiling-eyes", "kissing-face", "lab-coat", "left-facing-fist", "leg", "lipstick", "loudly-crying-face", "love-you-gesture", "luggage", "lying-face", "mage", "man-artist", "man-astronaut", "man-bald", "man-beard", "man-blond-hair", "man-bowing", "man-construction-worker", "man-cook", "man-curly-hair", "man-dancing", "man-detective", "man-elf", "man-facepalming", "man-factory-worker", "man-fairy", "man-farmer", "man-firefighter", "man-frowning", "man-genie", "man-gesturing-no", "man-gesturing-ok", "man-getting-haircut", "man-getting-massage", "man-guard", "man-health-worker", "man-in-manual-wheelchair", "man-in-motorized-wheelchair", "man-in-steamy-room", "man-in-suit-levitating", "man-in-tuxedo", "man-judge", "man-kneeling", "man-mage", "man-mechanic", "man-office-worker", "man-pilot", "man-police-officer", "man-pouting", "man-raising-hand", "man-red-hair", "man-running", "man-scientist", "man-shrugging", "man-singer", "man-standing", "man-student", "man-superhero", "man-supervillain", "man-teacher", "man-technologist", "man-tipping-hand", "man-vampire", "man-walking", "man-wearing-turban", "man-white-hair", "man-with-chinese-cap", "man-with-probing-cane", "man-zombie", "man", "mans-shoe", "mechanical-arm", "mechanical-leg", "men-holding-hands", "men-with-bunny-ears", "mermaid", "merman", "merperson", "middle-finger", "money-mouth-face", "mouth", "mrs-claus", "nail-polish", "nauseated-face", "necktie", "nerd-face", "neutral-face", "nose", "ogre", "ok-hand", "old-man", "old-woman", "older-person", "oncoming-fist", "one-piece-swimsuit", "open-hands", "palms-up-together", "partying-face", "pensive-face", "people-holding-hands", "people-with-bunny-ears", "persevering-face", "person-blond-hair", "person-bowing", "person-facepalming", "person-frowning", "person-gesturing-no", "person-gesturing-ok", "person-getting-haircut", "person-getting-massage", "person-in-steamy-room", "person-kneeling", "person-pouting", "person-raising-hand", "person-running", "person-shrugging", "person-standing", "person-tipping-hand", "person-walking", "person-wearing-turban", "person", "pile-of-poo", "pinching-hand", "pleading-face", "police-officer", "pouting-cat", "pouting-face", "pregnant-woman", "prince", "princess", "purse", "raised-back-of-hand", "raised-fist", "raised-hand", "raising-hands", "red-hair", "relieved-face", "rescue-workers-helmet", "right-facing-fist", "ring", "robot", "rolling-on-the-floor-laughing", "running-shoe", "sad-but-relieved-face", "safety-vest", "santa-claus", "sari", "scarf", "selfie", "shorts", "shushing-face", "sign-of-the-horns", "skull-and-crossbones", "skull", "sleeping-face", "sleepy-face", "slightly-frowning-face", "slightly-smiling-face", "smiling-cat-with-heart-eyes", "smiling-face-with-halo", "smiling-face-with-heart-eyes", "smiling-face-with-hearts", "smiling-face-with-horns", "smiling-face-with-smiling-eyes", "smiling-face-with-sunglasses", "smiling-face", "smirking-face", "sneezing-face", "socks", "speaking-head", "squinting-face-with-tongue", "star-struck", "sunglasses", "superhero", "supervillain", "t-shirt", "thinking-face", "thread", "thumbs-down", "thumbs-up", "tired-face", "tongue", "tooth", "top-hat", "unamused-face", "upside-down-face", "vampire", "victory-hand", "vulcan-salute", "waving-hand", "weary-cat", "weary-face", "white-hair", "winking-face-with-tongue", "winking-face", "woman-and-man-holding-hands", "woman-artist", "woman-astronaut", "woman-bald", "woman-blond-hair", "woman-bowing", "woman-construction-worker", "woman-cook", "woman-curly-hair", "woman-dancing", "woman-detective", "woman-elf", "woman-facepalming", "woman-factory-worker", "woman-fairy", "woman-farmer", "woman-firefighter", "woman-frowning", "woman-genie", "woman-gesturing-no", "woman-gesturing-ok", "woman-getting-haircut", "woman-getting-massage", "woman-guard", "woman-health-worker", "woman-in-manual-wheelchair", "woman-in-motorized-wheelchair", "woman-in-steamy-room", "woman-judge", "woman-kneeling", "woman-mage", "woman-mechanic", "woman-office-worker", "woman-pilot", "woman-police-officer", "woman-pouting", "woman-raising-hand", "woman-red-hair", "woman-running", "woman-scientist", "woman-shrugging", "woman-singer", "woman-standing", "woman-student", "woman-superhero", "woman-supervillain", "woman-teacher", "woman-technologist", "woman-tipping-hand", "woman-vampire", "woman-walking", "woman-wearing-turban", "woman-white-hair", "woman-with-headscarf", "woman-with-probing-cane", "woman-zombie", "woman", "womans-boot", "womans-clothes", "womans-hat", "womans-sandal", "women-holding-hands", "women-with-bunny-ears", "woozy-face", "worried-face", "writing-hand", "yarn", "yawning-face", "zany-face", "zipper-mouth-face", "zombie"]; let joypixelsNameListTrim = [["alien", "monster"], ["alien"], ["angry", "face", "with", "horn"], ["angry", "face"], ["anguish", "face"], ["anxiou", "face", "with", "sweat"], ["astonish", "face"], ["baby", "angel"], ["baby"], ["backhand", "index", "point", "down"], ["backhand", "index", "point", "left"], ["backhand", "index", "point", "right"], ["backhand", "index", "point", "up"], ["backpack"], ["bald"], ["ballet", "sho"], ["beam", "face", "with", "smil", "ey"], ["bikini"], ["bill", "cap"], ["bone"], ["boy"], ["brain"], ["breast", "feed"], ["bride", "with", "veil"], ["briefcase"], ["brief"], ["bust", "in", "silhouette"], ["bust", "in", "silhouette"], ["call", "me", "hand"], ["cat", "with", "tear", "of", "joy"], ["cat", "with", "wry", "smile"], ["child"], ["clapp", "hand"], ["clos", "umbrella"], ["clown", "face"], ["clutch", "bag"], ["coat"], ["cold", "face"], ["confound", "face"], ["confus", "face"], ["construction", "worker"], ["couple", "with", "heart", "man", "man"], ["couple", "with", "heart", "woman", "man"], ["couple", "with", "heart", "woman", "woman"], ["couple", "with", "heart"], ["cowboy", "hat", "face"], ["cross", "finger"], ["crown"], ["cry", "cat"], ["cry", "face"], ["curly", "hair"], ["deaf", "man"], ["deaf", "person"], ["deaf", "woman"], ["detective"], ["disappoint", "face"], ["div", "mask"], ["dizzy", "face"], ["downcast", "face", "with", "sweat"], ["dres"], ["drool", "face"], ["ear", "with", "hear", "aid"], ["ear"], ["elf"], ["explod", "head"], ["expressionles", "face"], ["eye"], ["ey"], ["face", "blow", "a", "kis"], ["face", "savor", "food"], ["face", "scream", "in", "fear"], ["face", "vomit"], ["face", "with", "hand", "over", "mouth"], ["face", "with", "head", "bandage"], ["face", "with", "medical", "mask"], ["face", "with", "monocle"], ["face", "with", "open", "mouth"], ["face", "with", "rais", "eyebrow"], ["face", "with", "roll", "ey"], ["face", "with", "steam", "from", "nose"], ["face", "with", "symbol", "on", "mouth"], ["face", "with", "tear", "of", "joy"], ["face", "with", "thermometer"], ["face", "with", "tongue"], ["face", "without", "mouth"], ["fairy"], ["family", "man", "boy", "boy"], ["family", "man", "boy"], ["family", "man", "girl", "boy"], ["family", "man", "girl", "girl"], ["family", "man", "girl"], ["family", "man", "man", "boy", "boy"], ["family", "man", "man", "boy"], ["family", "man", "man", "girl", "boy"], ["family", "man", "man", "girl", "girl"], ["family", "man", "man", "girl"], ["family", "man", "woman", "boy", "boy"], ["family", "man", "woman", "boy"], ["family", "man", "woman", "girl", "boy"], ["family", "man", "woman", "girl", "girl"], ["family", "man", "woman", "girl"], ["family", "woman", "boy", "boy"], ["family", "woman", "boy"], ["family", "woman", "girl", "boy"], ["family", "woman", "girl", "girl"], ["family", "woman", "girl"], ["family", "woman", "woman", "boy", "boy"], ["family", "woman", "woman", "boy"], ["family", "woman", "woman", "girl", "boy"], ["family", "woman", "woman", "girl", "girl"], ["family", "woman", "woman", "girl"], ["family"], ["fearful", "face"], ["flat", "shoe"], ["flex", "bicep"], ["flush", "face"], ["fold", "hand"], ["foot"], ["footprint"], ["frown", "face", "with", "open", "mouth"], ["frown", "face"], ["genie"], ["ghost"], ["girl"], ["glass"], ["glov"], ["goblin"], ["goggl"], ["graduation", "cap"], ["grimac", "face"], ["grinn", "cat", "with", "smil", "ey"], ["grinn", "cat"], ["grinn", "face", "with", "big", "ey"], ["grinn", "face", "with", "smil", "ey"], ["grinn", "face", "with", "sweat"], ["grinn", "face"], ["grinn", "squint", "face"], ["guard"], ["hand", "with", "finger", "splay"], ["handbag"], ["handshake"], ["high", "heel", "shoe"], ["hik", "boot"], ["hot", "face"], ["hugg", "face"], ["hush", "face"], ["index", "point", "up"], ["jack", "o", "lantern"], ["jean"], ["kimono"], ["kis", "man", "man"], ["kis", "mark"], ["kis", "woman", "man"], ["kis", "woman", "woman"], ["kis"], ["kiss", "cat"], ["kiss", "face", "with", "clos", "ey"], ["kiss", "face", "with", "smil", "ey"], ["kiss", "face"], ["lab", "coat"], ["left", "fac", "fist"], ["leg"], ["lipstick"], ["loudly", "cry", "face"], ["love", "you", "gesture"], ["luggage"], ["ly", "face"], ["mage"], ["man", "artist"], ["man", "astronaut"], ["man", "bald"], ["man", "beard"], ["man", "blond", "hair"], ["man", "bow"], ["man", "construction", "worker"], ["man", "cook"], ["man", "curly", "hair"], ["man", "danc"], ["man", "detective"], ["man", "elf"], ["man", "facepalm"], ["man", "factory", "worker"], ["man", "fairy"], ["man", "farmer"], ["man", "firefighter"], ["man", "frown"], ["man", "genie"], ["man", "gestur", "no"], ["man", "gestur", "ok"], ["man", "gett", "haircut"], ["man", "gett", "massage"], ["man", "guard"], ["man", "health", "worker"], ["man", "in", "manual", "wheelchair"], ["man", "in", "motoriz", "wheelchair"], ["man", "in", "steamy", "room"], ["man", "in", "suit", "levitat"], ["man", "in", "tuxedo"], ["man", "judge"], ["man", "kneel"], ["man", "mage"], ["man", "mechanic"], ["man", "office", "worker"], ["man", "pilot"], ["man", "police", "officer"], ["man", "pout"], ["man", "rais", "hand"], ["man", "r", "hair"], ["man", "runn"], ["man", "scientist"], ["man", "shrugg"], ["man", "singer"], ["man", "stand"], ["man", "student"], ["man", "superhero"], ["man", "supervillain"], ["man", "teacher"], ["man", "technologist"], ["man", "tipp", "hand"], ["man", "vampire"], ["man", "walk"], ["man", "wear", "turban"], ["man", "white", "hair"], ["man", "with", "chinese", "cap"], ["man", "with", "prob", "cane"], ["man", "zombie"], ["man"], ["man", "shoe"], ["mechanical", "arm"], ["mechanical", "leg"], ["men", "hold", "hand"], ["men", "with", "bunny", "ear"], ["mermaid"], ["merman"], ["merperson"], ["middle", "finger"], ["money", "mouth", "face"], ["mouth"], ["mr", "clau"], ["nail", "polish"], ["nauseat", "face"], ["necktie"], ["nerd", "face"], ["neutral", "face"], ["nose"], ["ogre"], ["ok", "hand"], ["old", "man"], ["old", "woman"], ["older", "person"], ["oncom", "fist"], ["one", "piece", "swimsuit"], ["open", "hand"], ["palm", "up", "together"], ["party", "face"], ["pensive", "face"], ["people", "hold", "hand"], ["people", "with", "bunny", "ear"], ["persever", "face"], ["person", "blond", "hair"], ["person", "bow"], ["person", "facepalm"], ["person", "frown"], ["person", "gestur", "no"], ["person", "gestur", "ok"], ["person", "gett", "haircut"], ["person", "gett", "massage"], ["person", "in", "steamy", "room"], ["person", "kneel"], ["person", "pout"], ["person", "rais", "hand"], ["person", "runn"], ["person", "shrugg"], ["person", "stand"], ["person", "tipp", "hand"], ["person", "walk"], ["person", "wear", "turban"], ["person"], ["pile", "of", "poo"], ["pinch", "hand"], ["plead", "face"], ["police", "officer"], ["pout", "cat"], ["pout", "face"], ["pregnant", "woman"], ["prince"], ["princes"], ["purse"], ["rais", "back", "of", "hand"], ["rais", "fist"], ["rais", "hand"], ["rais", "hand"], ["r", "hair"], ["reliev", "face"], ["rescue", "worker", "helmet"], ["right", "fac", "fist"], ["r"], ["robot"], ["roll", "on", "the", "floor", "laugh"], ["runn", "shoe"], ["sad", "but", "reliev", "face"], ["safety", "vest"], ["santa", "clau"], ["sari"], ["scarf"], ["selfie"], ["short"], ["shush", "face"], ["sign", "of", "the", "horn"], ["skull", "and", "crossbon"], ["skull"], ["sleep", "face"], ["sleepy", "face"], ["slightly", "frown", "face"], ["slightly", "smil", "face"], ["smil", "cat", "with", "heart", "ey"], ["smil", "face", "with", "halo"], ["smil", "face", "with", "heart", "ey"], ["smil", "face", "with", "heart"], ["smil", "face", "with", "horn"], ["smil", "face", "with", "smil", "ey"], ["smil", "face", "with", "sunglass"], ["smil", "face"], ["smirk", "face"], ["sneez", "face"], ["sock"], ["speak", "head"], ["squint", "face", "with", "tongue"], ["star", "struck"], ["sunglass"], ["superhero"], ["supervillain"], ["t", "shirt"], ["think", "face"], ["thread"], ["thumb", "down"], ["thumb", "up"], ["tir", "face"], ["tongue"], ["tooth"], ["top", "hat"], ["unamus", "face"], ["upside", "down", "face"], ["vampire"], ["victory", "hand"], ["vulcan", "salute"], ["wav", "hand"], ["weary", "cat"], ["weary", "face"], ["white", "hair"], ["wink", "face", "with", "tongue"], ["wink", "face"], ["woman", "and", "man", "hold", "hand"], ["woman", "artist"], ["woman", "astronaut"], ["woman", "bald"], ["woman", "blond", "hair"], ["woman", "bow"], ["woman", "construction", "worker"], ["woman", "cook"], ["woman", "curly", "hair"], ["woman", "danc"], ["woman", "detective"], ["woman", "elf"], ["woman", "facepalm"], ["woman", "factory", "worker"], ["woman", "fairy"], ["woman", "farmer"], ["woman", "firefighter"], ["woman", "frown"], ["woman", "genie"], ["woman", "gestur", "no"], ["woman", "gestur", "ok"], ["woman", "gett", "haircut"], ["woman", "gett", "massage"], ["woman", "guard"], ["woman", "health", "worker"], ["woman", "in", "manual", "wheelchair"], ["woman", "in", "motoriz", "wheelchair"], ["woman", "in", "steamy", "room"], ["woman", "judge"], ["woman", "kneel"], ["woman", "mage"], ["woman", "mechanic"], ["woman", "office", "worker"], ["woman", "pilot"], ["woman", "police", "officer"], ["woman", "pout"], ["woman", "rais", "hand"], ["woman", "r", "hair"], ["woman", "runn"], ["woman", "scientist"], ["woman", "shrugg"], ["woman", "singer"], ["woman", "stand"], ["woman", "student"], ["woman", "superhero"], ["woman", "supervillain"], ["woman", "teacher"], ["woman", "technologist"], ["woman", "tipp", "hand"], ["woman", "vampire"], ["woman", "walk"], ["woman", "wear", "turban"], ["woman", "white", "hair"], ["woman", "with", "headscarf"], ["woman", "with", "prob", "cane"], ["woman", "zombie"], ["woman"], ["woman", "boot"], ["woman", "cloth"], ["woman", "hat"], ["woman", "sandal"], ["women", "hold", "hand"], ["women", "with", "bunny", "ear"], ["woozy", "face"], ["worri", "face"], ["writ", "hand"], ["yarn"], ["yawn", "face"], ["zany", "face"], ["zipper", "mouth", "face"], ["zombie"]]; let translateStrList = eleList.map(d => { return d.para.main; }); if (eleList.length != 0) { //开始翻译 let query = '苹果\norange\n汽车'; // 多个query可以用\n连接 如 query='apple\norange\nbanana\npear' query = translateStrList.join('\n'); let appid = ''; //这里填写你在百度翻译上申请的东东 let key = ''; //这里填写你在百度翻译上申请的东东 let salt = (new Date).getTime(); let str1 = appid + query + salt + key; let sign = MD5(str1); let tryTimes = 0; console.log('调试，用于定位元素'); let run = () => { $.ajax({ url: 'https://api.fanyi.baidu.com/api/trans/vip/translate', type: 'get', dataType: 'jsonp', data: { q: query, appid: appid, salt: salt, from: 'auto', to: 'en', sign: sign }, }).then(function (data) { if (data['error_code']) { tryTimes += 1; if (tryTimes >= 10) { console.error('百度翻译api的token可能已过期或者被封！') } else { setTimeout(() => { run() }, 1000); } return; } let resultList = []; for (let i = 0; i < data.trans_result.length; i++) { let d = data.trans_result[i]; let str_n = d.dst.toLocaleLowerCase(); //注意通过测试，str_n内部可能含有\n let str_n_list = str_n.split('\\n') for (let j in str_n_list) { let str = str_n_list[j]; let resultStr = ''; if (str.endsWith('ed') || str.endsWith('es')) { resultStr = str.substring(0, str.length - 2); } else if (str.endsWith('s')) { resultStr = str.substring(0, str.length - 1); } else if (str.endsWith('ed')) { resultStr = str.substring(0, str.length - 3); } else { resultStr = str; } resultList.push(resultStr) } } //剔除后缀 ed ing es 然后进行匹配 //打乱匹配 function JoypixelsNameListTrimItemCmp(arr, str) { for (let i in arr) { if (arr[i].indexOf(str) == 0 || str.indexOf(arr[i]) == 0) return true; } return false; } let arrIndex = []; for (let i = 0; i < joypixelsNameList.length; i++) { arrIndex.push(i); } arrIndex = shuffle(arrIndex); let pngSrcList = resultList.map(d => { //对d进行按照顺序arrIndex进行匹配joypixelsNameListTrim for (let i = 0; i < arrIndex.length; i++) { if (JoypixelsNameListTrimItemCmp(joypixelsNameListTrim[arrIndex[i]], d)) { //如果对d匹配到了 return joypixelsNameList[arrIndex[i]] + '.png'; } } return "notFound" }); //记得对子元素计算缩放，对父窗口计算width for (let i in pngSrcList) { if (pngSrcList[i] === 'notFound') { CmdParaErr(eleList[i]); continue; } let $element = $(eleList[i].node); let parentHeight = parseInt($(eleList[i].node.parentNode).css('font-size')); let rate = parentHeight * 56 / (42 * 128); let size = parentHeight * 56 / 42; $element.width(size); let x = d3.scaleLinear().domain([18.67, 37.33]).range([-57, -47]); let y = d3.scaleLinear().domain([18.67, 37.33]).range([-52, -45]); eleList[i].node.classList.add('myjoypixels128-parent') $element.html(`<span style="transform: translate(${x(size)}px,${y(size)}px) scale(${rate});background-image:url(https://xunhanliu.gitee.io/images/people/${pngSrcList[i]})" class="myjoypixels128"></span>`); } }); } run(); } } function CmdParaErr(myE) { //指令被识别了，并且有对应的处理函数。参数传递有误或者参数无法解析。 //myE: {node,para} myE.node.classList.add('cmd-para-err-parent'); myE.node.setAttribute('tips', '参数传递有误或者参数无法解析'); $(myE.node).html(`${myE.text.substring(0, myE.text.length - 1)} <span class="fa fa-warning cmd-para-err"></span>}`) } }); script>[^\}\s]{1,30})\s*(? ([^\}\s]{4,100}\s*)*)\}
简要说明
icon指令：
图片资源来自：https://www.joypixels.com/ 的5.0 free版。使用了其内部的128px的png格式的people文件。
如何便于书写及让单词与people文件中的png匹配上？
从上图的示例中我们可以看到icon的参数比较随意（支持多种语言哦）。因为这里我们使用了百度翻译的api对icon的参数进行翻译，最终对结果进行简单处理，然后拿这个结果与people文件夹的文件名进行弱匹配（匹配的时候对匹配顺序打乱了{icon=laugh},这样每次刷新都有不同哦{icon=拇指}）。
fa-icon指令
此指令使用的是Font Awesome字体库。我们引入了对应的css,此css由于会下载字体，造成了页面的两次刷新{icon-愤怒}，小{fa-icon=bug color=red}！
另外可以把style当做参数直接写进去{fa-icon=gift color=green}哦。
{icon=tip}: 问题还有很多，有什么想法，要及时告诉蛋哥哦