ethanfly/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ff81948374
blog/README.md

6.3 KiB
Raw Blame History

Muse Blog

一个基于 Laravel 12 + Filament 4 构建的 ins 风格简约大气响应式博客系统。

Laravel Filament TailwindCSS License

✨ 特性

  • 🎨 ins 风格设计 - 简约大气的现代化 UI，支持图片墙展示
  • 📱 完全响应式 - 适配桌面、平板、手机等各种设备
  • 🔧 强大后台 - 基于 Filament 4 的现代化管理面板
  • 🏷️ 分类与标签 - 灵活的内容组织方式
  • 🔍 全文搜索 - 快速找到想要的内容
  • ⭐ 精选文章 - 首页突出展示重要内容
  • 📊 阅读统计 - 文章浏览量自动统计
  • 🖼️ 图片管理 - 支持封面图和多图图片墙

📸 截图

前台首页

  • 精选文章轮播展示
  • ins 风格瀑布流布局
  • 分类标签快速筛选

后台管理

  • 文章管理（富文本编辑、图片上传）
  • 分类管理
  • 标签管理（支持自定义颜色）

🛠️ 技术栈

  • 后端框架: Laravel 12
  • 管理面板: Filament 4
  • 前端框架: TailwindCSS 4
  • 构建工具: Vite
  • 数据库: MySQL / SQLite / PostgreSQL

📦 安装

环境要求

  • PHP >= 8.2
  • Composer
  • Node.js >= 18
  • MySQL 8.0+ / SQLite / PostgreSQL

安装步骤

  1. 克隆项目

    git clone <repository-url> blog
cd blog

  2. 安装 PHP 依赖

    composer install

  3. 安装前端依赖

    npm install

  4. 环境配置

    cp .env.example .env
php artisan key:generate

  5. 配置数据库

    编辑 .env 文件，设置数据库连接：

    DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=

  6. 运行数据库迁移和填充

    php artisan migrate
php artisan db:seed

  7. 创建存储链接

    php artisan storage:link

  8. 发布资源文件

    php artisan filament:assets
php artisan livewire:publish --assets

  9. 构建前端资源

    npm run build

  10. 启动开发服务器

    php artisan serve

🚀 使用

访问地址

默认管理员账户

  • 邮箱: admin@example.com
  • 密码: password

⚠️ 请在生产环境中修改默认密码！

📁 项目结构

blog/
├── app/
│   ├── Filament/
│   │   └── Resources/          # Filament 后台资源
│   │       ├── CategoryResource.php
│   │       ├── TagResource.php
│   │       └── PostResource.php
│   ├── Http/
│   │   └── Controllers/
│   │       └── BlogController.php  # 前台控制器
│   └── Models/
│       ├── Category.php
│       ├── Tag.php
│       ├── Post.php
│       └── User.php
├── database/
│   ├── migrations/             # 数据库迁移
│   ├── factories/              # 模型工厂
│   └── seeders/
│       └── BlogSeeder.php      # 示例数据填充
├── resources/
│   ├── css/
│   │   └── app.css             # 样式文件
│   └── views/
│       ├── components/
│       │   ├── layout.blade.php
│       │   └── post-card.blade.php
│       └── blog/
│           ├── index.blade.php     # 首页
│           ├── show.blade.php      # 文章详情
│           ├── category.blade.php  # 分类页
│           ├── tag.blade.php       # 标签页
│           └── search.blade.php    # 搜索页
└── routes/
    └── web.php                 # 路由定义

📊 数据库结构

categories 分类表

字段 类型 说明
id bigint 主键
name string 分类名称
slug string URL 别名
description text 描述
cover_image string 封面图片
sort_order int 排序
is_active boolean 是否启用

tags 标签表

字段 类型 说明
id bigint 主键
name string 标签名称
slug string URL 别名
color string 标签颜色

posts 文章表

字段 类型 说明
id bigint 主键
user_id bigint 作者 ID
category_id bigint 分类 ID
title string 标题
slug string URL 别名
excerpt text 摘要
content longtext 正文
cover_image string 封面图片
gallery json 图片墙
status enum 状态 (draft/published/scheduled)
published_at timestamp 发布时间
is_featured boolean 是否精选
views_count int 浏览量
likes_count int 点赞数

🎨 自定义

修改主题颜色

编辑 resources/css/app.css 文件中的 CSS 变量。

修改字体

在 resources/views/components/layout.blade.php 中修改 Google Fonts 链接和 CSS 变量。

添加新功能

  1. 创建迁移：php artisan make:migration
  2. 创建模型：php artisan make:model
  3. 创建 Filament 资源：php artisan make:filament-resource

🔧 常用命令

# 开发环境
npm run dev                     # 启动 Vite 开发服务器
php artisan serve               # 启动 Laravel 开发服务器

# 构建生产环境
npm run build                   # 构建前端资源

# 数据库
php artisan migrate             # 运行迁移
php artisan migrate:fresh --seed # 重置数据库并填充数据

# 缓存
php artisan optimize:clear      # 清除所有缓存
php artisan filament:assets     # 发布 Filament 资源

📝 开发计划

  • 评论系统
  • 用户注册登录
  • 文章点赞收藏
  • 社交媒体分享
  • RSS 订阅
  • SEO 优化
  • 多语言支持

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

本项目采用 MIT 许可证。

Made with ❤️ using Laravel & Filament