<一>快速开始

概述

docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署在 GitHub Pages。

安装工具

推荐全局安装

npm i docsify-cli -g

image
忘记加"sudo"
image

创建并初始化项目

创建一个项目目录，并在该目录打开终端窗口
如果想在项目的 ./docs 目录里写文档，直接通过 init 初始化项目。

docsify init ./docs

初始化成功后，可以看到 ./docs 目录下创建的几个文件
image

  • index.html 入口文件
  • README.md 会做为主页内容渲染
  • .nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件

开始写文档

初始化项目生成了做为主页内容渲染MD文件，直接编辑 docs/README.md 就能更新文档内容

预览运行

通过运行 docsify serve 启动一个本地服务器，可以方便地实时预览效果。默认访问地址http://localhost:3000 。

docsify serve docs

这里编写一个“hello world”标题，启动服务器预览运行一下
image

[备选]手动初始化

如果不喜欢 npm 或者觉得安装工具太麻烦，也可以直接手动创建一个 index.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/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>

Loading 提示

初始化时会显示 Loading... 内容，你可以自定义提示信息。

 <!-- index.html -->

  <div id="app">加载中</div>

如果更改了 el 的配置，需要将该元素加上 data-app 属性

<!-- index.html -->
  <div data-app id="main">加载中</div>

  <script>
    window.$docsify = {
      el: '#main'
    }
  </script>
posted @ 2024-12-10 11:56  EricShx  阅读(23)  评论(0)    收藏  举报