背景
本人java程序员一枚,最近在背面试题,之前有收藏佬友分享的java面试资料,我导入到obsidian里面,媳妇儿说有点看不进去,想要可以像听小说一样(之前有部署reader3,平时摸鱼媳妇有用来听小说),平时摸鱼的时候可以听,于是昨天下午搞了一下,分享一下部署过程,有同样需求的佬可以参考.
服务选择
wiki服务-docsify
按照需求,网上搜索发现docsify看起来还不错,符合我的审美(官网:https://docsify.js.org/),可以docker部署
docsify生成目录工具
导入文档后,发现docsify无法自动生成文档的目录,网上找到了生成目录的工具,gihub地址:GitHub - xxxxue/Docsify-Build-Sidebar: Docsify 侧边栏 : 【自动生成 Docsify 的 Sidebar 与 子目录 Sidebar】
移动端tts朗读-Audify(ios)
之前部署reader3由于ios没有app,自部署的web端不支持后台朗读,网上找到了Audify完美满足我的需求,可以后台朗读web上的内容,调用ios本地的tts接口
内外网穿透工具
因为之前一直使用frp,网上教程很多,本次不写过程了,将wiki服务穿透映射到我的域名
文档资源
本来想贴一下我用的资源了，我没加网盘标签，就不分享了，佬友可以论坛内搜索就好了，论坛内资源很多
部署过程
docsify初始化
- 环境准备:
需要node环境，官网Node.js — 在任何地方运行 JavaScript 下载安装最新的npm，然后按照docsify官网的步骤（建议此处科学上网，速度会快很多）：
npm i docsify-cli -g
docsify init ./docs
- 导入md文件,到docs文件夹下,然后按照官方文档,写一下index,提供一下我的index:
<!-- 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@4/themes/vue.css" />
<!-- 文件夹样式 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
<!-- 箭头样式 -->
<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" /> --></head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: "JavaDoc",
// 侧边栏文档目录
loadSidebar: true,
el: '#app',
subMaxLevel: 2,
alias: {
"/.*/_sidebar.md": "/_sidebar.md",
},
// 跳转后自动到顶部
auto2top: true,
coverpage: true,
// PLUGINS
// ---------------------------------------------------------------- // 页面右侧toc
toc: {
tocMaxLevel: 2,
target: "h2, h3, h4, h5, h6",
},
// 全文搜索
search: {
depth: 6,
noData: "没有搜到!",
placeholder: "搜索...",
// 避免搜索索引冲突,同一域下的多个网站之间
namespace: "website-1",
},
// 底部导航
pagination: {
previousText: "上一页",
nextText: "下一页",
crossChapter: true,
crossChapterText: true,
},
// 字数统计
count: {
countable: true,
position: "top",
margin: "10px",
float: "right",
fontsize: "0.9em",
color: "red",
language: "chinese",
localization: {
words: "",
minute: "",
},
isExpected: true,
},
};
</script>
<!-- docsify -->
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
<!-- 代码高亮 https://cdn.jsdelivr.net/npm/prismjs@1/components/ -->
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-cmake.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-csharp.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-docker.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-powershell.min.js"></script>
<!-- 多tab支持 -->
<script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1/dist/docsify-tabs.min.js"></script>
<!-- 代码复制 -->
<script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2/dist/docsify-copy-code.min.js"></script>
<!-- 底部 上一页下一页 -->
<script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/external-script.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js"></script>
<!-- 全文搜索 -->
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
<!-- 图片放大缩小 -->
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/zoom-image.min.js"></script>
<!-- 字数统计 -->
<script src="https://cdn.jsdelivr.net/npm/docsify-count@latest/dist/countable.min.js"></script>
<!-- 侧边栏目录折叠 -->
<script src="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
<!-- 页面右侧 TOC --><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/docsify-plugin-toc.min.js"></script>
<!-- emoji -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
</body>
</html>
封面页面:
<!-- _coverpage.md -->
# JavaDoc <small>1.0</small>
> 专为开发者打造的面试核心指南
- 覆盖 Java 核心知识点
- 高频考点 + 代码示例
- 典型问题深度解析
[GitHub](#JavaDoc)
[开始阅读](#JavaDoc)
- 根据导入的md文件,生成目录,利用工具:github地址:GitHub - xxxxue/Docsify-Build-Sidebar: Docsify 侧边栏 : 【自动生成 Docsify 的 Sidebar 与 子目录 Sidebar】, 写一下配置文件,把md文件路径填入 config.json:
{
"HomePath": "I:\\workspace\\docsify\\docsify\\docs",
"DisableGenerateReadmeFile": false,
"IgnoreFile": [
],
"IgnoreDir": [
".git",
"img"
],
"IgnoreDirNameContain": [
".assets",
".png",
".jpep",
".docx",
".DS_Store"
]
}
本地启动:
docsify serve docs
docify部署
新建dockerFile,注意3000端口不要换,如果系统已经占用,则启动容器的时候映射其他的
FROM node:latest
LABEL description="A demo Dockerfile for build Docsify."
WORKDIR /docs
RUN npm install -g docsify-cli@latest
EXPOSE 3000/tcp
ENTRYPOINT docsify serve .
打包镜像:
docker build -f Dockerfile -t javadoc .
启动容器:
docker run -itp 3001:3000 --name=javadoc -v /Users/hehear/workspace/docsify/docs:/docs javadoc:latest
frpc配置
[[proxies]]
name = "docsify"
type = "tcp"
localIP = "127.0.0.1"
localPort = 3001
remotePort = 7005
Audify
appStore下载Audify,然后在网页栏输入你的服务地址,在设置中选择tts音色就可以朗读文档了
后记
部署过程不是很难,简单的记录一下部署过程,媳妇今天可以愉快的摸鱼了