溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vuepress 是 Vue 驅動的靜態站點生成工具
本文僅介紹，搭建靜態博客的過程，具體教程及文檔請點擊進入 vuepress中文網
點擊查看項目代碼
vuepress初始化
下面初始化
# 將 github 新創建的倉庫克隆到本地 git clone git@github.com:zhb333/readme-blog.git # 進入項目 cd readme-blog # npm 初始化, 按照提示回車 npm init # 安裝 vuepress npm i vuepress -D # 安裝 gh-pages npm i gh-pages -D # 創建一個 docs 目錄 mkdir docs # 創建一個 markdown 文件 echo '# Hello VuePress' > docs/README.md
npm 腳本
然后，給 package.json 添加一些 scripts 腳本：
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"deploy": "npm run build && gh-pages -d docs/.vuepress/dist"
}
}
運行本地開發環境
運行 vurepress 的本地開發環境
npm run dev
訪問 localhost:8080 ， 已經成功開啟
基礎配置
生成靜態資源
執行下面的命令，生成靜態資源
npm run build
默認情況下，構建的文件會位于 docs/.vuepress/dist 中，該文件可以通過 docs/.vuepress/config.js 中的 dest 字段進行配置。
配置
創建 docs/.vuepress/config.js， 并進行簡單配置
var config = {
// 靜態網站部署的目錄
base: '/readme-blog/',
// 網站標題
title: '標 の 博客',
// <meta name="description" content="...">
description: '種一棵樹最好的時間是十年前，其次是現在',
markdown: {
// 顯示代碼行號
lineNumbers: true
}
}
module.exports = config
博客首頁
公共文件
創建 docs/.vuepress/public 用于存放公共文件
我在 public/ , 存在了 favicon.ico 圖標， 以及 zlx.jpg 首頁的頭像圖片
簡單的首頁編寫
將 docs/README.md設置為首頁， 修改代碼為：
--- home: true heroImage: /zlx.jpg footer: MIT Licensed | Copyright © 2018 ZhangHuanbiao ---
設置網站 ico 圖標
配置網站的 ico 圖標， 修改 .vuepress/config.js：
const config = {
head: [
['link', { rel: 'icon', href: '/favicon.ico' }]
]
}
導航欄
配置導航欄
使用 vuepress 的默認主題配置導航欄 .vuepress/config.js：
const nav = [
{
text: '前端棧',
items: [
{ text: 'Vue', link: '/WEB/Vue/vuepress-blog' },
{ text: 'React', link: '/WEB/React/react-router' }
]
}
]
const config = {
themeConfig: {
// 項目的 github 地址
repo: 'zhb333/readme-blog',
// github 地址的鏈接名
repoLabel: '代碼',
// 配置導航欄
nav,
},
}
創建有效的導航資源
為了使得導航欄的鏈接點擊有效， 我們創建兩個文件：
docs/WEB/Vue/vuepress-blog.md
# 使用`vuepress`搭建靜態博客 ## vuepress初始化 ## 基礎配置 ## 博客首頁 ## 導航欄
docs/WEB/React/react-router.md
# react-router
側邊欄
側邊欄配置
使用 vuepress 的默認主題配置側邊欄 .vuepress/config.js：
const sidebar = {
'/WEB/': [
{
title: 'Vue',
children: [
'Vue/vuepress-blog'
]
},
{
title: 'React',
children: [
'React/react-router'
]
}
]
}
const nav = [
{
text: '前端棧',
items: [
{ text: 'Vue', link: '/WEB/' + sidebar['/WEB/'][0]['children'][0] },
{ text: 'React', link: '/WEB/' + sidebar['/WEB/'][1]['children'][0] }
]
}
]
var config = {
themeConfig: {
// 當前 markdown 的 github 代碼鏈接
editLinks: true,
// 鏈接顯示的文本
editLinkText: '查看原文|編輯此頁',
nav,
sidebar,
},
}
側邊欄效果
訪問： http://localhost:8080/readme-blog/WEB/Vue/vuepress-blog.html， 可以看到側邊欄已經生成
將靜態博客網站部署到外網
使用 gh-pages 進行項目部署
npm run deploy
過幾分鐘后，訪問 https://zhb333.github.io/readme-blog/， 便可以看到在外網成功部署的靜態博客
評論功能
我們使用 valine 來實現評論功能：
Valine - 一款快速、簡潔且高效的無后端評論系統。
點擊進入 Valine官網 ，需要先注冊才能食用
安裝 Valine
# Install leancloud's js-sdk npm install leancloud-storage --save # Install valine npm install valine --save
注冊 vuepress 全局組件
創建 .vuepress/components/Valine.vue
<template>
<div id="vcomments"></div>
</template>
<script>
export default {
name: 'Valine',
mounted: function(){
// require window
const Valine = require('valine');
if (typeof window !== 'undefined') {
this.window = window
window.AV = require('leancloud-storage')
}
new Valine({
el: '#vcomments' ,
appId: '',// your appId
appKey: '', // your appKey
notify:false,
verify:false,
avatar:'mm',
placeholder: 'just go go'
});
},
}
</script>
使用 Valine
只需要在 markdown 中調用即可
<Valine></Valine>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
