时间：2023-07-09 23:27:01 | 来源：网站运营
时间：2023-07-09 23:27:01 来源：网站运营
Vuepress+Vercel 搭建个人站点：https://vuepress.vuejs.org/zh/
https://vercel.com/
在线咨询
# cd 项目npm init -ygit iniynpm install -D vuepressnpm install -D vuepress-theme-vdoing # 主题美化工具项目结构调整如下|— 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: 前端总结 details: JavaScript、ES6、Vue 框架以及 html(5)/css(3)，前端页面相关技术 link: /web/ imgUrl: /images/web.png # 图片以 docs/.vuepress/public 为根节点- 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 运行项目之后可以已经可以看到如下的页面了 npm run build 打包完一般在 docs/.vuepress/dist 目录module.exports = { theme: 'vdoing', // 使用主题插件 vuepress-theme-vdoing title: '阿誉的博客', // 网站的标题，它将显示在导航栏（navbar）上 description: '刘誉的博客', // 网站的描述，它将会以 <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: '前端总结', link: '/web/', items: [ { text: 'JavaScript', items: [ { text: '构造函数和原型', link: '/pages/39a948/' }, // 哈希链接是在你运行项目状态下，新增 markdown 文件自动生成的 { text: 'Cookie和Session', link: '/pages/255011/' }, ], }, { text: 'TypeScript配置', link: '/pages/0bea56/' }, ], }, ], },}此时页面效果如下 |— docs |— README.md |— .vuepress |— config.js |— 00.目录页 |— 01.前端总结.md |— 01.前端总结 |— 01.构造函数和原型.md |— public |— favicon.ico |— images # 暂时随便找点图片 |— web.png |— note.png |— project.png |— au.png|— node_modules|— .gitignore|— package.jsondocs/01.前端总结/01.前端总结.md 文件内容如下---title: 构造函数和原型date: 2021-03-24 12:06:20permalink: /pages/39a948/ # 这个是 docs/.vuepress/config.js 文件中themeConfig.nav 里面的 link 指向的地址categories: - 前端总结tags: -docs/00.目录页/01.前端总结.md 文件内容如下---pageComponent: name: Catalogue data: key: 01.前端总结 imgUrl: /images/web.png description: JavaScript、ES6、Vue框架以及html(5)/css(3)，前端页面相关技术title: 前端总结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: '阿誉的博客', // 网站的标题，它将显示在导航栏（navbar）上 description: '刘誉的博客', // 网站的描述，它将会以 <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: '前端总结', link: '/web/', items: [ { text: 'JavaScript', items: [ { text: '构造函数和原型', link: '/pages/39a948/' }, // 哈希链接是在你运行项目状态下，新增 markdown 文件自动生成的 { text: 'Cookie和Session', link: '/pages/255011/' }, ], }, { text: 'TypeScript配置', link: '/pages/0bea56/' }, ], }, ], }, plugins: [ [ 'vuepress-plugin-baidu-tongji', // 百度统计 { hm: '0127fd7df37b0f6903bf4c50236f10f3', // 百度统计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') }, }, ], ],}百度统计官网
hm 值 ;[ 'vuepress-plugin-baidu-tongji', // 百度统计 { hm: '0127fd7df37b0f6903bf4c50236f10f3', // 复制到这里 },]GitHub::: 如果暂时网站没有部署，可以先跳过 :::
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 的内容 }, },]https://vercel.com/
关键词：
