专业编程基础技术教程

网站首页 > 基础教程 正文

Docsify无需编译快速在线浏览项目文档，支持搜搜热更新

ccvgpt 2024-11-25 10:17:31 基础教程 1 ℃

场景：如果有很多MarkDown文档，怎么很好的展示给使用人

每当我们研发一个工程时，常常我们需一个精巧的研发文档，因此选用docsify是一个良好的选择。Docsify是一个文档生成脚本，它直接读取MarkDown文档并且动态展现，也可以生成封面。因此我们仅仅需要完成文档的撰写，就可以在线看到文档网页。

Docsify无需编译快速在线浏览项目文档，支持搜搜热更新

优点

  • 不需要构建也不需要编译。在编写标记文档后，它们将直接发布
  • 易于使用且重量轻
  • 智能全文搜索内容
  • 获取多组主题
  • 支持多样化的api

缺点

  • 不利于SEO优化，不过一般文档也不需要SEO

类似产品

  • Nuxt
  • Docute
  • Hexo
  • GitBook
  • vuepress

实现方式1：手工创建

创建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="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
 <div id="app"></div>
 <script>
 window.$docsify = {
 //...
 }
 </script>
 <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>

创建README.md文件，作为主页面，加入文档目录，即可跳转对应的文档

然后把文档放到对应目录，利用tomcat，nginx等web服务器打开http://localhost:3000即可展现

实现方式2：官方脚手架创建

下面展示确保已安装node，npm

  • 安装脚手架

npm i docsify-cli -g

  • 查看脚手架版本

docsify -v



  • cd到项目目录初始化项目

docsify init ./

初始化的文件

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Python100天学成记</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="description" content="Description">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
	<nav><!--顶部导航栏 -->
		<a href="#/">首页</a>
	 </nav>
 <div id="app">正在加载</div>
<!-- 搜索设置 -->
 <script>
 window.$docsify = {
 name: 'Python （首页）',
 repo: '',
	 auto2top: true,
	 search: {
 noData: {
 '/de-de/': 'Keine Ergebnisse!',
 '/zh-cn/': '没有结果!',
 '/': 'No results!'
 },
 paths: 'auto',
 placeholder: {
 '/de-de/': 'Suche',
 '/zh-cn/': '搜索',
 '/': 'Search'
 }
 }
 }
 </script>
 <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
 <script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
 <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
 <script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
 <script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>

</body>
</html>
  • 启动项目

docsify serve ./


  • 最终成品展示


利用VuePress快速搭建项目文档管理系统

Tags：

猜你喜欢

最近发表
标签列表