一个基础的博客框架

继上文花了三四天搓了小半个博客框架，考试结束后，进入了白天在实验室赶FYP，晚上抽几个点接着写这个框架的状态。陆陆续续又花了两周差不多，算是实现了大部分的基础功能了。

框架已经在Github中发布了，各位感兴趣的可以clone后自行搭建，若是感觉不错烦请点一个小小的star。

整体布局

进入首页，即可看到一个由顶部菜单栏、左侧文章列表、右侧个人简介和合集栏组成的页面。顶栏中的Archive和Categories以及Tag均已实现功能，在之后会说明。

在项目中，我们可以使用config.js来实现大部分的配置操作，以下是目前存在的配置选项：

若配置到了例如Github Pages等静态部署站（未测试），需要修改ProjectUrl以至根域名供给解析（后期更改为使用了router的方式，可能不需要配置了，但保险起见）。

BlogName会显示在顶栏的左上角，
ShortDesc将会与BlogName共同成为页面的标题，例图如下

之后三个选项是设置背景图片路径，以及图片的半透明和毛玻璃程度。
主题部分已经抽出了大部分的色彩配置项，但并未完全检查过，将会在未来进行更进一步的支持。可以在color.css中进行查阅和部分配置。
以下三个部分将会显示在右侧的个人介绍栏中，例图如下

之后的PostsPerPage是每页可显示的文章数目，配置好后便可见换页栏

随后的ChangeInfoAndTipPosition可以调换左右列表栏目的位置。
紧随其后的八个属性，将可以自定义在全局显示的栏目。有些页面也会默认设置了一些Panel，例如主页面的mainList中默认拥有PostPanel作为文章的显示，我们可以在Up或Down中配置一些显示在PostPanel之上或者之下的其他Panel。
- 例如我的配置如下图，则会显示以下组建在页面上

另外的FloatList，是可以随着屏幕滚动动态改变位置，并一直保留在页面上的组件列表，例如在文章中的显示目录（暂未实现），就可以存放在这个List中。
最后就是配置外链了，name中的值，将会从mdi的图标库中寻找对应图标来显示。

Collections

即页面右侧下的收藏栏。

当初的目的是想方便地将自己认为感兴趣或者同一类别的文章放入一个合集中，有点像Tag和Category的一个组合。在/src/Posts下创建的文件夹都会被当作是一个Collection，其中的第一张图片或者动图，会被当作这个Collection的预览图

但目前只有预览的功能，暂未实现查看合集内文章的功能。

Markdown

到了最关键的文章解析环节了，Markdown语法都被支持。新接入了对Latex的支持，而Mermaid将会在未来加入。

以下是一个对大部分语法的测试文档，从源文件到渲染文档：

文档的metadata包括了标题、日期、tag、category、简介和标题图。为方便管理，除了collection预览图，所有与文档相关的图片都会被放置在Posts/Images文件夹中，因此这里的标题图只需要填写图片的名称即可。当然若在Images中添加了子目录，也需要填写路径。

另外在文章中的图片，也和标题图一样，需要全部放置在Images中。

为了方便各位快速标示提到的游戏，我做了个对steam链接的解析，可以显示一个面板来引用游戏。

PythonTool

由于是静态网站，涉及文件结构等信息无法由网页获取，正好我也需要一个管理器，就使用python写了一个类似hexo的部署器。

安装完需要的库后，使用python manTools/main.py来启动工具。第一次clone项目后，我们需要使用InitBlog命令来初始化博客，例如创建Posts文件夹等。之后，我们可以使用AddPost来添加一篇新的文章，metadata会自动生成。当我们修改了涉及tag、category以及collection的部分时，需要使用Generate命令来重新生成文档结构，以使页面显示正常。其他命令可以使用help来查看说明。

Conclusion

这个小项目充实了好多我的睡前时间，同时这也是我使用vue写的第一个项目，可能有很多地方写复杂或者不够到位，请各位多多谅解。未来我会将我现在的博客https://iiishop.github.io/中的内容迁移到这个博客上，还有教会小女友用这个来发一些游戏感想。博客框架依然会保持一定频率的更新，以实现更多功能和变得更加美观，以及提供更多的个性化空间。若各位有什么想法或者建议也欢迎告知我，为了让这个项目变得更有趣。

更多游戏资讯请关注：电玩帮游戏资讯专区

电玩帮图文攻略 www.vgover.com