Github項(xiàng)目倉(cāng)庫(kù)：Website_Bungakushojo
在經(jīng)歷一個(gè)大版本管引、八個(gè)小版本的更新完善后士败，“「文學(xué)少女」シリーズ”主題站（下均稱“「文學(xué)少女」主題站”）終于可以展現(xiàn)“她”的基礎(chǔ)形態(tài)了，因此請(qǐng)?jiān)试S我用我貧乏的詞匯來(lái)簡(jiǎn)單描述一下“她”以及在開(kāi)發(fā)過(guò)程中我的一些感受褥伴。
一谅将、我為什么要做這個(gè)網(wǎng)站？
這個(gè)網(wǎng)站并非是因?yàn)橐恍┠艽騽?dòng)人心的理由而開(kāi)發(fā)的重慢，可以說(shuō)完全是因?yàn)槟硞€(gè)人在讀完一本輕小說(shuō)之后對(duì)其內(nèi)容故事著迷而打算開(kāi)發(fā)的一個(gè)主題站饥臂。但建站也不是頭腦發(fā)熱就能做的事情，在參考了一些同類別的網(wǎng)站之后似踱，我將「文學(xué)少女」主題站定位為“為大家展現(xiàn)「文學(xué)少女」的精彩”與“三題故事的寫作與分享”的網(wǎng)站隅熙。前者是類似于「文學(xué)少女」資料館一般的存在志衣，我期望能夠有更多的人了解并喜歡上「文學(xué)少女」，而后者則是取自小說(shuō)里經(jīng)常提及的“三題寫作”——一種以三個(gè)詞語(yǔ)為主題寫作的文章猛们。
二念脯、如何描述這個(gè)網(wǎng)站的功能架構(gòu)？
正如前面所提及的弯淘，“「文學(xué)少女」主題站”最主要的兩部分便是“「文學(xué)少女」資料館”與“三題故事寫作”绿店。因此功能板塊也會(huì)圍繞這兩個(gè)部分來(lái)說(shuō)明。
「文學(xué)少女」資料館
我原以為這個(gè)部分是最為簡(jiǎn)單的庐橙，但實(shí)際操作起來(lái)后則發(fā)現(xiàn)是最為繁雜和耗時(shí)的假勿。最令人頭疼的兩點(diǎn)便是——一是資料館內(nèi)容范圍的確定——除了正傳小說(shuō)外，「文學(xué)少女」的衍生作品很多态鳖，包括但不限于動(dòng)畫转培、音樂(lè)、畫集浆竭、小說(shuō)等浸须，但考慮到開(kāi)發(fā)的時(shí)間與規(guī)模，實(shí)在是不能將所有的衍生作品納入網(wǎng)站建設(shè)之內(nèi)邦泄；二是如何展示資料館的內(nèi)容——小說(shuō)為文字删窒，動(dòng)畫為視頻，音樂(lè)為音頻顺囊，畫集為圖片肌索，不同的資料格式其展現(xiàn)方式也是不同的。
對(duì)于第一個(gè)難題特碳，我的解決辦法現(xiàn)在來(lái)看有些自私——以自己的喜好為主诚亚。雖然這么說(shuō)有些任性，但我覺(jué)得這才是我眼里的「文學(xué)少女」呈現(xiàn)給我的樣子午乓，換句話說(shuō)站宗，我希望這個(gè)網(wǎng)站帶有我的一絲私心。當(dāng)然硅瞧，我并非是徹底的“專制主義”份乒，在以自己喜好為主的同時(shí)我也參考了「文學(xué)少女」有關(guān)論壇里大家的意愿恕汇。因此腕唧，最后我將「文學(xué)少女」的“小說(shuō)”、“畫集”瘾英、“音樂(lè)”和“動(dòng)畫”作為「文學(xué)少女」資料館的收錄內(nèi)容疏唾。
確定了資料館的內(nèi)容組成后便是具體內(nèi)容的施工了寥枝，這一部分應(yīng)該算是耗費(fèi)我較多時(shí)間和精力的一個(gè)部分了，雖然有參考「萌娘百科」和「維基百科」中有關(guān)「文學(xué)少女」的資料，但是我不得不從「輕之國(guó)度」生年、「網(wǎng)易云音樂(lè)」榨乎、「百度貼吧」等地方搜集大量有關(guān)「文學(xué)少女」的零散信息并整理歸類，這是一個(gè)非常痛苦的過(guò)程——資料的真實(shí)性且不論，光是其混雜的程度就很讓人抓狂县爬。不過(guò)，當(dāng)看到資料館的內(nèi)容一點(diǎn)一點(diǎn)充實(shí)起來(lái)添谊，也算是撫慰了我有時(shí)將要崩潰的內(nèi)心财喳。
資料館的內(nèi)容算是完全確定了下來(lái)，但緊接著就是第二個(gè)難題——我該用什么辦法才能完美的向大家展示這個(gè)資料館斩狱？作為一個(gè)對(duì)審美耳高，對(duì)用戶體驗(yàn)還有些較真的人，我嘗試了許多展示方法之后終于確定了每一個(gè)部分的方式所踊。
「小說(shuō)」泌枪，書架式。說(shuō)到「文學(xué)少女」的話秕岛，給人的第一印象應(yīng)該就是圖書館或者文藝部了吧碌燕。因此，我選擇用圖書書架的方式來(lái)呈現(xiàn)整個(gè)小說(shuō)內(nèi)容——即是一種十分直觀的表達(dá)继薛，也能與「文學(xué)少女」的內(nèi)涵相呼應(yīng)陆蟆，算是一舉兩得。
「插畫」惋增，瀑布流叠殷。與「文學(xué)少女」有關(guān)的插畫內(nèi)容并不算多，僅有小說(shuō)和追想畫廊的插畫內(nèi)容诈皿，而小說(shuō)插畫單獨(dú)鑒賞的往往意義不明林束，因此我只選擇了追想畫廊的插畫內(nèi)容』鳎考慮到內(nèi)容較少和圖片呈現(xiàn)的流暢度壶冒，我使用較為主流也是較為方便的瀑布式來(lái)展現(xiàn)這一板塊的內(nèi)容——當(dāng)然，還額外加入了「文學(xué)少女」的一些臺(tái)詞截歉，算是提高了一些藝術(shù)效果胖腾。
「音樂(lè)」，唱片式瘪松。「文學(xué)少女」這個(gè)名詞給人一種頗帶古典氣息的感覺(jué)咸作，因此音樂(lè)部分我就很自然的使用唱片+唱片機(jī)的方式來(lái)展現(xiàn)——同時(shí)加入了黑膠唱片的“滋滋滋”音效來(lái)渲染音樂(lè)，希望給聽(tīng)者帶來(lái)身臨其境的感受宵睦。
「動(dòng)畫」记罚，導(dǎo)航式。原本是打算自己搭建視頻播放架構(gòu)壳嚎，但最后還是放棄了這一選擇——并不是因?yàn)橐曨l播放架構(gòu)難桐智，而是與之相應(yīng)的彈幕機(jī)制末早，畢竟對(duì)于動(dòng)漫來(lái)講，彈幕吐槽或許已經(jīng)成為了必要的元素说庭，而這個(gè)功能的實(shí)現(xiàn)對(duì)于目前的我的技術(shù)水平來(lái)說(shuō)難度過(guò)高然磷。因此，最后折衷的選擇是為動(dòng)畫創(chuàng)建了一個(gè)導(dǎo)航模塊刊驴，可以直接跳轉(zhuǎn)至B站進(jìn)行觀看——同時(shí)也在一定程度上減少了自己服務(wù)器的負(fù)擔(dān)样屠。
到現(xiàn)在為止，資料館的搭建算是基本完成了——至于數(shù)據(jù)庫(kù)的搭建和存入數(shù)據(jù)庫(kù)過(guò)程的辛酸淚水缺脉，就不為大家說(shuō)明了痪欲，畢竟自己回想起來(lái)，都不知道是憑借什么樣的毅力完成的攻礼。
三題故事寫作
「文學(xué)少女」主題站真正的核心應(yīng)該是三題故事寫作和分享了业踢。這里我先就三題故事寫作的部分細(xì)說(shuō)一下。
起初礁扮，我將三題故事寫作的上傳頁(yè)面設(shè)置的十分簡(jiǎn)單知举，用戶僅可以上傳文章的長(zhǎng)文本、標(biāo)題和封面插圖太伊。但后來(lái)自己使用起來(lái)不禁覺(jué)得有些枯燥雇锡，偶然間看到朋友圈的公眾號(hào)推文里帶有一些背景音樂(lè)，覺(jué)得也十分不錯(cuò)——畢竟好的背景音樂(lè)能夠讓文章的感染力更強(qiáng)僚焦，因此我后面又引入了背景音樂(lè)的上傳锰提。
原本以為這一部分就應(yīng)當(dāng)結(jié)束了，但當(dāng)我看到一般的博客文章都是有圖有文帶排版時(shí)芳悲，我突然明白了現(xiàn)在的上傳頁(yè)面最大的缺陷——長(zhǎng)文本區(qū)域太單調(diào)了立肘。為了解決這個(gè)問(wèn)題，我先是采用“用戶自行編輯markdown語(yǔ)法”來(lái)解決名扛，但在具體測(cè)試的時(shí)候發(fā)現(xiàn)該方法還是太過(guò)繁瑣——這一點(diǎn)在后面的網(wǎng)站技術(shù)架構(gòu)我也有提到谅年。在參考了一些博客網(wǎng)站的建設(shè)后，我選擇了Editormd框架來(lái)幫助我構(gòu)建Markdown文章編輯器肮韧，其簡(jiǎn)單易用的設(shè)計(jì)算是解決了文章上傳的一大難題融蹂。
為了讓網(wǎng)站更加“用戶友好”，我分別加入了“POST介紹”弄企、“關(guān)鍵詞檢索”超燃、“簡(jiǎn)單評(píng)論”、“用戶信息頁(yè)面”等功能桩蓉。
POST介紹淋纲。即在滾動(dòng)欄加入了“「三題故事」寫作指南”和“「文學(xué)少女」資料站”兩個(gè)引導(dǎo)鏈接，讓網(wǎng)站新用戶能夠快速熟悉站點(diǎn)的兩大核心功能院究。
關(guān)鍵詞檢索洽瞬。用戶可以使用關(guān)鍵詞檢索功能快速檢索指定的關(guān)鍵詞——這個(gè)關(guān)鍵詞往往就是三題故事的三個(gè)主題詞。
簡(jiǎn)單評(píng)論业汰。每一個(gè)三題故事詳情頁(yè)下用戶都可以進(jìn)行簡(jiǎn)單的評(píng)論交流伙窃。
用戶信息頁(yè)面。用戶可以展示自己的個(gè)人信息頁(yè)面样漆，同時(shí)也可以快速修改個(gè)人信息为障。
快速返回頂層。用戶可以快速返回頁(yè)面頂層放祟。
自動(dòng)分頁(yè)鳍怨。顧名思義。
三跪妥、這個(gè)網(wǎng)站的技術(shù)架構(gòu)是什么鞋喇？
選擇了Flask放棄了Django
在進(jìn)入一個(gè)網(wǎng)站的實(shí)際開(kāi)發(fā)階段之前，最重要的事務(wù)之一便是決定網(wǎng)站的后端開(kāi)發(fā)框架了眉撵。作為一個(gè)Python的忠實(shí)粉絲侦香，我一開(kāi)始就把目光放在了Python功能最全也是應(yīng)用最廣的Django框架上，但在進(jìn)入實(shí)際開(kāi)發(fā)之后纽疟，Django極其“重”的開(kāi)發(fā)模式反而拖累了網(wǎng)站的開(kāi)發(fā)速度罐韩，因此，在朋友的推薦下污朽，我轉(zhuǎn)向了同屬于Python陣營(yíng)的Flask框架——相較于Django較契合大型應(yīng)用開(kāi)發(fā)場(chǎng)景散吵，F(xiàn)lask極其輕量的開(kāi)發(fā)環(huán)境更適合小型應(yīng)用開(kāi)發(fā)環(huán)境和我這種網(wǎng)站開(kāi)發(fā)新手。
Jinjia2讓整個(gè)網(wǎng)站的前后端交互更為簡(jiǎn)單
將Flask作為后端框架的另一個(gè)原因應(yīng)該就是其能夠很方便的與Jinjia2語(yǔ)言契合了蟆肆。Jinjia2可以快速渲染前端模板错蝴，并且語(yǔ)法與Python相似。其使用方便颓芭，沖突少顷锰，能夠嵌入網(wǎng)頁(yè)中的CSS和JS板塊中等特性減少了許多我在處理前端渲染方面遇到的問(wèn)題。
讓“「文學(xué)少女」シリーズ”更具表現(xiàn)力
不過(guò)亡问，真正讓人頭疼的還是前端開(kāi)發(fā)框架—我對(duì)于現(xiàn)在主流的Bootstrap真是一點(diǎn)也感受不到其跟“「文學(xué)少女」シリーズ”之間的“美感”——當(dāng)然并不是說(shuō)Bootstrap不好官紫，至少后來(lái)我還是用到了它的自適應(yīng)框架——因此在樣式設(shè)計(jì)上，我是大量參考Reeoo與Codrops州藕，組合出適合“「文學(xué)少女」シリーズ”的風(fēng)格樣式——雖然可能會(huì)有人抱怨這不合乎網(wǎng)站前端的開(kāi)發(fā)規(guī)范束世，但從我來(lái)看，一個(gè)固定的框架反而會(huì)限制“「文學(xué)少女」シリーズ”的表現(xiàn)力床玻。
Ngnix+Uwsgi的服務(wù)器解決方案
Flask為開(kāi)發(fā)者提供了一個(gè)輕量級(jí)的Web服務(wù)毁涉，但這僅能滿足開(kāi)發(fā)環(huán)境調(diào)試之用，若要將其部署到生產(chǎn)環(huán)境則太過(guò)牽強(qiáng)锈死。因此我選擇了較為主流的Ngnix+Uwsgi+Flask的框架來(lái)搭建Web服務(wù)贫堰。
Markdown——讓寫作更加有趣
“「文學(xué)少女」シリーズ”的主要功能之一是為三題故事愛(ài)好者提供一個(gè)寫作平臺(tái)穆壕，那么，一個(gè)良好的寫作環(huán)境則是必不可少的了其屏，因此我想到了Markdown語(yǔ)法喇勋。起初我是想用“用戶編輯Markdown語(yǔ)法——服務(wù)器后端轉(zhuǎn)義——存入數(shù)據(jù)庫(kù)——提取轉(zhuǎn)義后的數(shù)據(jù)——前端渲染”這一套流程來(lái)解決Markdown文章的輸入問(wèn)題，但在具體測(cè)試的時(shí)候發(fā)現(xiàn)該方法還是太過(guò)繁瑣偎行，而且不是每一個(gè)用戶都會(huì)寫Markdown語(yǔ)法或者樂(lè)意寫的川背。在參考了一些同類網(wǎng)站的設(shè)計(jì)后，我選擇了Editormd框架來(lái)幫助我實(shí)現(xiàn)Markdown語(yǔ)法——利用Editormd快速構(gòu)建一個(gè)Markdown編輯器蛤袒，用戶可以用傳統(tǒng)的文字輸入模式熄云，例如Word來(lái)鍵入他的文章，同時(shí)后臺(tái)也可以輕松獲得轉(zhuǎn)義后的標(biāo)準(zhǔn)html代碼妙真。
自適應(yīng)讓手機(jī)端也暢通無(wú)阻
得益于使用了自適應(yīng)框架缴允，「文學(xué)少女」主題站即使是在手機(jī)上也能獲得較好的閱讀體驗(yàn)。不過(guò)讓人遺憾的是隐孽，Markdown文章上傳頁(yè)面的適配并不成功癌椿，這可能與Editormd暫時(shí)不支持手機(jī)有關(guān)，考慮后面進(jìn)行一個(gè)改進(jìn)菱阵。
四踢俄、一個(gè)名開(kāi)發(fā)者如何加入到這個(gè)項(xiàng)目的完善中？
雖然“「文學(xué)少女」シリーズ”已經(jīng)可以被投入使用晴及，但她還遺留下了一些問(wèn)題——缺乏細(xì)節(jié)功能的完善都办，某些頁(yè)面加載耗時(shí)過(guò)長(zhǎng)等等。而鑒于時(shí)間原因和一部分技術(shù)難題攻關(guān)虑稼，對(duì)于“「文學(xué)少女」シリーズ”的日常開(kāi)發(fā)與維護(hù)將會(huì)變得緩慢琳钉，因此，我期望一同喜歡“「文學(xué)少女」シリーズ”或者喜歡三題故事的開(kāi)發(fā)者也能參與到這個(gè)項(xiàng)目的構(gòu)建中蛛倦。因此歌懒，“「文學(xué)少女」シリーズ”的源碼將會(huì)在Github上開(kāi)放并將永久開(kāi)放，而那些期望幫助改進(jìn)完善這個(gè)項(xiàng)目的開(kāi)發(fā)者可以隨時(shí)加入到這個(gè)項(xiàng)目中溯壶。
五及皂、版本更新附錄
歷史版本Version1.08?
*加入了閱讀量提示?
*加入了分頁(yè)功能?
*改善了網(wǎng)站功能
歷史版本Version1.07?
*新增「文學(xué)少女」音樂(lè)集?
*新增「文學(xué)少女」插畫集?
*新增404頁(yè)面?
歷史版本Version1.06?
*新增「文學(xué)少女」小說(shuō)集?
歷史版本Version1.05?
*新增「文學(xué)少女」動(dòng)畫集?
歷史版本Version1.04?
*新增「文學(xué)少女」介紹?
歷史版本Version1.03?
*修復(fù)了上傳文章后沒(méi)有正確地跳轉(zhuǎn)頁(yè)面?
歷史版本Version1.02?
*引入editormd,可以愉快地使用markdown進(jìn)行寫作啦?
*優(yōu)化了本地文件上傳和互聯(lián)網(wǎng)圖片的引用?
*加入了關(guān)鍵詞檢索功能?
*更新了數(shù)據(jù)庫(kù)結(jié)構(gòu),主要是文章的重構(gòu)?
歷史版本Version1.01?
*基本結(jié)構(gòu)形成（版本Version1.01之前為封閉開(kāi)發(fā)測(cè)試，主要是構(gòu)建整個(gè)網(wǎng)站的基本樣貌與結(jié)構(gòu)且改，因此不作版本更新說(shuō)明验烧。）
