Mộc Viên's Blog Mộc Viên's Blog
Hướng dẫn tạo theme cho Ghost

Hướng dẫn tạo theme cho Ghost

Ngày đăng:

Thẻ :

blog cms Node Java Script

Hướng dẫn tạo theme cho Ghost

Để cấu hình trang hiển thị bài viết theo tag trong Ghost, bạn cần tạo file tag.hbs và có thể chỉnh sửa routes.yaml nếu muốn thiết lập URL riêng.

💡
Hướng dẫn tạo theme cơ bản

1. Tạo tag.hbs (Template cho trang chuyên mục theo Tag)

File này giúp hiển thị danh sách bài viết thuộc một tag cụ thể.

{{#extends "default"}}

{{#contentFor "main"}}
    <header>
        <h1>Tag: {{tag.name}}</h1>
        {{#if tag.description}}
            <p>{{tag.description}}</p>
        {{/if}}
    </header>

    {{#foreach posts}}
        <article>
            <h2><a href="{{url}}">{{title}}</a></h2>
            <p>{{excerpt}}</p>
        </article>
    {{/foreach}}

    {{pagination}}  {{! Hiển thị phân trang }}
{{/contentFor}}

2. Cấu hình URL cho Tag trong routes.yaml

Nếu bạn muốn thiết lập một trang chuyên biệt cho từng tag (ví dụ: /chuyen-muc/tin-tuc/ thay vì /tag/tin-tuc/), bạn có thể sửa routes.yaml.

routes:
  /chuyen-muc/:
    controller: channel
    filter: tag:-[unlisted]
    template: tag
  • /chuyen-muc/ sẽ hiển thị danh sách các bài viết theo tag.
  • filter loại bỏ tag unlisted (nếu có).
  • template sử dụng tag.hbs.

Bạn có thể sửa partials/header.hbs để hiển thị danh sách tags trong menu:

<nav>
    <a href="{{@site.url}}">Trang chủ</a>
    {{#foreach tags visibility="public"}}
        <a href="{{url}}">{{name}}</a>
    {{/foreach}}
</nav>

🔥 Tóm lại:

  1. Tạo file tag.hbs để hiển thị bài viết theo từng tag.
  2. Cấu hình routes.yaml nếu muốn URL thân thiện hơn.
  3. Chỉnh sửa header.hbs để thêm liên kết đến các tag.

Bạn có thể thử nghiệm trên Ghost Admin và tinh chỉnh theo nhu cầu! 🚀

💡
Tạo môi trường phát triển và test theme

Để tạo môi trường phát triển và test theme trong Ghost, bạn có thể làm theo các bước sau:

1. Cài đặt Ghost trên máy tính (Local Development)

Ghost hỗ trợ chạy local bằng Ghost-CLI.

Bước 1: Cài đặt Ghost-CLI

Trước tiên, bạn cần cài đặt Node.js (Ghost yêu cầu Node.js 18 hoặc 20).

Sau đó, cài Ghost-CLI (công cụ quản lý Ghost) bằng lệnh:

npm install -g ghost-cli

Bước 2: Tạo một thư mục và cài đặt Ghost

Chạy các lệnh sau:

mkdir ghost-dev && cd ghost-dev
ghost install local

Lệnh này sẽ:
✅ Tải xuống Ghost.
✅ Cài đặt một trang Ghost chạy trên máy bạn.

Sau khi cài xong, bạn sẽ thấy thông báo như:

Ghost is running in development at http://localhost:2368/
Ghost Admin: http://localhost:2368/ghost/

2. Cài đặt theme để test

Bạn có thể thêm theme của mình vào thư mục content/themes/.

Bước 1: Copy theme vào Ghost

Giả sử bạn có thư mục theme my-theme, bạn có thể copy vào:

cp -r my-theme ghost-dev/content/themes/

Bước 2: Chạy lại Ghost để nhận diện theme mới

ghost restart

Sau đó, vào Ghost Admin (http://localhost:2368/ghost/), vào mục Settings > Design, chọn theme của bạn và nhấn Activate.

3. Chế độ phát triển (Development Mode)

Ghost có 2 chế độ:

  • Development Mode (mặc định khi cài local)
  • Production Mode (dùng trên server)

Bạn có thể chạy Ghost ở Development Mode để test:

ghost start --development

Hoặc nếu đã chạy rồi, có thể restart với:

ghost restart -D

Ở chế độ này: ✅ File .hbs sẽ tự động reload khi chỉnh sửa.
✅ Logs lỗi hiển thị rõ ràng.
✅ Không cần cache lại theme thủ công.

4. Debug lỗi theme

Ghost có chế độ debug giúp phát hiện lỗi trong theme.

Kiểm tra lỗi theme

Dùng lệnh:

ghost doctor

Lệnh này giúp kiểm tra xem có lỗi nào với cài đặt Ghost hoặc theme không.

Kiểm tra lỗi theme trong Ghost Admin

  1. Vào Ghost Admin > Settings > Labs
  2. Tìm phần "Theme Validation"
  3. Tải theme lên, Ghost sẽ kiểm tra lỗi tự động.

5. Test Ghost với Fake Data

Để tạo dữ liệu giả (posts, tags, authors...) nhằm test theme, bạn có thể:

  1. Dùng Casper theme demo data
    • Vào Ghost Admin > Labs > Import demo content
    • Ghost sẽ thêm bài viết giả giúp bạn test theme.

Dùng Faker.js để tạo dữ liệu
Nếu bạn thích code, có thể dùng Faker.js để tự động tạo bài viết, ví dụ:

ghost update --force

(Ghost sẽ reset và tạo lại dữ liệu mặc định)

6. Kết nối với VS Code để phát triển nhanh hơn

Bạn có thể mở Ghost theme trong VS Code để chỉnh sửa nhanh.

Tự động reload Ghost khi sửa theme

Ghost không reload khi sửa CSS hoặc JS. Bạn có thể dùng nodemon để tự động restart khi có thay đổi:

Chạy Ghost với nodemon:

nodemon --ext hbs,css,js --exec "ghost restart"

Cài nodemon:

npm install -g nodemon

Lệnh này giúp Ghost tự restart mỗi khi bạn sửa .hbs, .css, .js.

Tóm tắt

✅ Cài Ghost local bằng ghost install local.
✅ Thêm theme vào content/themes/ và restart Ghost.
✅ Dùng chế độ Development Mode (ghost start -D).
✅ Test bằng dữ liệu giả (Import Demo Content).
✅ Dùng nodemon để reload nhanh khi sửa theme.

Giờ bạn có thể phát triển theme Ghost chuyên nghiệp! 🚀

💡
Thử tạo theme với yêu cầu cao hơn, như hiển thị bài viết liên quan

Để lấy danh sách bài viết liên quan cùng tag và sắp xếp theo lượt view trong Ghost, bạn cần kết hợp Helper của Ghost và Ghost API hoặc dùng dịch vụ bên ngoài như Google Analytics để lấy dữ liệu lượt xem.

1. Lấy bài viết liên quan cùng tag

Ghost có Helper {{#get}}, giúp lấy danh sách bài viết liên quan.

Bạn có thể thêm vào post.hbs (hoặc một partial riêng như related-posts.hbs):

<section>
    <h3>Bài viết liên quan</h3>
    <ul>
        {{#get "posts" filter="tags:[{{tags.slug}}]+id:-{{id}}" limit="5"}}
            {{#foreach posts}}
                <li>
                    <a href="{{url}}">{{title}}</a>
                </li>
            {{/foreach}}
        {{/get}}
    </ul>
</section>

Giải thích:

  • filter="tags:[{{tags.slug}}]" → Lọc các bài viết có tags giống bài viết hiện tại.
  • id:-{{id}} → Loại bỏ bài viết hiện tại (tránh hiển thị chính nó).
  • limit="5" → Giới hạn hiển thị 5 bài viết.

📌 Nhược điểm: Ghost không hỗ trợ sắp xếp theo lượt view, nên cần một giải pháp khác để lấy danh sách bài viết phổ biến.

2. Lấy bài viết phổ biến theo lượt view

Ghost không lưu số lượt xem bài viết, bạn có thể:

  1. Sử dụng Google Analytics (cách phổ biến nhất).
  2. Dùng Ghost API + CSDL bên ngoài (như Firebase) để lưu và truy xuất lượt xem.

Cách 1: Lấy lượt view từ Google Analytics

Bạn có thể lấy top bài viết theo lượt view từ Google Analytics API và hiển thị vào Ghost.

Bước 1: Cài đặt Google Analytics trên Ghost

Thêm Tracking Code vào default.hbs (trước </head>):

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXX-X');
</script>

🔹 Thay UA-XXXXXXX-X bằng mã Google Analytics của bạn.

Bước 2: Lấy danh sách bài viết phổ biến từ Google Analytics

Bạn có thể sử dụng Google Analytics Reporting API để lấy danh sách bài viết có nhiều lượt xem nhất.

  • Dùng API để lấy top bài viết phổ biến trong 7 ngày qua:
async function getPopularPosts() {
    const response = await fetch(`https://www.googleapis.com/analytics/v3/data/ga?ids=ga:YOUR_VIEW_ID&start-date=7daysAgo&end-date=today&metrics=ga:pageviews&dimensions=ga:pagePath&sort=-ga:pageviews&max-results=5&access_token=YOUR_ACCESS_TOKEN`);
    const data = await response.json();
    return data.rows;  // Trả về danh sách bài viết có lượt xem cao nhất
}

🔹 Bạn cần thay YOUR_VIEW_ID và YOUR_ACCESS_TOKEN bằng thông tin của bạn.

Bước 3: Hiển thị bài viết phổ biến vào Ghost

Sửa post.hbs, thêm đoạn sau:

<section>
    <h3>Bài viết phổ biến</h3>
    <ul id="popular-posts"></ul>
</section>

<script>
document.addEventListener("DOMContentLoaded", async function() {
    const posts = await getPopularPosts();
    let listHtml = "";
    posts.forEach(post => {
        listHtml += `<li><a href="${post[0]}">${post[1]}</a></li>`;
    });
    document.getElementById("popular-posts").innerHTML = listHtml;
});
</script>

📌 Nhược điểm: Cần thiết lập API Google Analytics, có thể mất thời gian.

Cách 2: Lưu lượt view vào Firebase hoặc Ghost API

Bạn có thể lưu lượt view mỗi khi người dùng truy cập bài viết bằng cách sử dụng Firebase hoặc một CSDL như MongoDB.

Bước 1: Cấu hình Firebase

  1. Đăng ký Firebase tại firebase.google.com.
  2. Tạo Realtime Database và lấy API Key.

Bước 2: Ghi lại lượt xem mỗi khi người dùng truy cập bài viết

Thêm vào post.hbs:

<script>
const postSlug = "{{slug}}";
fetch(`https://your-firebase-url.firebaseio.com/views/${postSlug}.json`, {
    method: "POST",
    body: JSON.stringify({ viewedAt: new Date().toISOString() }),
});
</script>

Bước 3: Lấy danh sách bài viết nhiều lượt xem

Thêm vào post.hbs:

<script>
async function getPopularPosts() {
    const response = await fetch(`https://your-firebase-url.firebaseio.com/views.json`);
    const data = await response.json();
    
    // Sắp xếp bài viết theo số lượt xem
    let sortedPosts = Object.entries(data)
        .map(([slug, views]) => ({ slug, views: Object.keys(views).length }))
        .sort((a, b) => b.views - a.views)
        .slice(0, 5);

    // Hiển thị bài viết phổ biến
    let listHtml = "";
    sortedPosts.forEach(post => {
        listHtml += `<li><a href="/${post.slug}/">${post.slug.replace(/-/g, " ")}</a> (${post.views} views)</li>`;
    });
    document.getElementById("popular-posts").innerHTML = listHtml;
}

document.addEventListener("DOMContentLoaded", getPopularPosts);
</script>

📌 Ưu điểm: Không cần phụ thuộc vào Google Analytics, dữ liệu nhanh và chính xác.
📌 Nhược điểm: Cần thiết lập Firebase hoặc CSDL khác.

Tóm tắt giải pháp

Cách Mô tả Ưu điểm Nhược điểm
Sử dụng {{#get}} Lọc bài viết theo tag Đơn giản, không cần API Không sắp xếp theo lượt view
Google Analytics API Lấy bài viết phổ biến từ Google Chính xác, không cần database riêng Cần thiết lập API
Firebase hoặc Database riêng Lưu và đếm lượt view thủ công Tùy chỉnh linh hoạt, nhanh Cần thiết lập database

Bạn muốn triển khai theo cách nào? 🚀

💡
Tổng kết bài viết Cách tạo theme cho Ghost & Những điểm cần lưu ý

1. Cấu trúc theme cơ bản

Một theme trong Ghost có các file chính:

my-theme/
│── assets/        # Chứa CSS, JS, hình ảnh  
│── partials/      # Chứa header, footer, v.v.  
│── index.hbs      # Trang chủ  
│── post.hbs       # Trang bài viết  
│── tag.hbs        # Trang chuyên mục  
│── default.hbs    # Template mặc định  
│── package.json   # Metadata theme  
│── routes.yaml    # Cấu hình URL
💡
Những lưu ý quan trọng

2. Những điểm quan trọng khi tạo theme

✅ Dùng {{#get}} để lấy danh sách bài viết (ví dụ: bài liên quan).
✅ Dùng partials/ để tái sử dụng header, footer.
✅ Sử dụng routes.yaml nếu muốn thay đổi cấu trúc URL.
✅ Kiểm tra theme bằng ghost doctor hoặc Ghost Admin > Labs > Theme Validation.
✅ Chạy Ghost local với ghost install local để phát triển và test.
✅ Tối ưu SEO với {{meta_title}}, {{meta_description}} trong <head>.
✅ Ghost không hỗ trợ lượt view, nếu cần, dùng Google Analytics API hoặc Firebase để theo dõi bài viết phổ biến.

🔹 Lưu ý: Ghost cache theme, nên cần restart Ghost sau khi thay đổi theme (ghost restart).

Gần đây