mirror of https://github.com/mindoc-org/mindoc.git
feat:优化文档TOC显示效果
parent
68e9002986
commit
7e05c18c29
|
@ -256,7 +256,7 @@ func (item *Document) ReleaseContent() error {
|
|||
if conf.BaseUrl != "" && !strings.HasPrefix(src, conf.BaseUrl) {
|
||||
contentSelection.SetAttr("target", "_blank")
|
||||
if html, err := content.Html(); err == nil {
|
||||
item.Release = html
|
||||
item.Release = strings.TrimSuffix(strings.TrimPrefix(strings.TrimSpace(html),"<html><head></head><body>"),"</body></html>")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -305,7 +305,15 @@ func (doc *Document) AppendInfo() *Document {
|
|||
|
||||
docCreator, err := NewMember().Find(doc.MemberId,"real_name","account")
|
||||
|
||||
if strings.TrimSpace(doc.Release) != "" {
|
||||
doc.Release = strings.TrimSuffix(strings.TrimPrefix(strings.TrimSpace(doc.Release),"<html><head></head><body>"),"</body></html>")
|
||||
suffix := ""
|
||||
if doc.Release != "" {
|
||||
beego.Info(doc.Release)
|
||||
if strings.HasPrefix(doc.Release,"<div class=\"markdown-toc") {
|
||||
|
||||
doc.Release = strings.TrimSuffix(doc.Release,"</div>")
|
||||
suffix = "</div>"
|
||||
}
|
||||
doc.Release += "<div class=\"wiki-bottom\">文档更新时间: " + doc.ModifyTime.Local().Format("2006-01-02 15:04") + " 作者:";
|
||||
if err == nil && docCreator != nil {
|
||||
if docCreator.RealName != "" {
|
||||
|
@ -314,7 +322,8 @@ func (doc *Document) AppendInfo() *Document {
|
|||
doc.Release += docCreator.Account
|
||||
}
|
||||
}
|
||||
doc.Release += "</div>"
|
||||
doc.Release += "</div>" + suffix
|
||||
}
|
||||
|
||||
return doc
|
||||
}
|
|
@ -486,6 +486,7 @@ table>tbody>tr:hover{
|
|||
list-style: none;
|
||||
border-top: 1px solid #DDDDDD;
|
||||
padding-top: 15px;
|
||||
clear: both;
|
||||
}
|
||||
.manual-article .wiki-bottom{
|
||||
border-top: 1px solid #E5E5E5;
|
||||
|
|
|
@ -32,9 +32,74 @@
|
|||
}
|
||||
|
||||
/**************TOC*******************/
|
||||
.markdown-toc{
|
||||
padding: 16px 11px 4px;
|
||||
border: 1px solid #f0f0f0;
|
||||
.editormd-preview-container{
|
||||
position: relative;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.article-body .markdown-toc{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
width: 260px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.markdown-toc ul{
|
||||
list-style:none;
|
||||
}
|
||||
.markdown-toc .markdown-toc-list>li{
|
||||
padding: 3px 10px 3px 16px;
|
||||
line-height: 18px;
|
||||
border-left: 2px solid #e8e8e8;
|
||||
color: #595959;
|
||||
}
|
||||
.markdown-toc .markdown-toc-list>li.active{
|
||||
border-right: 2px solid #25b864;
|
||||
}
|
||||
|
||||
.article-body .markdown-article{
|
||||
margin-right: 200px;
|
||||
}
|
||||
.markdown-toc-list .directory-item {
|
||||
padding: 3px 10px 3px 16px;
|
||||
line-height: 18px;
|
||||
border-left: 2px solid #e8e8e8;
|
||||
color: #595959;
|
||||
}
|
||||
.markdown-toc-list .directory-item-link {
|
||||
width: 100%;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #595959;
|
||||
}
|
||||
.markdown-toc-list .directory-item-link:hover {
|
||||
color: #8C8C8C;
|
||||
}
|
||||
.markdown-toc-list .directory-item-link-1 {
|
||||
padding-left: 0;
|
||||
}
|
||||
.markdown-toc-list .directory-item-link-2 {
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
.markdown-toc-list .directory-item-link-3 {
|
||||
padding-left: 2.4em;
|
||||
}
|
||||
.markdown-toc-list .directory-item-link-4 {
|
||||
padding-left: 3.6em;
|
||||
}
|
||||
.markdown-toc-list .directory-item-link-5 {
|
||||
padding-left: 4.8em;
|
||||
}
|
||||
.markdown-toc-list .directory-item-active {
|
||||
border-left: 2px solid #25b864;
|
||||
}
|
||||
.markdown-toc-list .directory-item-active a {
|
||||
color: #25b864;
|
||||
}
|
||||
.markdown-toc-list .directory-item-active a:hover {
|
||||
color: #7CD4A2;
|
||||
}
|
||||
/***********代码样式*****************/
|
||||
.markdown-body .highlight pre, .markdown-body pre{
|
||||
|
|
|
@ -3713,20 +3713,24 @@
|
|||
text = trim(text);
|
||||
|
||||
var escapedText = text.toLowerCase().replace(/[^\w]+/g, "-");
|
||||
|
||||
// var isChinese = /^[\u4e00-\u9fa5]+$/.test(text);
|
||||
// var id = (isChinese) ? escape(text).replace(/\%/g, "") : text.toLowerCase().replace(/[^\w]+/g, "-");
|
||||
|
||||
var id = Math.floor(Math.random() * 1000000000 ).toString(36);
|
||||
|
||||
var toc = {
|
||||
text : text,
|
||||
level : level,
|
||||
slug : escapedText
|
||||
slug : escapedText,
|
||||
id : id
|
||||
};
|
||||
|
||||
var isChinese = /^[\u4e00-\u9fa5]+$/.test(text);
|
||||
var id = (isChinese) ? escape(text).replace(/\%/g, "") : text.toLowerCase().replace(/[^\w]+/g, "-");
|
||||
|
||||
markdownToC.push(toc);
|
||||
|
||||
var headingHTML = "<h" + level + " id=\"h"+ level + "-" + this.options.headerPrefix + id +"\">";
|
||||
var headingHTML = "<h" + level + " id=\"" + id +"\" class=\"markdown-heading\">";
|
||||
|
||||
headingHTML += "<a name=\"" + text + "\" class=\"reference-link\"></a>";
|
||||
headingHTML += "<a name=\"" + id + "\" class=\"reference-link\"></a>";
|
||||
headingHTML += "<span class=\"header-link octicon octicon-link\"></span>";
|
||||
headingHTML += (hasLinkReg) ? this.atLink(this.emoji(linkText)) : this.atLink(this.emoji(text));
|
||||
headingHTML += "</h" + level + ">";
|
||||
|
@ -3761,7 +3765,7 @@
|
|||
text = (isTeXLine) ? text.replace(/\$/g, "") : text;
|
||||
}
|
||||
|
||||
var tocHTML = "<div class=\"markdown-toc editormd-markdown-toc\">" + text + "</div>";
|
||||
var tocHTML = "<div class=\"markdown-toc editormd-markdown-toc\">" + text + "</div><div class=\"markdown-article\">";
|
||||
|
||||
return (isToC) ? ( (isToCMenu) ? "<div class=\"editormd-toc-menu\">" + tocHTML + "</div><br/>" : tocHTML )
|
||||
: ( (pageBreakReg.test(text)) ? this.pageBreak(text) : "<p" + isTeXAddClass + ">" + this.atLink(this.emoji(text)) + "</p>\n" );
|
||||
|
@ -3849,6 +3853,7 @@
|
|||
{
|
||||
var text = toc[i].text;
|
||||
var level = toc[i].level;
|
||||
var id = toc[i].id;
|
||||
|
||||
if (level < startLevel) {
|
||||
continue;
|
||||
|
@ -3860,16 +3865,17 @@
|
|||
}
|
||||
else if (level < lastLevel)
|
||||
{
|
||||
html += (new Array(lastLevel - level + 2)).join("</ul></li>");
|
||||
// html += (new Array(lastLevel - level + 2)).join("</ul></li>");
|
||||
}
|
||||
else
|
||||
{
|
||||
html += "</ul></li>";
|
||||
// html += "</ul></li>";
|
||||
}
|
||||
|
||||
html += "<li><a class=\"toc-level-" + level + "\" href=\"#" + text + "\" level=\"" + level + "\">" + text + "</a><ul>";
|
||||
html += "<li class=\"directory-item\"><a class=\"directory-item-link directory-item-link-" + level + "\" href=\"#" + id + "\" level=\"" + level + "\">" + text + "</a></li>";
|
||||
lastLevel = level;
|
||||
}
|
||||
console.log(html);
|
||||
|
||||
var tocContainer = container.find(".markdown-toc");
|
||||
|
||||
|
|
Loading…
Reference in New Issue