forked from mirror/MrDoc
524 lines
19 KiB
HTML
524 lines
19 KiB
HTML
{% 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=Edge，chrome=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>{{doc.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}}" />
|
||
{% 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;
|
||
}
|
||
/* 弹出框文档目录样式 */
|
||
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;
|
||
}
|
||
/* 块级代码和行内代码去除边框 */
|
||
.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-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 %}
|
||
<!-- 文档目录 -->
|
||
<div id="toc-container" class='sidebar'></div>
|
||
{% endblock %}
|
||
|
||
</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>
|
||
{% 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>
|
||
<!-- 分享栏 -->
|
||
<div style="color: rgba(0,0,0,.65);padding-bottom: 10px;margin-top: 10px;">
|
||
{% block doc_bottom_block %}
|
||
<div class="layui-row layui-col-space20" style="padding-top: 10px;padding-left: 20px;">
|
||
<span>
|
||
<i class="fa fa-user"></i> {% if doc.create_user.first_name != '' %} {{doc.create_user.first_name}} {% else %} {{doc.create_user.username}}{% endif %}
|
||
</span>
|
||
<span tooltip="更新于:{{doc.modify_time}}">
|
||
<i class="fa fa-clock-o"></i> {{ doc.modify_time }}
|
||
</span>
|
||
</div>
|
||
{% 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 %}
|
||
<!-- 目录 -->
|
||
<div class="tocMenu" style="display: none;"><i class="fa fa-list"></i></div>
|
||
{% 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(',')
|
||
</script>
|
||
|
||
<!-- 小屏自动收起左侧文集大纲 -->
|
||
<script>
|
||
//加载页面时执行一次
|
||
// changeSidebar();
|
||
$("body").removeClass("big-page");
|
||
//监听浏览器宽度的改变
|
||
// 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 %}
|
||
</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;
|
||
}
|
||
// 文档分享默认收起侧边栏
|
||
toggleSidebar()
|
||
</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="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">GitHub：https://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>
|
||
|
||
<!-- 统计代码开始 -->
|
||
{% if debug %}
|
||
{% else %}
|
||
{{ static_code | safe }}
|
||
{% endif %}
|
||
<!-- 统计代码结束 -->
|
||
{% block custom_script %}
|
||
<script src="{% static 'toc/doctoc.js' %}"></script>
|
||
<script src="{% static 'viewerjs/viewer.min.js' %}"></script>
|
||
<script>
|
||
var layer = layui.layer;
|
||
var form = layui.form;
|
||
// 手机屏幕上默认最小化目录
|
||
if(window.outerWidth < 1300){
|
||
// console.log('最小化目录');
|
||
// setTimeout(function(){
|
||
$(".sidebar").toggleClass("doc-toc-hide");
|
||
// },300)
|
||
}
|
||
// 切换文档目录显示与否
|
||
$(".tocMenu").click(function() {
|
||
console.log("隐藏文档目录")
|
||
$(".sidebar").toggleClass("doc-toc-hide");
|
||
});
|
||
|
||
//修改a标签链接新窗口打开
|
||
$('#content').on('click','a',function(e){
|
||
e.target.target = '_blank';
|
||
});
|
||
// 图片放大显示
|
||
var img_options = {
|
||
url: 'data-original',
|
||
fullscreen:false,//全屏
|
||
rotatable:false,//旋转
|
||
scalable:false,//翻转
|
||
button:false,//关闭按钮
|
||
toolbar:false,
|
||
title:false,
|
||
};
|
||
var viewer = new Viewer(document.getElementById('content'), img_options);
|
||
</script>
|
||
{% endblock %}
|
||
</body>
|
||
</html> |