MrDoc/template/app_doc/project.html
2019-07-24 14:38:06 +08:00

281 lines
11 KiB
HTML

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>{{ doc.name }} - {{ project.name }} - MrDoc</title>
<link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'editor.md/css/editormd.css' %}" />
<link rel="stylesheet" href="{% static 'prism/prism.css' %}" />
<link rel="stylesheet" href="{% static 'katex/katex.min.css' %}" />
<link rel="stylesheet" href="{% static 'share.js/css/share.min.css' %}" />
<link href="{% static 'style.css' %}" rel="stylesheet">
<style>
.doc-content ul li{
list-style:disc;
}
.doc-content ul > li > ul > li{
list-style-type: circle;
}
.doc-content ol li{
list-style-type: decimal;
}
</style>
</head>
<body>
<div class="doc">
<!-- 左侧目录栏 -->
<div class="doc-summary">
<div id="doc-search-input">
<input type="text" placeholder="搜索文档" value="" class="layui-input doc-search-input">
</div>
<div class="project-title">
<a href="{% url 'pro_index' pro_id=project.id %}">{{ project.name }}</a>
</div>
<hr>
{% load doc_filter %}
<nav>
<ul class="summary">
<!-- 一级目录 -->
{% for docs in project_docs %}
<li>
<a href="{% url 'doc' pro_id=docs.top_doc doc_id=docs.id %}">{{ docs.name }}</a>
{% if docs.id|get_next_doc %}
{# <i class="layui-icon layui-icon-down tagger-on"></i>#}
<ul class="sub-menu">
<!-- 二级目录 -->
{% for node in docs.id|get_next_doc %}
<li><a href="{% url 'doc' pro_id=node.top_doc doc_id=node.id %}">{{ node.name }}</a>
{% if node.id|get_next_doc %}
<ul>
<!-- 三级目录 -->
{% for doc in node.id|get_next_doc %}
<li><a href="{% url 'doc' pro_id=doc.top_doc doc_id=doc.id %}">{{ doc.name }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
<div class="bq">
<a href="" class="mrdoc-link">本文档使用MrDoc发布</a>
</div>
</div>
<!-- 左侧目录栏结束 -->
<!-- 右侧文档栏 -->
<div class="doc-body">
<!-- 文档导航 -->
<div class="doc-header" role="navigation">
<a class="btn pull-right" aria-label="" href="{% url 'pro_list' %}">
<i class="fa fa-home"></i> 返回首页
</a>
<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>
<div class="dropdown pull-left font-settings ">
<a class="btn toggle-dropdown font-large" href="javascript:void(0);" title="放大字体">
<i class="fa fa-font">+</i>
</a>
</div>
<a class="btn pull-left font-switch" href="javascript:void(0);" title="切换字体类型">
<i class="fa fa-text-height"></i>
</a>
{% if request.user == doc.create_user %}
<a class="btn pull-left" aria-label="" href="{% url 'modify_doc' doc_id=doc.id %}">
<i class="fa fa-edit"></i> 修改文档
</a>
{% endif %}
</div>
<!-- 文档主体 -->
<div class="doc-body-content">
<div class="doc-body-content-div">
<!-- 文档内容 -->
<div class="doc-content">
<div class="doc-info">
<h1>{{ doc.name }}</h1>
{# <p>创建时间:{{ doc.create_time }} 最后修改时间:{{ doc.modify_time }}</p>#}
<hr>
<p style="color: #cccccc;">
<i class="layui-icon layui-icon-date"></i> {{ doc.create_time }}&nbsp;&nbsp;&nbsp;&nbsp;
<i class="layui-icon layui-icon-user"></i> {{ doc.create_user.username }}
</p>
</div>
<div class="markdown-body" id="content">
{# {{ doc.content | safe }}#}
<style>
ul.markdown-toc-list li,ul.markdown-toc-list > li > ul li{
list-style: none;
}
</style>
<textarea id="" style="display: none;">{{ doc.pre_content }}</textarea>
</div>
</div>
<!-- 文档目录 -->
<div class="doc-cata">
<div id="toc-container"></div>
</div>
<!-- 社交分享 -->
<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>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="{% static 'layui/layui.all.js' %}"></script>
<script src="{% static 'prism/prism.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/editormd.min.js' %}"></script>
<script src="{% static 'share.js/js/social-share.min.js' %}"></script>
{% block custom_script %}
<script>
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
//为当前页面的目录链接添加样式
$("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.parent().addClass("active");
} else {
//console.log(lochref,mehref)
$me.parent().removeClass("active");
}
});
//解析Markdown为HTML
editormd.markdownToHTML("content", {
htmlDecode : "style,script,iframe",
emoji : true,
taskList : true,
tex : true, // 科学公式
flowChart : true, // 流程图
sequenceDiagram : true, // 默认不解析
tocm : true, //目录
//tocContainer : "#toc-container"
});
</script>
<!-- 页面初始化字体设置 -->
<script>
font_stauts = window.localStorage.getItem('font-sans')
//font_size = window.localStorage.getItem('font-size')
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)
//$('.doc-info h1').css({'font-size':font_size+'rem'})
$('#content').css({'font-size':font_size+'rem'})
}else{
window.localStorage.setItem('font-size',0.8)
}
</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.2
//$('.doc-info h1').css({'font-size':size+'rem'})
$('#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')
//console.log(font_size)
if(parseFloat(font_size) >= 0.6){
size = parseFloat(font_size) - 0.2
//$('.doc-info h1').css({'font-size':size+'rem'})
$('#content').css({'font-size':size+'rem'})
window.localStorage.setItem('font-size',size)
}else{
console.log("xxx")
}
};
</script>
{% endblock %}
</body>
</html>