ServBay

简体中文

English
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

简体中文

English
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

Download ServBay

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

什么是 Statamic？ ​

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

安装 Statamic 的步骤 ​

在这篇文章中，我们将介绍如何在 ServBay 环境中使用 Composer 安装和配置 Statamic。

步骤 1：创建项目目录 ​

首先，在 ServBay 的 www 目录中创建一个新的项目目录：

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

步骤 2：使用 Composer 创建 Statamic 项目 ​

ServBay 已经自带 Composer，因此我们可以直接使用 Composer 来创建 Statamic 项目：

bash
composer create-project statamic/statamic .

步骤 3：配置 Web 服务器 ​

  1. 添加新网站

    打开 ServBay，点击「主机」标签，添加一个新的网站：

    • 名字：My Statamic Site
    • 域名：servbay-statamic.local
    • 网站类型：PHP
    • PHP 版本：选择对应的 PHP 版本
    • 网站根目录：/Applications/ServBay/www/servbay-statamic-app/public

  2. 保存配置

    保存配置并重启 ServBay。

步骤 4：配置 Statamic ​

  1. 编辑环境配置文件

    在项目根目录中，复制 .env.example 文件为 .env：

    bash
    cp .env.example .env

  2. 生成应用密钥

    运行以下命令生成新的应用密钥：

    bash
    php artisan key:generate

步骤 5：运行 Statamic ​

  1. 访问 Statamic

    打开浏览器，访问 https://servbay-statamic.local，你将看到 Statamic 的欢迎页面。

  2. 访问控制面板

    打开浏览器，访问 https://servbay-statamic.local/cp，你将看到 Statamic 控制面板的登录页面。

  3. 创建管理员账户

    按照页面提示创建管理员账户，填写用户名、密码和邮箱地址，然后点击「创建账户」。

步骤 6：安装插件和主题 ​

  1. 安装插件

    登录到 Statamic 控制面板，点击「加号」图标，然后点击「插件」，搜索并安装你需要的插件。

  2. 安装主题

    点击「加号」图标，然后点击「主题」，选择并安装一个你喜欢的主题。

使用 Statamic 构建网站 ​

现在你已经成功在 ServBay 环境中安装和配置了 Statamic，可以开始使用它来构建你的网站了。以下是一些常见的操作：

创建内容和集合 ​

  1. 创建集合

    在 Statamic 控制面板，点击「内容」->「集合」，创建一个新的集合，填写集合名称和其他设置，然后点击「保存」。

  2. 创建内容

    点击「内容」->「集合」，选择刚才创建的集合，点击「新建」，填写内容标题和内容，然后点击「保存」。

配置导航菜单 ​

  1. 创建导航

    在 Statamic 控制面板，点击「内容」->「导航」，创建一个新的导航，填写导航名称和其他设置，然后点击「保存」。

  2. 添加导航项

    将集合和内容添加到导航中，然后点击「保存」。

自定义模板和样式 ​

  1. 编辑模板

    在 resources/views 目录中编辑 Blade 模板文件，以自定义你的网站布局和内容呈现。例如，编辑 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>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        <nav>
            <ul>
                @foreach ($navigation as $item)
                    <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                @endforeach
            </ul>
        </nav>
    </header>
    <main>
        @yield('content')
    </main>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

  2. 添加样式

    在 resources/css 目录中创建 CSS 文件，并在模板文件中引用。例如，创建 app.css 文件：

    css
    /* resources/css/app.css */
body {
    font-family: Arial, sans-serif;
}

    在模板文件中引用 CSS 文件：

    html
    <!-- resources/views/layouts/default.blade.php -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

  3. 添加脚本

    在 resources/js 目录中创建 JavaScript 文件，并在模板文件中引用。例如，创建 app.js 文件：

    javascript
    // resources/js/app.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hello, Statamic!');
});

    在模板文件中引用 JavaScript 文件：

    html
    <!-- resources/views/layouts/default.blade.php -->
<script src="{{ mix('js/app.js') }}"></script>

  4. 编译资源

    运行以下命令来编译 CSS 和 JavaScript 文件：

    bash
    npm install
npm run dev

通过以上步骤，您成功在 ServBay 环境中安装和配置了 Statamic，并开始使用它来构建你的网站。Statamic 的灵活性和强大功能使其成为构建各种类型网站的理想选择。