丁宇 | DING Yu

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()方法，这很容易：

  1. 修改 wp-includes/js/autosave.js
  2. 在文件开头加入如下代码：
    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; }
  3. 找到文件中的
    jQuery("#title").val()
    替换为
    slugify(jQuery("#title").val(),'-')
  4. 保存文件，搞定！

下载

http://dingyu.me/blog/files/jquery-simpleslug-plugin/jquery.simpleslug.0.1.js

  1. JudahXIII @ 2009-07-07 18:55:09 +0800:

    可以问个题外话吗，为什么我在你这里永远没头像？有Gravatar的……

  2. 丁宇 @ 2009-07-08 07:27:39 +0800:

    @JudahXIII 你的头像在其它地方可以正常显示嘛？别人的gravatar都可以正常显示的。

  3. rose @ 2009-09-06 05:03:18 +0800:

    这个在wordpress怎么用?

  4. 丁宇 @ 2009-09-07 06:25:17 +0800:

    @rose 引入这个js文件，然后根据wp模板里面文本域的名称使用即可。

  5. rose @ 2009-09-07 23:07:52 +0800:

    不懂你说什么啊,能不能具体点吗

  6. 丁宇 @ 2009-09-08 01:36:24 +0800:

    @rose 特意找了个wp用了一下。wp是自带这个功能的：编辑文章的时候，在标题下面有个“固定链接”就是。

  7. rose @ 2009-09-09 05:33:35 +0800:

    这个我知道,但我想自动运行,就不用次次手动改了

  8. 丁宇 @ 2009-09-09 19:45:17 +0800:

    @rose 你说的“自动运行”是什么意思？在wp里你只要标题中有英文，wp就会自动的把字母提取出来放进slug，和我这个插件的效果一样。

  9. rose @ 2009-09-11 07:33:19 +0800:

    举个例子 :
    http://hutuworm.blogspot.com/2009/09/gmail-100.html
    它的标题是"Gmail 停机 100 分钟的启示",但链接只保留了英文和数字,这是blogspot自动改的,不用手动改.
    wp若果用中文标题的的話,地址会生成一堆乱码的

  10. 丁宇 @ 2009-09-16 04:48:37 +0800:

    周末帮你看一下，这几天早出晚归，累！

  11. 丁宇 @ 2009-09-20 22:01:56 +0800:

    我从WordPress的官方站点上下载安装了一个中文版，当我输入中文标题后，WP会自动帮我生成一个中文地址，完全没问题。无论是在编辑文章的时候，还是发布以后访问起来都可以。

    我下载的版本是2.8.4，字符集都是utf8。

  12. rose @ 2009-10-01 09:08:46 +0800:

    我知道可以,但是我只想slug里保留英文和数字
    你的这个插件説"自动地将其中的英文字母和数字提取出来",似乎可以做到,但不知道怎么用到wp里

  13. 丁宇 @ 2009-10-10 02:09:24 +0800:

    @rose 花了点时间研究了下，看我文章中的回复。

  14. rose @ 2009-10-20 03:16:29 +0800:

    改了,不起作用
    jquery.simpleslug.0.1.js这个文件放在wp-includes/js/jquery/ 文件夹对吗?

  15. 丁宇 @ 2009-10-20 18:06:47 +0800:

    @rose 不用jquery.simpleslug.0.1.js，你直接按照“和Wordpress集成”一段修改wp-includes/js/autosave.js就行了，就改这么一个文件。