时间:2023-02-08 00:20:01 | 来源:建站知识
时间:2023-02-08 00:20:01 来源:建站知识
<user>.github.io
的仓库。想要创建更多的GitHub Pages页面,可以通过创建项目站点实现。项目站点的数量没有限制。Settings
,找到GitHub Pages部分,选择一个主题,之后可以再改,不选择的话页面可能会无法加载Enforce HTTPS
,否则访问时会出现安全警告。<username>.github.io/<projectname>
访问到了package.json
中添加一些 scripts---home: trueheroImage: /logo.jpgheroText: Giria's learning recordtagline: 个人前端学习记录actionText: 一起梳理 →actionLink: /source/element/sidebar: falsefeatures:- title: 源码学习 details: Element UI + Vue 源码- title: 书籍学习 details: 记录相关书籍的学习路径- title: 前端相关 details: 各代码库的学习,包括不限于NodeJS、NuxtJS、多种视图组件库等footer: MIT Licensed | Copyright © 2020-present Giria---::: tip 更多博客文章可移步[Giria's Blog](https://www.giriawsh.com):::
module.exports = { themeConfig: { sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题,显示在侧边栏上。 lastUpdated: 'Last Updated',// 文档更新时间:每个文件git最后提交的时间 searchMaxSuggestions: 10, nav: [ {text: '主页', link: '/'}, { text: '源码学习', items: [ {text: "Element UI", link: '/source/element/'}, {text: "Vue", link: '/source/vue/'} ], }, { text: '书籍学习', items: [ {text: "JavaScript权威指南", link: '/books/theDefinitiveGuideToJavaScript/'} ], }, { text: '前端相关', items: [ {text: "Node.js", link: '/fe/nodejs/'}, {text: "Vue.js", link: '/fe/vuejs/'}, {text: "SVG.js", link: '/fe/svgjs/'}, {text: "Nuxt框架", link: '/fe/nuxtjs/'}, ], }, {text: '博客文章', link: 'https://www.giriawsh.com'},//外链,可进行跳转 ], }}
目录组织结构如下:// .vuepress/config.jsmodule.exports = { themeConfig: { nav: [ { text: '前端相关', items: [ { text: "JS库相关", items: [ {text: "Node.js", link: '/fe/nodejs/'}, {text: "Vue.js", link: '/fe/vuejs/'}, {text: "SVG.js", link: '/fe/svgjs/'}, ] }, { text: "框架相关", items: [ {text: "Nuxt框架", link: '/fe/nuxtjs/'}, ] }, ], }, ] }}
效果如下:themeConfig.logo
增加导航栏 Logo ,Logo 可以被放置在公共文件目录:// .vuepress/config.jsmodule.exports = { themeConfig: { logo: '/assets/img/logo.png', }}
module.exports = { themeConfig: { sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题,显示在侧边栏上。 lastUpdated: 'Last Updated',// 文档更新时间:每个文件git最后提交的时间 sidebar: { '/source/element/': [ { title: 'Element源码分析', collapsable: false, children: [ '/source/element/1', '/source/element/2',]//这里的顺序决定了在侧边栏中从上到下显示的顺序 } ], '/source/vue/': [ { title: 'Vue源码分析', collapsable: false, children: [] } ], '/books/theDefinitiveGuideToJavaScript/': [ { title: 'JavaScript权威指南', collapsable: false, children: [ '/books/theDefinitiveGuideToJavaScript/1', '/books/theDefinitiveGuideToJavaScript/2', '/books/theDefinitiveGuideToJavaScript/3', '/books/theDefinitiveGuideToJavaScript/4', '/books/theDefinitiveGuideToJavaScript/5', ], } ], '/fe/nodejs/': [ { title: 'NodeJS初学', collapsable: false, children: [ '/fe/nodejs/start/1', '/fe/nodejs/start/2', '/fe/nodejs/start/3', '/fe/nodejs/start/4', ] }, { title: 'NodeJS深入学习', collapsable: false, children: [ '/fe/nodejs/second/test' ] } ], '/fe/svgjs/': [ { title: 'SVG学习记录', collapsable: false, children: [ '/fe/svgjs/1', '/fe/svgjs/2', '/fe/svgjs/3', ] }, ] } },};
如果想要达到如下多个分组的效果,可查看上面代码中的'/fe/nodejs/'
部分,进行多个对象的配置。(上面代码为了直观省略了文件名)module.exports = { // 注入到当前页面的 HTML <head> 中的标签 head: [ ['link', {rel: 'icon', href: '/pencil.png'}], // 增加一个自定义的 favicon(网页标签的图标) ],}
$accentColor = #e6be00//默认主题颜色$textColor = red//默认字体颜色$borderColor = #eaecef//默认边框颜色$codeBgColor = #282c34//默认背景颜色示例修改相关样式f12找到需要修改的地方找到对应class类拿过来直接用就行了.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){ opacity :1}
更多可参考:docs/.vuepress/config.js
中设置正确的 base
。https://<USERNAME>.github.io/
,则可以省略这一步,因为 base
默认即是 "/"
。https://<USERNAME>.github.io/<REPO>/
(也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>
),则将 base
设置为 "/<REPO>/"
。deploy.sh
文件(请自行判断去掉高亮行的注释)放置到根目录中:#!/usr/bin/env sh# 确保脚本抛出遇到的错误set -e# 生成静态文件npm run docs:build# 进入生成的文件夹cd docs/.vuepress/dist# 如果是发布到自定义域名# echo 'www.example.com' > CNAME# 后续这里我们会发布到二级域名,像我的就需要像下面这么写:echo 'record.giriawsh.com' > CNAMEgit initgit add -Agit commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 如果发布到 https://<USERNAME>.github.io/<REPO># git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pagescd -
这样我们之后每次修改后只需要点击这个脚本进行运行即可部署。https://<USERNAME>.github.io/<REPO>
访问到部署后的页面了如果是参照了我之前的配置方案,这里不用写成http://record.giriawsh.com,因为它会自己映射添加,写二级子域名名称record即可
关键词:配置