Getting Started

It is recommended to globally install the docsify-cli tool, which can simply build and preview local documentation.

npm i docsify-cli -g

Initialize the project

If you wish to create documentation in the ./docs directory of your project, you can directly initialize it with init.

docsify init ./docs

Start it Now

After successful initialization, various files are created in the ./docs directory

index.html Entry
README.md will be rendered as homepage content
.nojekyll to avoid GitHub Pages from neglecting files that begin with an underline

Editing docs/README.md directly can update the content of the document, and of course you canadd more pages。

Local Preview

You can easily preview the effect in real-time by enabling a local server by running docsify serve. Default access address: http://localhost:3000 。

docsify serve docs

?> To learn more about the command-line tool usage, please refer to docsify-cli documentation。

Manual initialization

If you dislike npm or find the installation of the tools to be too laborious, we can manually create the index.html file.

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/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      //...
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>

If Python is available on your system, you may also launch a static server to preview your website with relative ease.

cd docs && python -m SimpleHTTPServer 3000

cd docs && python -m http.server 3000

Loading Tips

The Loading... content will be presented upon initialization, and the prompt information can be customized.

  <!-- index.html -->

  <div id="app">Loading</div>

If you modify the setting of 'el', the 'data-app' attribute must be added to this element.

  <!-- index.html -->
  <div data-app id="main">Loading</div>

  <script>
    window.$docsify = {
      el: '#main'
    }
  </script>

Compare el settings。

quickstart.md 2.5 KB Permalink Histórico Raw