# LingFrame-Website

**Repository Path**: knight6236/ling-frame-website

## Basic Information

- **Project Name**: LingFrame-Website
- **Description**: LingFrame 官方网站源码。独立仓库维护，与主仓库分离：代码更纯粹，官网可独立迭代。

特性：科技感设计、响应式布局、Markdown文档系统、中英文切换、纯前端控制台演示（无需后端）
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-03-01
- **Last Updated**: 2026-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, CSS, JavaScript

## README

<div align="center">

# LingFrame  Website

### 灵珑框架官方网站源码


[![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)
[![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)
[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

*现代 · 科技 · 极致体验*

</div>

---

## 简介

这是 [LingFrame（灵珑）](https://gitee.com/knight6236_admin/lingframe) 框架的官方网站源码仓库。采用纯前端技术栈构建，打造沉浸式的科技风格视觉体验。

![灵珑框架官方网站截图](./show/main.png)

## 技术栈

| 技术 | 用途 |
|------|------|
| HTML5 | 语义化结构 |
| CSS3 | 动画 / 过渡 / 布局 |
| Tailwind CSS | 原子化样式框架 |
| Vanilla JS | 原生 JavaScript |
| WebGL | 流体模拟背景 |

## 功能模块

### 页面结构

```
├── index.html        # 官网首页
├── docs.html         # 文档中心
├── doc-viewer.html   # 文档阅读器
└── demo.html         # 在线体验
```

**文档中心**

![文档中心截图](./show/doc.png)

**文档阅读器**

![文档阅读器截图](./show/doc-viewer.png)

**在线体验**

![在线体验截图](./show/demo.png)



### 核心特性

- **流体背景**: WebGL 驱动的交互式流体模拟
- **响应式设计**: 完美适配桌面端与移动端
- **组件化架构**: 模块化的页面组件系统
- **Markdown 文档**: 支持中英文双语文档
- **动态架构图**: CSS3 驱动的 3D 架构可视化

## 快速启动

### 方式一：Python

```bash
python -m http.server 8000
```

### 方式二：Node.js

```bash
npx http-server -p 8000
```

### 方式三：VS Code Live Server

使用 Live Server 插件一键启动

## 项目结构

```
Ling/
├── components/          # 可复用组件
│   ├── header.html      # 导航栏
│   ├── footer.html      # 页脚
│   └── background.html  # 流体背景
├── css/
│   └── styles.css       # 主样式文件
├── js/
│   ├── components.js    # 组件加载
│   ├── docs.js          # 文档系统
│   └── doc-viewer.js    # 文档阅读器
├── docs/                # Markdown 文档
│   ├── zh/              # 中文文档
│   └── en/              # 英文文档
├── dashboard/           # 控制台演示
└── index.html           # 入口页面
```

## 视觉特效

| 特效 | 实现方式 |
|------|----------|
| 流体背景 | WebGL + GLSL Shader |
| 3D 架构图 | CSS3 Transform + Animation |
| 滚动动画 | Intersection Observer API |
| 粒子效果 | Canvas 2D |
| 渐变光晕 | CSS Gradient + Filter |

## 浏览器支持

| 浏览器 | 版本 |
|--------|------|
| Chrome | 60+ |
| Firefox | 55+ |
| Safari | 12+ |
| Edge | 79+ |

## 相关链接

- **框架仓库**: [LingFrame Core](https://gitee.com/knight6236_admin/lingframe)
- **在线文档**: [docs.lingframe.cn](https://lingframe.cn/docs)
- **问题反馈**: [Issues](https://gitee.com/knight6236_admin/lingframe-website/issues)



---

<div align="center">

开发：[雪豹同志](https://gitee.com/cnt-code)

</div>