feat: v5 style overhaul (#2469)
Style updates:
- New "core" theme serves as base for all other themes (official and third-party)
- New CSS custom properties for simplified customization of "core" theme
**Note:** List of available properties will be made available in documentation by embedding soruce CSS in docs after merge. Merge is required because embedded CSS needs to be in `main` branch. For now, see `_vars.css` and `_vars-advanced.css` for details.
- New theme "add-ons" modify core theme properties and/or add custom declarations as needed.
- New Prism.js theme support
- New configurable sidebar toggle design
- New typography defaults to system sans-serif and monospace fonts instead of relying on external web font.
- New "Core Dark" theme addon provide dark theme styles. Can optionally be applied based on operating system's light/dark setting using `@media` attribute on `<link>` element.
- New "Vue" theme addon. Closely replicated popular v4 theme while allowing for v5 enhancements.
- New CSS class names available for adding loading indicators, adding sidebar expand/collapse icons, adding sidebar group styles, clamping sidebar links to a single line with ellipses, and changing the sidebar toggle icon.
- New auto-generated gradient background for cover page (ensure gradient hue is > 50 degree apart, use OKLCH color if supported, randomize grandient angle, reduce brightness in dark mode)
- New button styles (basic, primary, secondary)
- New form element styles (text input, radio, checkbox, )
- New "callouts" (previously "important" and "tip" helpers)
- New default syntax highlighting theme (from [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/))
- New auto-generated theme color shade and tint colors
- New auto-generated monochromatic color palette
- New form element styles (fields, legend, text input, text area, checkbox, radio, toggles, and select)
- New "headerless" tables
- New `kbd` styles
- New task list style
- New merged navbar styles (consistent with sidebar nav styles)
- New search plugin styles and keyboard shortcut indicators
- Add ability restore previously focused content element after hiding sidebar
- Add "focus trap" when sidebar is visible on mobile (accessibility)
- Add ability for sidebar links to wrap by default (previous single-line w/ ellipsis display available as CSS class on `<body>` option)
- Add sidebar `page-link`, `group`, and `group-title` CSS classes to sidebar markup.
- Add reduced motion media query to set all animation/transition timings to zero
- Update Google Font imports (use new variable vs older fixed width fonts)
- Update primary/secondary button order on coverpage (primary should be first)
- Fix missing merged navbar when loading at desktop resolution then resizing to mobile
- Fix inverted open/close sidebar visibility state at desktop/mobile resolutions
- Fix overflow setting to prevent clipping of element focus ring
- Fix safe area inset margins on mobile in landscape orientation
- Fix inverted "tip" and "warn" class names
- Fix scroll padding to prevent headers from touching top edge of viewport when scrolled to
- Remove Stylus dependency (now using only PostCSS)
- Remove legacy themes "Buble", "Dark", "Dolphin", and "Pure".
Documentation updates:
- New "UI Kit" page showcasing all elements styled by Docsify
- Update "Quick Start" page template
- Update "Adding pages" page with information on how to properly create sidebar group titles and navbar drop-down menus
- Update "Themes" page with theme and class toggles
- Update "Configuration" page with deprecation warnings for `themeColor` and `topMargin`
- Move "Edit Page" link to footer
- Remove [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/) endorsement (currently not compatible with v5 and future is unknown)
Miscellaneous updates:
- New search plugin options: `insertBefore` and `insertAfter`
- Add PostCSS config file
- Update BrowserSync config (disable "ghost" mode)
- Update tests
- Fix Jest + Prettier 3 conflict
- Fix `getAndRemoveDocisfyIgnoreConfig` name type (now `Docisfy` => `Docsify`)
- Fix execution of sidebar-generating code when `hiddenSidebar` is `true`
- Remove `inBrowser` constant (SSR deprecated, so no longer needed)
2024-07-19 23:34:51 +08:00
# Adding pages
2017-02-13 22:43:58 +08:00
2017-02-21 14:04:16 +08:00
If you need more pages, you can simply create more markdown files in your docsify directory. If you create a file named `guide.md` , then it is accessible via `/#/guide` .
2017-02-13 22:43:58 +08:00
For example, the directory structure is as follows:
```text
2017-03-04 14:53:22 +08:00
.
2017-05-22 02:45:43 +08:00
└── docs
├── README.md
├── guide.md
└── zh-cn
├── README.md
└── guide.md
2017-02-13 22:43:58 +08:00
```
Matching routes
```text
docs/README.md => http://domain.com
2019-06-19 11:34:26 +08:00
docs/guide.md => http://domain.com/#/guide
docs/zh-cn/README.md => http://domain.com/#/zh-cn/
docs/zh-cn/guide.md => http://domain.com/#/zh-cn/guide
2017-02-13 22:43:58 +08:00
```
2017-12-24 19:06:45 +08:00
## Sidebar
2017-02-13 22:43:58 +08:00
2021-07-30 10:18:00 +08:00
In order to have a sidebar, you can create your own `_sidebar.md` (see [this documentation's sidebar ](https://github.com/docsifyjs/docsify/blob/master/docs/_sidebar.md ) for an example):
2017-02-13 22:43:58 +08:00
2018-02-11 20:12:07 +08:00
First, you need to set `loadSidebar` to **true** . Details are available in the [configuration paragraph ](configuration.md#loadsidebar ).
2017-02-13 22:43:58 +08:00
```html
2017-02-21 14:04:16 +08:00
<!-- index.html -->
2017-02-13 22:43:58 +08:00
< script >
window.$docsify = {
2023-08-09 17:53:30 +08:00
loadSidebar: true,
};
2017-02-13 22:43:58 +08:00
< / script >
2024-05-22 04:19:21 +08:00
< script src = "//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js" > < / script >
2017-02-13 22:43:58 +08:00
```
2017-02-21 14:04:16 +08:00
Create the `_sidebar.md` :
2017-02-13 22:43:58 +08:00
```markdown
2017-02-21 14:04:16 +08:00
<!-- docs/_sidebar.md -->
2023-08-09 17:53:30 +08:00
- [Home ](/ )
feat: v5 style overhaul (#2469)
Style updates:
- New "core" theme serves as base for all other themes (official and third-party)
- New CSS custom properties for simplified customization of "core" theme
**Note:** List of available properties will be made available in documentation by embedding soruce CSS in docs after merge. Merge is required because embedded CSS needs to be in `main` branch. For now, see `_vars.css` and `_vars-advanced.css` for details.
- New theme "add-ons" modify core theme properties and/or add custom declarations as needed.
- New Prism.js theme support
- New configurable sidebar toggle design
- New typography defaults to system sans-serif and monospace fonts instead of relying on external web font.
- New "Core Dark" theme addon provide dark theme styles. Can optionally be applied based on operating system's light/dark setting using `@media` attribute on `<link>` element.
- New "Vue" theme addon. Closely replicated popular v4 theme while allowing for v5 enhancements.
- New CSS class names available for adding loading indicators, adding sidebar expand/collapse icons, adding sidebar group styles, clamping sidebar links to a single line with ellipses, and changing the sidebar toggle icon.
- New auto-generated gradient background for cover page (ensure gradient hue is > 50 degree apart, use OKLCH color if supported, randomize grandient angle, reduce brightness in dark mode)
- New button styles (basic, primary, secondary)
- New form element styles (text input, radio, checkbox, )
- New "callouts" (previously "important" and "tip" helpers)
- New default syntax highlighting theme (from [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/))
- New auto-generated theme color shade and tint colors
- New auto-generated monochromatic color palette
- New form element styles (fields, legend, text input, text area, checkbox, radio, toggles, and select)
- New "headerless" tables
- New `kbd` styles
- New task list style
- New merged navbar styles (consistent with sidebar nav styles)
- New search plugin styles and keyboard shortcut indicators
- Add ability restore previously focused content element after hiding sidebar
- Add "focus trap" when sidebar is visible on mobile (accessibility)
- Add ability for sidebar links to wrap by default (previous single-line w/ ellipsis display available as CSS class on `<body>` option)
- Add sidebar `page-link`, `group`, and `group-title` CSS classes to sidebar markup.
- Add reduced motion media query to set all animation/transition timings to zero
- Update Google Font imports (use new variable vs older fixed width fonts)
- Update primary/secondary button order on coverpage (primary should be first)
- Fix missing merged navbar when loading at desktop resolution then resizing to mobile
- Fix inverted open/close sidebar visibility state at desktop/mobile resolutions
- Fix overflow setting to prevent clipping of element focus ring
- Fix safe area inset margins on mobile in landscape orientation
- Fix inverted "tip" and "warn" class names
- Fix scroll padding to prevent headers from touching top edge of viewport when scrolled to
- Remove Stylus dependency (now using only PostCSS)
- Remove legacy themes "Buble", "Dark", "Dolphin", and "Pure".
Documentation updates:
- New "UI Kit" page showcasing all elements styled by Docsify
- Update "Quick Start" page template
- Update "Adding pages" page with information on how to properly create sidebar group titles and navbar drop-down menus
- Update "Themes" page with theme and class toggles
- Update "Configuration" page with deprecation warnings for `themeColor` and `topMargin`
- Move "Edit Page" link to footer
- Remove [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/) endorsement (currently not compatible with v5 and future is unknown)
Miscellaneous updates:
- New search plugin options: `insertBefore` and `insertAfter`
- Add PostCSS config file
- Update BrowserSync config (disable "ghost" mode)
- Update tests
- Fix Jest + Prettier 3 conflict
- Fix `getAndRemoveDocisfyIgnoreConfig` name type (now `Docisfy` => `Docsify`)
- Fix execution of sidebar-generating code when `hiddenSidebar` is `true`
- Remove `inBrowser` constant (SSR deprecated, so no longer needed)
2024-07-19 23:34:51 +08:00
- [Page 1 ](page-1.md )
```
To create section headers:
```markdown
<!-- docs/_sidebar.md -->
- Section Header 1
- [Home ](/ )
- [Page 1 ](page-1.md )
- Section Header 2
- [Page 2 ](page-2.md )
- [Page 3 ](page-3.md )
2017-02-13 22:43:58 +08:00
```
2017-12-24 19:06:45 +08:00
You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore.
2017-02-13 22:43:58 +08:00
2020-07-07 13:30:19 +08:00
!> Docsify only looks for `_sidebar.md` in the current folder, and uses that, otherwise it falls back to the one configured using `window.$docsify.loadSidebar` config.
Example file structure:
```text
└── docs/
├── _sidebar.md
├── index.md
├── getting-started.md
└── running-services.md
```
2018-09-17 17:19:31 +08:00
## Nested Sidebars
2021-07-30 10:18:00 +08:00
You may want the sidebar to update after navigation to reflect the current directory. This can be done by adding a `_sidebar.md` file to each folder.
2018-09-17 17:19:31 +08:00
2018-02-11 20:12:07 +08:00
`_sidebar.md` is loaded from each level directory. If the current directory doesn't have `_sidebar.md` , it will fall back to the parent directory. If, for example, the current path is `/guide/quick-start` , the `_sidebar.md` will be loaded from `/guide/_sidebar.md` .
2017-02-13 22:43:58 +08:00
2018-01-31 13:13:16 +08:00
You can specify `alias` to avoid unnecessary fallback.
```html
< script >
window.$docsify = {
loadSidebar: true,
alias: {
2023-08-09 17:53:30 +08:00
'/.*/_sidebar.md': '/_sidebar.md',
},
};
2018-01-31 13:13:16 +08:00
< / script >
```
2017-12-24 19:06:45 +08:00
2018-09-17 17:19:31 +08:00
!> You can create a `README.md` file in a subdirectory to use it as the landing page for the route.
2019-01-05 16:19:54 +08:00
## Set Page Titles from Sidebar Selection
A page's `title` tag is generated from the _selected_ sidebar item name. For better SEO, you can customize the title by specifying a string after the filename.
```markdown
<!-- docs/_sidebar.md -->
2023-08-09 17:53:30 +08:00
- [Home ](/ )
- [Guide ](guide.md 'The greatest guide in the world' )
2019-01-05 16:19:54 +08:00
```
2017-02-13 22:43:58 +08:00
## Table of Contents
2018-01-31 13:13:16 +08:00
Once you've created `_sidebar.md` , the sidebar content is automatically generated based on the headers in the markdown files.
2017-12-24 19:06:45 +08:00
2018-02-11 20:12:07 +08:00
A custom sidebar can also automatically generate a table of contents by setting a `subMaxLevel` , compare [subMaxLevel configuration ](configuration.md#submaxlevel ).
2017-02-13 22:43:58 +08:00
```html
2017-02-21 14:04:16 +08:00
<!-- index.html -->
2017-02-13 22:43:58 +08:00
< script >
window.$docsify = {
loadSidebar: true,
2023-08-09 17:53:30 +08:00
subMaxLevel: 2,
};
2017-02-13 22:43:58 +08:00
< / script >
2024-05-22 04:19:21 +08:00
< script src = "//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js" > < / script >
2017-03-04 14:53:22 +08:00
```
2017-03-15 15:50:26 +08:00
## Ignoring Subheaders
2020-07-30 18:11:04 +08:00
When `subMaxLevel` is set, each header is automatically added to the table of contents by default. If you want to ignore a specific header, add `<!-- {docsify-ignore} -->` to it.
2017-03-15 15:50:26 +08:00
```markdown
# Getting Started
2020-07-30 18:11:04 +08:00
## Header <!-- {docsify-ignore} -->
2018-02-11 20:12:07 +08:00
2017-03-15 15:50:26 +08:00
This header won't appear in the sidebar table of contents.
```
2020-07-30 18:11:04 +08:00
To ignore all headers on a specific page, you can use `<!-- {docsify-ignore-all} -->` on the first header of the page.
2017-03-15 15:50:26 +08:00
```markdown
2020-07-30 18:11:04 +08:00
# Getting Started <!-- {docsify-ignore-all} -->
2017-03-15 15:50:26 +08:00
2017-10-31 21:19:48 +08:00
## Header
2018-02-11 20:12:07 +08:00
2017-03-15 15:50:26 +08:00
This header won't appear in the sidebar table of contents.
```
2020-07-30 18:11:04 +08:00
Both `<!-- {docsify-ignore} -->` and `<!-- {docsify-ignore-all} -->` will not be rendered on the page when used.
2023-02-23 16:01:11 +08:00
And the `{docsify-ignore}` and `{docsify-ignore-all}` can do the samething as well.