《动漫网站搭建指南》-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00565/article/details/147243568

《动漫网站搭建指南》

anime-website AniProject: Watch Animes, Read Mangas and make Comments on this website made with Next.js, TypeScript, Firebase, Anilist, Consumet and Aniwatch API. AD FREE. 项目地址: https://gitcode.com/gh_mirrors/an/anime-website

1. 项目基础介绍

本项目是一个开源的动漫网站，用户可以在这里观看动漫、阅读漫画以及进行评论交流。该网站利用了AniList、Consumet和Aniwatch API，提供了丰富的动漫和漫画资源信息，包括媒体资料、演员阵容等详细信息。项目采用现代化技术构建，旨在为用户提供一个干净、简洁的观看和阅读体验。

主要编程语言：TypeScript、JavaScript

2. 关键技术和框架

前端框架：Next.js，用于构建服务端渲染的React应用程序。
类型检查：TypeScript，提供静态类型检查，增强代码的可维护性。
数据请求：Axios，用于发送HTTP请求。
状态管理：Redux，管理应用程序的状态。
数据库：Firebase Firestore，云数据库服务。
图形查询语言：GraphQL，用于查询和操作数据。
动画库：Framer Motion，用于创建平滑的动画效果。
轮播组件：Swiper，实现轮播图效果。
API集成：AniList API、Consumet API、Aniwatch API，提供动漫和漫画数据。

3. 安装和配置

准备工作

在开始之前，请确保您的系统中已安装以下软件：

Node.js（推荐使用LTS版本）
Git

安装步骤

克隆项目

首先，使用Git克隆项目仓库到本地：
```
git clone https://github.com/ErickLimaS/anime-website.git
```
安装依赖

进入项目目录，安装所有依赖项：
```
cd anime-website
npm install
```

配置环境变量

创建一个.env.local文件，并添加以下环境变量：

# Consumet API
NEXT_PUBLIC_CONSUMET_API_URL=https://your-hosted-consumet-api-url.com

# Aniwatch API
NEXT_PUBLIC_ANIWATCH_API_URL=https://your-hosted-aniwatch-api-url.com

# Anilist OAuth Settings
NEXT_PUBLIC_ANILIST_CLIENT_ID=your-anilist-client-id
ANILIST_CLIENT_SECRET=your-anilist-secret

# Next.js Route Handler
NEXT_PUBLIC_NEXT_ROUTE_HANDLER_API=https://url-to-where-your-website-is-hosted.com/api/animes-database

# Firebase Settings
NEXT_PUBLIC_FIREBASE_API_KEY=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_PROJECT_ID=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=firebase-storage-bucket

请将上述your-hosted-consumet-api-url.com、your-hosted-aniwatch-api-url.com、your-anilist-client-id、your-anilist-secret、url-to-where-your-website-is-hosted.com以及Firebase相关字段替换为实际的值。

配置Firebase
- 创建一个Firebase项目。
- 配置Firebase认证，确保允许你的主机网站域名。
- 配置Firestore数据库规则。
启动项目

运行以下命令以启动开发服务器：
```
npm run dev
```
访问http://localhost:3000，项目应该已经启动并可以访问。