基于nginx + docsify搭建文档中心

2023-10-22 15:16:45 浏览数 (1)

基于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文件,内容可以这样写:

代码语言:javascript复制
<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文件,内容可以这样写:

代码语言:javascript复制
- <a href="../blog/" >博客首页</a>

- <a href="../index.html" >主页</a>

- <a href="../login.html" >加入我们</a>

大多数开源项目都是这样的。

四、展示效果

0 人点赞