Github项目仓库：Website_Bungakushojo

在经历一个大版本、八个小版本的更新完善后，“「文学少女」シリーズ”主题站（下均称“「文学少女」主题站”）终于可以展现“她”的基础形态了，因此请允许我用我贫乏的词汇来简单描述一下“她”以及在开发过程中我的一些感受。

一、我为什么要做这个网站？

这个网站并非是因为一些能打动人心的理由而开发的，可以说完全是因为某个人在读完一本轻小说之后对其内容故事着迷而打算开发的一个主题站。但建站也不是头脑发热就能做的事情，在参考了一些同类别的网站之后，我将「文学少女」主题站定位为“为大家展现「文学少女」的精彩”与“三题故事的写作与分享”的网站。前者是类似于「文学少女」资料馆一般的存在，我期望能够有更多的人了解并喜欢上「文学少女」，而后者则是取自小说里经常提及的“三题写作”——一种以三个词语为主题写作的文章。

二、如何描述这个网站的功能架构？

文学少女主页

文学少女主页（手机端）

正如前面所提及的，“「文学少女」主题站”最主要的两部分便是“「文学少女」资料馆”与“三题故事写作”。因此功能板块也会围绕这两个部分来说明。

「文学少女」资料馆

我原以为这个部分是最为简单的，但实际操作起来后则发现是最为繁杂和耗时的。最令人头疼的两点便是——一是资料馆内容范围的确定——除了正传小说外，「文学少女」的衍生作品很多，包括但不限于动画、音乐、画集、小说等，但考虑到开发的时间与规模，实在是不能将所有的衍生作品纳入网站建设之内；二是如何展示资料馆的内容——小说为文字，动画为视频，音乐为音频，画集为图片，不同的资料格式其展现方式也是不同的。

对于第一个难题，我的解决办法现在来看有些自私——以自己的喜好为主。虽然这么说有些任性，但我觉得这才是我眼里的「文学少女」呈现给我的样子，换句话说，我希望这个网站带有我的一丝私心。当然，我并非是彻底的“专制主义”，在以自己喜好为主的同时我也参考了「文学少女」有关论坛里大家的意愿。因此，最后我将「文学少女」的“小说”、“画集”、“音乐”和“动画”作为「文学少女」资料馆的收录内容。

确定了资料馆的内容组成后便是具体内容的施工了，这一部分应该算是耗费我较多时间和精力的一个部分了，虽然有参考「萌娘百科」和「维基百科」中有关「文学少女」的资料，但是我不得不从「轻之国度」、「网易云音乐」、「百度贴吧」等地方搜集大量有关「文学少女」的零散信息并整理归类，这是一个非常痛苦的过程——资料的真实性且不论，光是其混杂的程度就很让人抓狂。不过，当看到资料馆的内容一点一点充实起来，也算是抚慰了我有时将要崩溃的内心。

文学少女资料收集部分截图

资料馆的内容算是完全确定了下来，但紧接着就是第二个难题——我该用什么办法才能完美的向大家展示这个资料馆？作为一个对审美，对用户体验还有些较真的人，我尝试了许多展示方法之后终于确定了每一个部分的方式。

「小说」，书架式。说到「文学少女」的话，给人的第一印象应该就是图书馆或者文艺部了吧。因此，我选择用图书书架的方式来呈现整个小说内容——即是一种十分直观的表达，也能与「文学少女」的内涵相呼应，算是一举两得。

文学少女小说页面

文学少女小说书籍展开相关介绍

「插画」，瀑布流。与「文学少女」有关的插画内容并不算多，仅有小说和追想画廊的插画内容，而小说插画单独鉴赏的往往意义不明，因此我只选择了追想画廊的插画内容。考虑到内容较少和图片呈现的流畅度，我使用较为主流也是较为方便的瀑布式来展现这一板块的内容——当然，还额外加入了「文学少女」的一些台词，算是提高了一些艺术效果。

文学少女插画页面

「音乐」，唱片式。「文学少女」这个名词给人一种颇带古典气息的感觉，因此音乐部分我就很自然的使用唱片+唱片机的方式来展现——同时加入了黑胶唱片的“滋滋滋”音效来渲染音乐，希望给听者带来身临其境的感受。

文学少女音乐唱片页面

「动画」，导航式。原本是打算自己搭建视频播放架构，但最后还是放弃了这一选择——并不是因为视频播放架构难，而是与之相应的弹幕机制，毕竟对于动漫来讲，弹幕吐槽或许已经成为了必要的元素，而这个功能的实现对于目前的我的技术水平来说难度过高。因此，最后折衷的选择是为动画创建了一个导航模块，可以直接跳转至B站进行观看——同时也在一定程度上减少了自己服务器的负担。

文学少女动画导航页面

到现在为止，资料馆的搭建算是基本完成了——至于数据库的搭建和存入数据库过程的辛酸泪水，就不为大家说明了，毕竟自己回想起来，都不知道是凭借什么样的毅力完成的。

三题故事写作

「文学少女」主题站真正的核心应该是三题故事写作和分享了。这里我先就三题故事写作的部分细说一下。

起初，我将三题故事写作的上传页面设置的十分简单，用户仅可以上传文章的长文本、标题和封面插图。但后来自己使用起来不禁觉得有些枯燥，偶然间看到朋友圈的公众号推文里带有一些背景音乐，觉得也十分不错——毕竟好的背景音乐能够让文章的感染力更强，因此我后面又引入了背景音乐的上传。

原本以为这一部分就应当结束了，但当我看到一般的博客文章都是有图有文带排版时，我突然明白了现在的上传页面最大的缺陷——长文本区域太单调了。为了解决这个问题，我先是采用“用户自行编辑markdown语法”来解决，但在具体测试的时候发现该方法还是太过繁琐——这一点在后面的网站技术架构我也有提到。在参考了一些博客网站的建设后，我选择了Editormd框架来帮助我构建Markdown文章编辑器，其简单易用的设计算是解决了文章上传的一大难题。

文学少女Markdown文章上传页面

为了让网站更加“用户友好”，我分别加入了“POST介绍”、“关键词检索”、“简单评论”、“用户信息页面”等功能。

POST介绍。即在滚动栏加入了“「三题故事」写作指南”和“「文学少女」资料站”两个引导链接，让网站新用户能够快速熟悉站点的两大核心功能。

关键词检索。用户可以使用关键词检索功能快速检索指定的关键词——这个关键词往往就是三题故事的三个主题词。

简单评论。每一个三题故事详情页下用户都可以进行简单的评论交流。

用户信息页面。用户可以展示自己的个人信息页面，同时也可以快速修改个人信息。

快速返回顶层。用户可以快速返回页面顶层。

自动分页。顾名思义。

三、这个网站的技术架构是什么？

文学少女简易技术框架

文学少女数据库ER图

选择了Flask放弃了Django

在进入一个网站的实际开发阶段之前，最重要的事务之一便是决定网站的后端开发框架了。作为一个Python的忠实粉丝，我一开始就把目光放在了Python功能最全也是应用最广的Django框架上，但在进入实际开发之后，Django极其“重”的开发模式反而拖累了网站的开发速度，因此，在朋友的推荐下，我转向了同属于Python阵营的Flask框架——相较于Django较契合大型应用开发场景，Flask极其轻量的开发环境更适合小型应用开发环境和我这种网站开发新手。

Jinjia2让整个网站的前后端交互更为简单

将Flask作为后端框架的另一个原因应该就是其能够很方便的与Jinjia2语言契合了。Jinjia2可以快速渲染前端模板，并且语法与Python相似。其使用方便，冲突少，能够嵌入网页中的CSS和JS板块中等特性减少了许多我在处理前端渲染方面遇到的问题。

让“「文学少女」シリーズ”更具表现力

不过，真正让人头疼的还是前端开发框架—我对于现在主流的Bootstrap真是一点也感受不到其跟“「文学少女」シリーズ”之间的“美感”——当然并不是说Bootstrap不好，至少后来我还是用到了它的自适应框架——因此在样式设计上，我是大量参考Reeoo与Codrops，组合出适合“「文学少女」シリーズ”的风格样式——虽然可能会有人抱怨这不合乎网站前端的开发规范，但从我来看，一个固定的框架反而会限制“「文学少女」シリーズ”的表现力。

Ngnix+Uwsgi的服务器解决方案

Flask为开发者提供了一个轻量级的Web服务，但这仅能满足开发环境调试之用，若要将其部署到生产环境则太过牵强。因此我选择了较为主流的Ngnix+Uwsgi+Flask的框架来搭建Web服务。

Markdown——让写作更加有趣

“「文学少女」シリーズ”的主要功能之一是为三题故事爱好者提供一个写作平台，那么，一个良好的写作环境则是必不可少的了，因此我想到了Markdown语法。起初我是想用“用户编辑Markdown语法——服务器后端转义——存入数据库——提取转义后的数据——前端渲染”这一套流程来解决Markdown文章的输入问题，但在具体测试的时候发现该方法还是太过繁琐，而且不是每一个用户都会写Markdown语法或者乐意写的。在参考了一些同类网站的设计后，我选择了Editormd框架来帮助我实现Markdown语法——利用Editormd快速构建一个Markdown编辑器，用户可以用传统的文字输入模式，例如Word来键入他的文章，同时后台也可以轻松获得转义后的标准html代码。

自适应让手机端也畅通无阻

得益于使用了自适应框架，「文学少女」主题站即使是在手机上也能获得较好的阅读体验。不过让人遗憾的是，Markdown文章上传页面的适配并不成功，这可能与Editormd暂时不支持手机有关，考虑后面进行一个改进。

四、一个名开发者如何加入到这个项目的完善中？

虽然“「文学少女」シリーズ”已经可以被投入使用，但她还遗留下了一些问题——缺乏细节功能的完善，某些页面加载耗时过长等等。而鉴于时间原因和一部分技术难题攻关，对于“「文学少女」シリーズ”的日常开发与维护将会变得缓慢，因此，我期望一同喜欢“「文学少女」シリーズ”或者喜欢三题故事的开发者也能参与到这个项目的构建中。因此，“「文学少女」シリーズ”的源码将会在Github上开放并将永久开放，而那些期望帮助改进完善这个项目的开发者可以随时加入到这个项目中。

五、版本更新附录

历史版本Version1.08 

*加入了阅读量提示 

*加入了分页功能 

*改善了网站功能

历史版本Version1.07 

*新增「文学少女」音乐集 

*新增「文学少女」插画集 

*新增404页面 

历史版本Version1.06 

*新增「文学少女」小说集 

历史版本Version1.05 

*新增「文学少女」动画集 

历史版本Version1.04 

*新增「文学少女」介绍 

历史版本Version1.03 

*修复了上传文章后没有正确地跳转页面 

历史版本Version1.02 

*引入editormd,可以愉快地使用markdown进行写作啦 

*优化了本地文件上传和互联网图片的引用 

*加入了关键词检索功能 

*更新了数据库结构,主要是文章的重构 

历史版本Version1.01 

*基本结构形成（版本Version1.01之前为封闭开发测试，主要是构建整个网站的基本样貌与结构，因此不作版本更新说明。）