之前在我的个人博客上,我创建了一个 末世电影列表。它只是一个供我自己参考的指南,用于跟踪我看过哪些电影和没看过的电影,但该页面对于其他也喜欢此子类型的用户来说可能也很有用。为了使列表真正有用,需要添加一些链接来对电影进行操作。我认为三个链接就足够了
- Amazon: 购买电影
- Netflix: 将电影添加到您的队列
- IMDB: 了解有关电影的更多信息
一种向列表中的每部电影添加这些链接的方法是访问这些网站,找到电影,然后复制粘贴链接。但是对于几十部电影来说,这实在是一项繁重的工作。一定有更好的方法。
幸运的是,这些网站中的每一个都提供了一个接受URL参数的搜索页面。我们可以简单地将电影名称插入格式特殊的URL中,然后使用JavaScript将链接附加到我们的页面。
格式如下所示
http://www.amazon.com/s/ref=nb_ss_d?tag=chriscoyier-20&url=search-alias%3Ddvd&field-keywords=MOVIE-TITLE-HERE
http://www.netflix.com/Search?lnkctr=srchrd-ips&v1=MOVIE-TITLE-HERE
http://www.imdb.com/find?s=tt&q=MOVIE-TITLE-HERE
请注意,Amazon链接中包含我的联盟ID。为什么不呢?
自动插入
在我的文章中,我使用表格来展示电影列表。毕竟,它是有表格结构的数据。在我的表格中,我将每行最后一个单元格留空。使用JavaScript,我们将
- 循环遍历每一行
- 查找电影标题
- 根据电影标题构建URL
- 创建链接
- 将链接附加到最后一个空单元格
<script type="text/javascript" charset="utf-8">
var movieText = '';
$(function() {
$("#movie-list tr td:first-child").each(function() {
movieText = $(this).find("strong").text();
netflixURL = "http://www.netflix.com/Search?lnkctr=srchrd-ips&v1=" + movieText;
amazonURL = "http://www.amazon.com/s/ref=nb_ss_d?tag=chriscoyier-20&url=search-alias%3Ddvd&field-keywords=" + movieText;
imdbURL = "http://www.imdb.com/find?s=tt&q=" + movieText;
$(this).parent().find("td:last-child").empty().append("<a class='out-link netflix-link' href='"+netflixURL+"'>Netflix Link</a><a class='out-link amazon-link' href='"+amazonURL+"'>Amazon Link</a><a class='out-link imdb-link' href='"+imdbURL+"'>IMDb Link</a>");
});
});
</script>
将您的var movieText = ”; 放在您的$(function)内部
否则,您将引入不必要的全局变量。
没错。我将在上面的示例中保留它,以便每个人都能阅读并理解错误。
您应该小心,Amazon链接中包含Amazon的合作伙伴ID。
可能Amazon禁止从未注册的网站链接到Amazon。Amazon有一些奇怪的限制。
很高兴知道,我甚至没有意识到在共享链接的位置上存在限制。如果这会影响,比如说,在Facebook等平台上共享带有联盟代码的链接。
出于好奇,您为什么选择JavaScript作为解决方案?在后端创建数组并将服务器加载而不是客户端加载难道不是更容易吗?
否则,这是一个非常好的概念验证。
该网站是一个WordPress网站,因此为单个帖子创建特殊的服务器端代码来解析内容比插入一些要运行的JS要困难得多。至少据我所知。
说得对。可以通过循环遍历表格并使用JavaScript在每一行中添加空单元格来进一步实现优雅降级。
是的,当然。它现在有点像一个折衷方案,因为空单元格在实际的标记中,但除非JavaScript处于活动状态,否则不会使用。也可以将它附加。
我过去常常在不太了解JavaScript时做这样的事情。现在我对这门语言了解得更多了,我过度使用了JS。
基于JavaScript的解决方案适用于任何网站,而服务器端代码总是与平台和语言相关联——PHP、MySQL、WordPress等。
非常有用。我一直在想这样的东西对于我正在开发的视频网站会有多有用。谢谢。
谢谢..!
这真的很有用
太棒了!!
我还有很多东西要学习!
连字符是如何添加到movieText中的?
我希望IMDB能提供一个API,我真的很想利用他们的评分。
您也可以从IMDb获取评分吗?如果评分容器有特定的ID或其他东西..
Daivd Walsh 去年写了一篇关于此的 教程
偶然发现了这个,很棒的想法,真的帮了我的忙。谢谢!