Merge pull request '小白训练营issue135 解决notebook文件不能显示图片，图片和文字可能显示不全的问题' (#2587) from fix-1956 into V20220801

Reviewed-on: https://git.openi.org.cn/OpenI/aiforge/pulls/2587
Reviewed-by: lewis <747342561@qq.com>

public/self/css/notebook/notebook.css

@@ -1,6 +1,7 @@
 .nb-notebook {
     line-height: 1.5;
-    margin-left: 7em;
+    margin-left: 6em;
+	
 }
 
 .nb-stdout, .nb-stderr {
@@ -15,6 +16,7 @@
 
 .nb-cell + .nb-cell {
     margin-top: 0.5em;
+	max-width: 100%;
 }
 
 .nb-output table {
@@ -40,6 +42,11 @@
     padding-left: 1em;
 }
 
+.nb-notebook img {
+    max-width: 80%;
+	padding: 3px;
+}
+
 .nb-cell {
     position: relative;
 }
@@ -60,7 +67,8 @@
 }
 
 .nb-output img {
-    max-width: 100%;
+    max-width: 80%;
+	padding: 3px;
 }
 
 .nb-output:before, .nb-input:before {

routers/repo/view.go

@@ -484,6 +484,7 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry, treeLink, rawLink st
 			)
 		} else if isNoteBook {
 			ctx.Data["FileContent"] = string(buf)
+			ctx.Data["FileParentURL"] = path.Dir(rawLink+"/"+ctx.Repo.TreePath) + "/"
 		} else {
 			// Building code view blocks with line number on server side.
 			var fileContent string

templates/repo/header.tmpl

@@ -190,7 +190,6 @@
 <script src="{{StaticUrlPrefix}}/self/js/notebook/katex.min.js"></script>
 <script src="{{StaticUrlPrefix}}/self/js/notebook/katex-auto-render.min.js"></script>
 <script src="{{StaticUrlPrefix}}/self/js/notebook/notebook.min.js"></script>
-<script src="{{StaticUrlPrefix}}/self/js/notebook/notebook.min.js"></script>
 <link rel="stylesheet" href="{{StaticUrlPrefix}}/self/css/notebook/katex.min.css" />
 <link rel="stylesheet" href="{{StaticUrlPrefix}}/self/css/notebook/prism.css" />
 <link rel="stylesheet" href="{{StaticUrlPrefix}}/self/css/notebook/notebook.css" />

templates/repo/view_file.tmpl

@@ -103,20 +103,23 @@
 					{{end}}
 				</div>
 			{{else if .FileSize}}
-				<table>
+			   {{if .IsNoteBook}}
+                   			<div id="notebook"></div>
+
+                {{else}}
+				 <table>
 					<tbody>
 						<tr>
 						{{if .IsFileTooLarge}}
 							<td><strong>{{.i18n.Tr "repo.file_too_large"}}</strong></td>
-						{{else if .IsNoteBook}}
-                            <td id="notebook"></td>
 						{{else}}
 							<td class="lines-num">{{.LineNums}}</td>
 							<td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol class="linenums">{{.FileContent}}</ol></code></pre></td>
 						{{end}}
 						</tr>
 					</tbody>
-				</table>
+				 </table>
+				{{end}}
 			{{end}}
 		</div>
 	</div>
@@ -134,6 +137,9 @@ function showNoteBook(){
    var isNoteBook = {{.IsNoteBook}}
    if (isNoteBook) {
      var jsonStr = "{{.FileContent}}"
+     nb.markdown.setOptions({
+       baseUrl: {{.FileParentURL}}
+     });
      var notebook = nb.parse(JSON.parse(jsonStr));
      var rendered = notebook.render();
      $("#notebook").append(rendered);