基于nginx docsify搭建文档中心
一、概述
上一篇文章:基于Openresty搭建本地简易文档中心 介绍了如何使用OpenResty搭建一个简易的文档中心。但是可能太简易了,不够好看, 我们可以用一些开源工具去搭建,比如docsify。
如果大家正在寻找一个java的学习环境,或者在开发中遇到困难,可以加入我们的java学习圈,点击即可加入,共同学习,节约学习时间,减少很多在学习中遇到的难题。
二、配置nginx
我们nginx转发:
代码语言:javascript复制location /doc {
alias /static/doc/;
index index.html;
}
这样,打开127.0.0.1/doc
就访问了文档中心。
三、docsify使用
3.1 设置首页
下面的代码是使用docsify的index.html:
代码语言:javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JpaMapper</title>
<meta name="keywords" content="文档,博客,doc">
<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="https://lib.baomitu.com/docsify/4.9.4/themes/vue.css">
</head>
<body>
<div id="app"></div>
</body>
<script>
window.$docsify = {
coverpage: true,
loadNavbar: true,
homepage: 'README.md',
auto2top: true
}
</script>
<!-- Docsify -->
<script src="https://lib.baomitu.com/docsify/4.9.4/plugins/search.min.js"></script>
<script src="https://lib.baomitu.com/docsify/4.9.4/docsify.min.js"></script>
<!-- Prism -->
<script src="https://lib.baomitu.com/prism/9000.0.1/components/prism-java.min.js"></script>
这里
homepage: 'README.md'
设置了markdown文件。- search.min.js是提供搜索使用,可以去掉。docsify.min.js必须保留。vue.css美化样式。
- prism-java.min.js是美化Java代码使用,可以去掉。
coverpage: true
是否需要提供一个覆盖页,就是会先显示这个覆盖页,下划后显示README.md。如果设置为true,需要提供一个_coverpage.md
文件,内容随意。loadNavbar: true
是否提供导航条,如果设置为true,需要提供一个_navbar.md
文件,内容随意。
3.2 设置coverpage
coverpage: true
设置为true,需要提供一个_coverpage.md
文件,内容可以这样写:
<img src="logo.png" width="50" >
# Jpa-Mapper
> 轻量级JPA风格的mybatis通用插件
- 易上手,使用简单,与JPA hibernate风格接近,易于切换
[GitHub](https://github.com/ffch/jpa-mapper/)
[Gitee](http://gitee.com/ffch/JpaMapper)
[Get Started](#《Mybatis通用插件Jpa-Mapper》)
大多数开源项目都是这样的。
3.3 设置Navbar
loadNavbar: true
设置为true,需要提供一个_navbar.md
文件,内容可以这样写:
- <a href="../blog/" >博客首页</a>
- <a href="../index.html" >主页</a>
- <a href="../login.html" >加入我们</a>
大多数开源项目都是这样的。