Cup of Tea - Minimalist Ghost Theme for Personal Purpose

Cup of Tea - Minimalist Ghost Theme for Personal Purpose

Cup of Tea là một theme chạy trên Ghost và theo mình thì rất phù hợp cho các blog cá nhân. Đây là theme do mình thiết kế và viết code vì ban đầu muốn tự làm giao diện cho blog cuongnc.com, nhưng giờ mình cũng muốn chia sẻ với bạn nếu bạn có nhu cầu sử dụng.

Cup of Tea nghĩa là Tách trà - mình đặt tên vậy với ý nghĩa tối giản, nhẹ nhàng và dễ chịu. Dưới đây là một số tính năng chính về theme nha:

  • Minimal design: Giao diện tối giản, nhưng đầy đủ tính năng. Mình chọn Morandi Palette - đây được coi là bảng màu cho cảm giác nhìn dễ chịu nhất.
  • Mobile-friendly: Code được viết theo chuẩn Mobile-first (ưu tiên thiết bị di động) nên hoàn toàn responsive. Ngoài ra kể từ v1.0.4, theme cũng được tích hợp PWA (Progressive Web App) - ứng dụng web giúp tận dụng những tính năng mới nhất của trình duyệt Web trên máy tính để bàn lẫn điện thoại thông minh (Tương thích với thiết bị di động, Tăng tốc duyệt web, khả năng duyệt offline, cài ứng dụng trên điện thoại bằng tính năng Add to Homesreen,...)
  • Translation ready: Hiện tại theme hỗ trợ tự động dịch 2 ngôn ngữ tiếng Anh và tiếng Việt.
  • Excellent typography: Font chữ được sử dụng cho theme là Nurito Google Font.
  • Great performance: Tốc độ load rất nhanh vì theme chỉ chứa những tài nguyên cần thiết.
  • SEO: Tối ưu cho công cụ tìm kiếm Google

Bạn có thể tải bản cập nhật mới nhất từ link dưới đây. Để thuận tiện khi bạn sử dụng, mình sẽ hỗ trợ bạn thay đổi phông màu, kiểu chữ và ẩn, hiện các thành phần trên blog.


VIỆC CẦN LÀM

Mỗi blog sẽ có những thông tin khác nhau, vì vậy trước khi upload theme lên Ghost sử dụng thì có vài việc bạn cần làm để cá nhân hóa nhé:

1. Thiết lập Progressive Web App

1.1. Thay đổi thông tin cơ bản của blog

Bạn hãy truy cập File /manifest.json rồi chỉnh sửa cơ bản các đầu mục sau:

  • name: Tên blog
  • short_name: Tên viết tắt của blog
  • description: Mô tả ngắn về blog
  • background_color: Màu nền bạn thấy trước khi giao diện blog được tải
{
    "name":"Cup of Tea",
    "short_name":"CoT",
    "description":"A minimalist ghost theme for personal purpose",
    "lang":"en",
    "start_url":"/",
    "background_color":"#626b5d",
    "display":"fullscreen",
    "theme_color":"#313b3f",
    "icons":[
        {
        "src": "/assets/icons/logo-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
        },        
        {
        "src": "/assets/icons/logo-512x512.png",
        "type": "image/png",
        "sizes": "512x512",
        "purpose": "maskable"
        }
    ]
}

1.2. Thay thế biểu tượng theme thành biểu tượng blog của bạn

Đây chính là biểu tượng ứng dụng khi có ai đó thêm trang web của bạn vào màn hình chính trên điện thoại (Add to Homescreen). Để thực hiện, bạn truy cập vào đường dẫn: /assets/icons/ và thay thế 3 ảnh sau thành 3 ảnh tùy chọn của bạn, lưu ý là giữ nguyên tênảnh có đuôi .png nhé.

  • apple-touch-icon-180x180.png
  • logo-192x192.png
  • logo-512x512.png

2. Bổ sung tài khoản MXH

Hiện tại, Ghost chỉ hỗ trợ thêm các mạng xã hội duy nhất là FacebookTwitter từ trang quản trị, vì vậy nếu bạn muốn thêm các liên kết mạng xã hội khác thì phải sửa trực tiếp trong theme.

Cup of Tea cho phép bạn có thể bổ sung thêm Instagram vào blog. Để thực hiện, bạn mở trong thư mục theme, mở 2 File sau và tìm dòng code tương ứng:

social-links-site.hbs

<a class="hidden" href="https://instagram.com/{{username}}" target="_blank"><em class="fab fa-instagram-square"></em><span class="sr-only">Instagram</span></a>

social-links-author.hbs

<a class="hidden" href="https://instagram.com/{{username}}" target="_blank" style="color: #C53089;">Instagram</a>	

Bạn thao tác:

  • Để hiện biểu tượng Instagram, bạn hãy xoá dòng class="hidden".
  • Để sửa đường dẫn đến tài khoản Instagram, hãy thay {{username}} bằng username tài khoản của bạn nhé.

Vậy là xong.


CHANGELOG
Every simple change made to Cup of Tea since Oct, 2020.

v1.0.4 ( Oct, 2020)

  • Added Progressive Web Application
  • Added offline page
  • Added social-links-site.hbs & social-links-author.hbs
  • Improved styles of 404 page
  • Improved styles of author template

v1.0.3 (26 Oct, 2020)

  • Added Nurito - Google font san-serif
  • Added related posts in post template
  • Fixed uncentered wide image in post template
  • Improved accessibility
  • Improved styles for post & page template
  • Removed Material icon Libary

v1.0.2 (21 Oct, 2020)

  • Added site's title & description
  • Added collapsible primary navigation
  • Added infinite scroll
  • Added Material icon library (Material.io)
  • Added meta tags for better SEO
  • Changed CSS structure to make it Mobile-first
  • Removed unused resources (images, styles, scripts...)

v1.0.1 (18 Oct, 2020)

  • Added Fontawesome icon library (Free kit)
  • Added a box that displays all blog's tags
  • Changed footer alignment
  • Fixed distort author's profile image
  • Improved styles for post & page template

V1.0.0 (17 Oct, 2020)
Initial release