上篇文章我們說(shuō)到了曲譜庫(kù)建立的思路以及過(guò)程，這篇文章我們將要對(duì)目前為止的幾次版本更新進(jìn)行分析。

移動(dòng)端網(wǎng)址：http://jefun.top
PC端網(wǎng)址：http://lightmoon.pw
曲庫(kù)地址：https://github.com/zytx121/justice_eternal/issues

v1.0.0

• 2017.07.29 發(fā)布
• 利用vuex添加了標(biāo)簽部分隱藏/展示功能~

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

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

之所以琢磨著添加了部分標(biāo)簽隱藏功能眉厨，是因?yàn)榭紤]到除了首字母標(biāo)簽之外僻他，后期可能會(huì)加入大量個(gè)性標(biāo)簽（正如現(xiàn)在曲庫(kù)中存在的標(biāo)簽：華爾茲、單曲环揽、V家略荡、LL、國(guó)產(chǎn)歉胶、gal汛兜、Fate等等）。所以將其他標(biāo)簽隱藏通今，只留下首字母是為了節(jié)省網(wǎng)頁(yè)空間粥谬，讓空間不那么緊湊。

關(guān)于b站api的引入完全是出于對(duì)b站的熱愛(ài)辫塌，后來(lái)發(fā)現(xiàn)移動(dòng)端無(wú)法播放b站視頻（下面會(huì)提）帝嗡。

aplayer是一款很漂亮的音樂(lè)播放器，支持歌詞璃氢，列表，而且同一頁(yè)面的播放器之間默認(rèn)是互斥的狮辽，不會(huì)同時(shí)播放一也。當(dāng)你點(diǎn)開(kāi)一個(gè)播放器后巢寡，之前正在播放的播放器會(huì)自動(dòng)停止播放。這對(duì)于在同一頁(yè)面上展示不同大佬的口氣錄音是極好的椰苟！

v1.1.0

• 2017.07.30 發(fā)布
• 修復(fù)BUG
  • 修復(fù)圖片分辨率過(guò)高導(dǎo)致加載過(guò)慢
  • 修復(fù)頂部tap欄沒(méi)有對(duì)齊

由于部分頁(yè)面的貼圖是直接下載的原圖抑月，導(dǎo)致加載速度過(guò)慢。使用ps對(duì)分辨率進(jìn)行了調(diào)整舆蝴，加快了圖片的顯示速度谦絮。

頂部tap的布局有問(wèn)題，右上角的圖標(biāo)會(huì)擠壓下面的文字洁仗。

v1.2.0 miku

• 2017.08.1 發(fā)布
• 修復(fù)BUG
  • 修復(fù)了手機(jī)端視頻無(wú)法播放的問(wèn)題
• 優(yōu)化完善
  • 首屏進(jìn)行了簡(jiǎn)化层皱，突出了搜索的功能，加載速度提升赠潦，提高用戶(hù)體驗(yàn)叫胖。
  • 將頂部的bar改到了底部
  • 對(duì)搜索結(jié)果頁(yè)面進(jìn)行了簡(jiǎn)化，去除了多余的功能她奥，優(yōu)化了搜索的邏輯瓮增，添加了搜索推薦功能
  • 增加了搜索為空時(shí)的頁(yè)面，點(diǎn)擊綠色字體會(huì)跳轉(zhuǎn)到曲譜庫(kù)進(jìn)行譜子的提交
  • 日清涼版初音皮膚上線哩俭，點(diǎn)擊側(cè)邊欄按鈕可以刷新皮膚
  • 將原來(lái)的視頻及音頻合到了一個(gè)頁(yè)面绷跑，分為視頻專(zhuān)區(qū)以及錄音專(zhuān)區(qū)
• 移除
  • _{刪除了首字母分類(lèi)功能}
  • _{刪除了搜索結(jié)果分頁(yè)展示功能}

這是首個(gè)以動(dòng)漫人物命名的主題版本，整個(gè)界面配合首頁(yè)的miku貼圖凡资，都變成了初音的顏色砸捏，為炎熱的夏季帶來(lái)了一絲清涼。同時(shí)讳苦，這也是網(wǎng)站上線后首次重大更新带膜，聽(tīng)取了本網(wǎng)站首席產(chǎn)品汪的意見(jiàn)，對(duì)網(wǎng)站做出了重大改動(dòng)鸳谜。首先對(duì)網(wǎng)站的首頁(yè)進(jìn)行了簡(jiǎn)化膝藕，明確了搜索的主題。去除了冗余首字母分類(lèi)功能咐扭，因?yàn)榻?jīng)過(guò)分析芭挽，貌似不會(huì)有人去使用首字母翻閱曲庫(kù)，該功能略顯多余蝗肪，同時(shí)也會(huì)使首頁(yè)變得復(fù)制袜爪，印象搜索體驗(yàn)。同時(shí)刪除了搜索結(jié)果頁(yè)面的分頁(yè)功能薛闪，只留下一個(gè)干凈的搜索結(jié)果列表辛馆，提升用戶(hù)體驗(yàn)。（有廣告或者推薦的搜索結(jié)果頁(yè)面會(huì)讓人惡心。）將反人類(lèi)的頂部bar改到了底部昙篙。腊状。。貌似只有b站等少數(shù)網(wǎng)站采取了吸頂?shù)脑O(shè)計(jì)苔可，目的是引導(dǎo)使用者往下無(wú)限刷新缴挖。將原來(lái)的視頻頁(yè)面和錄音頁(yè)面合并為佳作欣賞頁(yè)面，都屬于分享內(nèi)容焚辅，同時(shí)起到突出本網(wǎng)站搜索主題的作用映屋。搜索結(jié)果為空時(shí)，引導(dǎo)并鼓勵(lì)使用者到github曲庫(kù)進(jìn)行譜子的提交同蜻。

v1.3.0

• 2017.08.04 發(fā)布
• 修復(fù)BUG
  • 修復(fù)了部分字體太小的問(wèn)題
• 優(yōu)化完善
  • 將原來(lái)的移動(dòng)端布局升級(jí)為響應(yīng)式布局棚点，支持ipad及pc端的使用
  • 隨著曲庫(kù)譜子數(shù)量的增加，增加了上拉加載更多功能埃仪，以及各種情況對(duì)應(yīng)的文字提示
  • 增加 loading 時(shí)的趣味提示框
  • 優(yōu)化了 bottombar 的外觀
  • 優(yōu)化了視頻部分的布局及外觀乙濒，增加了視頻教學(xué)專(zhuān)區(qū)
  • 將指向外部網(wǎng)站的鏈接設(shè)定為彈出新窗口
  • 在教學(xué)視頻播放頁(yè)面和譜子詳情頁(yè)面引入了 gitalk ，支持用 github 賬號(hào)在當(dāng)前頁(yè)面進(jìn)行評(píng)論
  • 在譜子詳情頁(yè)面和佳作欣賞頁(yè)面加入了懸浮效果邊框
• 移除
  • _{刪除了譜子詳情頁(yè)面跳轉(zhuǎn)到github的評(píng)論按鈕}
  • _{刪除了側(cè)邊欄跳轉(zhuǎn)到佳作欣賞的鏈接}

該版本對(duì)網(wǎng)站進(jìn)行了又一次重大升級(jí)卵蛉。首先經(jīng)過(guò)貼吧的反饋颁股，將原本僅僅支持移動(dòng)端的布局改寫(xiě)成了響應(yīng)式，增加了對(duì)ipad以及PC瀏覽器的支持傻丝。同時(shí)考慮到譜子數(shù)量的日益增加甘有，將原來(lái)的一次加載所有的搜索內(nèi)容改為了上拉加載，一次只增加十條葡缰。同時(shí)加入了有趣又人性化的提示亏掀。

增加了loading時(shí)的趣味提示框，算是彩蛋吧泛释！不同場(chǎng)景的loading提示內(nèi)容是不一樣的哦滤愕！另外loading框還能提升等待數(shù)據(jù)響應(yīng)期間的用戶(hù)體驗(yàn)。

遵照首席產(chǎn)品的建議怜校，將所有指向外部網(wǎng)站的鏈接（如：github间影、貼吧）從在當(dāng)前窗口打開(kāi)改為了在新窗口打開(kāi)。

由于貼吧里排骨的教學(xué)視頻深受大家喜愛(ài)茄茁，大家希望能夠有個(gè)地方能夠?qū)⑦@些視頻收集起來(lái)魂贬，方便觀看學(xué)習(xí)。于是推出了教學(xué)專(zhuān)區(qū)裙顽，征得排骨同意后將其所有教學(xué)視頻進(jìn)行了收錄付燥。同時(shí)優(yōu)化了視頻列表的布局及外觀。

為幾個(gè)頁(yè)面添加了懸浮框效果愈犹，感覺(jué)看起來(lái)效果不錯(cuò)键科。

引入了gitalk，使用另外的倉(cāng)庫(kù)的issues來(lái)存放評(píng)論，支持在當(dāng)前頁(yè)面進(jìn)行評(píng)論萝嘁。同時(shí)也將存放口琴譜的issues和評(píng)論的issues進(jìn)行分離梆掸，避免數(shù)據(jù)相互污染。

刪除了側(cè)邊欄多余的鏈接牙言，與bottombar的鏈接重復(fù)。使用者明明可以通過(guò)bottombar跳轉(zhuǎn)怪得，沒(méi)有理由通過(guò)sidebar進(jìn)行跳轉(zhuǎn)咱枉。

優(yōu)化了bottombar的外觀，將其固定于瀏覽器底部徒恋。

v1.3.1 Matthew

• 2017.08.22 發(fā)布
• 修復(fù)BUG
  • 修復(fù)了譜子顯示不全問(wèn)題
  • 修復(fù)了評(píng)論框底部顯示不全問(wèn)題
• 優(yōu)化完善
  • fgo瑪修皮膚上線蚕断，暫時(shí)不支持更換皮膚

關(guān)于譜曲上傳規(guī)范

對(duì)于日本作品，一律采用官方譯名作為title入挣；
對(duì)于英語(yǔ)作品亿乳，一律采用英文名作為titile；
對(duì)于出名的歌曲径筏，添加單曲label葛假；
上傳作品不限于ACG；
為了尊重作者滋恬，上傳譜子務(wù)必填寫(xiě)歌曲相關(guān)信息聊训。