更改内容缩进功能为js识别

wenjing-xin · Jul 28, 2024 · a485b3f · a485b3f
1 parent 384adf8
commit a485b3f
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 18 deletions.
diff --git a/src/main/java/xin/wenjing/blogHao/entity/Settings.java b/src/main/java/xin/wenjing/blogHao/entity/Settings.java
@@ -68,6 +68,12 @@ public static class ContentIndent{
         private String postIndentNodeName;
         private String pageIndentNodeName;
         private String isOnlyPostIndent;
+        private List<ExcludeNodeList> excludeNodeList;
+    }
+
+    @Data
+    public static class ExcludeNodeList{
+        private String nodeName;
     }
 
     /**

diff --git a/src/main/java/xin/wenjing/blogHao/processor/MiniToolsProcessor.java b/src/main/java/xin/wenjing/blogHao/processor/MiniToolsProcessor.java
@@ -8,10 +8,14 @@
 import org.thymeleaf.model.IModelFactory;
 import org.thymeleaf.processor.element.IElementModelStructureHandler;
 import reactor.core.publisher.Mono;
+import run.halo.app.plugin.PluginContext;
 import run.halo.app.plugin.ReactiveSettingFetcher;
 import run.halo.app.theme.dialect.TemplateHeadProcessor;
 import xin.wenjing.blogHao.entity.Settings;
 import xin.wenjing.blogHao.util.ScriptContentUtils;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
 import java.util.Properties;
 
 /**
@@ -27,6 +31,7 @@ public class MiniToolsProcessor implements TemplateHeadProcessor {
 
     static final PropertyPlaceholderHelper PROPERTY_PLACEHOLDER_HELPER = new PropertyPlaceholderHelper("${", "}");
 
+    private final PluginContext pluginContext;
 
     @Override
     public Mono<Void> process(ITemplateContext context, IModel model, IElementModelStructureHandler structureHandler) {
@@ -42,7 +47,14 @@ private String miniToolsScript(Settings.MiniTool miniTool, ITemplateContext cont
 
         final Properties contentIndentProperties = new Properties();
         contentIndentProperties.setProperty("postNodeName", miniTool.getContentIndent().getPostIndentNodeName());
+        contentIndentProperties.setProperty("pageNodeName", miniTool.getContentIndent().getPageIndentNodeName());
+        contentIndentProperties.setProperty("version", pluginContext.getVersion());
+        List<String> excludeNodeName = new ArrayList<>();
+        miniTool.getContentIndent().getExcludeNodeList().stream().forEach(item -> {
+            excludeNodeName.add(item.getNodeName());
+        });
 
+        contentIndentProperties.setProperty("excludeEle", excludeNodeName.toString());
         StringBuilder injectCode = new StringBuilder();
 
         // 中英文空格脚本
@@ -52,28 +64,35 @@ private String miniToolsScript(Settings.MiniTool miniTool, ITemplateContext cont
 
         // 段落内容首行缩进
         if(miniTool.getContentIndent().isEnableContentIndent()){
+
             String templateId = ScriptContentUtils.getTemplateId(context);
-            final String postIndentStyle = """
-                                      <style type="text/css">
-                                            ${postNodeName} p:not(li>p):not(blockquote>p){text-indent: 2em;}
-                                      </style>
-                                      """;
-            final String allIndentStyle = """
-                                      <style type="text/css">
-                                            ${postNodeName} p:not(li>p):not(blockquote>p){
-                                                text-indent: 2em;
-                                            }
-                                            ${pageNodeName} p:not(li>p):not(blockquote>p){
-                                                text-indent: 2em;
-                                            }
-                                      </style>
-                                      """;
+
+            final String jsScript = """
+                                      <script src="/plugins/plugin-blog-hao/assets/static/custom/textIndent.js?v=${version}"></script>
+                                      <script data-pjax type="text/javascript">
+                                          function initTextIndent(){
+                                              let nodeName = {
+                                                    postNodeName: "${postNodeName}",
+                                                    pageNodeName: "${pageNodeName}"
+                                              }
+                                              let excludeEle = "${excludeEle}";
+                                              new executeTextIndent(nodeName, excludeEle, ${isOnlyPost});
+                                          }
+                                          document.addEventListener("DOMContentLoaded", function() {
+                                              initTextIndent();
+                                          });
+                                          document.addEventListener("pjax:complete", function() {
+                                              initTextIndent();
+                                          });
+                                      </script>
+                                    """;
             if(miniTool.getContentIndent().getIsOnlyPostIndent().equals("onlyPost") && templateId.equals("post")){
-                injectCode.append(PROPERTY_PLACEHOLDER_HELPER.replacePlaceholders(postIndentStyle, contentIndentProperties));
+                contentIndentProperties.setProperty("isOnlyPost", "true");
             }else if(miniTool.getContentIndent().getIsOnlyPostIndent().equals("globalPage")){
-                contentIndentProperties.setProperty("pageNodeName", miniTool.getContentIndent().getPageIndentNodeName());
-                injectCode.append(PROPERTY_PLACEHOLDER_HELPER.replacePlaceholders(allIndentStyle, contentIndentProperties));
+                contentIndentProperties.setProperty("isOnlyPost", "false");
             }
+            String executeJs = PROPERTY_PLACEHOLDER_HELPER.replacePlaceholders(jsScript, contentIndentProperties);
+            injectCode.append(executeJs);
         }
 
         return injectCode.toString();

diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
@@ -258,6 +258,21 @@ spec:
                     label: 仅针对文章页面
                   - value: globalPage
                     label: 所有页面
+              - $formkit: repeater
+                if: $get(enableContentIndent).value
+                id: excludeNodeList
+                key: excludeNodeList
+                name: excludeNodeList
+                label: 排除缩进的一些元素
+                help: 比如一些图片元素被包裹在p标签里，那么就填写img，对其进行排除或者排除p标签内含有某个类名、id名的属性
+                value: [ ]
+                max: 12
+                min: 0
+                children:
+                  - $formkit: text
+                    name: nodeName
+                    value:
+                    label: 排除的节点名称
           - $formkit: group
             name: colorless
             label: 站点失色

diff --git a/src/main/resources/static/custom/textIndent.js b/src/main/resources/static/custom/textIndent.js
@@ -0,0 +1,35 @@
+;
+(function (){
+    const executeTextIndent = function (node, excludeEleObj, isOnlyPost){
+
+        const allPostEle = document.querySelectorAll(node.postNodeName + " p:not(li>p):not(blockquote>p");
+        let allPageEle = []
+        if(!Boolean(isOnlyPost)){
+            allPageEle = document.querySelectorAll(node.pageNodeName + " p:not(li>p):not(blockquote>p");
+        }
+        let excludeEleList = [];
+        if(excludeEleObj && excludeEleObj.length){
+            let resolveExcludeNodeList = excludeEleObj.substring(1, excludeEleObj.length -1).split(",").map(item=> item.toString().trim());
+            excludeEleList.push(...resolveExcludeNodeList);
+        }
+        allPostEle.forEach(item => {
+            excludeEleList.forEach(excludeItem => {
+                if (item.innerHTML.toString().indexOf(excludeItem) == -1) {
+                    item.style.textIndent = '2em';
+                }else{
+                    item.style.textIndent = '0em';
+                }
+            });
+        });
+        allPageEle.forEach(item => {
+            excludeEleList.forEach(excludeItem => {
+                if (item.innerHTML.toString().indexOf(excludeItem) == -1) {
+                    item.style.textIndent = '2em';
+                }else{
+                    item.style.textIndent = '0em';
+                }
+            });
+        });
+    }
+    window.executeTextIndent = executeTextIndent;
+})();