# 书签JSON 转HTML

**Repository Path**: lsnu/bookmark-json-to-html

## Basic Information

- **Project Name**: 书签JSON 转HTML
- **Description**: 问题：Smart Bookmark插件书签导出为JSON，无法导入浏览器
解决方案：将JSON转为浏览器书签HTML文件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-09
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: SmartBookmark

## README



# 书签 JSON 转 HTML 工具 (Bookmark JSON to HTML)

一个基于 Electron 和 Vue.js 的桌面应用程序，用于将书签 JSON 文件转换为 HTML 格式。

## 项目简介

本项目是一个跨平台桌面应用，主要功能包括：

- **JSON 到 HTML 转换**：将 JSON 格式的书签数据转换为标准 HTML 书签文件
- **文件上传**：支持拖拽和点击上传 JSON 文件
- **文件下载**：生成可导出的 HTML 书签文件
- **安全处理**：对 HTML 内容进行转义处理，防止注入攻击

## 技术栈

- **Electron**：跨平台桌面应用框架
- **Vue.js 3**：前端渐进式框架
- **Element Plus**：Vue 3 组件库
- **Vite**：构建工具

## 项目结构

```
├── src/
│   ├── main/                 # Electron 主进程代码
│   │   └── index.js         # 主窗口创建和事件监听
│   ├── preload/             # 预加载脚本
│   │   └── index.js         # 主进程与渲染进程通信桥梁
│   └── renderer/            # 渲染进程（前端）代码
│       ├── src/
│       │   ├── App.vue      # 主应用组件
│       │   ├── main.js      # 应用入口
│       │   ├── hooks/       # 自定义钩子函数
│       │   │   ├── DownloadRegionHook.js  # 下载相关逻辑
│       │   │   └── UploadRegionHook.js    # 上传相关逻辑
│       │   ├── assets/      # 静态资源（SVG 图标等）
│       │   └── style.css    # 全局样式
│       └── index.html       # HTML 模板
├── build/                   # 构建配置（macOS 权限文件等）
├── resources/              # 应用图标资源
├── electron.vite.config.mjs # Vite 配置
├── package.json            # 项目依赖配置
└── electron-builder.yml    # Electron Builder 配置
```

## 功能特点

1. **简洁的 UI 界面**：采用左右分栏设计，左侧为上传区域，右侧为下载区域
2. **拖拽上传**：支持将 JSON 文件拖拽到上传区域
3. **一键转换**：快速将 JSON 书签转换为 HTML 格式
4. **跨平台支持**：基于 Electron，支持 Windows、macOS、Linux

## 安装说明

### 环境要求

- Node.js 16.x 或更高版本
- npm 或 yarn 包管理器

### 安装步骤

1. 克隆项目到本地：

```bash
git clone https://gitee.com/lsnu/bookmark-json-to-html.git
cd bookmark-json-to-html
```

2. 安装项目依赖：

```bash
npm install
```

3. 启动开发环境：

```bash
npm run dev
```

4. 构建生产版本：

```bash
npm run build
```

## 使用说明

1. 启动应用后，会显示主界面
2. **上传区域**：将 JSON 格式的书签文件拖拽到左侧区域或点击选择文件
3. **转换处理**：系统会自动解析 JSON 数据并生成 HTML 格式的书签
4. **下载保存**：点击下载按钮将转换后的 HTML 文件保存到本地

## 脚本命令

| 命令 | 描述 |
|------|------|
| `npm run dev` | 启动开发服务器 |
| `npm run build` | 构建生产版本 |
| `npm run preview` | 预览构建后的应用 |
| `npm run lint` | 代码检查 |

## API 参考

### DownloadRegionHook.js

提供书签数据转换功能：

- `GenerateHtmlText()`：将 JSON 数据转换为 HTML 格式字符串
- `escapeHtml()`：对特殊字符进行 HTML 转义，确保输出安全

## 许可证

本项目遵循开源协议，具体许可证信息请参考项目根目录的 LICENSE 文件。

## 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进本项目。

## 联系方式

- 项目地址：https://gitee.com/lsnu/bookmark-json-to-html
- 问题反馈：请在 Gitee 仓库中创建 Issue