From eaf15bcc40aa11ec22103ccfff20a21405605951 Mon Sep 17 00:00:00 2001 From: Goozoon Date: Thu, 8 Dec 2022 16:09:31 +0100 Subject: [PATCH 1/4] Update theme-sidebar.md Added Multi-level Sidebar description and example --- docs/guide/theme-sidebar.md | 62 +++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/docs/guide/theme-sidebar.md b/docs/guide/theme-sidebar.md index 21d78723d8d9..319e30423f7f 100644 --- a/docs/guide/theme-sidebar.md +++ b/docs/guide/theme-sidebar.md @@ -161,3 +161,65 @@ export default { } } ``` + +## Multi-level Sidebar + +You can also create multi-level sidebars. For example: + +``` +. +├─ guide/ +│ ├─ index +│ ├─ one +│ │ ├─ one-one +│ │ └─ one-two +│ └─ two +└─ config/ + ├─ index + ├─ three + └─ four +``` + +Then, update your configuration to define your sidebar for each section and subsection. + +```js +export default { + themeConfig: { + sidebar: { + // This sidebar gets displayed when user is + // under `guide` directory. + '/guide/': [ + { + text: 'Guide', + items: [ + // This shows `/guide/index.md` page. + { text: 'Index', link: '/guide/' }, // /guide/index.md + { text: 'One', link: '/guide/one' }, // /guide/one.md + { + items: [ + { text: 'One One', link: '/guide/one-one/' }, // /guide/one-one.md + { text: 'One Two', link: '/guide/one-two/' }, // /guide/one-two.md + ] + }, + { text: 'Two', link: '/guide/two' } // /guide/two.md + ] + } + ], + + // This sidebar gets displayed when user is + // under `config` directory. + '/config/': [ + { + text: 'Config', + items: [ + // This shows `/config/index.md` page. + { text: 'Index', link: '/config/' }, // /config/index.md + { text: 'Three', link: '/config/three' }, // /config/three.md + { text: 'Four', link: '/config/four' } // /config/four.md + ] + } + ] + } + } +} +``` From ef0e8f91acec7626fd2bb7b1f9ed3250cb953b61 Mon Sep 17 00:00:00 2001 From: Goozoon Date: Thu, 8 Dec 2022 17:54:23 +0100 Subject: [PATCH 2/4] Update theme-introduction.md Customizing fonts and Google Fonts --- docs/guide/theme-introduction.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md index f2ef177464d3..ea06c6177b94 100644 --- a/docs/guide/theme-introduction.md +++ b/docs/guide/theme-introduction.md @@ -144,6 +144,37 @@ export default DefaultTheme See [default theme CSS variables](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) that can be overridden. +### Customizing Fonts + +You can override default font by adding any other (Open Sans, for example) from Google Fonts library. + +```js +/* .vitepress/config.js */ +export default { + // These are app level configs. + lang: 'en-US', + title: 'Vitepress', + + head: [ + ['link', + { rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap' + } + ], + ], +``` + + +```css +/* .vitepress/theme/custom.css */ +:root { + --vp-font-family-base: 'Open Sans'; +``` + +:::tip +For both Regular and Italic only 400, 500, 600, 700 styles are used. +::: + ### Layout Slots The default theme's `` component has a few slots that can be used to inject content at certain locations of the page. Here's an example of injecting a component into the before outline: From c184ec947113087de66884578319f9fb4089fbb1 Mon Sep 17 00:00:00 2001 From: Goozoon Date: Thu, 15 Dec 2022 15:27:05 +0100 Subject: [PATCH 3/4] Update vp-doc.css 2.5rem padding for OL list, to have it visually more common Add: ul-ul circle ul-ul-ul square --- src/client/theme-default/styles/components/vp-doc.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index 7220523c7389..884d17cee5fe 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -115,7 +115,7 @@ .vp-doc ul, .vp-doc ol { - padding-left: 1.25rem; + padding-left: 2.5rem; margin: 16px 0; } @@ -123,6 +123,14 @@ list-style: disc; } +.vp-doc ul ul { + list-style: circle; +} + +.vp-doc ul ul ul { + list-style: square; +} + .vp-doc ol { list-style: decimal; } From 5354453e9c5c8397feec894a533f9435188e860a Mon Sep 17 00:00:00 2001 From: Goozoon Date: Thu, 15 Dec 2022 17:00:32 +0100 Subject: [PATCH 4/4] Update vp-doc.css changed ol padding-left 2.2 added li padding-left 10px --- src/client/theme-default/styles/components/vp-doc.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index 884d17cee5fe..7d8768d33511 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -115,10 +115,14 @@ .vp-doc ul, .vp-doc ol { - padding-left: 2.5rem; + padding-left: 2.2rem; margin: 16px 0; } +.vp-doc li { + padding-left: 10px; + } + .vp-doc ul { list-style: disc; }