MrDoc/template/app_doc/docs_base.html
2020-10-29 22:56:42 +08:00

728 lines
28 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 staticfiles %}
<!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">
<style>
/*一级无序li显示实心圆点*/
.doc-content ul li{
list-style:disc;
}
/*二级无序li显示空心圆点*/
.doc-content ul > li > ul > li{
list-style-type: circle;
}
/*有序li显示数字*/
.doc-content ol li{
list-style-type: decimal;
}
.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; */
}
/* 块级代码和行内代码去除边框 */
.markdown-body p code{
border:none;
}
/* 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;
}
{% if img_scale %}
.markdown-body p img{
max-width: 350px;
}
{% endif %}
#url_qrcode img{
margin: auto;
}
/* 文档代码块样式 */
ol.linenums li{
width: max-content;
}
pre.linenums{
max-height: 500px;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
background: none !important;
}
/* layui弹出框颜色 */
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
border-bottom: 2px solid #333;
}
.layui-tab-brief>.layui-tab-title .layui-this{
color: #333;
}
/* 覆盖vditor样式 */
.vditor-outline__item{
padding: 0;
padding-bottom: 5px;
color: #333;
}
</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;">
<!-- 左侧目录栏 -->
<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>
<!-- <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> -->
<!-- 遍历文集大纲 -->
<!-- 如果文集的文档数量超过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>
<i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>
</div>
<ul class="sub-menu toc-close">
<!-- 二级目录 -->
{% 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>
<i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>
</div>
<ul class="sub-menu toc-close">
<!-- 三级目录 -->
{% 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>
<div class="toTop" ><i class="fa fa-arrow-up"></i></div>
{% block right_widget %} {% endblock %}
</div>
</div>
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'layui/layui.all.js' %}"></script>
<!-- 生成文集目录大纲 -->
<script>
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
// 视频iframe域名白名单
var iframe_whitelist = '{{ iframe_whitelist }}'.split(',')
// 异步生成文集目录
getProjectToc = function(){
$.post("{% url 'get_pro_doc_tree' %}",{'pro_id':'{{project.id}}'},function(r){
$("#loading-project-toc").hide();
if(r.status){
var toc_str = ""
layui.each(r.data,function(index,item){
toc_str += "<li>"
if(item['children'] != undefined){ // 存在二级文档
li = '<div style="display:flex;justify-content:space-between;">' +
'<a href="/project-'+'{{project.id}}'+'/doc-'+item.id+'/" title="'+item.title+'">'+item.title+'</a>' +
'<i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>'+
'</div>'+
'<ul class="sub-menu toc-close">'
toc_str += li
layui.each(item['children'],function(index,item){// 遍历二级文档
toc_str += '<li>'
if(item['children'] != undefined){ //存在三级文档
li = '<div style="display:flex;justify-content:space-between;">' +
'<a href="/project-'+'{{project.id}}'+'/doc-'+item.id+'/" title="'+item.title+'">'+item.title+'</a>' +
'<i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>'+
'</div>'+'<ul class="sub-menu toc-close">'
toc_str += li
layui.each(item['children'],function(index,item){ // 遍历三级文档
li = '<li><a href="/project-'+'{{project.id}}'+'/doc-'+item.id+'/" title="'+item.title+'">'+item.title+'</a></li>'
toc_str += li
})
toc_str += '</ul>'
}else{// 不存在三级文档
li = '<a href="/project-'+'{{project.id}}'+'/doc-'+item.id+'/" title="'+item.title+'">'+item.title+'</a>'
toc_str += li
}
toc_str += '</li>'
})
toc_str += '</ul>'
}else{//不存在二级文档
li = '<a href="/project-'+'{{project.id}}'+'/doc-'+item.id+'/" title="'+item.title+'">'+item.title+'</a>'
toc_str += li
}
toc_str += '</li>'
});
$('#project-toc').append(toc_str)
tagCurrentDoc();
}else{
layer.msg("获取文集目录失败!")
}
});
};
{% if toc_cnt > 999 %}
getProjectToc();
{% endif %}
//为当前页面的目录链接添加蓝色样式
tagCurrentDoc = function(){
$("nav li a").each(function (i) {
var $me = $(this);
var lochref = $.trim(window.location.href); // 获取当前URL
var mehref = $.trim($me.get(0).href);
if (lochref.indexOf(mehref) != -1) {
// console.log($me,lochref,mehref)
$me.closest("li").addClass("active");
this.scrollIntoView({ behavior: 'auto', block: "start" });
//展开当前文档的上级目录
$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");
}
});
};
tagCurrentDoc();
</script>
<!-- 小屏自动收起左侧文集大纲 -->
<script>
//加载页面时执行一次
changeSidebar();
//监听浏览器宽度的改变
window.onresize = function(){
changeSidebar();
};
function changeSidebar(){
// 获取匹配指定的媒体查询
var screen_width = window.matchMedia('(max-width: 768px)');
//判断匹配状态
if(screen_width.matches){
//如果匹配到,切换侧边栏
//console.log('小屏幕')
$("body").addClass("big-page");
}else{
$("body").removeClass("big-page");
}
}
</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 %}
<script src="{% static 'qrcodejs/qrcode.min.js' %}"></script>
<!-- 解析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 %}
// 显示分享弹出框
$("#share").click(function(r){
var layer = layui.layer;
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['350px','350px'],
shadeClose: true,
content: $('#share_div')
});
});
</script>
<!-- 页面初始化字体设置 -->
<script>
font_stauts = window.localStorage.getItem('font-sans')
if(font_stauts == 'serif'){// 字体类型
$(".doc-content").toggleClass("switch-font")
$("#content").toggleClass("switch-font")
}
if(window.localStorage.getItem('font-size')){// 字体大小
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)
}
</script>
<!-- 返回顶部 -->
<script type="text/javascript">
$(document).ready(function() {
// 初始时,“返回顶部”标签隐藏
$(".toTop").hide();
$(window).scroll(function() {
// 若滚动的高度,超出指定的高度后,“返回顶部”的标签出现。
if($(document).scrollTop() >= 140) {
$(".toTop").show();
} else {
$(".toTop").hide();
}
})
// 绑定点击事件,实现返回顶部的效果
$(".toTop").click(function() {
$(document).scrollTop(0);
});
// 生成当前网页链接
$("input[name=current_url]").val(document.URL)
});
</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
$('#content').css({'font-size':size+'rem'})
window.localStorage.setItem('font-size',size)
}else{
console.log("xxx")
}
};
// 显示打赏图片
$("#dashang").click(function(r){
var layer = layui.layer;
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['480px','400px'],
shadeClose: true,
content: $('#dashang_img')
});
});
</script>
<!-- 分享选项卡模板 -->
<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;" onclick="copyUrl();">复制链接</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>
// 展开收起左边目录
$(function(){
// $(".switch-toc").click(SwitchToc);
$("body").on('click','.switch-toc',SwitchToc)
});
function SwitchToc(i){
console.log("点击了")
var $me = $(this);
$(this).parent().next("ul").toggleClass("toc-close"); //切换展开收起样式
$(this).toggleClass("fa-chevron-left fa-chevron-down");//切换图标
};
// 展开文档树
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");//切换图标
})
};
// 文档分享 - 复制链接
copyUrl = function(){
var crt_url_val = document.getElementById("copy_crt_url");
crt_url_val.select();
window.clipb
document.execCommand("Copy");
layer.msg("链接复制成功!")
}
// 生成二维码
var qrcode = new QRCode("url_qrcode", {
text: document.URL,
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>
<!-- 统计代码开始 -->
{% if debug %}
{% else %}
{{ static_code | safe }}
{% endif %}
<!-- 统计代码结束 -->
{% block custom_script %}
{% endblock %}
</body>
</html>