halo发布文章自动输入slug

halo 发布文章时,需输入 slug,即固定链接地址,有利于搜索引擎收录和提升权重。而中文出现在 url 中并不友好, 所以需要自己想一个 slug,一般是英文或者中文拼音。每次发文章都需要这么想一下不方便,我们来优化一下, 即默认填写文章标题的中文拼音作为 slug。 这里有两个思路,首先想到的是后台去转换,毕竟服务器端资源更多更强大,但需要写一个额外的 api,稍显麻烦。 那先研究一下纯前端 js 有没有合适的解决方案呢?马上调研一下: 百度一下 js 中文 拼音,有不少相关文章,毕竟是比较常见的需求。但排名靠前的文章都是贴在文章中的代码,或者百度网盘, 啥年代了还不知道贴一个仓库地址,不专业不考虑。 github 搜 ‘pinyin’, 找到一些几个不错的仓库。 结合他们的文档和然后分别百度, 搞清楚了他们的优劣: https://github.com/hotoo/pinyin 5.1k star, 常见汉字字典文件 165kB,后端版本有 npm 包,web 版本没有。 https://github.com/sxei/pinyinjs 1.8k star, 常见汉字字典文件 27kB, 无npm包。该作者知晓并借鉴了上面的库,自己整理了字库,且做了JS版拼音输入法,看了效果不错。 https://github.com/creeperyang/pinyin 420 star, 常见汉字字典文件 7kB, 有npm包, 缺点是不支持ie和edeg浏览器。该库转换方原理参见博客利用Android源码,轻松实现汉字转拼音功能,可以算作Java到JavaScript的一次转译。 说明一下,上面的情况都是选择他们的 web 常用字库版,带约 6000+ 汉字也有排序。它们都还有带声调多音子的完整字库版本,需要的自己去深入研究。有人可能会和我一样,觉得 6000+ 常用字够不够,那就来感觉一下,这些常用字你能认识多少先吧: /** * 常规拼音数据字典,收录常见汉字6763个,不支持多音字 */ var pinyin_dict_notone = { "a":"啊阿锕", "ai":"埃挨哎唉哀皑癌蔼矮艾碍爱隘诶捱嗳嗌嫒瑷暧砹锿霭", "an":"鞍氨安俺按暗岸胺案谙埯揞犴庵桉铵鹌顸黯", "ang":"肮昂盎", "ao":"凹敖熬翱袄傲奥懊澳坳拗嗷噢岙廒遨媪骜聱螯鏊鳌鏖", "ba":"芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸茇菝萆捭岜灞杷钯粑鲅魃", "bai":"白柏百摆佰败拜稗薜掰鞴", "ban":"斑班搬扳般颁板版扮拌伴瓣半办绊阪坂豳钣瘢癍舨", "bang":"邦帮梆榜膀绑棒磅蚌镑傍谤蒡螃", "bao":"苞胞包褒雹保堡饱宝抱报暴豹鲍爆勹葆宀孢煲鸨褓趵龅", "bo":"剥薄玻菠播拨钵波博勃搏铂箔伯帛舶脖膊渤泊驳亳蕃啵饽檗擘礴钹鹁簸跛", "bei":"杯碑悲卑北辈背贝钡倍狈备惫焙被孛陂邶埤蓓呗怫悖碚鹎褙鐾", "ben":"奔苯本笨畚坌锛" // 省略其它 }; 我要优化的这个场景是 halo 博客的后台,发布文章时默认填充一个文章标题的中文拼音作为 slug。...

May 23, 2020 · 1 分钟 · ming

不蒜子计数器研究和jsonp的妙用

最近研究使用 halo 部署个人博客,很常见的一个需求就是网站访问量统计,毕竟每个新站长都想知道自己的网站有多少人访问了。 halo 内置了不蒜子极简网站计数器,简单的添加一个 js 和页面标签,就能获得你网站的访问人数等数据,简单,够用。 那么它是怎么实现的呢,下面我们就来研究一下。 获得源码 不蒜子只需要一个 js 文件,把它拷贝下来,比较简单不到 100 行,直接贴在下面: // http://s.xinac.net/static/busuanzi/v2.3.0/bsz.pure.mini.js var bszCaller, bszTag; !function() { var c, d, e, a = !1, b = []; ready = function(c) { return a || "interactive" === document.readyState || "complete" === document.readyState ? c.call(document) : b.push(function() { return c.call(this) }), this }, d = function() { for (var a = 0, c = b.length; c > a; a++) b[a]....

May 22, 2020 · 5 分钟 · ming

javascript callback(回调)

最近在做前端开发工作,所以写了不少javascript代码.一直对javascript有成见,从前觉得就是浏览器里面做做跑马灯效果,做做验证啊等不严肃的语言. 现在看来我错了,javascript社区很活跃, 从jquery到前端mvc,到后端nodejs, grunt等, javascript的威力越来越强大. javascript是单线程的语言,很多事件处理需要用到回调,从而也需要保留上下文,故又大量使用必包.最近自己用javascript的这些特性解决了一个碰到的难题,我对javascript的理解也开始上了一个台阶. 场景很简单,我需要在页面上面用canvas画多个图片,故需要在draw函数之前让image对象提前准备好.可是图片的加载都是异步的,我只能在onload回调函数中知晓图片加载完成; 我可以在onload里面维护一个计数器,然后判断计数器如果达到图片个数,我就知道所有图片加载好了. 然后我可以执行一个函数, 可是这个函数我现在还没有呢, 又或者我想图片加载完之后可以按需调用我需要的函数,怎么办呢? 只能用必包. 具体看代码: {% highlight javascript %} /* ————— call back codes, for example: loadImages([‘1.gif’, ‘2.gif’, ‘3.gif’]).done(function(images){ alert(images.length); //alerts 3 alert(images[0].src+" “+images[0].width); //alerts ‘1.gif 220’ }) */ loadImages: function(arr){ var imgs=[]; var cnt=0; var oneLoaded = function(){ cnt++; if (cnt === arr.length){ allLoaded(imgs); } }; var allLoaded=function(){}; arr.forEach(function(item){ var tmp = new Image(); tmp.src = item; tmp.onload = function(){ oneLoaded(); }; tmp....

May 27, 2014 · 1 分钟 · ming