music practice tools

音樂實踐工具

幫助音樂練習和改善音樂性以及遠程課程的工具。

該格式是一個博客 /期刊，其中包含使生活更輕鬆的交互式元素。其中包括：

• 具有預定義但可調節的BPM的計量體
• [quasi]隨機註釋和數字選擇器（列出了所有項目）
• 活動計時器，經過的時間和總時間在頁面和會話之間持續存在
• You Tube視頻計時器，無論滾動如何
• 視頻尋求按鈕
• 使用ABC符號進行音樂評分。提供互動遊戲功能

使用這一堆令人敬畏的OpenSource技術。

所有頁面都活在pages文件夾中，並使用nunjucks模板的宣傳來撰寫，這些標記是由Awesome 11ty靜態站點生成器渲染的。小部件添加了短代碼。

這使用典型的Nodejs開發平台，因此：

• 克隆倉庫
• npm install
• npm run devall
• 編輯頁面
• 瀏覽在CLI上打印的Localhost URL（通常是http://localhost:8080/ ）。

---

使用此按鈕將您自己的版本https://musicpracticetools.net/獲取網絡上的網絡。它將此存儲庫克隆到您自己的GitHub帳戶，並將其鏈接到Netlfy上的新站點。

---

開發人員

非頁面源代碼在src中。通常的開發工具配置文件位於項目根中。

筆記

基本上，這是一個使用Nunjucks模板的靜態站點，其中添加了一些客戶端的JavaScript，以提供交互式小部件。該項目基於支持標籤的110個博客示例。

模板短代碼用於自定義交互式小部件。這些提供了乾淨的創作體驗，但確實意味著某些小部件代碼是服務器端和某些客戶端。通常， src下的源代碼為：

• pages中的頁面模板
• _11ty*中的11TY配置
• 模板部分和_includes和_layouts中的佈局
• 服務器端小部件代碼（html + alpinejs）在_11tyadd-shortcodes.js中
• 客戶端代碼包括小部件（JavaScript和Alpinejs）在js*中
• 客戶端CSS在css*中

客戶端代碼使用ES6功能假設最新瀏覽器來改進DX。

運行npm run dev 11TY將網站從src生成_site ，然後將其提供。對客戶端文件的更改會導致對網站的重建，並瀏覽器迫使瀏覽器刷新。但是，當_11ty更改中的Serverixe文件必須重新恢復。在這種情況下， npm run devall強迫進行重建，但瀏覽器不會刷新。在這種情況下，按下F5以介紹瀏覽器。

我使用VS代碼在Windows上開發。從理論上講，Linux和Mac Dev平台應該只能使用。