首页 发现 帮助
注册 登录
Apq
/
mindoc
镜像自地址 https://github.com/mindoc-org/mindoc.git
1
0
派生 0
文件 工单管理 0 Wiki
浏览代码

feat:优化文档TOC显示效果

lifei6671 7 年之前
父节点
68e9002986
当前提交
7e05c18c29
共有 4 个文件被更改，包括 97 次插入 和 16 次删除
合并视图 显示文件统计
  1. 12 3
      models/DocumentModel.go
  2. 1 0
      static/css/kancloud.css
  3. 68 3
      static/css/markdown.preview.css
  4. 16 10
      static/editor.md/editormd.js

+ 12 - 3
models/DocumentModel.go
查看文件 

@@ -256,7 +256,7 @@ func (item *Document) ReleaseContent() error {
 
 						if conf.BaseUrl != "" && !strings.HasPrefix(src, conf.BaseUrl) {
 
 						if conf.BaseUrl != "" && !strings.HasPrefix(src, conf.BaseUrl) {
 
 							contentSelection.SetAttr("target", "_blank")
 
 							contentSelection.SetAttr("target", "_blank")
 
 							if html, err := content.Html(); err == nil {
 
 							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")
 
 	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;作者：";
 
 		doc.Release += "<div class=\"wiki-bottom\">文档更新时间: " + doc.ModifyTime.Local().Format("2006-01-02 15:04") + " &nbsp;&nbsp;作者：";
 
 		if err == nil && docCreator != nil {
 
 		if err == nil && docCreator != nil {
 
 			if docCreator.RealName != "" {
 
 			if docCreator.RealName != "" {
 
@@ -314,7 +322,8 @@ func (doc *Document) AppendInfo() *Document {
 
 				doc.Release += docCreator.Account
 
 				doc.Release += docCreator.Account
 
 			}
 
 			}
 
 		}
 
 		}
 
-		doc.Release += "</div>"
 
+		doc.Release += "</div>" + suffix
 
 	}
 
 	}
 
+
 
 	return doc
 
 	return doc
 
 }
 
 }

+ 1 - 0
static/css/kancloud.css
查看文件 

@@ -486,6 +486,7 @@ table>tbody>tr:hover{
 
     list-style: none;
 
     list-style: none;
 
     border-top: 1px solid #DDDDDD;
 
     border-top: 1px solid #DDDDDD;
 
     padding-top: 15px;
 
     padding-top: 15px;
 
+    clear: both;
 
 }
 
 }
 
 .manual-article .wiki-bottom{
 
 .manual-article .wiki-bottom{
 
     border-top: 1px solid #E5E5E5;
 
     border-top: 1px solid #E5E5E5;

+ 68 - 3
static/css/markdown.preview.css
查看文件 

@@ -32,9 +32,74 @@
 
 }
 
 }
 
 
 
 /**************TOC*******************/
 
 /**************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{
 
 .markdown-body .highlight pre, .markdown-body pre{

+ 16 - 10
static/editor.md/editormd.js
查看文件 

@@ -3713,20 +3713,24 @@
 
             text = trim(text);
 
             text = trim(text);
 
 
 
             var escapedText    = text.toLowerCase().replace(/[^\w]+/g, "-");
 
             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 = {
 
             var toc = {
 
                 text  : text,
 
                 text  : text,
 
                 level : level,
 
                 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);
 
             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    += "<span class=\"header-link octicon octicon-link\"></span>";
 
             headingHTML    += (hasLinkReg) ? this.atLink(this.emoji(linkText)) : this.atLink(this.emoji(text));
 
             headingHTML    += (hasLinkReg) ? this.atLink(this.emoji(linkText)) : this.atLink(this.emoji(text));
 
             headingHTML    += "</h" + level + ">";
 
             headingHTML    += "</h" + level + ">";
 
@@ -3761,7 +3765,7 @@
 
                 text = (isTeXLine) ? text.replace(/\$/g, "") : text;
 
                 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 )
 
             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" );
 
                            : ( (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 text  = toc[i].text;
 
             var level = toc[i].level;
 
             var level = toc[i].level;
 
+            var id    = toc[i].id;
 
 
 
             if (level < startLevel) {
 
             if (level < startLevel) {
 
                 continue;
 
                 continue;
 
@@ -3860,16 +3865,17 @@
 
             }
 
             }
 
             else if (level < lastLevel)
 
             else if (level < lastLevel)
 
             {
 
             {
 
-                html += (new Array(lastLevel - level + 2)).join("</ul></li>");
 
+                // html += (new Array(lastLevel - level + 2)).join("</ul></li>");
 
             }
 
             }
 
             else
 
             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;
 
             lastLevel = level;
 
         }
 
         }
 
+        console.log(html);
 
 
 
         var tocContainer = container.find(".markdown-toc");
 
         var tocContainer = container.find(".markdown-toc");