MrDoc/template/app_api/single_doc_detail.html
2021-06-06 06:50:50 +08:00

598 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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">
<head>
<meta charset="UTF-8">
<meta name=renderer content=webkit>
<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="{{ doc.name }},{{ project.name }},{{site_keywords}}"/>
<meta name="description" content="{{doc.pre_content | slice:"0:100"}}" />
<title>{{ doc.name }} - {{ project.name }} - {% 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}}" />
<link rel="stylesheet" href="{% static 'katex/katex.min.css' %}?version={{mrdoc_version}}" />
<!-- <link href="{% static 'viewerjs/viewer.css' %}?version={{mrdoc_version}}" rel="stylesheet"> -->
<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;
}
.markdown-body p img{
max-width: 350px;
}
#url_qrcode img{
margin: auto;
}
#share{
background-color: #333;
}
/* 文档代码块样式 */
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;
}
</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">
</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 %}
<h1>{{ doc.name }}</h1><hr>
<p style="" class="project-doc-content-head">
<i class="fa fa-user"></i> 作者:{{ doc.create_user.username }}
&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-edit"></i> 最后修改于:{{ doc.modify_time }}
</p>
{% 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 %}
<textarea style="display: none;">{{ doc.pre_content }}</textarea>
{% endblock %}
</div>
<!-- 正文结束 -->
</div>
<hr>
<!-- 分享栏 -->
<button id="share" class="layui-btn layui-btn-radius layui-btn-xs">
<i class="fa fa-share-alt"></i> 分享
</button>
{% block doc_bottom_block %}
{% endblock %}
<!-- 广告代码开始 -->
{% 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="toTop"><i class="layui-icon layui-icon-top" style="font-size: 50px;"></i></div>
{% block right_widget %} {% endblock %}
</div>
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'layui/layui.js' %}"></script>
<!-- 生成文集目录大纲 -->
<script>
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
// 生成文集目录
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("获取文集目录失败!")
}
});
};
// getProjectToc();
//为当前页面的目录链接添加蓝色样式
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");
//展开当前文档的上级目录
$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>
//加载页面时执行一次
//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>
<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' %}?version={{mrdoc_version}}"></script> -->
<script src="{% static 'editor.md/editormd.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'qrcodejs/qrcode.min.js' %}"></script>
<!-- 解析Markdown -->
<script>
//解析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,//禁用@链接
});
// 显示分享弹出框
$("#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() >= 150) {
$(".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.jpg' %}" style="width: 300px;height: auto;" />
</div>
<div class="layui-tab-item" align='center'>
<img src="{% static 'dashang/dashang_alipay.jpg' %}" style="width: 300px;height: auto;" />
</div>
<div class="layui-tab-item" align='center'>
<img src="{% static 'dashang/dashang_qq.png' %}" 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>