時間：2023-07-09 23:27:01 | 來源：網(wǎng)站運營
時間：2023-07-09 23:27:01 來源：網(wǎng)站運營
Vuepress+Vercel 搭建個人站點：https://vuepress.vuejs.org/zh/
https://vercel.com/
在線咨詢
# cd 項目npm init -ygit iniynpm install -D vuepressnpm install -D vuepress-theme-vdoing # 主題美化工具項目結(jié)構(gòu)調(diào)整如下|— docs |— README.md |— .vuepress |— config.js |— public |— favicon.ico |— images # 暫時隨便找點圖片 |— web.png |— note.png |— project.png |— au.png|— node_modules|— .gitignore|— package.jsondocs/.vuepress/README.md 文件增加如下代碼---home: trueheroImage: /images/au.png # 顯示在主頁的圖片tagline: 不積跬步無以至千里 # 顯示在主頁的標題features: # 顯示在主頁的分類- title: 前端總結(jié) details: JavaScript、ES6、Vue 框架以及 html(5)/css(3)，前端頁面相關技術 link: /web/ imgUrl: /images/web.png # 圖片以 docs/.vuepress/public 為根節(jié)點- title: 學習筆記 details: Vue、axios、插件等源碼的理解 link: /note/ imgUrl: /images/note.png- title: 項目積累 details: 開源的項目以及項目中遇到的問題及其解決方法 link: /project/ imgUrl: /images/project.pngfooter: MIT Licensed | Copyright ? 2021-present coderlypackage.json 文件修改如下代碼"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs", "test": "echo /"Error: no test specified/" && exit 1"}此時，npm run dev 運行項目之后可以已經(jīng)可以看到如下的頁面了 npm run build 打包完一般在 docs/.vuepress/dist 目錄module.exports = { theme: 'vdoing', // 使用主題插件 vuepress-theme-vdoing title: '阿譽的博客', // 網(wǎng)站的標題，它將顯示在導航欄（navbar）上 description: '劉譽的博客', // 網(wǎng)站的描述，它將會以 <meta> 標簽渲染到當前頁面的 HTML 中 base: '/', head: [ ['link', { rel: 'icon', href: '/favicon.ico' }], // <link> 標簽，插入到 <head></head>之間 ], themeConfig: { sidebarDepth: 2, rightMenuBar: true, pageButton: true, sidebar: { mode: 'structuring', collapsable: true, }, nav: [ { text: '首頁', link: '/' }, { text: '前端總結(jié)', link: '/web/', items: [ { text: 'JavaScript', items: [ { text: '構(gòu)造函數(shù)和原型', link: '/pages/39a948/' }, // 哈希鏈接是在你運行項目狀態(tài)下，新增 markdown 文件自動生成的 { text: 'Cookie和Session', link: '/pages/255011/' }, ], }, { text: 'TypeScript配置', link: '/pages/0bea56/' }, ], }, ], },}此時頁面效果如下 |— docs |— README.md |— .vuepress |— config.js |— 00.目錄頁 |— 01.前端總結(jié).md |— 01.前端總結(jié) |— 01.構(gòu)造函數(shù)和原型.md |— public |— favicon.ico |— images # 暫時隨便找點圖片 |— web.png |— note.png |— project.png |— au.png|— node_modules|— .gitignore|— package.jsondocs/01.前端總結(jié)/01.前端總結(jié).md 文件內(nèi)容如下---title: 構(gòu)造函數(shù)和原型date: 2021-03-24 12:06:20permalink: /pages/39a948/ # 這個是 docs/.vuepress/config.js 文件中themeConfig.nav 里面的 link 指向的地址categories: - 前端總結(jié)tags: -docs/00.目錄頁/01.前端總結(jié).md 文件內(nèi)容如下---pageComponent: name: Catalogue data: key: 01.前端總結(jié) imgUrl: /images/web.png description: JavaScript、ES6、Vue框架以及html(5)/css(3)，前端頁面相關技術title: 前端總結(jié)categories: - 目錄頁date: 2020-03-11 21:50:53permalink: /web # 鏈接sidebar: falsearticle: falsecomment: falseeditLink: false---npm i -D vuepress-plugin-baidu-tongji @vuepress/plugin-nprogress vuepress-plugin-zooming vuepress-plugin-one-click-copy vuepress-plugin-comment @vuepress/plugin-last-updated 修改 docs/.vuepress/config.js 文件如下module.exports = { theme: 'vdoing', // 使用主題插件 vuepress-theme-vdoing title: '阿譽的博客', // 網(wǎng)站的標題，它將顯示在導航欄（navbar）上 description: '劉譽的博客', // 網(wǎng)站的描述，它將會以 <meta> 標簽渲染到當前頁面的 HTML 中 base: '/', head: [ ['link', { rel: 'icon', href: '/favicon.ico' }], // <link> 標簽，插入到 <head></head>之間 ], themeConfig: { sidebarDepth: 2, rightMenuBar: true, pageButton: true, sidebar: { mode: 'structuring', collapsable: true, }, nav: [ { text: '首頁', link: '/' }, { text: '前端總結(jié)', link: '/web/', items: [ { text: 'JavaScript', items: [ { text: '構(gòu)造函數(shù)和原型', link: '/pages/39a948/' }, // 哈希鏈接是在你運行項目狀態(tài)下，新增 markdown 文件自動生成的 { text: 'Cookie和Session', link: '/pages/255011/' }, ], }, { text: 'TypeScript配置', link: '/pages/0bea56/' }, ], }, ], }, plugins: [ [ 'vuepress-plugin-baidu-tongji', // 百度統(tǒng)計 { hm: '0127fd7df37b0f6903bf4c50236f10f3', // 百度統(tǒng)計id，后面有獲取教程 }, ], '@vuepress/nprogress', // 切換進度條 [ 'vuepress-plugin-zooming', // 放大圖片 { selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的圖片 options: { bgColor: 'rgba(0,0,0,0.6)', }, }, ], [ 'one-click-copy', // 復制 { copySelector: [ 'div[class*="language-"] pre', 'div[class*="aside-code"] aside', ], copyMessage: '復制成功', duration: 1000, showInMobile: false, }, ], [ 'vuepress-plugin-comment', // 評論 { choosen: 'gitalk', // 后面有獲取教程 options: { clientID: 'ee27cddb54c708e69312', clientSecret: '78700378974e4e0682b1d8c67b7c86ea6912d243', repo: 'au-blog', owner: 'coderlyu', admin: ['coderlyu'], pagerDirection: 'last', id: '<%- (frontmatter.permalink || frontmatter.to.path || "123456789012345").slice(-16) %>', title: '「評論」<%- frontmatter.title %>', labels: ['Gitalk', 'Comment'], body: '頁面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname || "123456789012345") %>', }, }, ], [ '@vuepress/last-updated', // 時間顯示格式 { transformer: (timestamp, lang) => { return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss') }, }, ], ],}百度統(tǒng)計官網(wǎng)
hm 值 ;[ 'vuepress-plugin-baidu-tongji', // 百度統(tǒng)計 { hm: '0127fd7df37b0f6903bf4c50236f10f3', // 復制到這里 },]GitHub::: 如果暫時網(wǎng)站沒有部署，可以先跳過 :::
au-blog 存儲庫為例 允許 Github 第三方登錄 ;[ 'vuepress-plugin-comment', // 評論 { choosen: 'gitalk', options: { clientID: 'ee27cddb54c708e69312', // 第三方登錄 clientID clientSecret: '78700378974e4e0682b1d8c67b7c86ea6912d243', // 第三方登錄 clientSecret repo: 'au-blog', // 你的存儲庫 owner: 'coderlyu', // 存儲庫擁有者，填你的 Github 賬戶 admin: ['coderlyu'], // 對倉庫有寫權限的人，填你的 Github 賬戶 pagerDirection: 'last', id: '<%- (frontmatter.permalink || frontmatter.to.path || "123456789012345").slice(-16) %>', // 頁面的唯一標識,長度不能超過50 title: '「評論」<%- frontmatter.title %>', // GitHub issue 的標題 labels: ['Gitalk', 'Comment'], // GitHub issue 的標簽 body: '頁面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname || "123456789012345") %>', // GitHub issue 的內(nèi)容 }, },]https://vercel.com/
關鍵詞：
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
