jQuery SimpleSlug Plugin v0.1
写了一个新的jQuery插件，作用是根据你输入的文章标题，自动地将其中的英文字母和数字提取出来，然后生成一个slug。slug通常的作用是给blog文章一个漂亮的网址，比如你现在看到的这篇文章，它的网址是 http://dingyu.me/blog/posts/view/jquery-simpleslug-plugin，它的slug就是jquery-simpleslug-plugin。
这个插件在jQuery Plugin上的主页是http://plugins.jquery.com/project/jquery-simpleslug，觉得好用就投上一票 :D
演示
http://dingyu.me/blog/files/jquery-simpleslug-plugin/demo.html
用法
用法很简单，比如你blog编辑界面上用来输入slug的文本框的id为slug，用来输入文章标题的文本框的id为title，则只要如下一行代码即可：
$('input#slug').simpleslug({ source: 'input#title' });
source的意思就是生成slug的源文本框。除了这个参数以外，还支持以下两个参数
preview
你可以在input的旁边放一个id为preview的span，然后这样用preview：
$('input#slug').simpleslug({ source: 'input#title', preview: 'span#preview' });
这样插件会实时地把生成的slug显示出来，用处就是告诉用户这篇blog文章的完整的网址。比如你可以在span前面写上 http://dingyu.me/blog/posts/view/。
replacement
默认情况下单词或数字之间的间隔符是“-”。比如你输入“Hello world”，那么出来的slug就是“hello-world”。你可以改成你喜欢的，比如：
$('input#slug').simpleslug({ source: 'input#title', preview: 'span#preview', replacement: '_' });
和Wordpress集成
默认情况下，Wordpress会把文章标题整个作为slug，而有些人只想要其中的英文和数字。利用SimpleSlug的slugify()方法，这很容易：
- 修改 wp-includes/js/autosave.js
- 在文件开头加入如下代码：
function slugify(str, replacement) { //replace everything that is not a word character slug = str.replace(/[^0-9a-zA-Z]/g, replacement); //replace mutilple continous replacements slug = slug.replace(eval("/"+replacement+"{2,}/g"), replacement); //replace the beginning and ending replacement(s) slug = slug.replace(eval("/(^"+replacement+")|("+replacement+"$)/g"), ''); //convert the slug to lower case slug = slug.toLowerCase(); return slug; }
- 找到文件中的
替换为jQuery("#title").val()
slugify(jQuery("#title").val(),'-')
- 保存文件，搞定！
下载
http://dingyu.me/blog/files/jquery-simpleslug-plugin/jquery.simpleslug.0.1.js
15 comments so far