Maybe 发表于 2023-12-9 20:41:42

docsify部署-把markdown文档变成知识库网站

本帖最后由 Maybe 于 2023-12-9 20:43 编辑

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

官网地址:https://docsify.js.org/#/zh-cn/

2、特性
无需构建,写完文档直接发布
容易使用并且轻量 (压缩后 ~21kB)
智能的全文搜索
提供多套主题
丰富的 API
支持 Emoji
兼容 IE11
支持服务端渲染

二、快速开始
1、安装node环境
安装docsify-cli之前,我们需要安装npm包管理器,而安装了node.js就会自动安装npm。
(1)安装node
官网下载安装程序,双击下载的exe安装,下一步下一步直到完成。
官网地址:https://nodejs.org/en/

(2)验证安装
输入node -v,npm -v输出版本就是安装成功了

#验证node
node -v#验证npm
npm -v
2、安装docsify-cli工具
推荐全局安装 docsify-cli 工具,可以方便地创建及在本地预览生成的文档。
#用npm安装全局工具
npm i docsify-cli -g
3、初始化项目
如果想在项目的 . 当前目录里写文档,直接通过 init 初始化项目
docsify init .初始化成功后,可以看到 . 目录下创建的几个文件

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


如果不喜欢 npm 或者觉得安装工具太麻烦,我们可以直接手动创建一个 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>
4、本地预览
通过运行 docsify serve . 启动一个本地服务器,这里的点就是当前目录的意思,可以方便地实时预览效果。默认访问地址 http://localhost:3000 。也可以用-p指定端口。docsify serve -p 80 .

5、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>


Stephanbop 发表于 2024-11-10 20:10:37

funny college essays u19uto


Wonderful facts, Kudos!
essay writing technique
页: [1]
查看完整版本: docsify部署-把markdown文档变成知识库网站