在 ServBay 环境中安装和配置 Statamic

Statamic 是一个基于 Laravel 框架的现代化内容管理系统（CMS），以其灵活性和强大的功能而闻名，特别适用于构建各种类型的网站。Statamic 的一个显著特点是它默认使用文件系统来存储内容和配置，但也提供了使用数据库的选项。

本文将详细指导您如何在 ServBay 这一功能完备的本地 Web 开发环境中，通过 Composer 安装和配置 Statamic。ServBay 为 Statamic 提供了所需的 PHP 环境、Composer 支持以及便捷的网站配置管理。

安装 Statamic 的步骤

在 ServBay 环境中安装 Statamic 的过程直接且高效。请按照以下步骤操作：

步骤 1：创建项目目录

首先，您需要在 ServBay 的网站根目录 /Applications/ServBay/www 中为您的 Statamic 项目创建一个新的子目录。打开终端，执行以下命令：

bash

cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

这将进入 ServBay 的默认网站根目录，创建一个名为 servbay-statamic-app 的新文件夹，并进入该文件夹。

2：使用 Composer 创建 Statamic 项目

ServBay 已经预装了 Composer，这是一个用于管理 PHP 依赖关系的工具。您无需额外安装即可直接使用它来创建 Statamic 项目。

在刚才创建的 servbay-statamic-app 目录中，运行以下 Composer 命令：

bash

composer create-project statamic/statamic .

此命令会指示 Composer 下载 Statamic 的最新版本及其所有依赖，并将其安装到当前目录 (.) 中。请耐心等待下载和安装过程完成。

步骤 3：配置 Web 服务器（在 ServBay 中添加网站）

为了让 ServBay 能够托管您的 Statamic 项目，您需要在 ServBay 应用中添加一个新的网站配置。

打开 ServBay 应用：启动 ServBay 桌面应用。
导航到「网站」标签页：在 ServBay 界面中，点击顶部的「网站」标签页（注意：旧版本可能显示为「主机」）。
添加新网站：点击左下角的「加号 (+)」按钮来添加一个新的网站配置。
填写网站信息：在弹出的配置窗口中，填写以下信息：
- 名字：为一个方便您识别的名称，例如 My Statamic Site。
- 域名：用于访问网站的本地开发域名，建议使用 .local 后缀，例如 servbay-statamic.local。ServBay 会自动配置本地 DNS 解析。
- 网站类型：选择 PHP。
- PHP 版本：选择与您的 Statamic 项目兼容的 PHP 版本（通常建议使用较新的稳定版本）。
- 网站根目录：这是非常关键的一步。Statamic 的入口文件 index.php 位于项目的 public 子目录中。因此，您需要将网站根目录指向：/Applications/ServBay/www/servbay-statamic-app/public。
保存配置并应用：填写完毕后，点击「保存」按钮。ServBay 可能会提示您重启服务以应用配置更改。请按照提示操作，确保 ServBay 的 Web 服务器（默认为 Caddy 或 Nginx）加载新的网站配置。

步骤 4：配置 Statamic 环境

在项目根目录中，Statamic 依赖于 .env 文件来管理环境配置（例如应用密钥、数据库连接等）。

复制环境文件：Statamic 项目中包含一个 .env.example 文件作为模板。在终端中，确保您仍在项目根目录 /Applications/ServBay/www/servbay-statamic-app 下，然后执行命令复制该文件：
bash
```
cp .env.example .env
```
1
生成应用密钥：Laravel/Statamic 需要一个唯一的应用密钥用于安全目的，例如加密 Session 和其他敏感数据。在项目根目录中运行 Artisan 命令来生成此密钥：
bash
```
php artisan key:generate
```
1
此命令会在 .env 文件中自动生成并填充 APP_KEY 的值。

步骤 5：运行和访问 Statamic

现在，您的 Statamic 网站应该已经在 ServBay 中配置并运行起来了。

访问 Statamic 网站：打开您的 Web 浏览器，在地址栏输入您在步骤 3 中配置的域名，例如 https://servbay-statamic.local。ServBay 默认会为您的本地网站配置 SSL 证书（通过 ServBay User CA 或 ServBay Public CA），因此您可以使用 HTTPS 访问。您应该会看到 Statamic 的欢迎页面。
访问控制面板：Statamic 的管理控制面板通常通过 /cp 路径访问。在浏览器中访问 https://servbay-statamic.local/cp。您将看到 Statamic 控制面板的登录或设置页面。
创建管理员账户：首次访问控制面板时，系统会引导您创建一个管理员账户。按照页面提示，填写所需的用户名、密码和邮箱地址，然后点击「创建账户」。完成此步骤后，您就可以登录并开始管理您的 Statamic 网站了。

步骤 6：安装插件和主题（可选）

Statamic 拥有一个丰富的插件和主题生态系统，可以扩展其功能和改变外观。

安装插件：登录到 Statamic 控制面板后，您可以通过控制面板的界面（通常在左侧导航栏找到相关选项）或通过 Composer 命令来安装插件。通过控制面板安装通常更直观。
安装主题：类似地，您也可以通过控制面板或将主题文件放置在指定目录来安装主题。

使用 Statamic 构建网站

成功安装和配置 Statamic 后，您就可以开始利用其强大的功能来构建您的网站了。以下是一些基础操作的指引：

创建内容和集合

Statamic 使用“集合”（Collections）来组织内容，类似传统 CMS 中的文章类型或页面类型。

创建集合：在 Statamic 控制面板中，导航到「内容」->「集合」，点击「创建集合」。定义集合的名称（例如 Posts, Pages）和其他设置（如路由结构、字段蓝图等）。
创建内容项：在创建的集合下，点击「新建」来添加具体的内容项（例如一篇博客文章或一个页面）。使用您为该集合定义的字段蓝图填写内容。

配置导航菜单

您可以创建和管理网站的导航菜单。

创建导航：在 Statamic 控制面板中，导航到「内容」->「导航」，点击「创建导航」。为导航命名（例如 Main Navigation）。
添加导航项：将您创建的内容项（来自集合或独立页面）拖拽到导航结构中，组织菜单层次。

自定义模板和样式

Statamic 基于 Laravel，因此您可以使用 Blade 模板引擎来控制网站的布局和内容呈现。

编辑模板：网站的视图文件通常位于项目根目录的 resources/views 目录中。您可以根据 Statamic 的模板结构（通常涉及 layouts, partials, collections 等子目录）编辑或创建 Blade 文件 (.blade.php) 来自定义页面的 HTML 结构。例如，编辑布局文件 resources/views/layouts/default.blade.php 来修改整体页面框架。

html

<!-- resources/views/layouts/default.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My Statamic Site' }}</title>
    {{-- 引用编译后的 CSS --}}
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        {{-- 示例：渲染一个名为 'main_navigation' 的导航 --}}
        @inject('nav', 'Statamic\View\ViewServiceProvider')
        @if ($main_navigation = $nav->navigation('main_navigation'))
            <nav>
                <ul>
                    @foreach ($main_navigation->tree() as $item)
                        <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                    @endforeach
                </ul>
            </nav>
        @endif
    </header>
    <main>
        {{-- 渲染当前页面的内容 --}}
        @yield('content')
    </main>
    {{-- 引用编译后的 JavaScript --}}
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

添加样式和脚本：Statamic 项目通常集成了 Laravel Mix 或 Vite 等前端资源编译工具。原始的 CSS 和 JavaScript 文件通常位于 resources/css 和 resources/js 目录。

例如，在 resources/css/app.css 中编写您的 CSS 样式：

css

/* resources/css/app.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 15px;
}

在 resources/js/app.js 中编写您的 JavaScript 代码：

javascript

// resources/js/app.js
console.log('Statamic frontend assets loaded!');

// 示例：简单的交互
document.addEventListener('DOMContentLoaded', function() {
    const navItems = document.querySelectorAll('nav li a');
    navItems.forEach(item => {
        item.addEventListener('mouseover', () => {
            console.log(`Hovering over: ${item.textContent}`);
        });
    });
});

编译前端资源：为了将这些原始文件转换为浏览器可用的 CSS 和 JS 文件，您需要运行前端编译命令。Statamic 项目通常包含 package.json 文件，您可以使用 npm 或 yarn 来安装前端依赖并运行编译脚本。ServBay 支持 Node.js 环境，因此可以直接执行以下命令：
bash
```
npm install
npm run dev
```
1
2
npm install 会根据 package.json 安装所有前端依赖（如 Laravel Mix/Vite, Tailwind CSS, Vue/React 等）。npm run dev 会执行开发模式下的编译，通常会生成未压缩的资源文件，并可能带有源码映射方便调试。对于生产环境，您可以使用 npm run prod 或 npm run build。

总结

通过以上步骤，您已经成功地在 ServBay 这一强大的本地开发环境中安装、配置并初步了解了如何使用 Statamic CMS。ServBay 提供的一体化环境（PHP、Composer、Web服务器、便捷的网站管理以及对 Node.js 的支持）极大地简化了 Statamic 的本地开发流程。现在您可以充分利用 Statamic 灵活的文件结构和强大的功能来快速构建和迭代您的网站项目了。

在 ServBay 环境中安装和配置 Statamic ​

安装 Statamic 的步骤 ​

步骤 1：创建项目目录 ​

2：使用 Composer 创建 Statamic 项目 ​

步骤 3：配置 Web 服务器（在 ServBay 中添加网站） ​

步骤 4：配置 Statamic 环境 ​

步骤 5：运行和访问 Statamic ​

步骤 6：安装插件和主题（可选） ​

使用 Statamic 构建网站 ​

创建内容和集合 ​

配置导航菜单 ​

自定义模板和样式 ​

总结 ​