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