使用vuepress搭建靜態(tài)博客的示例代碼
什么是vuePress
vuePress是以vue驅(qū)動(dòng)的主題系統(tǒng)的簡(jiǎn)約靜態(tài)網(wǎng)站生成工具(擁有自己的默認(rèn)主題)。
veuPress由vue,vue-router,webpack驅(qū)動(dòng)的單頁(yè)面應(yīng)用,每個(gè)markdonw文件都使用markdonw-it編譯為html文件,然后作為vue組件的模板來(lái)處理。
中文官網(wǎng)
VuePress倉(cāng)庫(kù)
項(xiàng)目地址
VuePress 有很多優(yōu)點(diǎn):
- 界面簡(jiǎn)潔優(yōu)雅(個(gè)人感覺(jué)比 HEXO 好看)
- 容易上手(半小時(shí)能搭好整個(gè)項(xiàng)目)
- 更好的兼容、擴(kuò)展 Markdown 語(yǔ)法
- 響應(yīng)式布局,PC端、手機(jī)端
- Google Analytics 集成
- 支持 PWA
安裝vuePress
全局安裝
在此方式中,只是要項(xiàng)目根目錄創(chuàng)建了一個(gè)README.md文件,直接執(zhí)行訪問(wèn)的就是此文件
npm install -g vuepress # 創(chuàng)建一個(gè) markdown 文件 echo '# Hello VuePress' > README.md # 開(kāi)始編寫(xiě)文檔 vuepress dev # 構(gòu)建 vuepress build
在已有項(xiàng)目中安裝
# 安裝為本地依賴項(xiàng) npm install -D vuepress # 創(chuàng)建一個(gè) docs 目錄 mkdir docs # 創(chuàng)建一個(gè) markdown 文件 echo '# Hello VuePress' > docs/README.md # 開(kāi)始編寫(xiě)文檔 npx vuepress dev docs
還可以在package.json中添加js腳本,官網(wǎng)方式不好寫(xiě),我們直接用常用的方式
{
"scripts": {
"start": "vuepress dev docs",//運(yùn)行
"build": "vuepress build docs"http://打包
}
}
使用vuePress搭建靜態(tài)博客
接下來(lái)就是配置了,我會(huì)直接把我的配置文件貼上來(lái),我們先看結(jié)構(gòu)
博客結(jié)構(gòu)
博客結(jié)構(gòu)分為主頁(yè),導(dǎo)航欄,側(cè)邊欄
在.docs目錄下新建一個(gè).vuePress文件,在此注意,搭建博客過(guò)程中所有的配置文件以及內(nèi)容文件、主題等都放在此目錄中
在.vuePress文件夾下新建三個(gè)文件,public用來(lái)放圖片等靜態(tài)文件,theme中放到博客用到的主題,config.js中存放所有的配置
.vuePress ---public ---theme ---config.js
在.docs文件夾下新建幾個(gè)模塊文件夾,比如我的就分為學(xué)習(xí)筆記、問(wèn)題記錄、關(guān)于我等,每個(gè)文件夾下再新建md文件
vuePress會(huì)自動(dòng)把README.md設(shè)置為導(dǎo)航的主頁(yè),所以如果我們需要主頁(yè)就先建README.md,再新建first.md,seconde.md等文件作為側(cè)邊欄要顯示的文件
.docs ---.vuePress ---about ---README.md ---first.md ---seconde.md ---study ---problem
具體配置
最重要的config.js配置
在此值得注意的是,主題配置不只是簡(jiǎn)單的樣式配置等,其中包括導(dǎo)航與側(cè)邊欄部分的配置,此處配置參見(jiàn)官網(wǎng)導(dǎo)航欄”默認(rèn)主題配置“
module.exports = {
//網(wǎng)站標(biāo)題
title: '霍夢(mèng)林的個(gè)人博客',
// 主頁(yè)描述
description: 'Just playing around',
// 要部署的倉(cāng)庫(kù)名字
base: '/',
dest: './docs/.vuepress/dist',
// 主題配置
themeConfig: {
// 導(dǎo)航配置
nav: [
// text為導(dǎo)航欄顯示文字,link為路徑,即文件夾名字,注意不要丟了名字前后的'/'
{text: 'Home', link: '/'},
{text: 'About', link: '/about/'},
{text: 'Problem', link: '/problem/'},
{text: 'Study', link: '/study/'},
{text: 'CSDN', link: 'http://blog.csdn.net/weixin_38318244/'},
{text: 'Github', link: 'https://github.com/momo-0902'}
],
// 側(cè)邊欄配置,側(cè)邊欄組,不同(導(dǎo)航)頁(yè)面對(duì)應(yīng)不同的側(cè)邊欄
// 以對(duì)象形式配置,前邊的key為nav處的路徑,后邊提供一個(gè)數(shù)組作為此側(cè)邊欄中的子標(biāo)題
sidebar: {
'/problem/': [
// ''空字符串代表主頁(yè),顯示README.md中的內(nèi)容
'',
['201709', '201709'],//使用數(shù)組為側(cè)邊欄起別名,前邊是md名稱,后邊是鏈接顯示的文字
['201710', '201710'],
],
'/study/': [
'',
['axios', '1.axios'],
['document', '2.document'],
]
},
// 這是嵌套標(biāo)題鏈接,自動(dòng)顯示當(dāng)前激活(導(dǎo)航)頁(yè)面標(biāo)題的鏈接,即顯示深度(h1-h6的深度)
sidebarDepth: 1
}
}
網(wǎng)站主頁(yè)配置,即.docs下README.md的配置
--- // 使用默認(rèn)主題 home: true // 主頁(yè)頭像 heroImage: /me.jpg // '開(kāi)始學(xué)習(xí)'快捷按鈕 actionText: Get Started → // 快捷按鈕跳轉(zhuǎn)路徑 actionLink: /about/ features: - title: Simplicity First details: Minimal setup with markdown-centered project structure helps you focus on writing. - title: Vue-Powered details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. - title: Performant details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. footer: MIT Licensed | Copyright © 2018-present momo --- [[toc]] :tada: :100: 啦啦啦德瑪西亞 啦啦啦啦擼啊擼啊 <!--  --> 這里使用了 markdown 的拓展 `[[toc]]` ## 這里是momo的博客 ### 項(xiàng)目中遇到的問(wèn)題 ### 學(xué)習(xí)筆記 ### csdn ### github [關(guān)于我](/about/)
theme主題配置
項(xiàng)目中只是把vuePress所有的主題配置都拷貝到了本項(xiàng)目中,項(xiàng)目結(jié)構(gòu)如下:
theme ---styles ---theme.styl ---code.styl ---Home.vue ---Layout.vue ---until.js
打包部署
構(gòu)建
// 此處構(gòu)建生成路徑為./docs/.vuepress/dist,由config.js中配置: dest: ‘./docs/.vuepress/dist', vuepress build docs
導(dǎo)航到構(gòu)建輸出目錄
// config.js中dest配置的輸出目錄是哪此處就cd進(jìn)入哪,所有的git操作(包含初始,添加,提交等)都在此目錄下 cd docs/.vuepress/dist git init git add -A git commit -m ‘deploy'
推到你的倉(cāng)庫(kù)
如果是部署到<username>.github.io的主頁(yè)上
git push origin master
這時(shí)可能出現(xiàn)問(wèn)題
fatal: ‘origin' does not appear to be a git repository
以及fatal: Could not read from remote repository.
解決辦法: 執(zhí)行git remote add origin git@github.com:<USERNAME>/<REPO>.git
如果是部署到分支上
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages (git push -f git@github.com:momo-0902/wiki.git master:gh-pages)
可在package.json中配置腳本運(yùn)行
npm start 運(yùn)行項(xiàng)目
npm run build 打包
npm run deploy 部署
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- VuePress 中如何增加用戶登錄功能
- Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)
- 如何使用VuePress搭建一個(gè)類(lèi)型element ui文檔
- VuePress 快速踩坑小結(jié)
- VuePress 靜態(tài)網(wǎng)站生成方法步驟
- Hexo已經(jīng)看膩了,來(lái)手把手教你使用VuePress搭建個(gè)人博客
- 淺談vuepress 踩坑記
- 基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn)
- 基于VuePress 輕量級(jí)靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法
- Vue極簡(jiǎn)生成器?Vuepress的實(shí)現(xiàn)
相關(guān)文章
vue使用el-table 添加行手動(dòng)填寫(xiě)數(shù)據(jù)和刪除行及提交保存功能
遇到這樣的需求點(diǎn)擊新增按鈕實(shí)現(xiàn)下列彈窗的效果,點(diǎn)擊添加行新增一行,點(diǎn)擊刪除進(jìn)行刪除行,點(diǎn)擊提交將數(shù)據(jù)傳遞到后端進(jìn)行保存,怎么實(shí)現(xiàn)的呢,下面通過(guò)實(shí)例代碼給大家詳細(xì)講解,感興趣的朋友一起看看吧2023-12-12
vue項(xiàng)目中常見(jiàn)問(wèn)題及解決方案(推薦)
這篇文章主要介紹了vue項(xiàng)目中常見(jiàn)問(wèn)題及解決方案,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
vue跨窗口通信之新窗口調(diào)用父窗口方法實(shí)例
由于開(kāi)發(fā)需要,我需要在登錄成功請(qǐng)求成功后,調(diào)用父窗口的一個(gè)點(diǎn)擊事件方法,這篇文章主要給大家介紹了關(guān)于vue跨窗口通信之新窗口調(diào)用父窗口的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue2.0實(shí)現(xiàn)將頁(yè)面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)將頁(yè)面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例,非常具有實(shí)用價(jià)值,感興趣的同學(xué)可以了解一下2017-08-08
Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
從vue基礎(chǔ)開(kāi)始創(chuàng)建一個(gè)簡(jiǎn)單的增刪改查的實(shí)例代碼(推薦)
這篇文章主要介紹了從vue基礎(chǔ)開(kāi)始創(chuàng)建一個(gè)簡(jiǎn)單的增刪改查的實(shí)例代碼,需要的朋友參考下2018-02-02

