vuePress博客搭建指南

須要node環境和npm支css

vuePress概述

Vue 驅動的靜態網站生成器
基於markdown語法生成網頁
可自定義和擴展樣式
能夠發佈至githubhtml

安裝初始化

全局安裝

更改npm默認下載路徑爲taobao源

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

確認成功

npm config get registryvue

$ npm install -g vuepress

$ mkdir vuepress-blog
該目錄做爲整本書的項目目錄

項目初始化

$ cd vuepress-blog
$ npm init -y

初始化後會生成一個package.json文件node

$ mkdir docs
# 主要存放博客書籍內容

首頁內容書寫(默認主題提供)webpack

---
home: true
heroImage: /logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 簡潔至上
  details: 以 Markdown 爲中心的項目結構，以最少的配置幫助你專一於寫做。
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可使用 Vue 來開發自定義主題。
- title: 高性能
  details: VuePress 爲每一個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將做爲 SPA 運行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

核心配置

在docs目錄下建立.vuepress目錄

$ cd docs
$ mkdir .vuepress
# 主要存放配置

新建總配置文件config.js

$ cd .vuepress
$ touch config.js
# config是整個項目的核心配置文件，全部菜單、欄目相關的配置均配置在該模塊中

在config.js中加入內容

module.exports = {
    title: '知碼學院',
    description: '君哥帶你上王者',
    dest: './dist',
    port: '7777',
    head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: [{
            text: '懵逼指南', link: '/guide/'
        }],
        sidebar: {'/guide/':[
            {
                  title:'新手指南',
                  collapsable: true,
                  children:[
                    '/guide/notes/one',
                  ]
                },
                {
                  title:'知碼學院',
                  collapsable: true,
                  children:[
                    '/guide/notes/two',
                  ]
                }
            ]
        },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "有新的內容.",
                buttonText: '更新'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上編輯此頁 ！'
    }
}

上述配置中themeConfig處有2個關鍵配置，nav和sidebar，咱們後續單獨講解git

運行

vuepress dev docs

導航欄配置

nav配置github

nav是頂部欄目導航web

接下來咱們在當前目錄建立一個nav.js面試

$ touch nav.js
# 由於config.js中引入了nav，因此咱們要提供一個來存放欄目

編輯nav.jsnpm

加入以下內容

module.exports = [
    {
        text: '懵逼指南', link: '/guide/'
    },
    {
        text: '面試寶典', link: '/baodian/',
		items: [
            {text: '初級開發篇', link: '/baodian/zero/'},
            {text: '中高進階篇', link: '/baodian/high/'},
        ]
    },
    {
        text: '工具箱',
        items: [
			{
                text: '在線編輯',
				items: [
					{text: '圖片壓縮', link: 'https://tinypng.com/'}
				]
            },
			{
                text: '在線服務',
				items: [
					{text: '阿里雲', link: 'https://www.aliyun.com/'},
					{text: '騰訊雲', link: 'https://cloud.tencent.com/'}
				]
            },
			{
                text: '博客指南',
				items: [
					{text: '掘金', link: 'https://juejin.im/'},
					{text: 'CSDN', link: 'https://blog.csdn.net/'}
				]
            }
        ]
    }
]

nav配置注意點
- nav能夠支持本地目錄和連接
- nav由text、link、items組成
  - text：欄目名（項名）
  - link：連接，能夠指向本地目錄和http地址
  - items：能夠包含多個text和link，能夠繼續反覆套用組成複雜的菜單
nav配置時須要與本地的目錄對應
- 如上述我配置了懵逼指南和麪試寶典欄目
- 懵逼指南：對應的事/guide/，則我須要再docs目錄下建立一個guid目錄
- 面試寶典：對應的是/baodian/，則我須要在docs目錄下建立一個```baodian``````目錄
- baodian子目錄：上述配置中baodian下有2個子目錄，則我須要在下面新建2個子目錄與之對應
對應目錄截圖

側邊欄配置

sidebar

sidebar是左側標題導航，能夠指定配置也能夠設置爲auto

sidebar: 'auto'

sidebar配置語法

module.exports = {
	'/guide/': require('../guide/sidebar'),

	'/baodian/zero': require('../baodian/zero/sidebar'),
	'/baodian/high': require('../baodian/high/sidebar'),
}

/guide/：該key是與上述的 nav中link對應，在請求 nav時會自動切換當前的側邊目錄，因此須要該配置
/baodian/zero同理
後續的require表示引入一個指定目錄的sidebar.js文件，其自己能夠直接寫在這裏，但爲了方便維護咱們須要將每一個模塊的側邊欄js抽取出來，單獨存放在內容模塊的目錄下

sidebar.js

這裏我貼出目錄：/docs/guide/sidebar.js文件內容

module.exports = [
		{
		  title:'新手指南',
		  collapsable: true,
		  children:[
			'/guide/notes/one',
		  ]
		},
		{
		  title:'知碼學院',
		  collapsable: true,
		  children:[
			'/guide/notes/two',
		  ]
		}
	]

參數解析

title：表示側邊欄大標題
collapsable：是否可收縮
children：具體的.md文件，這裏無需指定後綴

靜態資源配置

靜態資源是最重要的一部分，好比圖片，好比js，好比css

vuepress程序默認的圖片目錄是/docs/.vuepress/public

$ cd .vuepress
$ mkdir public

圖片

好比咱們要指定首頁顯示圖片，那麼須要將首頁內容中的圖片路徑更改爲以下

# /docs/.vuepress/public目錄下有一張 logo.jpg的圖片
heroImage: /logo.jpg

即/logo.jpg就是指/docs/.vuepress/public/logo.jpg

css與圖片路徑同樣，好比js中要加載咱們指定的css文件，那麼能夠像以下這樣

$ cd public
$ mkdir css
$ touch style.css

編輯css內容，加入以下css作測試（你也能夠自定義其餘內容）

a{color:#333;text-decoration:none; }

修改.vuepress下的config.js

# 修改head屬性以下
head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}],
        ["link", { rel: "stylesheet", href: "/css/style.css" }]
    ],

重啓預覽效果
js

若是咱們要自定義一些js動態效果，咱們能夠也能夠像css操做那樣

$ cd public
$ mkdir js
$ touch main.js

在js中加入一些測試內容

function init(){
    console.log("終於能夠隨心所欲了");
}
//由於界面加載緣由，咱們延遲500ms再調用init
setTimeout("init()",500)

修改.vuepress下的config.js

# 修改head屬性以下
head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}],
        ["link", { rel: "stylesheet", href: "/css/style.css" }],
        ["script", { charset: "utf-8", src: "/js/main.js" }],//新加入
    ],

項目	方法
M2RI1	k83Ej3016
QV1Ng	2005/04/16 19:06:39
6i8pd	一點點奶茶加盟「費用明細」內部資料
cUUyB	2005-12-01 10:03:50
Ihk5Y	613QV4688

vuePress博客搭建指南

vuePress博客搭建指南

vuePress概述

安裝初始化

更改npm默認下載路徑 爲taobao源

確認成功

核心配置

導航欄配置

側邊欄配置

靜態資源配置

更改npm默認下載路徑爲taobao源