Thanks to visit codestin.com
Credit goes to github.com

Skip to content

website

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

website

README.md

iCSS 网站

基于 GitHub 上的 iCSS 仓库构建的现代化网站，展示 CSS 奇技淫巧。

功能特性

🎨 主题切换

  • 亮色主题: 适合日间使用
  • 暗色主题: 适合夜间使用，护眼
  • 跟随系统: 自动跟随系统主题设置
  • 持久化: 主题选择会保存到本地存储

🌍 多语言支持

  • 中文: 简体中文界面
  • English: 英文界面
  • 持久化: 语言选择会保存到本地存储

📱 响应式设计

  • 支持桌面端、平板和移动端
  • 自适应布局，提供最佳用户体验

🎯 核心功能

  • 文章列表: 展示所有 CSS 技巧文章
  • 分类筛选: 按分类筛选文章
  • 搜索功能: 支持文章标题搜索
  • 文章详情: 完整的文章内容展示
  • 代码高亮: 支持语法高亮的代码块
  • CodePen 集成: 直接嵌入 CodePen 演示
  • 上一篇/下一篇: 文章导航功能

技术栈

  • 框架: Next.js 14 (App Router)
  • 语言: TypeScript
  • 样式: Tailwind CSS
  • 状态管理: React Context
  • 动画: Framer Motion
  • 图标: Lucide React
  • 代码高亮: react-syntax-highlighter

快速开始

安装依赖

pnpm install

启动开发服务器

pnpm dev

构建生产版本

pnpm build

启动生产服务器

pnpm start

项目结构

icss-website/
├── app/
│   ├── api/                 # API 路由
│   ├── article/            # 文章详情页
│   ├── components/         # 可复用组件
│   ├── contexts/           # React Context
│   ├── lib/                # 工具函数
│   ├── globals.css         # 全局样式
│   ├── layout.tsx          # 根布局
│   └── page.tsx            # 首页
├── public/                 # 静态资源
└── package.json

主题系统

主题配置

主题系统基于 CSS 变量和 Tailwind CSS 的暗色模式实现：

  • CSS 变量: 定义主题色彩
  • Tailwind 配置: 支持 dark: 前缀的类名
  • Context API: 管理主题状态
  • localStorage: 持久化主题选择

自定义主题

可以通过修改 app/globals.css 中的 CSS 变量来自定义主题色彩：

:root {
  --primary: 221.2 83.2% 53.3%;
  --background: 0 0% 100%;
  /* 更多变量... */
}

.dark {
  --primary: 217.2 91.2% 59.8%;
  --background: 222.2 84% 4.9%;
  /* 更多变量... */
}

多语言系统

翻译文件

翻译内容定义在 app/lib/translations.ts 中：

export const translations: Record<Language, Translations> = {
  zh: {
    loading: '加载中...',
    error: '错误',
    // 更多翻译...
  },
  en: {
    loading: 'Loading...',
    error: 'Error',
    // 更多翻译...
  }
};

使用翻译

在组件中使用 useApp hook 获取翻译函数：

import { useApp } from '../contexts/AppContext';

function MyComponent() {
  const { t } = useApp();
  
  return <div>{t('loading')}</div>;
}

API 接口

文章列表

GET /api/articles?page=1&per_page=12&category=CSS&search=关键词

文章详情

GET /api/articles/[id]

分类列表

GET /api/categories

测试页面

访问以下页面测试功能：

  • 首页: http://localhost:3000
  • 主题语言测试: http://localhost:3000/test-theme-lang
  • API 测试: http://localhost:3000/test-api
  • Demo 测试: http://localhost:3000/test-demo

部署

Vercel 部署

  1. 将代码推送到 GitHub
  2. 在 Vercel 中导入项目
  3. 配置环境变量（如需要）
  4. 自动部署

其他平台

项目支持部署到任何支持 Next.js 的平台：

  • Netlify
  • Railway
  • DigitalOcean App Platform
  • 自托管服务器

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License