mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
35002c92b7
* Render native emoji with image fallback Fix #779 * Deprecate emoji plugin * Add emoji tests * Remove console.log statement * Fix emoji image alt attribute * Set nativeEmoji to false by default (non-breaking) * Fix parsing emoji in HTML comments and script tags * Add nativeEmoji and update noEmoji details * Add Emoji plugin deprecation notice * Fix ESLint issues * Create build:emoji task - Auto-generate emoji data from GitHub API - Auto-generate emoji markdown for website - Add emoji page to navigation * Fix rendering of GitHub emoji without unicode * Adjust and match size of native and image emoji * Update emoji test snapshot * Update docs test snapshot * Fix ci/codesandbox error * Update native emoji font-stack * Fix rendering of native multi-character emoji * Kick GitHub Workflow * Replace rollup’s uglify plugin with terser * Switch “npm ci” instead of “npm i” for stability * Change emoji data from default to named export * Revert "Replace rollup’s uglify plugin with terser" This reverts commit 7ba85136361c72839516900d91cca806fac94fee. * Revert "Switch “npm ci” instead of “npm i” for stability" This reverts commit d52b476a387250740d934e8fd7df7ba274dd17a0. * Revert "Change emoji data from default to named export" This reverts commit 3f2dd467cf9c7a74d8c53c2ee52cc63837b00a3c. * Specify codesandbox template and node version * Update codesandbox config * Revert "Revert "Replace rollup’s uglify plugin with terser"" This reverts commit e06fed49f0383c485e01f1758228849ad0085bc8. * Revert "Revert "Revert "Replace rollup’s uglify plugin with terser""" This reverts commit 27d49521f61976dedcbbf210e1811839853e0e47. * Update codesandbox config * Revert "Update codesandbox config" This reverts commit 5120dd23d45fbd4b2c893db33acbf7014e57c023. * Fix codesandbox uglify error * Emoji docs tweaks * Restore and update emoji plugin code * Restore and update emoji plugin docs * Prettier updates * Match lowercase shortcodes only Co-authored-by: Koy Zhuang <369491420@qq.com>
125 lines
3.4 KiB
Markdown
125 lines
3.4 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
|
|
|
|
If you don't like `npm` or have trouble installing the tool, you can manually create `index.html`:
|
|
|
|
```html
|
|
<!-- index.html -->
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<meta charset="UTF-8" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script>
|
|
window.$docsify = {
|
|
//...
|
|
};
|
|
</script>
|
|
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### 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. `v4.x.x` => `v5.x.x`). Check the docsify website periodically to see if a new major version has been released.
|
|
|
|
Specifying a major version in the URL (`@4`) will allow your site will 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.
|
|
|
|
```html
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
|
|
<script src="//cdn.jsdelivr.net/npm/docsify@4"></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.
|
|
|
|
```html
|
|
<link
|
|
rel="stylesheet"
|
|
href="//cdn.jsdelivr.net/npm/docsify@4.11.4/themes/vue.css"
|
|
/>
|
|
<script src="//cdn.jsdelivr.net/npm/docsify@4.11.4"></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.
|
|
|
|
```python2
|
|
cd docs && python -m SimpleHTTPServer 3000
|
|
```
|
|
|
|
```python3
|
|
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).
|