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平台应该只能使用。