pushtape cassette
1.0.0
Pushtape Cassette 是一個輕量級框架，用於建立更好的音樂 Web 應用程式。製作音樂盒帶並在幾秒鐘內呈現完整的音樂網絡應用程序，具有持久的音樂播放器。
該專案創建了一個靜態音樂 Web 應用程序，可以與任意數量的後端技術整合：平面文件、Wordpress/Drupal、JS 框架、Python 和 Ruby。推動這個想法的關鍵元素是cassette.json 文件，它是一種便攜式唱片格式。該檔案的作用就像一個單一的綜合端點 - 從該端點，JavaScript 用於使用各種微庫建立單一頁面應用程式。
python dub.py或手動更新cassette.json如果您從文檔根目錄的子目錄執行應用程序，請在 index.html 中將基本標記變更為：
<base href="/subdirectory/" />
或使用絕對路徑載入所有資源。
$ cd pushtape-cassette
$ python dub.py
建置腳本將根據工作目錄中的檔案自動產生cassette.json。它旨在在命令列中本地運行，但如果您的伺服器配置為運行 python 腳本，您可以嘗試從瀏覽器運行它或設定 crontab。筆記：
releases/artist-name/release-name如果您想要從 URL 路由中刪除雜湊 # 並使用 History API，請在 index.html 中將 app.settings.cleanURLs 設為 true。請注意，鼓勵從文檔根運行啟用 History API 的應用程序，因為它可以解決所有相關連結問題。
注意：如果您使用 dub.py 建置腳本，則可以跳過步驟 3 和 4。
| 財產 | 類型 | 描述 |
|---|---|---|
| 最後建構 | 時間戳 | 一種追蹤文件上次建置或修改時間的方法。 |
| 頁面 | 目的 | 包含網站上靜態頁面的鍵：值對。該鍵定義了第一層 JS 路由器路徑，即「about」。該值包含 Markdown 文件的 URL 位置。 URL 可以是相對的或絕對的。如果您的伺服器使用 JSON/JSONP 返回文檔，請設定「format」：「json」。如果需要包含外部連結並繞過 JS 路由器，請設定「type」：「external」。 |
| 發布 | 目的 | 包含定義可用音樂版本的按鍵：值對。鍵定義 JS 路由器路徑，並且應該全部小寫，不帶空格，即專輯標題或藝術家/專輯標題。完整生成的路徑最終為release/album-title 或release/artist/album-title。對應的值定義了此版本的屬性。您至少應該指定artwork.jpg 和notes.md 的URL（相對或絕對，可以選擇將格式指定為json）。 playlist 屬性必須是有效 JSPF 播放清單檔案的路徑，該檔案指定 mp3 檔案的曲目順序和位置以及任何其他元資料。 |
| 財產 | 類型 | 描述 |
|---|---|---|
| app.settings.cassettePath | 細繩 | 預設情況下，application.js將載入本地的cassette.json路徑。您可以透過在載入 application.js 之前設定此全域變數來覆寫cassette.json 的路徑。 |
| 應用程式設定主頁 | 細繩 | 該值指定預設應載入的頁面。該路徑必須在 JS 路由器中註冊。 |
| app.settings.cleanURLs | 布林值 | 如果為 false，則使用雜湊 # url。如果為 true，History API 將處理乾淨的 URL。 |
已知問題：
限制：
範例卡帶.json：
{
"lastBuild": {},
"pages": {
"releases" : {},
"about" : {"location" : "pages/about.md"},
"shows" : {"location" : "pages/shows.md"},
"external-link" : {"title": "Soundcloud", "location" : "http://www.example.com", "type" : "external"}
},
"releases": {
"example-release": {
"title" : "Cosmic Voyage",
"playlist" : "releases/example-release/tracklist.jspf",
"artwork" : "releases/example-release/artwork.jpg",
"notes" : "releases/example-release/notes.md"
},
"example-release-two": {
"title" : "Bird Life",
"playlist" : "releases/example-release-two/tracklist.jspf",
"artwork" : "releases/example-release-two/artwork.jpg",
"notes" : "releases/example-release-two/notes.md"
}
}
}
| 網址路徑 | 描述 |
|---|---|
| / | 如果不輸入路徑，則載入預設主頁。 |
| /[頁標題] | 這會解析並顯示在卡帶.json 中定義的頁面的降價。 |
| /發布 | 所有版本的列表，包含插圖和名稱，超連結到各個版本頁面。 |
| /發布/[發布標題] /release/[藝術家姓名]/[發行標題] | 顯示單一版本的所有資訊：藝術作品、可播放曲目清單和註釋。 |
| 問題 | 步驟 |
|---|---|
| 空白頁面或缺少 CSS/JS | 仔細檢查 index.html 中的基本網址。如果您無法確定正確的路徑，有時可以使用 Chrome 檢查器推斷伺服器路徑。 |
| 跨網域請求問題（遠端內容未載入） | 處理遠端跨域請求時，必須傳回有效的 JSONP，並且請求的格式需要正確。 1.你需要傳遞?callback=?在 URL 中，即 http://example.com/cassette.json?callback=? 2：伺服器的回應必須是JSONP，而不僅僅是常規的JSON。特別是遠端載入cassette.json、jspf、notes.md和pages.md時，可能會出現跨域問題。或者，您可以在本機載入所有資產，以避免設定 JSONP 解決方法。 |
| 網站未被搜尋引擎索引 | 除了檢查 robots.txt 和其他最佳實踐之外，這是使用 Javascript 呈現頁面內容的框架的已知問題。最簡單的解決方案是使用像 prerender.io 這樣的服務來快取和提供渲染的 HTML 頁面。我建議透過 Apache 安裝 prerender.io 令牌。以下是您的 .htaccess 的大概樣子（您需要更改您網站的 TOKEN_VALUE 和 http://example.com）。 |
許多音樂網站相當靜態，但有棘手的前端要求。最好的音樂使用者體驗允許不間斷的音樂聆聽體驗，同時執行其他任務，例如閱讀內頁註釋、瀏覽其他音樂等。完整的解決方案。這很快就會成為建造和維護的難題，尤其是從長遠來看。透過創建解耦的前端框架，它可以更好地分離關注點，並減少建置和維護網站所需的長期工作。此外，透過利用JSPF和cassette.json（一種便攜式唱片格式），資料可攜性並不是事後才想到的——它從一開始就內建在應用程式中。
我選擇微型函式庫是因為渲染靜態音樂應用程式的要求通常相當適中，我希望避免依賴第三方單頁應用程式 (SPA) 框架。此外，因為我使用了微型圖書館，所以可以更輕鬆地挑選和選擇您想要的內容。例如，如果您不喜歡我選擇的範本系統、路由或雙向綁定庫，您可以將它們替換為您喜歡的 JS 庫/框架。
