项目概述

这是一个基于 PHP 8.0+ 开发的个人网站，旨在提供一个快速、简洁且易于扩展的解决方案。

主要特性：

• MVC 架构：代码结构清晰,易于维护和扩展。
• 面向对象：使用 PHP 类来组织代码,提高复用性。
• Composer 依赖管理：轻松管理第三方库（如模板引擎、路由库）。
• Twig 模板引擎：将 PHP 逻辑与前端 HTML 分离，更安全、更易于管理。
• 简洁的路由系统：通过 URL 访问不同的页面。
• 响应式设计：基于 Bootstrap 5,在各种设备上都能良好显示。
• 配置分离：使用 .env 文件管理数据库等敏感信息。
• 模块化：可以轻松添加新的页面（如博客、项目展示）。

技术栈

• 后端: PHP 8.0+
• 前端: HTML5, CSS3, JavaScript (ES6+)
• UI 框架: Bootstrap 5
• 模板引擎: Twig
• 依赖管理: Composer
• (可选) 数据库: MySQL / MariaDB (如果需要动态内容,如博客文章)

目录结构

一个典型的项目目录结构如下：

/personal-website/
├── app/                  # 应用核心代码
│   ├── Controllers/      # 控制器
│   │   └── HomeController.php
│   ├── Models/           # 模型 (如果需要数据库交互)
│   │   └── Post.php
│   └── Views/            # 视图模板 (存放 .twig 文件)
│       ├── base.twig     # 基础布局模板
│       ├── home.twig     # 首页模板
│       └── about.twig    # 关于我模板
│
├── public/               # Web 服务器根目录 (对外公开)
│   ├── assets/           # CSS, JS, 图片等静态资源
│   │   ├── css/
│   │   ├── js/
│   │   └── img/
│   ├── index.php         # 前端控制器 (所有请求的入口)
│   └── .htaccess         # Apache URL 重写规则
│
├── vendor/               # Composer 自动生成的依赖目录
│
├── composer.json         # Composer 配置文件
├── composer.lock         # 锁定依赖版本
├── .env.example          # 环境变量示例文件
├── .gitignore            # Git 忽略文件
└── README.md             # 项目说明文档

核心源码文件

下面是每个关键文件的内容和说明。

1. composer.json

这是项目的“心脏”,定义了项目依赖。

{
    "name": "yourname/personal-website",
    "description": "A simple personal website built with PHP and MVC.",
    "type": "project",
    "require": {
        "php": ">=8.0.0",
        "slim/slim": "^4.12",
        "slim/psr7": "^1.6",
        "twig/twig": "^3.8",
        "vlucas/phpdotenv": "^5.6"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/"
        }
    }
}

说明:

• slim/slim: 一个轻量级的 PHP 微框架,用于处理路由和中间件。
• slim/psr7: 提供符合 PSR-7 标准的请求和响应对象。
• twig/twig: 强大的模板引擎。
• vlucas/phpdotenv: 从 .env 文件加载环境变量。
• autoload: 自动加载 app/ 目录下的类，遵循 PSR-4 标准。

2. .env.example

复制此文件为 .env 并填入你的配置。

# 数据库配置 (如果需要)
DB_HOST=localhost
DB_PORT=3306
DB_NAME=personal_website
DB_USER=root
DB_PASS=
# 网站配置
APP_NAME=我的个人网站
APP_URL=http://localhost/personal-website

3. public/.htaccess (Apache)

用于将所有非文件请求重定向到 index.php，实现优雅的 URL。

RewriteEngine On
# 如果请求的是一个实际存在的文件或目录，则直接访问
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 否则，将请求重写到 index.php
RewriteRule ^(.*)$ index.php [QSA,L]

4. public/index.php (前端控制器)

所有请求的入口点，它负责加载环境、依赖,并启动应用。

<?php
// 定义应用根目录
define('APP_ROOT', dirname(__DIR__));
// 加载 Composer 自动加载器
require APP_ROOT . '/vendor/autoload.php';
// 加载环境变量
$dotenv = Dotenv\Dotenv::createImmutable(APP_ROOT);
$dotenv->load();
// 使用 Slim 创建应用
use Slim\Factory\AppFactory;
use DI\Container;
$container = new Container();
// 将 Twig 实例注入容器
$container->set('view', function () {
    $loader = new \Twig\Loader\FileLoader(APP_ROOT . '/app/Views');
    return new \Twig\Environment($loader, [
        'cache' => false, // 生产环境建议设置为 'path/to/cache'
        'debug' => true,  // 生产环境建议关闭
    ]);
});
AppFactory::setContainer($container);
$app = AppFactory::create();
// 添加路由
$app->get('/', \App\Controllers\HomeController::class . ':index');
$app->get('/about', \App\Controllers\HomeController::class . ':about');
// 运行应用
$app->run();

5. app/Controllers/HomeController.php

处理首页和关于页面的逻辑。

<?php
namespace App\Controllers;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Twig\Environment;
class HomeController
{
    private Environment $twig;
    // 通过构造函数注入 Twig 模板引擎
    public function __construct(Environment $twig)
    {
        $this->twig = $twig;
    }
    /**
     * 首页
     */
    public function index(Request $request, Response $response): Response
    {
        // 将数据传递给模板
        $data = [
            'title' => '欢迎来到我的网站',
            'name' => $_ENV['APP_NAME'],
            'description' => '这里是我的个人空间，分享技术、生活和想法。',
        ];
        // 渲染模板并写入响应体
        $html = $this->twig->render('home.twig', $data);
        $response->getBody()->write($html);
        return $response->withHeader('Content-Type', 'text/html');
    }
    /**
     * 关于我页面
     */
    public function about(Request $request, Response $response): Response
    {
        $data = [
            'title' => '关于我',
            'name' => '张三',
            'bio' => '我是一名热爱编程的全栈开发工程师...',
            'skills' => ['PHP', 'JavaScript', 'Python', 'MySQL']
        ];
        $html = $this->twig->render('about.twig', $data);
        $response->getBody()->write($html);
        return $response->withHeader('Content-Type', 'text/html');
    }
}

6. app/Views/base.twig (基础布局模板)

所有页面都会继承这个模板,避免重复代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{{ title }} - {{ name }}</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义 CSS -->
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">{{ name }}</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="/about">关于我</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <main class="container my-5">
        {% block content %}{% endblock %}
    </main>
    <footer class="bg-dark text-white text-center py-3">
        <div class="container">
            <p>&copy; {{ "now"|date("Y") }} {{ name }}. All rights reserved.</p>
        </div>
    </footer>
    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

7. app/Views/home.twig (首页模板)

继承 base.twig，只定义 content 块。

{% extends "base.twig" %}
{% block content %}
<div class="jumbotron p-5 rounded-lg">
    <h1 class="display-4">{{ title }}</h1>
    <p class="lead">{{ description }}</p>
    <hr class="my-4">
    <p>探索我的项目，阅读我的博客，或者联系我。</p>
    <a class="btn btn-primary btn-lg" href="/about" role="button">了解更多</a>
</div>
{% endblock %}

8. app/Views/about.twig (关于我页面模板)

{% extends "base.twig" %}
{% block content %}
<div class="row">
    <div class="col-md-8">
        <h2>你好，我是 {{ name }}!</h2>
        <p>{{ bio }}</p>
        <h3>我的技能</h3>
        <ul>
            {% for skill in skills %}
            <li>{{ skill }}</li>
            {% endfor %}
        </ul>
    </div>
    <div class="col-md-4">
        <img src="/assets/img/avatar.jpg" class="img-fluid rounded-circle" alt="我的头像">
    </div>
</div>
{% endblock %}

9. public/assets/css/style.css (自定义样式)

/* 添加一些自定义样式 */
.jumbotron {
    background-color: #f8f9fa;
    border-left: 5px solid #007bff;
}

如何运行

1. 环境准备:

   • 确保你的电脑安装了 PHP 8.0+ 和 Composer。
   • 安装一个 Web 服务器，如 Apache 或 Nginx，或者，你也可以使用 PHP 内置的开发服务器。

2. 安装步骤:

   • 将上述所有文件和目录结构放到你的 Web 服务器根目录下（htdocs 或 www）。
   • 打开终端，进入项目根目录 (/personal-website/)。
   • 运行 composer install，这会下载 vendor 目录下的所有依赖。
   • 复制 .env.example 文件并重命名为 .env，根据你的环境修改其中的配置（如数据库信息，目前可以留空）。
   • 确保 public 目录是 Web 服务器的根目录，如果你使用 Apache，确保 mod_rewrite 模块已启用。

3. 使用 PHP 内置服务器 (快速测试):

   • 在项目根目录 (/personal-website/) 下运行：

     php -S localhost:8000 -t public/

   • 然后在浏览器中访问 http://localhost:8000。

如何扩展

这个框架非常灵活,你可以轻松地添加新功能。

• 添加新页面:

  1. 在 app/Controllers/ 中创建一个新的控制器类（如 ProjectController.php）。
  2. 在 app/Views/ 中创建对应的模板（如 projects.twig）。
  3. 在 public/index.php 中添加新的路由，$app->get('/projects', \App\Controllers\ProjectController::class . ':index');。

• 添加数据库交互:

  1. 安装 PDO 或一个数据库抽象层（如 illuminate/database）。
  2. 在 app/Models/ 中创建模型类来代表你的数据表。
  3. 在控制器中实例化模型，调用其方法获取数据,然后将数据传递给模板。

这份源码为你提供了一个坚实的基础，你可以在此基础上自由地发挥创意，打造出独一无二的个人网站,祝你编码愉快！