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 的靈活性和強大功能使其成為構建各種類型网站的理想選擇。