MrDoc/template/app_doc/docs_base.html

470 lines
18 KiB
HTML
Raw Normal View History

2019-12-15 15:45:05 +08:00
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">
<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="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
2020-02-17 23:02:53 +08:00
<meta name="keywords" content="{% block keyword %}{% endblock %}mrdoc"/>
<meta name="description" content="{% block description %}{% endblock %}" />
<title>{% block title %}{% endblock %} - 觅道文档MrDoc</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}}" />
<link rel="stylesheet" href="{% static 'katex/katex.min.css' %}?version={{mrdoc_version}}" />
<link rel="stylesheet" href="{% static 'share.js/css/share.min.css' %}?version={{mrdoc_version}}" />
2019-12-15 15:45:05 +08:00
<link rel="icon" href="{% static 'favicon_16.png' %}"/>
<link href="{% static 'mrdoc.css' %}?version={{mrdoc_version}}" rel="stylesheet">
2019-12-15 15:45:05 +08:00
<style>
2020-02-24 21:05:08 +08:00
/*一级无序li显示实心圆点*/
2019-12-15 15:45:05 +08:00
.doc-content ul li{
list-style:disc;
}
2020-02-24 21:05:08 +08:00
/*二级无序li显示空心圆点*/
2019-12-15 15:45:05 +08:00
.doc-content ul > li > ul > li{
list-style-type: circle;
}
2020-02-24 21:05:08 +08:00
/*有序li显示数字*/
2019-12-15 15:45:05 +08:00
.doc-content ol li{
list-style-type: decimal;
}
2020-02-24 21:05:08 +08:00
.doc-content ol ol ul,.doc-content ol ul ul,.doc-content ul ol ul,.doc-content ul ul ul {
list-style-type: square;
}
/* 三级及以下无序li显示小方块 */
.doc-content ul ul ul li{
list-style-type: square;
}
/* 下拉目录隐藏li样式 */
.editormd-toc-menu ul.markdown-toc-list li{
/*list-style:none;*/
}
/* 弹出框文档目录样式 */
ul.markdown-toc-list{
list-style-position:inside;
}
ul.markdown-toc-list li{
list-style: none!important;
line-height: 24px;
}
ul.markdown-toc-list > li > ul > li,ul.markdown-toc-list > li > ul li{
padding-left:15px;
}
ul.markdown-toc-list a{
text-decoration: underline!important;
2020-02-24 21:05:08 +08:00
}
/* 块级代码和行内代码去除边框 */
.markdown-body p code{
border:none;
}
2020-05-04 21:26:07 +08:00
/* HTML预览样式 */
.markdown-body h1{
font-size: 1.7em;
}
.markdown-body h2{
font-size: 1.5em;
}
.markdown-body h3{
font-size: 1.25em;
}
.markdown-body h4{
font-size: 1em;
}
.markdown-body h5{
font-size: .875em;
}
.markdown-body h6{
font-size: .85em;
}
2019-12-15 15:45:05 +08:00
</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>
<div class="doc layui-fluid" style="padding-left:0px;">
2019-12-15 15:45:05 +08:00
<!-- 左侧目录栏 -->
<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">
2020-01-15 21:03:44 +08:00
<a href="{% url 'pro_index' pro_id=project.id %}">{{ project.name }}
{% if project.role == 1 %}
<i class="layui-icon layui-icon-password" title="私密文档"></i>
2020-01-15 21:03:44 +08:00
{% endif %}
</a>
<p>
{% if colla_user > 0 %}
<span style="font-size:12px;color:gray;font-weight:100;">* 此为协作文集</span>
{% endif %}
</p>
2019-12-15 15:45:05 +08:00
</div>
<hr>
<!-- <div style="margin-left:15px;">
<a href="javascript:void(0);" onclick="openDocTree()"><i class="fa fa-bars"></i> 展开</a>
<a href="javascript:void(0);" onclick="closeDocTree()"><i class="fa fa-bars"></i> 折叠</a>
</div> -->
2019-12-15 15:45:05 +08:00
<!-- 遍历文集大纲 -->
{% load doc_filter %}
<nav>
<ul class="summary">
<!-- 一级目录 -->
{% for docs in project_docs %}
<li>
{% if docs.id|get_next_doc %}
<div style="display:flex;justify-content:space-between;">
<a href="{% url 'doc' pro_id=docs.top_doc doc_id=docs.id %}" title="{{docs.name}}">{{ docs.name }}</a>
2019-12-15 15:45:05 +08:00
<i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>
</div>
<ul class="sub-menu toc-close">
<!-- 二级目录 -->
{% for node in docs.id|get_next_doc %}
<li>
{% if node.id|get_next_doc %}
<div style="display:flex;justify-content:space-between;">
<a href="{% url 'doc' pro_id=node.top_doc doc_id=node.id %}" title="{{node.name}}">{{ node.name }}</a>
2019-12-15 15:45:05 +08:00
<i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>
</div>
<ul class="sub-menu toc-close">
<!-- 三级目录 -->
{% for doc in node.id|get_next_doc %}
<li><a href="{% url 'doc' pro_id=doc.top_doc doc_id=doc.id %}" title="{{doc.name}}">{{ doc.name }}</a></li>
2019-12-15 15:45:05 +08:00
{% endfor %}
</ul>
{% else %}
<a href="{% url 'doc' pro_id=node.top_doc doc_id=node.id %}" title="{{node.name}}">{{ node.name }}</a>
2019-12-15 15:45:05 +08:00
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<a href="{% url 'doc' pro_id=docs.top_doc doc_id=docs.id %}" title="{{docs.name}}">{{ docs.name }}</a>
2019-12-15 15:45:05 +08:00
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
<div class="bq">
2020-01-15 21:03:44 +08:00
<a href="https://gitee.com/zmister/MrDoc" target="_blank" class="mrdoc-link">本文档使用MrDoc发布</a>
2019-12-15 15:45:05 +08:00
</div>
2020-05-21 10:24:30 +08:00
<!-- 右下角广告块 -->
<!-- 广告代码开始 -->
{% if debug %}
{% else %}
{% if ad_code_3 %}
<div class="ad-code">
{{ ad_code_3 | safe }}
</div>
{% endif %}
{% endif %}
<!-- 广告代码结束 -->
2019-12-15 15:45:05 +08:00
</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 %}
<!-- 广告代码开始 -->
2020-01-15 21:03:44 +08:00
{% if debug %}
{% else %}
{% if ad_code %}
<div class="ad-code">
{{ ad_code | safe }}
</div>
{% endif %}
2019-12-15 15:45:05 +08:00
{% endif %}
<!-- 广告代码结束 -->
</div>
<!-- 标题结束 -->
<!-- 正文开始 -->
2020-05-02 21:21:51 +08:00
<div class="markdown-body" id="content" style="padding: 20px;padding-top: 5px;">
2019-12-15 15:45:05 +08:00
{% block page_content %}
{% endblock %}
</div>
<!-- 正文结束 -->
</div>
<!-- 广告代码开始 -->
{% if debug %}
{% else %}
2020-05-21 10:24:30 +08:00
{% if ad_code_2 %}
<div class="ad-code">
{{ ad_code_2 | safe }}
</div>
{% endif %}
{% endif %}
<!-- 广告代码结束 -->
2020-01-15 21:03:44 +08:00
{% block doc_previous_next %}{% endblock %}
2019-12-15 15:45:05 +08:00
<!-- 社交分享 -->
<div class="share-div" style="margin-top: 10px;padding:10px;text-align: center;background-color: #fafafa">
分享到:<span class="social-share"></span>
</div>
</div>
</div>
</div>
<!-- 右侧文档栏结束 -->
<div class="toTop"><i class="layui-icon layui-icon-top" style="font-size: 50px;"></i></div>
</div>
2020-02-24 21:05:08 +08:00
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
2019-12-15 15:45:05 +08:00
<script>
//加载页面时执行一次
changeSidebar();
//监听浏览器宽度的改变
window.onresize = function(){
changeSidebar();
};
function changeSidebar(){
// 获取匹配指定的媒体查询
var screen_width = window.matchMedia('(max-width: 768px)');
2019-12-15 15:45:05 +08:00
//判断匹配状态
if(screen_width.matches){
//如果匹配到,切换侧边栏
//console.log('小屏幕')
$("body").addClass("big-page");
}else{
$("body").removeClass("big-page");
}
}
2020-06-07 09:50:32 +08:00
</script>
<script src="{% static 'layui/layui.all.js' %}"></script>
<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/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'editor.md/lib/flowchart.min.js' %}"></script>
<script src="{% static 'editor.md/lib/jquery.flowchart.min.js' %}"></script>
<script src="{% static 'editor.md/lib/echarts.min.js' %}"></script>
<!-- 脑图开始 -->
<script src="{% static 'mindmap/d3@5.js' %}"></script>
<script src="{% static 'mindmap/transform.min.js' %}"></script>
<script src="{% static 'mindmap/view.min.js' %}"></script>
<!-- 脑图结束 -->
<!-- <script src="{% static 'editor.md/editormd.min.js' %}"></script> -->
<script src="{% static 'editor.md/editormd.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'share.js/js/social-share.min.js' %}"></script>
2019-12-15 15:45:05 +08:00
<script>
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
//解析Markdown为HTML
// layer.load(1);
2019-12-15 15:45:05 +08:00
editormd.markdownToHTML("content", {
htmlDecode : "style,script,iframe",
2020-02-24 21:05:08 +08:00
emoji : true, //emoji表情
taskList : true, // 任务列表
2019-12-15 15:45:05 +08:00
tex : true, // 科学公式
flowChart : true, // 流程图
2020-02-24 21:05:08 +08:00
sequenceDiagram : true, // 时序图
2019-12-15 15:45:05 +08:00
tocm : true, //目录
toc :true,
tocContainer : "#toc-container",
tocDropdown : false,
2020-02-24 21:05:08 +08:00
atLink : false,//禁用@链接
2019-12-15 15:45:05 +08:00
});
// layer.closeAll("loading");
2019-12-15 15:45:05 +08:00
//为当前页面的目录链接添加蓝色样式
$("nav li a").each(function (i) {
var $me = $(this);
var lochref = $.trim(window.location.href);
var mehref = $.trim($me.get(0).href);
if (lochref.indexOf(mehref) != -1) {
//console.log($me,lochref,mehref)
$me.closest("li").addClass("active");
//展开当前文档的上级目录
$me.parent("li").parent('ul.sub-menu').toggleClass("toc-close toc-open"); //展开二级目录
$me.parent("div").parent('li').parent('ul.sub-menu').toggleClass("toc-close toc-open"); //展开还有子级的二级目录
$me.parent("li").parent('ul').parent('li').parent('ul.sub-menu').toggleClass("toc-close toc-open"); //展开三级目录
$me.parents("ul.sub-menu").prevAll("div").children("i").toggleClass("fa-chevron-left fa-chevron-down");//切换图标
} else {
//console.log(lochref,mehref)
$me.closest("li").removeClass("active");
}
});
</script>
<!-- 页面初始化字体设置 -->
<script>
font_stauts = window.localStorage.getItem('font-sans')
if(font_stauts == 'serif'){// 字体类型
2019-12-15 15:45:05 +08:00
$(".doc-content").toggleClass("switch-font")
$("#content").toggleClass("switch-font")
}
if(window.localStorage.getItem('font-size')){// 字体大小
2019-12-15 15:45:05 +08:00
font_size = window.localStorage.getItem('font-size')
console.log(font_size)
$('#content').css({'font-size':font_size+'rem'})
}else{
window.localStorage.setItem('font-size',1.0)
2019-12-15 15:45:05 +08:00
}
</script>
<!-- 返回顶部 -->
<script type="text/javascript">
$(document).ready(function() {
// 初始时,“返回顶部”标签隐藏
$(".toTop").hide();
$(window).scroll(function() {
// 若滚动的高度,超出指定的高度后,“返回顶部”的标签出现。
if($(document).scrollTop() >= 150) {
$(".toTop").show();
} else {
$(".toTop").hide();
}
})
// 绑定点击事件,实现返回顶部的效果
$(".toTop").click(function() {
$(document).scrollTop(0);
});
});
</script>
<!-- 切换隐藏侧边栏 -->
<script>
// 切换侧边栏
$(function(){
$(".js-toolbar-action").click(toggleSidebar);
});
//切换侧边栏显示隐藏
function toggleSidebar(){
console.log("切换侧边栏")
$("body").toggleClass("big-page");
return false;
}
</script>
<!-- 切换内容字体 -->
<script>
//切换文档内容字体类型
$(function(){
$('.font-switch').click(switchFont);
});
function switchFont(){
if(font_stauts == 'serif'){
$(".doc-content").toggleClass("switch-font")
$("#content").toggleClass("switch-font")
window.localStorage.setItem('font-sans','sans')
}else{
$(".doc-content").toggleClass("switch-font")
$("#content").toggleClass("switch-font")
window.localStorage.setItem('font-sans','serif')
}
};
//放大字体
$(function(){
$('.font-large').click(largeFont);
});
function largeFont(){
var font_size = window.localStorage.getItem('font-size')
console.log(font_size)
if(parseFloat(font_size) < 1.4){
size = parseFloat(font_size) + 0.1
$('#content').css({'font-size':size+'rem'})
window.localStorage.setItem('font-size',size)
}else{
console.log("xxx")
}
};
//缩小字体
$(function(){
$('.font-small').click(smallFont);
});
function smallFont(){
var font_size = window.localStorage.getItem('font-size')
if(parseFloat(font_size) >= 0.6){
size = parseFloat(font_size) - 0.1
2019-12-15 15:45:05 +08:00
$('#content').css({'font-size':size+'rem'})
window.localStorage.setItem('font-size',size)
}else{
console.log("xxx")
}
};
</script>
<!-- 展开收起左边目录 -->
<script>
$(function(){
$(".switch-toc").click(SwitchToc);
});
function SwitchToc(i){
var $me = $(this);
$(this).parent().next("ul").toggleClass("toc-close"); //切换展开收起样式
$(this).toggleClass("fa-chevron-left fa-chevron-down");//切换图标
};
</script>
<!-- 展开\收起文档树 -->
<script>
function openDocTree(){
$("nav ul.summary ul").each(function(obj){
console.log(obj,this)
$(this).removeClass("toc-close")
$(this).prev().children('i').toggleClass("fa-chevron-left fa-chevron-down");//切换图标
})
};
function closeDocTree(){
$("nav ul.summary ul").each(function(obj){
console.log(obj,this)
$(this).addClass("toc-close")
$(this).prev().children('i').toggleClass("fa-chevron-left fa-chevron-down");//切换图标
})
};
</script>
2019-12-15 15:45:05 +08:00
<!-- 统计代码开始 -->
2020-01-15 21:03:44 +08:00
{% if debug %}
{% else %}
{{ static_code | safe }}
{% endif %}
2019-12-15 15:45:05 +08:00
<!-- 统计代码结束 -->
{% block custom_script %}
2019-12-15 15:45:05 +08:00
{% endblock %}
</body>
</html>