修复markdown内容的幻灯片显示异常问题

wenjing-xin · Jun 21, 2024 · f69ba05 · f69ba05
1 parent a080b23
commit f69ba05
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 13 deletions.
diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
@@ -24,7 +24,7 @@ spec:
           - $formkit: select
             if: $get(enableSlide).value
             name: themeName
-            lable: 幻灯片的主题风格
+            label: 幻灯片的主题风格
             value: "black"
             options:
               - label: "暗黑风格"
@@ -35,6 +35,28 @@ spec:
                 value: white
               - label: "夜晚"
                 value: night
+              - label: "白色对比度（逐字标题）"
+                value: white_contrast_compact_verbatim_headers
+              - label: "简约"
+                value: simple
+              - label: "血之霓裳"
+                value: blood
+              - label: "月球"
+                value: moon
+              - label: "德古拉"
+                value: dracula
+              - label: "beige"
+                value: beige
+              - label: "black-contrast"
+                value: black-contrast
+              - label: "灰白质感"
+                value: league
+              - label: "serif"
+                value: serif
+              - label: "solarized"
+                value: solarized
+              - label: "白色对比度"
+                value: white-contrast
 
 
       - group: copyAdd

diff --git a/src/main/resources/static/libs/customEle/bloghaoTag.js b/src/main/resources/static/libs/customEle/bloghaoTag.js
@@ -171,7 +171,8 @@ function extractHeight(occupied, width, height) {
                     height: this.getAttribute("height") || "500",
                 };
                 const slideMarkdown = getDirectEle(this, "slide-markdown");
-                let slideContent = slideMarkdown.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
+                let slideContent = slideMarkdown.innerHTML.trim().replaceAll("<br>", "---");
+                console.log( slideContent);
                 this.render(slideContent);
             }
             render(slideContent) {
@@ -182,16 +183,9 @@ function extractHeight(occupied, width, height) {
                         <div class="reveal" id="reveal-slide" style="width: ${this.options.width};height: ${this.options.height}px">
                             <div class="slides">
                                 <section data-markdown>
-                                     <textarea data-template>
-                                       ## 幻燈片 1
-                                       包含一些文本和一個[鏈接](https://hakim.se)的段落。
-                                       
-                                       ---
-                                       ## 幻燈片 2
-                                       
-                                       ---
-                                       ## 幻燈片 3   
-                                     </textarea>
+                                    <textarea data-template>
+                                       ${slideContent}
+                                    </textarea>
                                 </section>
                             </div>
                         </div>`;

diff --git a/src/main/resources/static/libs/customEle/customEle.css b/src/main/resources/static/libs/customEle/customEle.css
@@ -41,4 +41,9 @@
 }
 #bloghao-img-thumb{
     margin-bottom: -15px;
+}
+
+#reveal-slide{
+    border-radius: 12px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
diff --git a/src/main/resources/static/libs/customEle/swipperExecute.js b/src/main/resources/static/libs/customEle/swipperExecute.js
@@ -54,6 +54,7 @@
                 }
             })
         }
+        // 初始化幻灯片配置
         if(document.querySelector("#reveal-slide")){
             let slideView = new Reveal(document.querySelector('#reveal-slide'), {
                 embedded: true,
@@ -66,7 +67,7 @@
                 center: true,
                 hash: true,
                 //RevealZoom,
-                plugins: [  RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight]
+                plugins: [RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight]
             });
         }
     }