MrDoc/template/app_doc/docs_base.html
2020-12-02 21:25:59 +08:00

378 lines
16 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="zh-cn" style="font-size: 14px;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edgechrome=1">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="{% block keyword %}{% endblock %}{{site_keywords}}"/>
<meta name="description" content="{% block description %}{% endblock %}" />
<title>{% block title %}{% endblock %} - {% if site_name != None and site_name != '' %}{{site_name}} {% else %}站点标题{% endif %}</title>
<link href="{% static 'layui/css/layui.css' %}?version={{mrdoc_version}}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'editor.md/css/editormd.css' %}?version={{mrdoc_version}}" />
{% if doc.editor_mode == 2 %}
<link rel="stylesheet" href="{% static 'vditor/dist/index.css' %}?version={{mrdoc_version}}" />
{% endif %}
<link href="{% static 'viewerjs/viewer.min.css' %}?version={{mrdoc_version}}" rel="stylesheet">
<link rel="icon" href="{% static 'search/mrdoc_logo_300.png' %}" sizes="192x192" />
<link href="{% static 'mrdoc/mrdoc.css' %}?version={{mrdoc_version}}" rel="stylesheet">
<link href="{% static 'mrdoc/mrdoc-docs.css' %}?version={{mrdoc_version}}" rel="stylesheet">
<style>
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="big-page">
<div class="doc layui-fluid" style="padding-left:0px;">
<!-- 左侧目录栏 -->
<div class="doc-summary">
<!-- 文档搜索 -->
<form action="{% url 'pro_index' pro_id=project.id %}" method="get">
<div id="doc-search-input">
<input type="text" name="kw" placeholder="输入并回车搜索" value="" class="layui-input doc-search-input">
</div>
</form>
<!-- 文集名称 -->
<div class="project-title">
<a href="{% url 'pro_index' pro_id=project.id %}">{{ project.name }}
{% if project.role == 1 %}
<i class="layui-icon layui-icon-password" title="私密文档"></i>
{% endif %}
</a>
<p>
{% if colla_user > 0 %}
<span style="font-size:12px;color:gray;font-weight:100;">* 此为协作文集</span>
{% endif %}
</p>
</div>
<hr>
<!-- 遍历文集大纲 -->
<!-- 如果文集的文档数量超过999使用异步加载文集目录 -->
{% if toc_cnt > 999 %}
<div style="text-align: center;" id='loading-project-toc'><i class="fa fa-spinner fa-pulse"></i>文集大纲加载中……</div>
{% load doc_filter %}
<nav>
<ul class="summary" id="project-toc"></ul>
</nav>
{% else %}
<!-- 文档数量小于999使用同步加载文集目录 -->
<nav>
<ul class="summary">
<!-- 一级目录 -->
{% for docs in toc_list %}
<li>
{% if docs.children %}
<div style="display:flex;justify-content:space-between;">
<a href="{% url 'doc' pro_id=pro_id doc_id=docs.id %}" title="{{docs.name}}">{{ docs.name }}</a>
{% if docs.open_children %}
<i class="fa fa-chevron-down switch-toc" style="padding:15px;"></i>
{% else %}
<i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>
{% endif %}
</div>
{% if docs.open_children %}
<ul class="sub-menu">
{% else %}
<ul class="sub-menu toc-close">
{% endif %}
<!-- 二级目录 -->
{% for node in docs.children %}
<li>
{% if node.id|get_next_doc %}
<div style="display:flex;justify-content:space-between;">
<a href="{% url 'doc' pro_id=pro_id doc_id=node.id %}" title="{{node.name}}">{{ node.name }}</a>
{% if node.open_children %}
<i class="fa fa-chevron-down switch-toc" style="padding:15px;"></i>
{% else %}
<i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>
{% endif %}
</div>
{% if node.open_children %}
<ul class="sub-menu">
{% else %}
<ul class="sub-menu toc-close">
{% endif %}
<!-- 三级目录 -->
{% for doc in node.children %}
<li><a href="{% url 'doc' pro_id=pro_id doc_id=doc.id %}" title="{{doc.name}}">{{ doc.name }}</a></li>
{% endfor %}
</ul>
{% else %}
<a href="{% url 'doc' pro_id=pro_id doc_id=node.id %}" title="{{node.name}}">{{ node.name }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<a href="{% url 'doc' pro_id=pro_id doc_id=docs.id %}" title="{{docs.name}}">{{ docs.name }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
<div class="bq">
<a href="javascript:void(0);" class="mrdoc-link" id="dashang">本文档使用MrDoc发布</a>
</div>
<!-- 右下角广告块 -->
<!-- 广告代码开始 -->
{% if debug %}
{% else %}
{% if ad_code_3 %}
<div class="ad-code">
{{ ad_code_3 | safe }}
</div>
{% endif %}
{% endif %}
<!-- 广告代码结束 -->
</div>
<!-- 左侧目录栏结束 -->
<!-- 右侧文档栏 -->
<div class="doc-body">
<!-- 文档导航 -->
<div class="doc-header" role="navigation">
<a class="btn pull-left js-toolbar-action" aria-label="" href="javascript:void(0);" title="切换侧边栏">
<i class="fa fa-align-justify"></i>
</a>
<a class="btn pull-left font-small" href="javascript:void(0);" title="缩小字体">
<i class="fa fa-font">-</i>
</a>
<a class="btn pull-left font-large" href="javascript:void(0);" title="放大字体">
<i class="fa fa-font">+</i>
</a>
<a class="btn pull-left font-switch" href="javascript:void(0);" title="切换字体类型">
<i class="fa fa-text-height"></i>
</a>
<!-- 顶部工具栏 -->
{% block head_toolbar %}
{% endblock %}
<a class="btn pull-right" aria-label="" href="{% url 'pro_list' %}">
<i class="fa fa-home"></i> <span class="layui-hide-xs">首页</span>
</a>
</div>
<!-- 文档主体 -->
<div class="doc-body-content">
<div class="doc-body-content-div">
<!-- 文档内容 -->
<div class="doc-content">
<!-- 标题 -->
<div class="doc-info">
<!-- 页面主体头信息 -->
{% block content_head %}
{% endblock %}
<!-- 广告代码开始 -->
{% if debug %}
{% else %}
{% if ad_code %}
<div class="ad-code">
{{ ad_code | safe }}
</div>
{% endif %}
{% endif %}
<!-- 广告代码结束 -->
</div>
<!-- 标题结束 -->
<!-- 正文开始 -->
<div class="markdown-body" id="content" style="padding: 20px;padding-top: 5px;">
{% block page_content %}
{% endblock %}
</div>
<!-- 正文结束 -->
</div>
<hr>
<!-- 分享栏 -->
<div style="color: rgba(0,0,0,.65);padding-bottom: 10px;margin-top: 10px;">
{% block doc_bottom_block %}
{% endblock %}
</div>
<!-- 广告代码开始 -->
{% if debug %}
{% else %}
{% if ad_code_2 %}
<div class="ad-code">
{{ ad_code_2 | safe }}
</div>
{% endif %}
{% endif %}
<!-- 广告代码结束 -->
{% block doc_previous_next %}{% endblock %}
</div>
</div>
</div>
<!-- 右侧文档栏结束 -->
<!-- 右下角工具按钮 -->
<div class="fixed-tool-bar">
<div class="toTop" ><i class="fa fa-arrow-up"></i></div>
{% block right_widget %} {% endblock %}
</div>
</div>
<!-- 分享选项卡模板 -->
<div id="share_div" style="display: none;">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">微信扫一扫</li>
<li>复制链接</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show" align='center'>
<p style="font-weight: 700;margin-bottom: 10px;">手机扫一扫进行分享</p>
<div id="url_qrcode"></div>
</div>
<div class="layui-tab-item" align='center'>
<input type="text" id="copy_crt_url" name="current_url" class="layui-input" /><br>
<button class="layui-btn layui-btn-radius layui-btn-xs" style="background-color: #333;" id="copy_doc_url"">复制链接</button>
</div>
</div>
</div>
</div>
<!-- 打赏选项卡模板 -->
<div id="dashang_img" style="display: none;">
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">微信</li>
<li>支付宝</li>
<li>QQ支付</li>
<li>PayPal</li>
<li>项目源码</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show" align='center'>
<img src="{% static 'dashang/dashang_wx.webp' %}" style="width: 300px;height: auto;" />
</div>
<div class="layui-tab-item" align='center'>
<img src="{% static 'dashang/dashang_alipay.webp' %}" style="width: 300px;height: auto;" />
</div>
<div class="layui-tab-item" align='center'>
<img src="{% static 'dashang/dashang_qq.webp' %}" style="width: 300px;height: auto;" />
</div>
<div class="layui-tab-item" align='center'>
<a href="https://paypal.me/zmister" target="_blank">
<img src="{% static 'dashang/dashang_paypal.png' %}" style="width: 280px;height: auto;" />
</a>
</div>
<div class="layui-tab-item" align='center'>
<p><a href="https://github.com/zmister2016/MrDoc" target="_blank">GitHubhttps://github.com/zmister2016/MrDoc</a></p>
<br>
<p><a href="https://gitee.com/zmister/MrDoc" target="_blank">码云https://gitee.com/zmister/MrDoc</a> </p>
<br>
<p><a href="https://zmister.com" target="_blank">作者博客https://zmister.com</a></p>
</div>
</div>
</div>
</div>
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'layui/layui.all.js' %}"></script>
<script src="{% static 'qrcodejs/qrcode.min.js' %}"></script>
<script src="{% static 'mrdoc/mrdoc-docs.js' %}?version={{mrdoc_version}}"></script>
<script>
// 如果文集的文档数量大于999使用异步加载左侧文集大纲
{% if toc_cnt > 999 %}
getProjectToc();
{% endif %}
</script>
{% if doc.editor_mode == 2 %}
<script src="{% static 'vditor/dist/index.min.js' %}?version={{mrdoc_version}}"></script>
{% elif doc.editor_mode == 1 %}
<script src="{% static 'editor.md/lib/marked.min.js' %}"></script>
<script src="{% static 'editor.md/lib/prettify.min.js' %}"></script>
<script src="{% static 'editor.md/lib/raphael.min.js' %}"></script>
<script src="{% static 'editor.md/lib/underscore.min.js' %}"></script>
<!-- <script src="{% static 'editor.md/editormd.min.js' %}?version={{mrdoc_version}}"></script> -->
<script src="{% static 'editor.md/editormd.js' %}?version={{mrdoc_version}}"></script>
{% endif %}
<!-- 解析渲染Markdown -->
<script>
// EditorMD模式
{% if doc.editor_mode == 1 %}
//解析Markdown为HTML
editormd.markdownToHTML("content", {
htmlDecode : "style,script,iframe",
emoji : true, //emoji表情
taskList : true, // 任务列表
tex : true, // 科学公式
flowChart : true, // 流程图
sequenceDiagram : true, // 时序图
tocm : true, //目录
toc :true,
tocContainer : "#toc-container",
tocDropdown : false,
atLink : false,//禁用@链接
});
// Vditor模式
{% elif doc.editor_mode == 2 %}
// 渲染Markdown
const initRender = () => {
const md_content = $("#content textarea").val()
Vditor.preview(document.getElementById('content'),
md_content, {
"cdn":"{% static 'vditor' %}",
speech: {
enable: true,
},
anchor: 1,
after () {
// if (window.innerWidth <= 768) {
// return
// }
const outlineElement = document.getElementById('toc-container')
var sub_ele = "<div class='markdown-toc editormd-markdown-toc'><ul class='markdown-toc-list'></ul></div>"
$("#toc-container").append(sub_ele)
var toc_elem = $("#toc-container div ul.markdown-toc-list")
Vditor.outlineRender(document.getElementById('content'), toc_elem[0])
if (outlineElement.innerText.trim() !== '') {
// 去除vditor默认添加的空格字符
var toc_html = $("#toc-container");
//toc_html.html(toc_html.html().replace('',''))
var toc_cnt = $(".markdown-toc-list").children().length;
//console.log(toc_cnt)
if(toc_cnt > 0){
//console.log('显示文档目录')
$(".tocMenu").show();
initSidebar('.sidebar', '.doc-content');
}
}else{
console.log("无目录")
}
},
})
}
initRender();
{% endif %}
</script>
<!-- 统计代码开始 -->
{% if debug %}
{% else %}
{{ static_code | safe }}
{% endif %}
<!-- 统计代码结束 -->
{% block custom_script %}
{% endblock %}
</body>
</html>