# personal

**Repository Path**: fenglovebei/personal

## Basic Information

- **Project Name**: personal
- **Description**: 个人数学网站
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-16
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI与数学个人技术博客 - 使用指南

这是一个功能完整的个人技术博客系统，专注于分享AI人工智能和数学相关的技术文章。

## ✨ 功能特性

### 📝 文章管理
- ✅ **在线编辑器** - 支持Markdown语法编写文章
- ✅ **实时预览** - 编辑时即时查看Markdown渲染效果
- ✅ **工具栏快捷操作** - 粗体、斜体、标题、链接、代码、引用、列表
- ✅ **本地存储** - 文章自动保存在浏览器localStorage中
- ✅ **导入Markdown文件** - 支持导入.md格式的本地文件

### 🎨 界面特性
- ✅ **响应式设计** - 完美适配桌面端和移动端
- ✅ **现代化UI** - 渐变色、动画效果、毛玻璃导航栏
- ✅ **文章分类** - 机器学习、数学基础、深度学习、自然语言处理
- ✅ **搜索过滤** - 按分类筛选文章
- ✅ **平滑滚动** - 优化的导航体验

### 🔧 技术栈
- HTML5 + CSS3 + JavaScript
- Markdown解析 (marked.js)
- LocalStorage数据持久化
- Font Awesome图标库

---

## 🚀 快速开始

### 1. 启动博客

```bash
# 方法1: 使用Python
python -m http.server 8000

# 方法2: 使用Node.js
npx http-server -p 8000

# 方法3: 使用PHP
php -S localhost:8000
```

然后在浏览器访问 `http://localhost:8000`

### 2. 打开管理后台

点击导航栏右上角的 **"管理"** 按钮进入后台管理系统。

---

## 📖 如何使用

### 📝 发表文章

#### 方法一：在线编辑器

1. 点击导航栏 **"管理"** 按钮
2. 点击左侧 **"新建文章"** 或文章列表页面的 **"新建文章"** 按钮
3. 填写文章信息：
   - **文章标题** - 文章的标题
   - **分类** - 选择：机器学习/数学基础/深度学习/自然语言处理
   - **文章摘要** - 简短描述文章内容（显示在文章卡片上）
   - **文章内容** - 使用Markdown语法编写正文
4. 点击 **"保存文章"** 按钮

#### 方法二：导入Markdown文件

1. 在管理后台点击左侧 **"导入Markdown"**
2. 点击 **"选择文件"** 按钮，选择本地.md文件
3. 预览内容后点击 **"确认导入"**
4. 系统会自动填充标题和内容，补充摘要后保存

### ✏️ 编辑文章

1. 在文章列表中找到要编辑的文章
2. 点击文章右侧的 **编辑图标** ✏️
3. 修改内容后点击 **"保存文章"**

### 🗑️ 删除文章

1. 在文章列表中找到要删除的文章
2. 点击文章右侧的 **删除图标** 🗑️
3. 确认删除操作

---

## 📝 Markdown语法指南

### 标题

```markdown
# 一级标题
## 二级标题
### 三级标题
```

### 文本样式

```markdown
**粗体文本**
*斜体文本*
***粗斜体文本***
```

### 列表

```markdown
- 无序列表项1
- 无序列表项2

1. 有序列表项1
2. 有序列表项2
```

### 代码

行内代码：`代码`

代码块：
````markdown
```javascript
function hello() {
    console.log("Hello World");
}
```
````

### 引用

```markdown
> 这是一段引用文本
```

### 链接

```markdown
[链接文字](https://example.com)
```

### 图片

```markdown
![图片描述](image-url)
```

### 数学公式（可选扩展）

如果需要支持LaTeX数学公式，可以引入KaTeX或MathJax库：

```markdown
行内公式：$E = mc^2$

块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
```

---

## 💾 数据存储说明

### LocalStorage
所有文章数据存储在浏览器的localStorage中，键名为 `blog_articles`。

### 数据导出与导入

#### 导出数据

打开浏览器控制台（F12），执行：

```javascript
const articles = JSON.parse(localStorage.getItem('blog_articles'));
console.log(JSON.stringify(articles, null, 2));
// 复制输出的JSON保存到文件
```

#### 导入数据

```javascript
const articles = [...]; // 粘贴你的文章数据
localStorage.setItem('blog_articles', JSON.stringify(articles));
```

### 备份建议

建议定期导出文章数据进行备份，因为：
- LocalStorage容量限制（约5-10MB）
- 清除浏览器数据会丢失文章
- 更换浏览器需要重新导入

---

## 🎯 工具栏功能说明

编辑器顶部工具栏提供以下快捷功能：

| 按钮 | 功能 | Markdown语法 |
|------|------|--------------|
| **B** | 粗体 | `**文本**` |
| *I* | 斜体 | `*文本*` |
| H | 标题 | `## 标题` |
| 🔗 | 链接 | `[文字](url)` |
| `<>` | 代码 | `` `代码` `` 或 ` ```代码块``` ` |
| > | 引用 | `> 引用内容` |
• | 列表 | `- 列表项` |
👁️ | 预览 | 切换预览模式 |

---

## 📱 移动端使用

博客完全支持移动端访问：
- 响应式布局自动适配屏幕
- 汉堡菜单（右上角三条横线）展开导航
- 触摸友好的按钮和交互

---

## 🛠️ 高级自定义

### 修改主题颜色

编辑 `styles.css` 文件，修改CSS变量：

```css
:root {
    --primary-color: #2563eb;      /* 主色调 */
    --secondary-color: #7c3aed;    /* 辅助色 */
    --accent-color: #06b6d4;       /* 强调色 */
}
```

### 添加新分类

1. 在 `index.html` 的分类选择框中添加选项：

```html
<option value="新分类ID">新分类名称</option>
```

2. 在 `admin.js` 中更新分类映射：

```javascript
const categoryNames = {
    'ml': '机器学习',
    'math': '数学基础',
    '新分类ID': '新分类名称'
};
```

3. 在 `styles.css` 中添加对应的图标样式

### 集成第三方服务

#### 评论系统
可集成：
- [Gitalk](https://gitalk.github.io/)
- [Valine](https://valine.js.org/)
- [Disqus](https://disqus.com/)

#### 统计分析
可集成：
- [Google Analytics](https://analytics.google.com/)
- [百度统计](https://tongji.baidu.com/)

---

## 🚀 部署建议

### 静态托管平台

由于本博客是纯静态网站，可免费部署到：

- **GitHub Pages** - 推荐，支持自定义域名
- **Netlify** - 自动部署，CDN加速
- **Vercel** - 速度快，支持预览
- **Cloudflare Pages** - 全球CDN

### 部署步骤（以GitHub Pages为例）

1. 创建GitHub仓库
2. 上传所有文件
3. Settings → Pages → Source选择main分支
4. 访问 `https://用户名.github.io/仓库名`

---

## 📚 示例文章模板

```markdown
## 文章标题

### 引言
简要介绍文章背景和内容概述

### 主要内容
详细阐述技术点

#### 代码示例
```python
def example():
    print("Hello World")
```

### 数学公式
如果需要，可以使用LaTeX语法

### 总结
总结全文要点

### 参考资料
- [参考链接1](url)
- [参考链接2](url)
```

---

## ❓ 常见问题

### Q: 文章保存在哪里？
A: 保存在浏览器的LocalStorage中，建议定期导出备份。

### Q: 如何更换图片？
A: 可以使用图床服务（如七牛云、阿里云OSS），然后插入图片链接。

### Q: 支持多人协作吗？
A: 当前版本是单用户版本，如需多人协作可考虑集成后端服务。

### Q: 如何添加代码高亮？
A: 可以引入highlight.js或prism.js库实现代码语法高亮。

### Q: 文章会丢失吗？
A: 如果不清除浏览器数据，文章会一直保留。但强烈建议定期备份。

---

## 🔄 更新日志

### v1.0.0 (2026-01-13)
- ✅ 初始版本发布
- ✅ 文章管理功能
- ✅ Markdown编辑器
- ✅ 实时预览
- ✅ 本地存储
- ✅ 响应式设计

---

## 📄 许可证

MIT License - 自由使用和修改

---

## 🤝 贡献

欢迎提交Issue和Pull Request改进这个项目！

---

## 💡 未来计划

- [ ] 添加代码高亮
- [ ] 支持图片上传
- [ ] 添加搜索功能
- [ ] 支持标签系统
- [ ] 添加阅读统计
- [ ] 导出PDF功能
- [ ] 夜间模式
- [ ] 后端API集成

---

**享受写作！如有问题，请查看文档或提交Issue。** 📝✨