JSF应用中Markdown文档动态链接处理指南

document.addEventListener('DOMContentLoaded', function() {
    // 选择所有在特定内容区域内，且href属性以".md"结尾的链接
    // 假设Markdown内容显示在一个ID为 'markdownDisplayArea' 的div中
    const markdownLinks = document.querySelectorAll('#markdownDisplayArea a[href$=".md"]');

    // ... 后续操作
});

document.addEventListener('DOMContentLoaded', function() {
    const markdownLinks = document.querySelectorAll('#markdownDisplayArea a[href$=".md"]');

    markdownLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认的链接跳转行为

            const targetMdPath = this.getAttribute('href'); // 获取目标Markdown文件的路径
            console.log('Attempting to load Markdown:', targetMdPath);

            // ... 发起AJAX请求
        });
    });
});

import com.vladsch.flexmark.html.HtmlRenderer;
import com.vladsch.flexmark.parser.Parser;
import com.vladsch.flexmark.util.data.MutableDataSet;
import com.vladsch.flexmark.ast.Node;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Map;

@ManagedBean
@ViewScoped // 或 RequestScoped，取决于你的需求
public class MarkdownController {

    // 假设Markdown文档存储在Web应用的某个安全目录，例如 /WEB-INF/markdown-docs
    private static final String MARKDOWN_DOCS_BASE_PATH = "/WEB-INF/markdown-docs";

    public String loadMarkdownContent() {
        FacesContext context = FacesContext.getCurrentInstance();
        Map<String, String> params = context.getExternalContext().getRequestParameterMap();
        String mdPath = params.get("path"); // 获取请求参数中的Markdown文件路径

        if (mdPath == null || mdPath.isEmpty()) {
            return "<p>Error: Markdown file path not specified.</p>";
        }

        try {
            // 构造绝对路径并进行安全验证，防止目录遍历攻击
            String realPath = context.getExternalContext().getRealPath(MARKDOWN_DOCS_BASE_PATH);
            if (realPath == null) {
                return "<p>Error: Base path for Markdown documents not found.</p>";
            }
            Path baseDirPath = Paths.get(realPath);
            Path filePath = baseDirPath.resolve(mdPath).normalize();

            // 确保请求的文件路径位于允许的基路径之下
            if (!filePath.startsWith(baseDirPath)) {
                return "<p>Error: Invalid Markdown file path.</p>";
            }

            // 读取Markdown文件内容
            String markdownSource = Files.readString(filePath);

            // 使用flexmark库渲染Markdown为HTML
            MutableDataSet options = new MutableDataSet();
            // 可在此处配置flexmark的扩展，例如TablesExtension.create()等
            // options.set(Parser.EXTENSIONS, Arrays.asList(TablesExtension.create(), ...));
            Parser parser = Parser.builder(options).build();
            HtmlRenderer renderer = HtmlRenderer.builder(options).build();

            Node document = parser.parse(markdownSource);
            String html = renderer.render(document);

            return html; // 返回渲染后的HTML字符串
        } catch (IOException e) {
            e.printStackTrace();
            return "<p>Error loading or rendering Markdown: " + e.getMessage() + "</p>";
        } catch (Exception e) {
            e.printStackTrace();
            return "<p>An unexpected error occurred: " + e.getMessage() + "</p>";
        }
    }
}

// ... 在点击事件监听器内部 ...
fetch('/your-app/markdown-renderer?path=' + encodeURIComponent(targetMdPath))
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok: ' + response.statusText);
        }
        return response.text(); // 服务器应返回HTML字符串
    })
    .then(htmlContent => {
        // ... 更新页面内容
    })
    .catch(error => {
        console.error('Error loading Markdown content:', error);
        // 可以在这里向用户显示错误消息
    });

// ... 在fetch的.then(htmlContent => { ... }) 内部 ...
const displayArea = document.getElementById('markdownDisplayArea');
if (displayArea) {
    displayArea.innerHTML = htmlContent;
    // 重要：新加载的内容可能包含新的Markdown链接，需要重新绑定事件
    rebindMarkdownLinks(); // 调用辅助函数重新绑定事件
}

// 辅助函数：用于在内容更新后重新绑定链接事件
function rebindMarkdownLinks() {
    const newMarkdownLinks = document.querySelectorAll('#markdownDisplayArea a[href$=".md"]');

    newMarkdownLinks.forEach(link => {
        // 避免重复添加监听器，可以通过一个数据属性来标记
        if (!link.dataset.hasClickListener) {
            link.addEventListener('click', function(event) {
                event.preventDefault();
                const targetMdPath = this.getAttribute('href');
                console.log('Loading new Markdown:', targetMdPath);

                fetch('/your-app/markdown-renderer?path=' + encodeURIComponent(targetMdPath))
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok: ' + response.statusText);
                        }
                        return response.text();
                    })
                    .then(htmlContent => {
                        document.getElementById('markdownDisplayArea').innerHTML = htmlContent;
                        rebindMarkdownLinks(); // 递归调用，处理新内容中的链接
                    })
                    .catch(error => console.error('Error loading new Markdown content:', error));
            });
            link.dataset.hasClickListener = 'true'; // 标记已添加监听器
        }
    });
}

// 初始页面加载时调用一次
document.addEventListener('DOMContentLoaded', function() {