优化幻灯片功能代，新增插件可选配置项

wenjing-xin · Jun 23, 2024 · e82e467 · e82e467
1 parent ce9ecfc
commit e82e467
Show file tree

Hide file tree

Showing 12 changed files with 277 additions and 41 deletions.
diff --git a/src/main/java/xin/wenjing/blogHao/controller/BlogHaoConfig.java b/src/main/java/xin/wenjing/blogHao/controller/BlogHaoConfig.java
@@ -0,0 +1,39 @@
+package xin.wenjing.blogHao.controller;
+
+import lombok.RequiredArgsConstructor;
+import org.pf4j.PluginWrapper;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import reactor.core.publisher.Mono;
+import run.halo.app.plugin.ApiVersion;
+import run.halo.app.plugin.ReactiveSettingFetcher;
+import xin.wenjing.blogHao.entity.Settings;
+
+/**
+ * 相关配置信息获取
+ * @author: dreamChaser
+ * @date: 2024年06月23日 10:46
+ */
+@RequiredArgsConstructor
+@ApiVersion("blogHao.wenjing.xin/v1alpha1")
+@RequestMapping("/blogHaoConfig")
+@RestController
+public class BlogHaoConfig {
+
+    private final ReactiveSettingFetcher reactiveSettingFetcher;
+
+    private final PluginWrapper pluginWrapper;
+
+    @GetMapping("/slide-config")
+    public Mono<Settings.SlideConfig> queryBaseConfigMsg() {
+        Mono<Settings.SlideConfig> slideConfigMono =
+            reactiveSettingFetcher.fetch(Settings.SlideConfig.GROUP_NAME, Settings.SlideConfig.class)
+                .defaultIfEmpty(new Settings.SlideConfig())
+                .map(item -> item);
+        return slideConfigMono;
+    }
+
+
+
+}
diff --git a/src/main/java/xin/wenjing/blogHao/entity/Settings.java b/src/main/java/xin/wenjing/blogHao/entity/Settings.java
@@ -3,6 +3,7 @@
 import lombok.AllArgsConstructor;
 import lombok.Data;
 import java.time.LocalDate;
+import java.util.List;
 
 /**
  * 功能描述
@@ -21,6 +22,7 @@ public static class SlideConfig{
         public final static String GROUP_NAME = "slideConfig";
         private boolean enableSlide;
         private String themeName;
+        private SlidePlugin slidePlugin;
     }
 
     /**
@@ -77,4 +79,22 @@ public static class Colorless{
         private LocalDate selfCloseAt;
     }
 
+    /**
+     * 幻灯片配置的子内容
+     * 用于插件配置
+     */
+    @Data
+    public static class SlidePlugin{
+        private List<EnablePlugin> enablePlugin;
+    }
+
+    /**
+     * 幻灯片配置的子内容
+     * 用于插件配置的数据模型
+     */
+    @Data
+    public static class EnablePlugin{
+        private String pluginName;
+    }
+
 }
diff --git a/src/main/java/xin/wenjing/blogHao/processor/ColorlessProcessor.java b/src/main/java/xin/wenjing/blogHao/processor/ColorlessProcessor.java
@@ -17,7 +17,6 @@
 
 /**
  * 功能描述
- *
  * @author: dreamChaser
  * @date: 2024年06月16日 19:50
  */

diff --git a/src/main/java/xin/wenjing/blogHao/processor/SlideProcessor.java b/src/main/java/xin/wenjing/blogHao/processor/SlideProcessor.java
@@ -1,8 +1,6 @@
 package xin.wenjing.blogHao.processor;
 
 import lombok.AllArgsConstructor;
-import org.apache.commons.lang3.BooleanUtils;
-import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Component;
 import org.thymeleaf.context.ITemplateContext;
 import org.thymeleaf.model.IModel;
@@ -42,6 +40,6 @@ public Mono<Void> process(ITemplateContext context, IModel model, IElementModelS
         }
         String theme = slideConfig.getThemeName();
         final IModelFactory modelFactory = context.getModelFactory();
-        return Mono.just(modelFactory.createText(ScriptContentUtils.slideScript(theme))).doOnNext(model::add).then();
+        return Mono.just(modelFactory.createText(ScriptContentUtils.slideScript(slideConfig))).doOnNext(model::add).then();
     }
 }
diff --git a/src/main/java/xin/wenjing/blogHao/util/ScriptContentUtils.java b/src/main/java/xin/wenjing/blogHao/util/ScriptContentUtils.java
@@ -1,9 +1,9 @@
 package xin.wenjing.blogHao.util;
 
-import org.pf4j.PluginWrapper;
 import org.springframework.util.PropertyPlaceholderHelper;
 import org.thymeleaf.context.ITemplateContext;
 import xin.wenjing.blogHao.entity.Settings;
+import java.util.List;
 import java.util.Properties;
 
 /**
@@ -134,31 +134,84 @@ public static String blogHaoEle(String version){
         final Properties properties = new Properties();
         properties.setProperty("version", version);
         final String scriptTmpl = """
-            <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
-            <script data-pjax src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
+            <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/swiper@8/swiper-bundle.min.css">
+            <script data-pjax src="/plugins/plugin-blog-hao/assets/static/libs/swiper@8/swiper-bundle.min.js"></script>
             <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/customEle/customEle.css?version=${version}" />
             <script data-pjax src="/plugins/plugin-blog-hao/assets/static/libs/customEle/bloghaoTag.js?version=${version}"></script>
-            <script data-pjax src="/plugins/plugin-blog-hao/assets/static/libs/customEle/swipperExecute.js?version=${version}"></script>
+            <script data-pjax type="text/javascript" src="/plugins/plugin-blog-hao/assets/static/libs/customEle/swipperExecute.js?version=${version}"></script>
             """;
         return PROPERTY_PLACEHOLDER_HELPER.replacePlaceholders(scriptTmpl, properties);
     }
 
-    public static String slideScript(String theme){
+    /**
+     * 幻灯片渲染
+     * @param slideConfig 幻灯片配置
+     * @return
+     */
+    public static String slideScript(Settings.SlideConfig slideConfig){
+
         final Properties properties = new Properties();
-        properties.setProperty("themeName", theme);
+        properties.setProperty("themeName", slideConfig.getThemeName());
         final String scriptTmpl = """
                 <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/dist/reset.css" />
                 <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/dist/reveal.css" />
                 <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/dist/theme/${themeName}.css" id="theme">
-                <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/highlight/monokai.css">
                 <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/dist/reveal.js"></script>
-                <!-- <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/zoom/zoom.js"></script> -->
-                <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/notes/notes.js"></script>
-                <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/search/search.js"></script>
-                <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/markdown/markdown.js"></script>
-                <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/highlight/highlight.js"></script>
-            """;
-        return PROPERTY_PLACEHOLDER_HELPER.replacePlaceholders(scriptTmpl, properties);
+          """;
+
+        String pluginTmpl = ebableSlidePlugin(slideConfig);
+        return PROPERTY_PLACEHOLDER_HELPER.replacePlaceholders(scriptTmpl + pluginTmpl, properties);
+    }
+
+    /**
+     * 幻灯片插件加载
+     * @param slideConfig
+     * @return
+     */
+    public static String ebableSlidePlugin(Settings.SlideConfig slideConfig){
+
+        List<Settings.EnablePlugin> slidePluginList = slideConfig.getSlidePlugin().getEnablePlugin();
+        StringBuilder injectPluginScript = new StringBuilder();
+
+        for(int i = 0; i < slidePluginList.size(); i++){
+            Settings.EnablePlugin enablePlugin = slidePluginList.get(i);
+            switch (enablePlugin.getPluginName()){
+                case "RevealMarkdown":
+                    injectPluginScript.append("""
+                        <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/markdown/markdown.js" defer></script>
+                        """);
+                    break;
+                case "RevealHighlight":
+                    injectPluginScript.append("""
+                        <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/highlight/monokai.css">
+                        <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/highlight/highlight.js" defer></script>
+                        """);
+                    break;
+                case "RevealMath.KaTeX":
+                    injectPluginScript.append("""
+                        <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/math/math.js" defer></script>
+                        """);
+                    break;
+                case "RevealSearch":
+                    injectPluginScript.append("""
+                        <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/search/search.js" defer></script>
+                        """);
+                    break;
+                case "RevealNotes":
+                    injectPluginScript.append("""
+                        <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/notes/notes.js"></script>
+                        """);
+                    break;
+                case "RevealZoom":
+                    injectPluginScript.append("""
+                        <script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/zoom/zoom.js" defer></script>
+                        """);
+                    break;
+                default:
+
+            }
+        }
+        return injectPluginScript.toString();
     }
 
 }
diff --git a/src/main/resources/extensions/roleTemplate.yaml b/src/main/resources/extensions/roleTemplate.yaml
@@ -0,0 +1,15 @@
+apiVersion: v1alpha1
+kind: Role
+metadata:
+  name: role-template-blog-hao
+  labels:
+    halo.run/role-template: "true"
+    #将配置查看的权限给所有用户
+    rbac.authorization.halo.run/aggregate-to-anonymous: "true"
+  annotations:
+    rbac.authorization.halo.run/module: "BlogHao View"
+    rbac.authorization.halo.run/display-name: "配置查看"
+rules:
+  - apiGroups: [ "blogHao.wenjing.xin" ]
+    resources: [ "blogHaoConfig" ]
+    verbs: [ "get", "list"]
diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
@@ -57,6 +57,38 @@ spec:
                 value: solarized
               - label: "白色对比度"
                 value: white-contrast
+          - $formkit: group
+            name: slidePlugin
+            label: 插件
+            value:
+              enablePlugin:
+                - pluginName: "RevealMarkdown"
+                - pluginName: "RevealHighlight"
+            children:
+              - $formkit: repeater
+                name: enablePlugin
+                id: enablePlugin
+                label: 启用的插件
+                help: "如果为选择使用该插件，则不会出现对应的效果"
+                children:
+                  - $formkit: select
+                    name: pluginName
+                    id: pluginName
+                    key: pluginName
+                    label: "插件列表"
+                    options:
+                      - value: "RevealMarkdown"
+                        label: Markdown编辑幻灯片
+                      - value: "RevealHighlight"
+                        label: 代码语法高亮
+                      - value: "RevealMath.KaTeX"
+                        label: 呈现数学方程式
+                      - value: "RevealSearch"
+                        label: CTRL+Shift+F 搜索幻燈片內容
+                      - value: "RevealNotes"
+                        label: 单独视窗中显示演讲者视图
+                      - value: "RevealZoom"
+                        label: Alt + 点击元素放大
 
 
       - group: copyAdd

diff --git a/src/main/resources/static/libs/customEle/bloghaoTag.js b/src/main/resources/static/libs/customEle/bloghaoTag.js
@@ -73,12 +73,14 @@ function extractHeight(occupied, width, height) {
 
         class ImgGallery extends HTMLElement {
             constructor() {
+
                 super();
                 this.options = {
                     width: this.getAttribute("width") || "98%",
                     height: this.getAttribute("height") || 300,
                     type: this.getAttribute("type") || "normal",
                 };
+
                 const _imgs = getDirectEle(this, "_img");
                 let _innerHTML = _imgs.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
                 let contents = "";
@@ -125,7 +127,7 @@ function extractHeight(occupied, width, height) {
                                     <div class="swiper-wrapper">
                                         ${contents}
                                     </div>
-                               </div>`;
+                             </div>`;
                 if (isThumbsSwiper) {
                     _tmpl = `<div class="swiper" id="${swiperIdName}" style="width:${this.options.width};">
                                     <div class="swiper-wrapper">
@@ -142,31 +144,46 @@ function extractHeight(occupied, width, height) {
             }
         }
 
+        /**
+         * 幻灯片
+         */
         class RevealSlide extends HTMLElement {
             constructor() {
                 super();
                 this.options = {
                     width: this.getAttribute("width") || "100%",
                     height: this.getAttribute("height") || "500",
+                    render: this.getAttribute("render") || "md"
                 };
-                const slideMarkdown = getDirectEle(this, "slide-markdown");
-                let slideContent = slideMarkdown.innerHTML.trim().replaceAll("<br>", "---");
+                let slideContent = getDirectEle(this, "slide-content");
+                if(this.options.render == "md"){
+                    slideContent = slideContent.innerHTML.trim().replaceAll("<br>", "---");
+                }
                 this.render(slideContent);
             }
             render(slideContent) {
                 const realHeight = extractHeight(this.parentElement.offsetWidth, this.options.width, this.options.height);
                 this.setAttribute("height", realHeight);
-
-                this.innerHTML = `
-                        <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>
-                                       ${slideContent}
-                                    </textarea>
-                                </section>
-                            </div>
-                        </div>`;
+                let renderTmpl = "";
+                if(this.options.render == "md"){
+                    renderTmpl = ` 
+                                <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>
+                                               ${slideContent}
+                                            </textarea>
+                                        </section>
+                                    </div>
+                                </div>`;
+                }else{
+                    renderTmpl =  `<div class="reveal" id="reveal-slide" style="width: ${this.options.width};height: ${this.options.height}px">
+                                        <div class="slides">
+                                            ${slideContent}
+                                        </div>
+                                   </div>`;
+                }
+                this.innerHTML = renderTmpl;
             }
         }
 

diff --git a/src/main/resources/static/libs/customEle/customEle.css b/src/main/resources/static/libs/customEle/customEle.css
@@ -39,6 +39,7 @@
     height: 100px !important;
     border-radius: 8px;
 }
+
 #bloghao-img-thumb{
     margin-bottom: -15px;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,6 @@ @@
     /**
      * 功能描述
-     *
      * @author: dreamChaser
      * @date: 2024年06月16日 19:50
      */
@@ Expand Down @@