如何在 Spotify 应用程序中使用“标准化曲目列表”

Posted 2023-04-15

【中文标题】如何在 Spotify 应用程序中使用“标准化曲目列表”

【英文标题】：How to use "standardized track listings" in Spotify apps

【发布时间】：2012-01-26 09:05:37

【问题描述】：

Spotify 应用程序的 Spotify 用户界面指南（https://developer.spotify.com/technologies/apps/guidelines/design/）说“在您的应用程序中列出曲目时，请使用我们的标准化曲目列表”。我在文档中找不到有关如何使用这些“标准化曲目列表”的任何示例。通过使用 Inspector，我在 list.css 中找到了类（例如 sp-list 和 sp-item），看起来我需要使用它们，但还没有弄清楚如何使用它们来重新创建外观Spotify 曲目列表。 Billboard Top Charts 应用程序似乎使用了我需要的曲目列表，但我无法找到任何方法来查看他们是如何做到这一点的，因为据我所知，Inspector 仅适用于您自己的应用程序。

有人有什么建议或例子吗？

【参考方案1】：

一些例子

sp = getSpotifyApi(1);

var m = sp.require("sp://import/scripts/api/models");
var v = sp.require("sp://import/scripts/api/views");

// Example 1
var tpl = new m.Playlist();
var tempList = new v.List(tpl);
tpl.add(m.Track.fromURI("spotify:track:4z4t4zEn4ElVPGmDWCzRQf"));
tpl.add(m.Track.fromURI("http://open.spotify.com/track/7E8JGVhbwWgAQ1DtfatQEl"));
tpl.add(m.Track.fromURI("spotify:track:40YBc3mR3yyqyYvtesQOMj"));
tpl.add(m.Track.fromURI("spotify:local:Rolling+Stones:A+Bigger+Bang:Rain+Fall+Down:293"));

document.body.appendChild(tempList.node);

// Example 2
var pl = m.Playlist.fromURI("spotify:user:username:playlist:424km2k4m24");
var list = new v.List(pl);

document.body.appendChild(list.node);

// Example 3
var album = m.Album.fromURI("spotify:album:1vWnB0hYmluskQuzxwo25a");
var albumList = new v.List(album);
albumList.node.classList.add("album");

document.body.appendChild(albumList.node);

【讨论】：

我已经尝试了这些示例，但我的应用程序中没有添加任何内容。查看列表的节点属性的outerhtml属性给出： 我是遗漏了什么？播放列表似乎包含正确数量的曲目，但节点总是这样为空。

添加<link rel="stylesheet" href="sp://import/css/core-dark.css"> <link rel="stylesheet" href="sp://import/css/api.css">

和.sp-list 高度：400px;

非常感谢，成功了。我有正确的 CSS 引用，但是设置列表的高度会导致它出现。

【参考方案2】：

感谢提问，我也有同样的问题！

我也遇到了没有添加实际内容的问题 - 只是包装器 div。不包括 api.css 使其工作，但列表显然没有样式。包含 css/list.css 也会直接破坏它。创建我自己的副本并有选择地注释掉 list.css 我发现违规规则是：

.sp-list > div 

如果你把它改成

.sp-list 

然后它渲染得很好。不知道发生了什么。显然，这个解决方案不是主意，因为我刚刚复制了本应成为公共资源的内容......