mirror of
https://gitee.com/vnotex/vnote.git
synced 2025-07-05 13:59:52 +08:00
Add outline template for export html (#404)
Draft for outline implementation in exported html file
This commit is contained in:
akkuman
Le Tan
parent
55b835a97c
commit
03ff391948
56
src/resources/outline.css
Normal file
56
src/resources/outline.css
Normal file
@ -0,0 +1,56 @@
|
||||
.post-content {
|
||||
width: 960px;
|
||||
min-height: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
.toc {
|
||||
overflow: hidden;
|
||||
color: #555;
|
||||
border: 1px solid #d2d2d2;
|
||||
border-radius: 3px;
|
||||
min-width: 150px;
|
||||
opacity: 1;
|
||||
font-size: inherit;
|
||||
z-index: 19941112;
|
||||
}
|
||||
.toc {
|
||||
display: none;
|
||||
margin-bottom: 2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.toc a {
|
||||
color: #333;
|
||||
}
|
||||
.toc a:hover{
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
}
|
||||
.toc .catalog-title {
|
||||
cursor: move;
|
||||
padding-left: 12px;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
line-height: 36px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
overflow: hidden;
|
||||
}
|
||||
.toc .catalog-close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 6px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 250px;
|
||||
width: auto;
|
||||
}
|
||||
.blodtoc {
|
||||
font-weight: bold;
|
||||
}
|
||||
27
src/resources/outline.html
Normal file
27
src/resources/outline.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
/* STYLE_GLOBAL_PLACE_HOLDER */
|
||||
</style>
|
||||
|
||||
<style type="text/css">
|
||||
/* STYLE_PLACE_HOLDER */
|
||||
</style>
|
||||
|
||||
<!-- EXTRA_PLACE_HOLDER -->
|
||||
|
||||
<!-- HEAD_PLACE_HOLDER -->
|
||||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="toc fixed">
|
||||
<div class="catalog-title"><span>目录</span></div>
|
||||
<a class="catalog-close"><span>X</span></a>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<!-- BODY_PLACE_HOLDER -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
100
src/resources/outline.js
Normal file
100
src/resources/outline.js
Normal file
@ -0,0 +1,100 @@
|
||||
/**
|
||||
* Convert item of header array to html in li
|
||||
* @param item An element of header array
|
||||
*/
|
||||
var itemToHtml = function(item) {
|
||||
return '<a href="#' + item.id + '" id="' + 'menu-'+ item.id + '" >' + item.innerText + '</a>';
|
||||
};
|
||||
/**
|
||||
* Generate tree from header array
|
||||
* @param toc_list An array containing header elements
|
||||
* @param p_baseLevel The base level number of the toc you want to display
|
||||
*/
|
||||
var tocToTree = function(toc_list, p_baseLevel) {
|
||||
let i;
|
||||
let p_toc = [];
|
||||
for (i in toc_list) {
|
||||
let itemLevel = parseInt(toc_list[i].tagName.substring(1));
|
||||
if (itemLevel >= p_baseLevel) {
|
||||
p_toc.push(toc_list[i]);
|
||||
}
|
||||
}
|
||||
let front = '<li>';
|
||||
let ending = ['</li>'];
|
||||
let curLevel = p_baseLevel;
|
||||
let toclen = p_toc.length;
|
||||
for (i in p_toc) {
|
||||
let item = p_toc[i];
|
||||
console.log(item.tagName);
|
||||
let itemLevel = parseInt(item.tagName.substring(1));
|
||||
if (item.tagName == curLevel) {
|
||||
front += '</li>';
|
||||
front += '<li>';
|
||||
front += itemToHtml(item);
|
||||
} else if (itemLevel > curLevel) {
|
||||
// assert(item.level - curLevel == 1)
|
||||
front += '<ul>';
|
||||
ending.push('</ul>');
|
||||
front += '<li>';
|
||||
front += itemToHtml(item);
|
||||
ending.push('</li>');
|
||||
curLevel = itemLevel;
|
||||
} else {
|
||||
while (itemLevel < curLevel) {
|
||||
let ele = ending.pop();
|
||||
front += ele;
|
||||
if (ele == '</ul>') {
|
||||
curLevel--;
|
||||
}
|
||||
}
|
||||
front += '</li>';
|
||||
front += '<li>';
|
||||
front += itemToHtml(item);
|
||||
}
|
||||
}
|
||||
while (ending.length > 0) {
|
||||
front += ending.pop();
|
||||
}
|
||||
front = front.replace("<li></li>", "");
|
||||
front = '<ul>' + front + '</ul>';
|
||||
return front;
|
||||
};
|
||||
|
||||
let headerObjList = $(":header").toArray();
|
||||
$('.toc').append(tocToTree( headerObjList, 2 ));
|
||||
|
||||
|
||||
// scroll to display side outline
|
||||
$(window).bind('scroll', function(){
|
||||
if ($(document).scrollTop() >= 100) {
|
||||
$('.toc').css("display", "block");
|
||||
highToc();
|
||||
} else {
|
||||
$('.toc').css("display", "none");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// make the corresponding outline text blod
|
||||
let highToc = function(){
|
||||
$(":header").each(function(index, element) {
|
||||
var wst = $(window).scrollTop();
|
||||
let tag_id = $(this).attr("id");
|
||||
if($("#"+tag_id).offset().top <= wst){
|
||||
$('.toc a').removeClass("blodtoc");
|
||||
$('#menu-'+tag_id).addClass("blodtoc");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// click to make outline text blod
|
||||
$('.toc a').click(function(){
|
||||
$('.toc a').removeClass("blodtoc");
|
||||
$(this).addClass("blodtoc");
|
||||
});
|
||||
|
||||
// button to close the outline
|
||||
$('.toc .catalog-close').click(function(){
|
||||
$('.toc').hide();
|
||||
$(window).unbind('scroll');
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user