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

在 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 的灵活性和强大功能使其成为构建各种类型网站的理想选择。