一個基礎的博客框架

繼上文花了三四天搓了小半個博客框架，考試結束後，進入了白天在實驗室趕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