md2html.py

import os
import shutil
import markdown
from bs4 import BeautifulSoup
from jinja2 import Environment, FileSystemLoader
import re
from typing import List, Dict

def create_directory_structure():
    """创建所需的目录结构"""
    os.makedirs('dist/images', exist_ok=True)

def collect_markdown_files(root_dir: str) -> List[str]:
    """收集所有的markdown文件"""
    markdown_files = []
    for root, _, files in os.walk(root_dir):
        for file in files:
            if file.endswith('.md'):
                full_path = os.path.join(root, file)
                markdown_files.append(full_path)
    return sorted(markdown_files)

def remove_sidebar_content(md_content: str) -> str:
    """移除markdown文件开头的侧边栏内容"""
    content = re.sub(r'\s*<div class="sidebar">.*?</div>\s*', '', md_content, flags=re.DOTALL)
    content = re.sub(r'\n{3,}', '\n\n', content)
    return content.strip()

def process_images(content: str, source_dir: str) -> str:
    """处理markdown中的图片，复制到images目录并更新引用路径"""
    soup = BeautifulSoup(content, 'html.parser')
    images = soup.find_all('img')
    
    for img in images:
        src = img['src']
        if not src:
            continue
            
        if os.path.isabs(src):
            img_path = src
        else:
            img_path = os.path.join(os.path.dirname(source_dir), src)
            
        img_path = os.path.normpath(img_path)
        
        if os.path.exists(img_path):
            filename = os.path.basename(img_path)
            dst_path = os.path.join('dist', 'images', filename)
            shutil.copy2(img_path, dst_path)
            img['src'] = f'images/{filename}'
    
    return str(soup)

def build_navigation_tree(markdown_files: List[str], base_dir: str) -> Dict:
    """构建导航树结构"""
    nav_tree = {}
    
    for file_path in markdown_files:
        # 获取相对于base_dir的路径
        rel_path = os.path.relpath(file_path, base_dir)
        path_parts = rel_path.split(os.sep)
        
        current_dict = nav_tree
        current_path = []
        
        # 遍历路径的每一部分
        for i, part in enumerate(path_parts):
            current_path.append(part)
            
            if i == len(path_parts) - 1:  # 如果是文件
                name = os.path.splitext(part)[0]
                html_path = f"{name}.html"  # HTML文件直接放在根目录
                current_dict[name] = {
                    'type': 'file',
                    'name': name,
                    'path': html_path
                }
            else:  # 如果是目录
                if part not in current_dict:
                    current_dict[part] = {
                        'type': 'directory',
                        'name': part,
                        'children': {}
                    }
                current_dict = current_dict[part]['children']
    
    return nav_tree

def render_navigation_tree(tree: Dict, level: int = 0) -> str:
    """渲染导航树HTML"""
    html = ''
    indent = '  ' * level
    
    for key, value in tree.items():
        if value['type'] == 'file':
            html += f'{indent}<li><a href="{value["path"]}">{value["name"]}</a></li>\n'
        else:
            html += f'{indent}<li class="directory">\n'
            html += f'{indent}  <span class="folder">{value["name"]}</span>\n'
            html += f'{indent}  <ul>\n'
            html += render_navigation_tree(value['children'], level + 2)
            html += f'{indent}  </ul>\n'
            html += f'{indent}</li>\n'
    
    return html

def create_html_template():
    """创建HTML模板"""
    template_content = '''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .sidebar {
            width: 300px;
            height: 100vh;
            background-color: #f8f9fa;
            padding: 20px;
            position: fixed;
            overflow-y: auto;
            border-right: 1px solid #e9ecef;
            scrollbar-width: thin;
            scrollbar-color: #adb5bd #f8f9fa;
        }
        .sidebar::-webkit-scrollbar {
            width: 8px;
        }
        .sidebar::-webkit-scrollbar-track {
            background: #f8f9fa;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background-color: #adb5bd;
            border-radius: 4px;
            border: 2px solid #f8f9fa;
        }
        .content {
            margin-left: 320px;
            padding: 20px 40px;
            flex: 1;
            max-width: 800px;
            line-height: 1.6;
            margin: 0 auto;
        }
        .sidebar ul {
            list-style: none;
            padding-left: 20px;
            margin: 0;
        }
        .sidebar > ul {
            padding-left: 0;
        }
        .sidebar li {
            margin: 4px 0;
        }
        .sidebar a {
            text-decoration: none;
            color: #495057;
            display: block;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .sidebar a:hover {
            background-color: #e9ecef;
            color: #228be6;
        }
        .folder {
            display: block;
            padding: 4px 8px;
            cursor: pointer;
            color: #343a40;
            font-weight: 500;
        }
        .folder:before {
            content: '▾';
            margin-right: 5px;
            display: inline-block;
            transition: transform 0.2s;
        }
        .directory.collapsed > ul {
            display: none;
        }
        .directory.collapsed > .folder:before {
            transform: rotate(-90deg);
        }
        .sidebar h2 {
            color: #343a40;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto;
        }
        h1, h2, h3, h4, h5, h6 {
            color: #343a40;
            margin-top: 24px;
            margin-bottom: 16px;
        }
        code {
            background-color: #f8f9fa;
            padding: 2px 4px;
            border-radius: 4px;
            font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
        }
        pre {
            background-color: #f8f9fa;
            padding: 16px;
            border-radius: 4px;
            overflow-x: auto;
        }
        blockquote {
            border-left: 4px solid #e9ecef;
            margin: 0;
            padding-left: 20px;
            color: #868e96;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.folder').forEach(function(folder) {
                folder.addEventListener('click', function() {
                    var li = this.parentElement;
                    li.classList.toggle('collapsed');
                });
            });
        });
    </script>
</head>
<body>
    <div class="sidebar">
        <h2>🚀 快速导航</h2>
        <ul>
            {{ navigation_tree | safe }}
        </ul>
    </div>
    <div class="content">
        {{ content | safe }}
    </div>
</body>
</html>
'''
    os.makedirs('templates', exist_ok=True)
    with open('templates/base.html', 'w', encoding='utf-8') as f:
        f.write(template_content)

def convert_markdown_files():
    """转换markdown文件到HTML"""
    # 创建必要的目录结构
    create_directory_structure()
    create_html_template()
    
    # 设置Jinja2环境
    env = Environment(loader=FileSystemLoader('templates'))
    template = env.get_template('base.html')
    
    # 收集所有markdown文件
    markdown_files = collect_markdown_files('markdown_files')
    nav_tree = build_navigation_tree(markdown_files, 'markdown_files')
    navigation_html = render_navigation_tree(nav_tree)
    
    # 转换每个markdown文件
    for md_file in markdown_files:
        print(f'Processing: {md_file}')
        
        # 读取markdown内容
        with open(md_file, 'r', encoding='utf-8') as f:
            md_content = f.read()
        
        # 移除侧边栏内容
        md_content = remove_sidebar_content(md_content)
        
        # 转换markdown到HTML
        html_content = markdown.markdown(md_content, extensions=['tables'])
        
        # 处理图片
        html_content = process_images(html_content, md_file)
        
        # 生成最终的HTML
        name = os.path.splitext(os.path.basename(md_file))[0]
        output = template.render(
            title=name,
            content=html_content,
            navigation_tree=navigation_html
        )
        
        # 所有HTML文件都保存在dist根目录
        output_file = os.path.join('dist', f'{name}.html')
        with open(output_file, 'w', encoding='utf-8') as f:
            f.write(output)
            
    print('转换完成！所有文件都已保存到dist目录。')

if __name__ == '__main__':
    convert_markdown_files()