ServBay

Tiếng Việt

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

Tiếng Việt

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

Appearance

Cài đặt và cấu hình Statamic trong môi trường ServBay ​

Statamic là gì? ​

Statamic là một hệ thống quản lý nội dung (CMS) hiện đại dựa trên khung Laravel, dùng để xây dựng các loại trang web khác nhau. Statamic nổi tiếng với tính linh hoạt và sức mạnh của nó, sử dụng hệ thống tệp để lưu trữ nội dung, nhưng cũng có thể sử dụng cơ sở dữ liệu nếu muốn.

Các bước cài đặt Statamic ​

Trong bài viết này, chúng tôi sẽ hướng dẫn cách cài đặt và cấu hình Statamic trong môi trường ServBay bằng Composer.

Bước 1: Tạo thư mục dự án ​

Trước hết, tạo một thư mục dự án mới trong thư mục www của ServBay:

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

Bước 2: Sử dụng Composer để tạo dự án Statamic ​

ServBay đã cài đặt sẵn Composer, vì vậy chúng ta có thể dùng Composer để tạo dự án Statamic:

bash
composer create-project statamic/statamic .

Bước 3: Cấu hình máy chủ Web ​

  1. Thêm trang web mới

    Mở ServBay, nhấn vào thẻ "Chủ", thêm một trang web mới:

    • Tên: My Statamic Site
    • Tên miền: servbay-statamic.local
    • Loại trang web: PHP
    • Phiên bản PHP: chọn phiên bản PHP tương ứng
    • Thư mục gốc trang web: /Applications/ServBay/www/servbay-statamic-app/public

  2. Lưu cấu hình

    Lưu cấu hình và khởi động lại ServBay.

Bước 4: Cấu hình Statamic ​

  1. Chỉnh sửa tệp cấu hình môi trường

    Trong thư mục gốc của dự án, sao chép tệp .env.example thành .env:

    bash
    cp .env.example .env

  2. Tạo khóa ứng dụng

    Chạy lệnh sau để tạo khóa ứng dụng mới:

    bash
    php artisan key:generate

Bước 5: Chạy Statamic ​

  1. Truy cập Statamic

    Mở trình duyệt, truy cập https://servbay-statamic.local, bạn sẽ thấy trang chào mừng của Statamic.

  2. Truy cập bảng điều khiển

    Mở trình duyệt, truy cập https://servbay-statamic.local/cp, bạn sẽ thấy trang đăng nhập bảng điều khiển của Statamic.

  3. Tạo tài khoản quản trị viên

    Làm theo hướng dẫn trên trang để tạo tài khoản quản trị viên, điền tên đăng nhập, mật khẩu và địa chỉ email, sau đó nhấn "Tạo tài khoản".

Bước 6: Cài đặt plugin và theme ​

  1. Cài đặt plugin

    Đăng nhập vào bảng điều khiển của Statamic, nhấn vào biểu tượng "dấu cộng", sau đó nhấn vào "Plugin", tìm kiếm và cài đặt plugin bạn cần.

  2. Cài đặt theme

    Nhấn vào biểu tượng "dấu cộng", sau đó nhấn vào "Theme", chọn và cài đặt một theme bạn thích.

Sử dụng Statamic để xây dựng trang web ​

Bây giờ bạn đã cài đặt và cấu hình thành công Statamic trong môi trường ServBay, có thể bắt đầu sử dụng nó để xây dựng trang web của bạn. Dưới đây là một số thao tác phổ biến:

Tạo nội dung và bộ sưu tập ​

  1. Tạo bộ sưu tập

    Trong bảng điều khiển của Statamic, nhấn vào "Nội dung" -> "Bộ sưu tập", tạo một bộ sưu tập mới, điền tên bộ sưu tập và các cài đặt khác, sau đó nhấn "Lưu".

  2. Tạo nội dung

    Nhấn vào "Nội dung" -> "Bộ sưu tập", chọn bộ sưu tập vừa tạo, nhấn "Tạo mới", điền tiêu đề và nội dung, sau đó nhấn "Lưu".

Cấu hình menu điều hướng ​

  1. Tạo menu điều hướng

    Trong bảng điều khiển của Statamic, nhấn vào "Nội dung" -> "Điều hướng", tạo một menu điều hướng mới, điền tên và các cài đặt khác, sau đó nhấn "Lưu".

  2. Thêm mục điều hướng

    Thêm bộ sưu tập và nội dung vào menu điều hướng, sau đó nhấn "Lưu".

Tùy chỉnh mẫu và kiểu dáng ​

  1. Chỉnh sửa mẫu

    Trong thư mục resources/views, chỉnh sửa tệp mẫu Blade để tùy chỉnh bố cục và cách trình bày nội dung của trang web. Ví dụ, chỉnh sửa tệp 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. Thêm kiểu dáng

    Trong thư mục resources/css tạo tệp CSS và tham chiếu nó trong tệp mẫu. Ví dụ, tạo tệp app.css:

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

    Tham chiếu tệp CSS trong tệp mẫu:

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

  3. Thêm script

    Trong thư mục resources/js tạo tệp JavaScript và tham chiếu nó trong tệp mẫu. Ví dụ, tạo tệp app.js:

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

    Tham chiếu tệp JavaScript trong tệp mẫu:

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

  4. Biên dịch tài nguyên

    Chạy các lệnh sau để biên dịch tệp CSS và JavaScript:

    bash
    npm install
npm run dev

Qua các bước trên, bạn đã cài đặt và cấu hình thành công Statamic trong môi trường ServBay và bắt đầu sử dụng nó để xây dựng trang web của mình. Tính linh hoạt và sức mạnh của Statamic khiến nó trở thành lựa chọn lý tưởng cho việc xây dựng các loại trang web khác nhau.