支持自定义链接解析

devlive-community · Dec 29, 2024 · dd23481 · dd23481
1 parent 3bb522f
commit dd23481
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 46 deletions.
diff --git a/lib/extension/marked/pageforge-image.js b/lib/extension/marked/pageforge-image.js
@@ -33,9 +33,7 @@ const PageForgeImageExtension = {
         return false;
     },
     renderer(item) {
-        return loadComponent('image', {
-            imageItem: {item}
-        });
+        return loadComponent('image', {...item});
     }
 };
 

diff --git a/lib/extension/marked/pageforge-link.js b/lib/extension/marked/pageforge-link.js
@@ -0,0 +1,42 @@
+const {marked} = require("marked");
+const {loadComponent} = require("../../component-loader");
+
+// [链接文本](链接URL)                              // 基本语法
+// [链接文本](链接URL "链接标题")                    // 带标题
+// [链接文本](链接URL "链接标题" "_blank")           // 指定打开方式
+const PageForgeLinkExtension = {
+    name: 'pageforgeLink',
+    level: 'inline',
+    start(src) {
+        return src.match(/^\[/)?.index;
+    },
+    tokenizer(src, tokens) {
+        const rule = /^\[(.*?)\]\((.*?)(?:\s+"(.*?)")?(?:\s+"(.*?)")?\)/;
+        const match = rule.exec(src);
+        if (match) {
+            return {
+                type: 'pageforgeLink',
+                raw: match[0],
+                text: match[1],
+                href: match[2],
+                title: match[3] || null,
+                target: match[4] || null,
+                tokens: []
+            };
+        }
+        return false;
+    },
+    renderer(item) {
+        return loadComponent('a', {
+            ...item
+        });
+    }
+};
+
+marked.use({
+    extensions: [
+        PageForgeLinkExtension
+    ]
+});
+
+module.exports = PageForgeLinkExtension;
diff --git a/lib/extension/marked/pageforge-marked.js b/lib/extension/marked/pageforge-marked.js
@@ -1,52 +1,28 @@
 const {marked} = require("marked");
 const {loadComponent} = require('../../component-loader');
 const PageForgeImageExtension = require('./pageforge-image');
+const PageForgeLinkExtension = require('./pageforge-link');
 
 const renderer = {
-    paragraph({tokens, raw, type}) {
-        // 修改图片正则表达式，使其更准确地匹配所有情况
-        const linkRegex = /\[(.*?)\]\((.*?)(?:\s+"(.*?)")?\s*(?:"(.*?)")?\)/g;
-
-        // 获取所有匹配
-        let linkMatches = [...raw.matchAll(linkRegex)];
-
-        tokens = tokens.map(token => {
-            token.raw = raw;
-
-            const isPartOfLink = linkMatches.some(match =>
-                match[0].includes(token.raw)
-            );
-
-            if (isPartOfLink) {
-                token.isLink = true;
-            }
-
-            return token;
-        });
-
+    paragraph({tokens}) {
         return `<p>${this.parser.parseInline(tokens)}</p>\n`;
     },
-
     heading(item) {
         return loadComponent(`h${item.depth}`, {
             text: item.text
         });
     },
-
     space(item) {
         return loadComponent('space');
     },
-
     hr(item) {
         return loadComponent('hr');
     },
-
     text(item) {
         return loadComponent('p', {
             text: item.text
         });
     },
-
     link(item) {
         return loadComponent('a', {
             linkItem: {
@@ -55,24 +31,22 @@ const renderer = {
             }
         });
     },
-
     list(item) {
         return loadComponent('list', {
             item
         });
     },
-
     image(item) {
-        console.log('=========', item)
         return loadComponent('image', {
-            imageItem: {item}
+            item
         });
     }
 };
 
 marked.use({
     extensions: [
-        PageForgeImageExtension
+        PageForgeImageExtension,
+        PageForgeLinkExtension
     ],
     renderer
 });

diff --git a/templates/components/a.js b/templates/components/a.js
@@ -1,14 +1,10 @@
-module.exports = function template(value) {
-    const item = value.linkItem;
-    const matches = item.raw.match(/\[(.*?)\]\((.*?)(?:\s+"(.*?)")?\s*(?:"(.*?)")?\)/);
-    const target = matches?.[4];
-
+module.exports = function template(item) {
     return `
         <a class="text-blue-600 hover:text-blue-800 hover:underline transition-colors duration-200 cursor-pointer"
-           href="${target ? matches[2] : item.href}"
-           target="${target || '_self'}"
-           title="${target ? matches[3] : item.title || ''}">
-            ${target ? matches[1] : item.text}
+           href="${item.href}"
+           target="${item.target || '_self'}"
+           title="item.title || ''}">
+            ${item.text}
         </a>
     `;
 };
diff --git a/templates/components/image.js b/templates/components/image.js
@@ -1,6 +1,4 @@
-module.exports = function template(value) {
-    const item = value.imageItem.item;
-
+module.exports = function template(item) {
     // 构建样式类
     let classes = ['max-w-full', 'h-auto'];