mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
77d93fae78
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)
152 lines
4.0 KiB
Markdown
152 lines
4.0 KiB
Markdown
# Quick start
|
|
|
|
It is recommended to install `docsify-cli` globally, which helps initializing and previewing the website locally.
|
|
|
|
```bash
|
|
npm i docsify-cli -g
|
|
```
|
|
|
|
## Initialize
|
|
|
|
If you want to write the documentation in the `./docs` subdirectory, you can use the `init` command.
|
|
|
|
```bash
|
|
docsify init ./docs
|
|
```
|
|
|
|
## Writing content
|
|
|
|
After the `init` is complete, you can see the file list in the `./docs` subdirectory.
|
|
|
|
- `index.html` as the entry file
|
|
- `README.md` as the home page
|
|
- `.nojekyll` prevents GitHub Pages from ignoring files that begin with an underscore
|
|
|
|
You can easily update the documentation in `./docs/README.md`, of course you can add [more pages](more-pages.md).
|
|
|
|
## Preview your site
|
|
|
|
Run the local server with `docsify serve`. You can preview your site in your browser on `http://localhost:3000`.
|
|
|
|
```bash
|
|
docsify serve docs
|
|
```
|
|
|
|
?> For more use cases of `docsify-cli`, head over to the [docsify-cli documentation](https://github.com/docsifyjs/docsify-cli).
|
|
|
|
## Manual initialization
|
|
|
|
Download or create an `index.html` template using the following markup:
|
|
|
|
<div id="template">
|
|
|
|
<a href="#" class="button primary" download="index.html">Download Template</a>
|
|
|
|
<!-- prettier-ignore -->
|
|
```html
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
|
|
<!-- Core Theme -->
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/themes/core.min.css">
|
|
</head>
|
|
<body class="loading">
|
|
<div id="app"></div>
|
|
|
|
<!-- Configuration -->
|
|
<script>
|
|
window.$docsify = {
|
|
//...
|
|
};
|
|
</script>
|
|
|
|
<!-- Docsify.js -->
|
|
<script src="//cdn.jsdelivr.net/npm/docsify@5"></script>
|
|
|
|
<!-- Plugins (optional) -->
|
|
<!-- <script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/search.min.js"></script> -->
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
</div>
|
|
|
|
### Specifying docsify versions
|
|
|
|
?> Note that in both of the examples below, docsify URLs will need to be manually updated when a new major version of docsify is released (e.g. `v5.x.x` => `v6.x.x`). Check the docsify website periodically to see if a new major version has been released.
|
|
|
|
Specifying a major version in the URL (`@5`) will allow your site to receive non-breaking enhancements (i.e. "minor" updates) and bug fixes (i.e. "patch" updates) automatically. This is the recommended way to load docsify resources.
|
|
|
|
<!-- prettier-ignore -->
|
|
```html
|
|
<!-- Core Theme -->
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/themes/core.min.css">
|
|
|
|
<!-- Docsify -->
|
|
<script src="//cdn.jsdelivr.net/npm/docsify@5"></script>
|
|
```
|
|
|
|
If you prefer to lock docsify to a specific version, specify the full version after the `@` symbol in the URL. This is the safest way to ensure your site will look and behave the same way regardless of any changes made to future versions of docsify.
|
|
|
|
<!-- prettier-ignore -->
|
|
```html
|
|
<!-- Core Theme -->
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5.0.0/themes/core.min.css">
|
|
|
|
<!-- Docsify -->
|
|
<script src="//cdn.jsdelivr.net/npm/docsify@5.0.0"></script>
|
|
```
|
|
|
|
### Manually preview your site
|
|
|
|
If you have Python installed on your system, you can easily use it to run a static server to preview your site.
|
|
|
|
```python
|
|
# Python 2
|
|
cd docs && python -m SimpleHTTPServer 3000
|
|
```
|
|
|
|
```python
|
|
# Python 3
|
|
cd docs && python -m http.server 3000
|
|
```
|
|
|
|
## Loading dialog
|
|
|
|
If you want, you can show a loading dialog before docsify starts to render your documentation:
|
|
|
|
```html
|
|
<!-- index.html -->
|
|
|
|
<div id="app">Please wait...</div>
|
|
```
|
|
|
|
You should set the `data-app` attribute if you changed `el`:
|
|
|
|
```html
|
|
<!-- index.html -->
|
|
|
|
<div data-app id="main">Please wait...</div>
|
|
|
|
<script>
|
|
window.$docsify = {
|
|
el: '#main',
|
|
};
|
|
</script>
|
|
```
|
|
|
|
Compare [el configuration](configuration.md#el).
|
|
|
|
<script>
|
|
(function() {
|
|
const linkElm = document.querySelector('#template a[download="index.html"]');
|
|
const codeElm = document.querySelector('#template code');
|
|
const html = codeElm?.textContent;
|
|
|
|
linkElm?.setAttribute('href', `data:text/plain,${html}`);
|
|
})();
|
|
</script>
|