簡(jiǎn)介
VueBlogger是一個(gè)使用 Vue 2 編寫(xiě)的 Vue 博客框架。本著輕巧坏瘩、高度可定制化的設(shè)計(jì)理念吞歼，搭配著獨(dú)具一格的 UI 界面，VueBlogger可以輕松打造一個(gè)個(gè)人博客澳厢。
在線(xiàn)Demo：https://samzhangjy.github.io
GitHub倉(cāng)庫(kù)：https://github.com/samzhangjy/VueBlogger
歡迎大家star和fork！
UI界面
在UI上旨指，VueBlogger采用了 Vuesax 4 Alpha 作為組件庫(kù)赏酥，支持深色模式，整體風(fēng)格簡(jiǎn)約谆构、大方裸扶，但又具有科技風(fēng)。
工程架構(gòu)
VueBlogger采用 Vue 2 + Vue Router + Vuesax 4 作為主要依賴(lài)搬素。
使用指北
注意：請(qǐng)先確認(rèn)是否正確安裝 Node.js 與 Vue.js 2 呵晨。
安裝與運(yùn)行
首先魏保，你需要安裝 VueBlogger 的依賴(lài)包：
$ npm install # 或 yarn
然后，你可以通過(guò)以下命令運(yùn)行 VueBlogger：
$ npm run serve # 或 yarn serve
當(dāng)然摸屠，你現(xiàn)在還無(wú)法正常運(yùn)行谓罗，因?yàn)?VueBlogger 需要配置后才能正常使用。
配置
首先季二，在項(xiàng)目根目錄下檩咱，創(chuàng)建一個(gè)名為 `posts 的文件夾，這將存放所有與博客相關(guān)的MD文檔與配置文件胯舷。
然后刻蚯，在 posts 文件夾下創(chuàng)建一個(gè) data 文件夾，存放所有的配置文件桑嘶。
基本配置
在 data 文件夾下炊汹，創(chuàng)建一個(gè) config.json 文件，存放所有的基本配置逃顶。
// posts/data/config.json
{
"config": {
"username": "你的用戶(hù)名",
"avatarPath": "你的頭像圖片鏈接",
"description": "你的博客簡(jiǎn)介",
"name": "你的名稱(chēng)",
"blogTitle": "你的博客標(biāo)題",
"blogStartYear": 2019 // 博客開(kāi)始日期讨便，用于生成頁(yè)腳的CopyRight
},
"contacts": [ // 聯(lián)系方式
{
"name": "聯(lián)系方式名稱(chēng)",
"value": "聯(lián)系方式內(nèi)容，例如你的電子郵箱地址",
"link": "聯(lián)系方式鏈接以政，例如：mailto:xxx@example.com"
}
]
}
注意：一定要填寫(xiě)全部信息霸褒，否則 VueBlogger 將會(huì)報(bào)錯(cuò)。
項(xiàng)目配置
接著妙蔗，創(chuàng)建一個(gè) projects.json 文件（同樣在 data 文件夾中）傲霸，用于存儲(chǔ)個(gè)人開(kāi)源項(xiàng)目相關(guān)信息：
// posts/data/projects.json
{
"projects": [
{
"name": "項(xiàng)目名稱(chēng)",
"des": "項(xiàng)目介紹",
"img": "項(xiàng)目封面圖片鏈接",
"link": "項(xiàng)目首頁(yè)鏈接",
"github": "項(xiàng)目GitHub鏈接"
}
]
}
同樣，請(qǐng)?zhí)顚?xiě)所有信息眉反。
為了更好地自定義個(gè)人項(xiàng)目板塊昙啄，請(qǐng)?jiān)僭?data 文件夾中創(chuàng)建一個(gè) project-des.md 文件，存儲(chǔ)個(gè)人項(xiàng)目板塊的介紹文字寸五，例如：
Below are my personal projects made in my free time.
你當(dāng)然可以使用 MarkDown 風(fēng)格梳凛。
“關(guān)于我”板塊配置
你需要提供一個(gè)存儲(chǔ)著“關(guān)于我”頁(yè)面的內(nèi)容的 MarkDown 文檔來(lái)配置該板塊。就像寫(xiě)博客一樣梳杏，你可以在這個(gè)文檔中添加一些你的介紹韧拒。
哦對(duì)了，文件名是 about.md 十性，存儲(chǔ)在 data 文件夾中叛溢。
友鏈配置
VueBlogger 支持添加友鏈。添加 /posts/data/links.json 劲适，內(nèi)容格式如下：
{
"links": [
{
"title": "鏈接目標(biāo)網(wǎng)站名稱(chēng)（或標(biāo)題）",
"desc": "鏈接目標(biāo)網(wǎng)站介紹",
"link": "鏈接"
}
]
}
當(dāng)然楷掉，如果你不想有友鏈，將 links 數(shù)組設(shè)為空（ [] ）即可霞势。
寫(xiě)作
你可以使用 MarkDown 格式進(jìn)行寫(xiě)作烹植，并將每個(gè)博客存儲(chǔ)在 /posts/ 中斑鸦。至此，/posts/ 的目錄結(jié)構(gòu)如下：
posts
├─ data
│ ├─ about.md
│ ├─ config.json
│ ├─ posts.json
│ ├─ project-des.md
│ └─ projects.json
├─ post-1-title.md
├─ post-2-title.md
├─ post-3-title.md
└─ post-4-title.md
對(duì)草雕，多了個(gè) /posts/data/posts.json 巷屿。這個(gè)文件是所有配置文件中核心中的核心——存儲(chǔ)著所有對(duì)外可見(jiàn)的博客信息。它的格式如下：
{
"posts": [
{
"title": "VueBlogger: A simple blogging site for Vue", // 博客標(biāo)題
"tags": [
"Vue.js",
"project",
"frontend"
], // 博客標(biāo)簽
"cover": "https://dev-to-uploads.s3.amazonaws.com/i/95lvt23xz4ozer5byomi.png", // 博客封面圖片鏈接
"des": "There isn't really a simple blogging tool for Vue. VuePress works, but it's to complicated. So for that purpose, I developed this light-weight blogging site for Vue: VueBlogger.", // 博客簡(jiǎn)介
"date": [ // 博客發(fā)布日期
2021, // 年
10, // 月
6 // 日
],
"id": "blogue" // 博客正文文件名稱(chēng)（不包含 `.md` 后綴）
}
]
}
對(duì)了墩虹，一定要注意博客的 id 字段是博客文件的文件名 （不包含 .md 后綴）嘱巾，而不是博客的標(biāo)題。
錯(cuò)誤的配置可能會(huì)導(dǎo)致一個(gè) 404 Not Found 錯(cuò)誤败晴。所以浓冒，每次你要發(fā)布新博客時(shí)栽渴，一定要記得更新 posts.json 尖坤，否則你的博客將不會(huì)顯示出來(lái)！
部署
在部署到線(xiàn)上站點(diǎn)前闲擦，請(qǐng)先在本地運(yùn)行 npm run serve （或 yarn serve ）來(lái)檢測(cè)自己的配置是否正確慢味。
目前，VueBlogger 僅支持在 GitHub Pages 上自動(dòng)部署墅冷。
GitHub Pages
首先纯路，請(qǐng)確保你的 GitHub 賬戶(hù)下有一個(gè)名為 <your-username>.github.io 的空代碼倉(cāng)庫(kù)（<your-username> 替換為你的用戶(hù)名）。若沒(méi)有寞忿，請(qǐng)自行創(chuàng)建驰唬。
然后，運(yùn)行下列命令：
$ source ./publish.sh
耐心等待若干分鐘腔彰，你的博客將會(huì)在 <your-username>.github.io 上出現(xiàn)叫编。
其他部署平臺(tái)
如果你不使用 GitHub Pages ，你可以手動(dòng)部署霹抛。
首先搓逾，在本地構(gòu)建你的博客：
$ npm run build # 或 yarn build
然后，你可以使用 /public 文件夾下的文件進(jìn)行手動(dòng)部署杯拐。
結(jié)語(yǔ)
做這個(gè)項(xiàng)目的初心很簡(jiǎn)單霞篡，就是做一個(gè)好用的博客。也希望大家能夠喜歡這個(gè)項(xiàng)目端逼，并通過(guò)點(diǎn)贊朗兵、收藏、關(guān)注來(lái)支持我顶滩！
最后余掖，奉上英文文檔與 GitHub 倉(cāng)庫(kù)！
Demo: samzhangjy.github.io
GitHub: https://github.com/samzhangjy/VueBlogger
Please star or fork to support me!
