feat:优化文档TOC显示效果

pull/358/head
lifei6671 2018-09-11 18:36:42 +08:00
parent 68e9002986
commit 7e05c18c29
4 changed files with 97 additions and 16 deletions

View File

@ -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") + " &nbsp;&nbsp;作者:";
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
}

View File

@ -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;

View File

@ -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{

View File

@ -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");