写了一个新的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
-
JudahXIII @ 2009-07-07 18:55:09 +0800:
可以问个题外话吗,为什么我在你这里永远没头像?有Gravatar的……
-
丁宇 @ 2009-07-08 07:27:39 +0800:
@JudahXIII 你的头像在其它地方可以正常显示嘛?别人的gravatar都可以正常显示的。
-
rose @ 2009-09-06 05:03:18 +0800:
这个在wordpress怎么用?
-
丁宇 @ 2009-09-07 06:25:17 +0800:
@rose 引入这个js文件,然后根据wp模板里面文本域的名称使用即可。
-
rose @ 2009-09-07 23:07:52 +0800:
不懂你说什么啊,能不能具体点吗
-
丁宇 @ 2009-09-08 01:36:24 +0800:
@rose 特意找了个wp用了一下。wp是自带这个功能的:编辑文章的时候,在标题下面有个“固定链接”就是。
-
rose @ 2009-09-09 05:33:35 +0800:
这个我知道,但我想自动运行,就不用次次手动改了
-
丁宇 @ 2009-09-09 19:45:17 +0800:
@rose 你说的“自动运行”是什么意思?在wp里你只要标题中有英文,wp就会自动的把字母提取出来放进slug,和我这个插件的效果一样。
-
rose @ 2009-09-11 07:33:19 +0800:
举个例子 :
http://hutuworm.blogspot.com/2009/09/gmail-100.html
它的标题是"Gmail 停机 100 分钟的启示",但链接只保留了英文和数字,这是blogspot自动改的,不用手动改.
wp若果用中文标题的的話,地址会生成一堆乱码的 -
丁宇 @ 2009-09-16 04:48:37 +0800:
周末帮你看一下,这几天早出晚归,累!
-
丁宇 @ 2009-09-20 22:01:56 +0800:
我从WordPress的官方站点上下载安装了一个中文版,当我输入中文标题后,WP会自动帮我生成一个中文地址,完全没问题。无论是在编辑文章的时候,还是发布以后访问起来都可以。
我下载的版本是2.8.4,字符集都是utf8。
-
rose @ 2009-10-01 09:08:46 +0800:
我知道可以,但是我只想slug里保留英文和数字
你的这个插件説"自动地将其中的英文字母和数字提取出来",似乎可以做到,但不知道怎么用到wp里 -
丁宇 @ 2009-10-10 02:09:24 +0800:
@rose 花了点时间研究了下,看我文章中的回复。
-
rose @ 2009-10-20 03:16:29 +0800:
改了,不起作用
jquery.simpleslug.0.1.js这个文件放在wp-includes/js/jquery/ 文件夹对吗? -
丁宇 @ 2009-10-20 18:06:47 +0800:
@rose 不用jquery.simpleslug.0.1.js,你直接按照“和Wordpress集成”一段修改wp-includes/js/autosave.js就行了,就改这么一个文件。