【面向ACG编程】JE吧github网站更新思路

上篇文章我们说到了曲谱库建立的思路以及过程，这篇文章我们将要对目前为止的几次版本更新进行分析。

移动端网址：http://jefun.top
PC端网址：http://lightmoon.pw
曲库地址：https://github.com/zytx121/justice_eternal/issues

v1.0.0

2017.07.29 发布
利用vuex添加了标签部分隐藏/展示功能~

使用api.imjad.cn的b站API
引入vue-aplayer播放器

首先是第一版，也就是上篇文章截图中的那版。

之所以琢磨着添加了部分标签隐藏功能，是因为考虑到除了首字母标签之外，后期可能会加入大量个性标签（正如现在曲库中存在的标签：华尔兹、单曲、V家、LL、国产、gal、Fate等等）。所以将其他标签隐藏，只留下首字母是为了节省网页空间，让空间不那么紧凑。

关于b站api的引入完全是出于对b站的热爱，后来发现移动端无法播放b站视频（下面会提）。

aplayer是一款很漂亮的音乐播放器，支持歌词，列表，而且同一页面的播放器之间默认是互斥的，不会同时播放。当你点开一个播放器后，之前正在播放的播放器会自动停止播放。这对于在同一页面上展示不同大佬的口气录音是极好的！

v1.1.0

2017.07.30 发布
修复BUG
- 修复图片分辨率过高导致加载过慢
- 修复顶部tap栏没有对齐

由于部分页面的贴图是直接下载的原图，导致加载速度过慢。使用ps对分辨率进行了调整，加快了图片的显示速度。

顶部tap的布局有问题，右上角的图标会挤压下面的文字。

v1.2.0 miku

2017.08.1 发布
修复BUG
- 修复了手机端视频无法播放的问题
优化完善
- 首屏进行了简化，突出了搜索的功能，加载速度提升，提高用户体验。
- 将顶部的bar改到了底部
- 对搜索结果页面进行了简化，去除了多余的功能，优化了搜索的逻辑，添加了搜索推荐功能
- 增加了搜索为空时的页面，点击绿色字体会跳转到曲谱库进行谱子的提交
- 日清凉版初音皮肤上线，点击侧边栏按钮可以刷新皮肤
- 将原来的视频及音频合到了一个页面，分为视频专区以及录音专区
移除
- _{删除了首字母分类功能}
- _{删除了搜索结果分页展示功能}

这是首个以动漫人物命名的主题版本，整个界面配合首页的miku贴图，都变成了初音的颜色，为炎热的夏季带来了一丝清凉。同时，这也是网站上线后首次重大更新，听取了本网站首席产品汪的意见，对网站做出了重大改动。首先对网站的首页进行了简化，明确了搜索的主题。去除了冗余首字母分类功能，因为经过分析，貌似不会有人去使用首字母翻阅曲库，该功能略显多余，同时也会使首页变得复制，印象搜索体验。同时删除了搜索结果页面的分页功能，只留下一个干净的搜索结果列表，提升用户体验。（有广告或者推荐的搜索结果页面会让人恶心。）将反人类的顶部bar改到了底部。。。貌似只有b站等少数网站采取了吸顶的设计，目的是引导使用者往下无限刷新。将原来的视频页面和录音页面合并为佳作欣赏页面，都属于分享内容，同时起到突出本网站搜索主题的作用。搜索结果为空时，引导并鼓励使用者到github曲库进行谱子的提交。

v1.3.0

2017.08.04 发布
修复BUG
- 修复了部分字体太小的问题
优化完善
- 将原来的移动端布局升级为响应式布局，支持ipad及pc端的使用
- 随着曲库谱子数量的增加，增加了上拉加载更多功能，以及各种情况对应的文字提示
- 增加 loading 时的趣味提示框
- 优化了 bottombar 的外观
- 优化了视频部分的布局及外观，增加了视频教学专区
- 将指向外部网站的链接设定为弹出新窗口
- 在教学视频播放页面和谱子详情页面引入了 gitalk ，支持用 github 账号在当前页面进行评论
- 在谱子详情页面和佳作欣赏页面加入了悬浮效果边框
移除
- _{删除了谱子详情页面跳转到github的评论按钮}
- _{删除了侧边栏跳转到佳作欣赏的链接}

该版本对网站进行了又一次重大升级。首先经过贴吧的反馈，将原本仅仅支持移动端的布局改写成了响应式，增加了对ipad以及PC浏览器的支持。同时考虑到谱子数量的日益增加，将原来的一次加载所有的搜索内容改为了上拉加载，一次只增加十条。同时加入了有趣又人性化的提示。

增加了loading时的趣味提示框，算是彩蛋吧！不同场景的loading提示内容是不一样的哦！另外loading框还能提升等待数据响应期间的用户体验。

遵照首席产品的建议，将所有指向外部网站的链接（如：github、贴吧）从在当前窗口打开改为了在新窗口打开。

由于贴吧里排骨的教学视频深受大家喜爱，大家希望能够有个地方能够将这些视频收集起来，方便观看学习。于是推出了教学专区，征得排骨同意后将其所有教学视频进行了收录。同时优化了视频列表的布局及外观。

为几个页面添加了悬浮框效果，感觉看起来效果不错。

引入了gitalk，使用另外的仓库的issues来存放评论，支持在当前页面进行评论。同时也将存放口琴谱的issues和评论的issues进行分离，避免数据相互污染。

删除了侧边栏多余的链接，与bottombar的链接重复。使用者明明可以通过bottombar跳转，没有理由通过sidebar进行跳转。

优化了bottombar的外观，将其固定于浏览器底部。

v1.3.1 Matthew

2017.08.22 发布
修复BUG
- 修复了谱子显示不全问题
- 修复了评论框底部显示不全问题
优化完善
- fgo玛修皮肤上线，暂时不支持更换皮肤

关于谱曲上传规范

对于日本作品，一律采用官方译名作为title；
对于英语作品，一律采用英文名作为titile；
对于出名的歌曲，添加单曲label；
上传作品不限于ACG；
为了尊重作者，上传谱子务必填写歌曲相关信息。