最新最全vuepress零基础搭建(github搭建+新增插件)
最新最全vuepress零基礎(chǔ)搭建
標(biāo)注:最終版以及修改最終都在www.javanode.cn是最終版本,在學(xué)習(xí)中需要修改的內(nèi)容以及筆記全在這個(gè)網(wǎng)站,謝謝!有任何不妥的地方望糾正
看完了,發(fā)現(xiàn)對你有用的話不關(guān)注就算了 還不點(diǎn)贊,你還是人嗎?
簡易版運(yùn)行
1. 下載簡易版
地址:https://gitee.com/gy297879328/vue_press_code
2. 編譯啟動(dòng)項(xiàng)目
## 在解壓目錄也就是package.json文件的當(dāng)前目錄下執(zhí)行命令 ## 編譯運(yùn)行的命令 npm install ## 啟動(dòng)當(dāng)前項(xiàng)目 npm run dev ##打開 http://localhost:8080/ 即可看到一個(gè) Vue 文檔風(fēng)格的網(wǎng)站搭建流程
1. 安裝node.js
Node.js 版本 >= 8.6
1、安裝Node.js,打開官網(wǎng)(http://nodejs.cn/),點(diǎn)擊下載相應(yīng)系統(tǒng)的文件。(Windows / MacOs)
安裝文件下載完成后,運(yùn)行并點(diǎn)擊下一步直至安裝結(jié)束(期間安裝的位置可自行選擇)
在終端(Windows cmd.exe,Macos 終端)執(zhí)行指令
npm -version
配置NPM淘寶鏡像,終端內(nèi)執(zhí)行
npm config set registry https://registry.npm.taobao.org #之后再執(zhí)行(檢查配置的是否正確) npm config get registry2. 安裝yarn
## 1.運(yùn)行命令 npm i yarn -g##-i:install ##-g:全局安裝(global),使用 -g 或 --global## 2. 輸入yarn -version 可以看到版本號(hào),說明安裝成功了。我們就可以在項(xiàng)目中像使用npm一樣使用yarn3. 起步操作
## 參考 https://www.vuepress.cn/guide/getting-started.html ## 1.新建的目錄 進(jìn)入prodoc makedir mydoc makedir prodoc cd prodoc ## 2.全局安裝 VuePress yarn add -D vuepress ## 3.初始化生成package.json yarn init -y ## 4.創(chuàng)建你的第一篇文檔(在prodoc目錄里新建) mkdir docs && echo '# Hello VuePress' > docs/README.md ## 5.添加主題 (在docs/README.md中添加) ## https://www.vuepress.cn/theme/default-theme-config.html 參考 --- home: true heroImage: /hero.png heroText: Hero 標(biāo)題 tagline: Hero 副標(biāo)題 actionText: 快速上手 → actionLink: /zh/guide/ features: - title: 簡潔至上details: 以 Markdown 為中心的項(xiàng)目結(jié)構(gòu),以最少的配置幫助你專注于寫作。 - title: Vue驅(qū)動(dòng)details: 享受 Vue + webpack 的開發(fā)體驗(yàn),在 Markdown 中使用 Vue 組件,同時(shí)可以使用 Vue 來開發(fā)自定義主題。 - title: 高性能details: VuePress 為每個(gè)頁面預(yù)渲染生成靜態(tài)的 HTML,同時(shí)在頁面被加載的時(shí)候,將作為 SPA 運(yùn)行。 footer: MIT Licensed | Copyright ? 2018-present Evan You --- ## 6.啟動(dòng) yarn docs:dev # npm run docs:dev ## VuePress 會(huì)在 http://localhost:8080 (opens new window) 啟動(dòng)一個(gè)熱重載的開發(fā)服務(wù)器。4. 導(dǎo)航目錄設(shè)置
4.1 設(shè)置logo
## 1.新建about目錄并新建README.md文檔 (docs中) ## 2.重啟服務(wù)后訪問鏈接 localhost:8080/about 即可看到注意: docs根目錄的md文件 會(huì)編譯成.html文件(無關(guān)緊要,可無視)
## https://www.vuepress.cn/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F 參考鏈接 ## 3. 新建目錄 .vuepress 在.vuepress下新建js config.js (docs中) ## 4. 在config中新增內(nèi)容 module.exports = {themeConfig: {logo: '/assets/img/logo.png',} } ## 5. 新建public文件 因?yàn)槭枪操Y源目錄 (默認(rèn)規(guī)則詳細(xì)查看 https://www.vuepress.cn/guide/directory-structure.html) ## 在 .vuepress 下新建 public 目錄 ## 在public下 新建/assets/img目錄 存放Logo4.2 導(dǎo)航欄鏈接
## https://www.vuepress.cn/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F 參考路徑 ## 在config.js中配置 themeConfig: {nav: [{ text: 'Home', link: '/' },{ text: 'Guide', link: '/guide/' },{ text: 'External', link: 'https://google.com' },]}5. 側(cè)邊欄
## https://www.vuepress.cn/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F 自動(dòng)生成參考路徑 ## https://www.vuepress.cn/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%88%86%E7%BB%84 側(cè)邊欄分組參考路徑5.1 自動(dòng)生成
// .vuepress/config.js module.exports = {themeConfig: {sidebar: 'auto'} }5.2 側(cè)邊欄分組
//測試?yán)?/span> module.exports = {themeConfig: {sidebar: ['','about',{title: '測邊框分層', // 必要的path: '/morethread/', // 可選的, 標(biāo)題的跳轉(zhuǎn)鏈接,應(yīng)為絕對路徑且必須存在collapsable: false, // 可選的, 默認(rèn)值是 true,sidebarDepth: 1, // 可選的, 默認(rèn)值是 1children: ['/morethread/bf','/morethread/test1',]}]} } //按照路徑分組 //https://www.vuepress.cn/theme/default-theme-config.html#%E5%A4%9A%E4%B8%AA%E4%BE%A7%E8%BE%B9%E6%A0%8F module.exports = {themeConfig: {sidebar: {'/morethread/': ['', /* /foo/ */'bf', /* /foo/one.html */'test1' /* /foo/two.html */],'/about/': ['', /* /bar/ */'test1' /* /bar/three.html */],}} } //自動(dòng)生成插件 https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar //鏈接 https://docs.shanyuhai.top/6. SEO
// https://www.vuepress.cn/config/#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE 參考文檔 // https://favicon.io/emoji-favicons/ 選一個(gè)ico圖標(biāo) // .vuepress/config.js module.exports = {title:"小光頭的java日記",description:"小光頭的java日記,java筆記,java面試",head: [['meta', { name: 'Keywords', content: '小光頭的java日記,java筆記,java面試' }],['meta', { name: 'description', content: '小光頭的java日記用心分享' }],['link', { rel: 'icon', href: '/assets/img/favicon.ico' }]] }7. 最后更新時(shí)間
// https://www.vuepress.cn/theme/default-theme-config.html#%E6%9C%80%E5%90%8E%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4 參考 //第一種 // .vuepress/config.js module.exports = {themeConfig: {lastUpdated: 'Last Updated', // string | boolean} } // 第二種 使用日期插件 //執(zhí)行命令 本地安裝moment yarn add moment// .vuepress/config.jsplugins: [['@vuepress/last-updated',{transformer: (timestamp) => {moment.locale("zh-cn");return moment(timestamp).fromNow("LLLL")}}]],8. 部署gitee
// https://www.vuepress.cn/guide/deploy.html#github-pages 文檔// docs/.vuepress/config.js// docs/ 1.修改 package.json {"name": "prodoc","version": "1.0.0","main": "index.js","repository": "https://github.com/gy297879328/prodoc.git","author": "gy <297879328@qq.com>","license": "MIT","scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs","deploy": "bash deploy.sh"},"devDependencies": {"@vuepress/back-to-top": "^1.5.0","vuepress": "^1.7.1"} } // docs/.vuepress/config.js// 2. 修改config.js 添加base屬性 上傳到github的庫名 module.exports = {title:"小光頭的java日記",description:"小光頭的java日記,java筆記,java面試",base:"/vuepresstest/", } // docs 3. 新建 deploy.sh 文件 #!/usr/bin/env sh# 確保腳本拋出遇到的錯(cuò)誤 set -e# 生成靜態(tài)文件 npm run docs:build# 進(jìn)入生成的文件夾 cd docs/.vuepress/dist# 如果是發(fā)布到自定義域名 # echo 'www.example.com' > CNAMEgit init git add -A git commit -m 'deploy'# 如果發(fā)布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 如果發(fā)布到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:gy297879328/vuepresstest.git master:gh-pagescd - // docs 4. 執(zhí)行編譯命令會(huì)生成html文件在(docs/.vuepress/dist) 目錄下上傳到服務(wù)器即可 npm run docs:build9. vssue評論
9.1 安裝到個(gè)體
// https://vssue.js.org/zh/guide/getting-started.html 官網(wǎng)//1.獲取vssue的授權(quán)碼(提前登陸自己的github賬號(hào)) https://github.com/settings/developers ## 2.本地安裝 yarn add @vssue/vuepress-plugin-vssue yarn add @vssue/api-github-v4 // 3.修改 docs/.vuepress/config.js//plugins: {'@vuepress/back-to-top':true,'@vssue/vuepress-plugin-vssue': {// 設(shè)置 `platform` 而不是 `api`platform: 'github-v4',// 其他的 Vssue 配置owner: 'gy297879328',//github用戶名repo: 'vuepresstest',//需要評論的倉庫clientId: '734e36fe47755fb32027',clientSecret: 'aa9953c892dc6235c8d95d622d2e2dc741247695',autoCreateIssue:true //自動(dòng)初始化倉庫},}, //4. 修改全局配置 //https://vssue.js.org/zh/options/#autocreateissue9.2 全局配置
// https://blog.csdn.net/weixin_43742708/article/details/109545561 參考博客 1. 首先我們先在 .vuepress 文件目錄下 新建 theme,再在該目錄下新建layouts目錄: 2. 然后下載git clone https://gitee.com/mirrors/VuePress.git 或者(本地的node_modules\@vuepress\theme-default模塊的也可以) 3. 進(jìn)入該文件的 packages\@vuepress\theme-default\layouts\ 把 Layout.vue拷貝到 我們剛才新建的 Layouts目錄下。 4. 進(jìn)入該文件的 packages\@vuepress\theme-default\目錄下把 util文件夾,也拷貝到 我們的 theme文件夾下。 5. 接下來在我們的theme 目錄下新建index.js,并添加如下配置: module.exports = {extend: '@vuepress/theme-default' } // 6.修改 Layout.vue 文件10. 百度統(tǒng)計(jì)插件
1. 獲取代碼
## https://blog.csdn.net/qq_39367226/article/details/107449882 ## 添加百度統(tǒng)計(jì)登陸后獲取代碼 https://tm.baidu.com/ <script> var _hmt = _hmt || []; (function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?0cbb5bf425c624587e0804d2122aea84";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>2. 修改config.js
// 配置給 head屬性 // 添加百度統(tǒng)計(jì)["script",{},`var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?0cbb5bf425c624587e0804d2122aea84";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();`]3.修改enhanceApp
// .vuepress/enhanceApp.js 沒有就新建 export default ({ router }) => {/*** 路由切換事件處理*/router.beforeEach((to, from, next) => {console.log("切換路由", to.fullPath, from.fullPath);//觸發(fā)百度的pv統(tǒng)計(jì)if (typeof _hmt != "undefined") {if (to.path) {_hmt.push(["_trackPageview", to.fullPath]);console.log("上報(bào)百度統(tǒng)計(jì)", to.fullPath);}}// continuenext();}); };11. 自動(dòng)生成側(cè)邊欄
## https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar ## 1.下載依賴 yarn add vuepress-plugin-auto-sidebar ## 2.添加插件 // .vuepress/config.js"vuepress-plugin-auto-sidebar": {}12. 美化插件(自選)
1. 鼠標(biāo)點(diǎn)擊特效插件
//鼠標(biāo)點(diǎn)擊特效 先安裝在配置, // 1. 下載: npm install vuepress-plugin-cursor-effects // 2. .vuepress/config.js plugins 中"cursor-effects":{size: 3, // size of the particle, default: 2shape: ['circle'], // shape of the particle, default: 'star'zIndex: 999999999 // z-index property of the canvas, default: 999999999}2. 復(fù)制插件
## https://www.npmjs.com/package/vuepress-plugin-copyright yarn add vuepress-plugin-copyright ## .vuepress/config.js plugins 中['copyright',{minLength: 10,noCopy: true,},]3. 動(dòng)態(tài)標(biāo)題
// 1. 下載: yarn add vuepress-plugin-dynamic-title // 2. .vuepress/config.js plugins 中"dynamic-title": {showIcon: "/assets/img/logo.png",showText: "(/≧▽≦/)你來啦!",hideIcon: "/assets/img/favicon.ico",hideText: "(●—●)喔喲,崩潰啦!",recoverTime: 2000}4. 驗(yàn)證碼的方式(待研究)
https://segmentfault.com/a/11900000382224125. 新增點(diǎn)擊的 富強(qiáng)愛國顯示
5.1 新建js
// .vuepress\public\js\MouseClickEffect.js var a_idx = 0;function getRandom(max, min) {return Math.floor(Math.random() * (max - min + 1) + min); } jQuery(document).ready(function ($) {$("body").click(function (e) {var a = new Array("富強(qiáng)", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業(yè)", "誠信", "友善");var $i = $("<span/>").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": `rgb(${getRandom(255,0)},${getRandom(255,0)},${getRandom(255,0)})`,"user-select": 'none',"cursor": 'default'});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function () {$i.remove();});}); });5.2 配置config
// 配置給 head屬性 // 引入jquery["script", {"language": "javascript","type": "text/javascript","src": "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"}],// 引入鼠標(biāo)點(diǎn)擊腳本["script", {"language": "javascript","type": "text/javascript","src": "/js/MouseClickEffect.js"}],13.部署發(fā)布
編譯文件
在根目錄下執(zhí)行 npm run build 命令會(huì)將md文檔編譯成html靜態(tài)頁(默認(rèn)生成在docs/.vuepress/dist下)
13. 服務(wù)器部署
13.1.1 上傳文件
將靜態(tài)頁放到 /home/vue_press 目錄下
13.1.2 安裝nginx
nginx下載地址:https://nginx.org/download/
## 1.解壓 tar -zxvf nginx nginx-1.18.0 ## 2.安裝gcc命令 yum -y install gcc pcre-devel zlib-devel openssl openssl-devel ## 3.編譯 ./configure # make make make install ## 4.啟動(dòng)日志會(huì)默認(rèn)生成到 /usr/local/nginx/sbin/nginx 下13.2 gitee上部署
13.3 github上部署
在github上部署,需要修改 docs.vuepress.config.js中的base屬性,里面需要填寫成新建庫的名字
靜態(tài)頁上傳到github上
- 分支必須選擇 main
- save以后 就會(huì)出現(xiàn)地址
安裝的yarn源(了解即可)
## 全局環(huán)境 yarn add -D vuepress yarn add moment ## 評論插件 yarn add @vssue/vuepress-plugin-vssue yarn add @vssue/api-github-v4## 自動(dòng)生成測邊框插件 npm i vuepress-plugin-auto-sidebar -D##鼠標(biāo)點(diǎn)擊特效 先安裝在配置, npm install vuepress-plugin-cursor-effects重要
總結(jié)
以上是生活随笔為你收集整理的最新最全vuepress零基础搭建(github搭建+新增插件)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 最新最全的java多线程基础总结(上)
- 下一篇: java 最新sql注入原因以及预防方案