# zeroonebook

**Repository Path**: gkfg/zeroonebook

## Basic Information

- **Project Name**: zeroonebook
- **Description**: zeroonebook
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/gkfg/zeroonebook/blob/master/dist/index.html
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-10
- **Last Updated**: 2026-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite 博客网站

一个基于 Vue 3 + Vite 构建的黑色风格博客网站，支持 Markdown 文章管理和 Google AdSense 广告集成。

## 功能特点

- 📚 **小说书架模式** - 系列文章以书籍形式展示
- 📝 **Markdown 支持** - 支持从外部 MD 文件加载文章
- 🤖 **自动生成** - articles.json 自动刷新，无需手动维护
- 📊 **广告集成** - 支持 Google AdSense 广告
- 📱 **响应式设计** - 适配各种屏幕尺寸

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 生产构建

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 文章管理

### 目录结构

在 `src/data/articles/` 目录下创建子文件夹来组织文章系列：

```
src/data/articles/
├── ComfyUI从0到1/           # 系列名称作为文件夹名
│   ├── 第01章-概述.md
│   ├── 第02章-安装.md
│   └── ...
├── Vue入门教程/              # 另一个系列
│   ├── 第01章-介绍.md
│   └── ...
└── articles.json            # 自动生成，无需手动维护
```

### Markdown 文章格式

每篇文章支持 Frontmatter 元数据：

```markdown
---
title: 章节标题
slug: chapter-slug
date: 2024-01-01
series: 系列名称
excerpt: 文章摘要
tags: [tag1, tag2]
---

文章内容...
```

## Google AdSense 配置

### 环境变量

复制 `.env.example` 并配置你的 AdSense 信息：

```bash
cp .env.example .env
```

编辑 `.env` 文件：

```env
# Google AdSense Publisher ID
VITE_ADSENSE_PUBLISHER_ID=ca-pub-XXXXXXXXXXXXXXXX

# 广告位 ID
VITE_ADSENSE_IN_ARTICLE_SLOT=1234567890
VITE_ADSENSE_BANNER_SLOT=2345678901
VITE_ADSENSE_SIDEBAR_SLOT=3456789012
VITE_ADSENSE_FOOTER_SLOT=4567890123

# 是否启用广告（生产环境默认启用）
VITE_ADSENSE_ENABLED=true
```

### 广告位置

- **首页横幅**: 首页顶部
- **文章内广告**: 文章第3段后自动插入
- **页脚广告**: 页脚区域

## 技术栈

- Vue 3 + Vite
- Vue Router
- Marked (Markdown 解析)
- Highlight.js (代码高亮)

## 部署

### GitHub Pages

1. 配置 GitHub Actions 自动部署
2. 确保 `vite.config.js` 中的 `base` 配置正确

## 开发说明

- 开发环境下广告显示占位符
- 生产环境下自动加载真实广告
- 修改 MD 文件自动触发热重载