# hoppin-blog-front

**Repository Path**: hoppin/hoppin-blog-front

## Basic Information

- **Project Name**: hoppin-blog-front
- **Description**: hoppin的博客，纯AI管理，在线访问：https://blog.hoppinzq.com
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: dev
- **Homepage**: https://blog.hoppinzq.com
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-10
- **Last Updated**: 2026-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: AI, hoppinzq, blog

## README

# 🍥HOPPINAI-blog

> 这个markdown是给程序员看的，也是给AI看的，因此我们会在这个地方补充一些提示词，以便AI更好的理解这个工程。

基于 [Astro](https://astro.build) 开发的静态博客模板。

## ✨ 功能特性

- [x] 基于 Astro 和 Tailwind CSS 开发
- [x] 流畅的动画和页面过渡
- [x] 标签分类
- [x] 归档
- [x] 亮色 / 暗色模式
- [x] 自定义主题色和横幅图片
- [x] 响应式设计
- [x] 评论
- [x] 搜索
- [x] 文内目录
- [x] 微软clarity集成
- [x] 友链
- [x] 置顶文章
- [x] 更新日志
- [*] 音乐
- [x] 图表支持
- [x] 来源类型（原创、AI生成、转载）



## 👀 要求

- Node.js <= 22
- pnpm <= 9


## 🚀 使用方法 

1. 进行本地开发，Clone 新的仓库，执行 `pnpm install` 和 `pnpm add sharp` 以安装依赖  
   - 若未安装 [pnpm](https://pnpm.io)，执行 `npm install -g pnpm`
2. 通过配置文件 `src/config.ts` 自定义博客
3. 执行 `pnpm new-post <filename>` 创建新文章，并在 `src/content/posts/` 目录中编辑
4. 参考[官方指南](https://docs.astro.build/zh-cn/guides/deploy/)将博客部署至 Vercel, Netlify, GitHub Pages 等；部署前需编辑 `astro.config.mjs` 中的站点设置。

## ⚙️ 文章 Frontmatter

```yaml
---
title: 我的第一个博客
published: 2023-09-09
description: 这是我的第一个博客
image: ./cover.jpg
tags: ['Foo', 'Bar']
category: 'Front-end'
draft: false
lang: 'zh-CN'      # 仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
sourceType: '原创'  # 可选值：原创、AI生成、转载，默认为原创
top: true           # 是否置顶
aiPolishUrl: 'https://example.com/polished'  # （可选）AI润色版本的外部链接，填写后文章标题旁会显示"AI润色"按钮
---
```
注意：一些AI生成的文章我会标注AI生成。一些爬取的文章我也会标注，并提供转载原链接。我自己编写的博客没有这些标注。


## 🧞 指令

下列指令均需要在项目根目录执行：

| Command                           | Action                            |
|:----------------------------------|:----------------------------------|
| `pnpm install` 并 `pnpm add sharp` | 安装依赖                              |
| `pnpm dev`                        | 在 `localhost:4321` 启动本地开发服务器      |
| `pnpm build`                      | 构建网站至 `./dist/`                   |
| `pnpm preview`                    | 本地预览已构建的网站                        |
| `pnpm new-post <filename>`        | 创建新文章                             |
| `pnpm astro ...`                  | 执行 `astro add`, `astro check` 等指令 |
| `pnpm astro --help`               | 显示 Astro CLI 帮助                   |

# 🔧 一些配置，教教我们的笨AI
以下是一些已有的配置，这其实是AI写的😀
## 📁 配置文件：src/config.ts  
### 🌐 网站基础配置（siteConfig）
| 配置项 | 当前内容 | 说明 |
| ----- | --- | --- |
| 标题 | HOPPINAI | 网站主标题 |
| 副标题 | hoppin的AI网站 | 网站副标题 |
| 语言 | zh_CN | 网站语言设置为简体中文 |
| 主题色 | hue: 250 | 主题色调为紫色系 |
| 主题色固定 | true | 禁止访客更改主题色 |

### 🖼️ Banner 轮播配置
Banner 支持轮播效果，可配置多张图片，每张图片可设置标题、描述和跳转链接。

| 配置项 | 当前内容 | 说明 |
| ----- | --- | --- |
| 启用状态 | true | 启用顶部横幅 |
| 轮播间隔 | 5000 | 自动轮播间隔（毫秒），默认 5000 |
| 轮播图片 | slides 数组 | 每项为一个轮播 slide 对象 |
| 版权信息 | true | 显示版权文本 |
| 版权文本 | 首页 | 版权文本内容 |
| 版权链接 | https://hoppinzq.com | 版权文本跳转链接 |

**Slide 对象字段：**

| 字段 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| `src` | string | 是 | 图片路径，相对于 /src 目录；以 `/` 开头则为 /public 目录 |
| `position` | string | 否 | 图片裁切位置，可选 `top` / `center` / `bottom`，默认 `center` |
| `title` | string | 否 | 轮播标题，显示在图片底部 |
| `description` | string | 否 | 轮播描述，显示在标题下方 |
| `link` | string | 否 | 点击跳转链接，支持内部路径（如 `/`）和外部链接（如 `https://example.com`，自动新窗口打开） |

**配置示例：**
```ts
banner: {
    enable: true,
    interval: 5000,
    slides: [
        {
            src: "assets/images/banner.png",
            position: "center",
            title: "HOPPINAI",
            description: "hoppin的AI网站",
            link: "/",
        },
        {
            src: "/images/banner2.jpg",
            position: "top",
            title: "第二张轮播图",
            description: "点击查看详情",
            link: "https://example.com",
        },
    ],
    credit: {
        enable: true,
        text: "首页",
        url: "https://hoppinzq.com",
    },
},
```

**轮播特性：**
- 仅配置 1 张图片时不显示箭头和圆点指示器
- 自动轮播 + 鼠标悬停暂停，离开后继续
- 左右箭头 hover 时显示，点击可手动切换
- 底部圆点指示器可直接点击跳转到对应 slide
- 标题和描述以底部渐变遮罩叠加显示
- 页面切换（Swup）后自动重新初始化轮播

### 📑 目录配置（TOC）
| 配置项 | 当前内容 | 说明 |
| ----- | --- | --- |
| 启用状态 | true | 启用文章目录 |
| 目录深度 | 2 | 显示最多 2 级标题 |

### 🔗 导航栏配置（navBarConfig）
当前包含以下导航链接：

- 🏠 首页 （Home）
- 📦 归档 （Archive）
- 👤 关于 （About）
- 🔗 链接 （Links）
- 🐱 Github （外部链接）
### 👤 个人资料配置（profileConfig）
| 配置项 | 当前内容 | 说明 |
| ----- | --- | --- |
| 头像 | assets/images/avatar.png | 相对于 /src 目录 |
| 用户名 | HOPPINZQ | 显示名称 |
| 简介 | talk is cheap,show me the code | 个人简介 |
| 社交链接 | 如上导航链接 | 包括首页、微信、Steam、GitHub |

### 📄 许可证配置（licenseConfig）
| 配置项 | 当前内容 | 说明 |
| ----- | --- | --- |
| 启用状态 | true | 启用版权声明 |
| 许可证类型 | CC BY-NC-SA 4.0 | 具体许可证类型 |
| 许可证链接 | https://creativecommons.org/licenses/by-nc-sa/4.0/ | 许可证详情链接 |

### 🎨 代码高亮配置（expressiveCodeConfig）
| 配置项 | 当前内容 | 说明 |
| ----- | --- | --- |
| 主题 | github-dark | 使用 GitHub 深色主题 |

### 📊 分析工具配置
| 配置项 | 当前内容 | 说明 |
| ----- | --- | --- |
| Microsoft Clarity | 启用 | 用户行为分析 |
| 项目 ID | t5clcw9odh | Clarity 项目标识 |

### 🖥️ 网站图标（Favicon）
使用自定义图标，从外部链接加载：

- 图标地址 : https://hoppinzq.com/static/images/favicon.ico
- 主题 : 亮色模式
- 尺寸 : 32x32 像素

# 然后，你可以命令AI，修改标题，修改xxx...

### 目录结构
- `src/` 项目源代码目录
- `public/` 静态资源目录
- `src/components/` 博客组件的目录
- `src/layouts/` 博客布局的目录
- `src/pages/` 博客页面的目录
- `src/styles/` 博客样式的目录
- `src/utils/` 博客工具函数的目录
- `src/types/` 博客类型定义的目录
- `src/consts/` 博客常量定义的目录
- `src/i18n/` 博客国际化资源的目录