eleAdmin 离线文档

离线文档

EleAdmin 是一款前端基于vue管理模块，但其文档只能通过在线查看，如果团队中需要看就比较麻烦。这里就记录下如何弄离线文档

在线下载文档

由于只能在线看，这里就在线直接下载下来，效果如下图：

 

 这样要注意文件夹也要一起保存下来。

文档处理

由于要嵌入到iframe中，文档中的左边导航和上面的一些模块需要去掉，这里通过 htmlagilitypack 包来进行html的处理。

htmlagilitypack 是通过xpath的模式来进行 导航的，这个和以前xml文件格式一样。

//加载html
var doc = new HtmlDocument();
doc.Load(file);

//获取要移除的node
var asideNode = doc.DocumentNode.SelectSingleNode("/html/body/main/aside");
var mainButtonNode = doc.DocumentNode.SelectSingleNode("/html/body/main/button[@class='sidebar-toggle']");
var navGroupNode = doc.DocumentNode.SelectSingleNode("html/body/div/div[@class='ele-nav-group']");
var headToolNode = doc.DocumentNode.SelectSingleNode("html/body/div/div[@class='ele-header-tools']");

//移除node
asideNode?.Remove();
mainButtonNode?.Remove();
navGroupNode?.Remove();
headToolNode?.Remove();

//重新保存
Log.Information("starting save {0}", file);
doc.Save(file);

整合到layuiadmin iframe版本中

首先把处理完毕的htm和文件夹一起copy到 component文件夹中，再编辑index.html 把导航栏修改

<li data-name="template" class="layui-nav-item">
              <a href="javascript:;" lay-tips="开始" lay-direction="2">
                <i class="layui-icon layui-icon-app"></i>
                <cite>开始</cite>
              </a>
              <dl class="layui-nav-child">
                <dd><a lay-href="./component/更新日志.htm">更新日志</a></dd>
                <dd><a lay-href="./component/1.1、技术栈.htm">开始使用</a></dd>
                <dd><a lay-href="./component/2.1、环境变量配置.htm">框架配置</a></dd>
                <dd><a lay-href="./component/3.1、增加一个页面.htm">快速上手</a></dd>
                 
              </dl>
            </li>

最终的效果