MakeXYZ Fun

Cách thêm thanh tìm kiếm cho Ghost CMS

Tony Phạm -
Trong bài viết này, mình sẽ chỉ cho bạn cách thêm tùy chọn tìm kiếm vào theme của Ghost bằng cách sử dụng Ghost Finder.

Ghost CMS là nền tảng blog phổ biến nhất dành cho nhà xuất bản, blogger và nhà văn. Khi phát triển các theme mới cho Ghost, thanh Tìm kiếm (Search) là một phần đặc biệt quan trọng. Nếu một trang web chỉ có 2–10 bài viết, sẽ không khó khăn gì cho đọc giả khi tìm thấy nội dung mà chẳng cần đến thanh Search. Nhưng nếu số lượng bài viết lớn và thuộc nhiều chủ đề khác nhau thì việc tìm kiếm nhanh và chính xác nội dung mình cần sẽ ngày càng làm khó đọc giả, lúc này đọc giả sẽ cần đến công cụ hỗ trợ tìm kiếm.

Ghost Finder là một plugin tìm kiếm phổ biến cho Ghost CMS. Đây là tùy chọn tìm kiếm nâng cao nhất và dễ sử dụng cho nhà phát triển. Trong bài viết này, mình sẽ chỉ cho bạn cách thêm tùy chọn tìm kiếm vào theme của Ghost bằng cách sử dụng Ghost Finder.

Dưới đây là một số bước bạn phải làm theo để thiết lập tùy chọn tìm kiếm trong theme của bạn.

Tổng quan nội dung:

Tải về Ghost Finder

Hình 1. Install Ghost Finder via Npm or Download the latest vesion

Cài đặt Ghost Finder

  1. Truy cập repo của Ghost Finder trên GitHub và tải về(Hình 1)
  2. Giải nén file tải về, và chỉ lấy file “ghost-finder.js” trong thư mục /dist.
  3. Bạn nên minify file này để cải thiện tốc độ load trang.
  4. Tải theme Ghost bạn muốn về (có thể bỏ qua bước này nếu bạn đã có sẵn theme).
  5. Copy file đã minify ở bước 3 hoặc file “ghost-finder.js” gốc ở bước 2 vào thư mục /assets/js thuộc theme Ghost của bạn.
  6. Bạn cần xác định xem thanh Search này sẽ đặt ở vị trí nào trên trang Ghost của bạn. Thường thì chúng ta có thể đặt trong home page, index.js (bước 7 trở đi được thực hiện tương ứng với việc đặt thanh Search trong index.js)
  7. Mở index.js in thư mục theme (hoặc trang nào bạn muốn đặt) và cuộn xuống gần cuối trang, chỗ bạn tìm thấy dòng lệnh {{#contentFor “scripts”}}
  8. Bạn cần thêm đoạn script bên dưới để tải thanh Search cho Ghost theme. Copy và Paste đoạn lệnh sau theo vị trí đã xác định ở bước 7:
    {{!-- Load ghost search script --}}
    <script type=“text/javascript” src="{{asset “js/ghost-finder.js”}}">
    <script>
    new GhostFinder({
        input: ‘.search-field’,
        showResult: ‘.search-results’,
        time_format: ‘DD MMM YYYY’,
        singleResultTemplate: 
            <a href="##url" class="search-result"> 
                <img class="search-result-thumbnail" 
                     src="##feature_image" alt="##title"> 
                <div class="search-result-title-container">
                    <p class="search-result-title">##title</p>
                </div> 
            </a>,
        contentApiKey: YOUR API KEY HERE FROM GHOST ADMIN INTERFACE
    })
    </script>

Lưu ý:

  • Bạn sẽ tìm thấy contentApiKey trong Ghost Dashboard > Intergrations > Add custom Intergration. Bạn có thể tham khảo chi tiết hơn cách tạo Custom Intergration cho Ghost ở bài viết sau:
    Cách tạo tạo Custom Intergration trong Ghost và lấy các tham số ContentAPIKey, AdminAPIKey, APIURL
  • Chúng ta cần import script "ghost-finder.js" trước khi có thể sử dụng, ở đây là tạo GhostFinder() instance.
  • singleResultTemplate là thiết lập nội dung cho từng kết quả tìm kiếm. Bạn cũng có thể thêm các thông tin khác nữa.
    .search-field là CSS Class Selector cho phần input (nhập từ khóa). Bạn có thể sử dụng Class hoặc Id Selector khác tùy bạn.
    .search-results dùng để hiển thị kết quả tìm kiếm. Bạn có thể sử dụng div, ul, section hoặc các thẻ khác để hiển thị kết quả.
  1. Bạn có thể chèn đoạn Html sau vào bất kỳ vị trí nào trên trang mà bạn muốn chỗ đó có thanh search:
    <div class=“search-container”>
    <input class=“search-field” type=“text” placeholder=“Search the site” autocomplete=“off”>
    <div class=“search-results”>
    </div>
  1. Plugin Ghost Finder không cung cấp format sẵn cho kết quả tìm kiếm nên bạn có thể tự format theo ý mình bằng CSS với thẻ <style></style>.

Tùy chỉnh nội dung tìm kiếm nâng cao

  • Các Options khi tạo Ghost Finder Instance:

  • Bạn có thể sử dụng các "Search Markup" bên dưới để lấy thông tin bạn cần cho việc hiển thị kết quả tìm kiếm. Các thông tin này theo mình là khá đầy đủ rồi. Các tùy chọn markup variable:
##title | Post title
##url | Post url
##primary_tag_name | Name of primary tag
##primary_tag_url  | Url of primary tag
##primary_author_name | Name of primary author
##primary_author_url | Profile url of primary author
##primary_author_avater | Profile photo of primary author
##excerptshow | some words of the post content. Default words count is 15
##published_at | Post publication date. Format can be change by time_format option
##feature_image | Post featured image url
##resultCount | Matched result count
  • Ví dụ áp dụng:
<div class="search-results-wrapper">
    <div class="search-count">##resultCount</div>
    <div class="search-result">
        <div class="single-search-element">
            <div class="feature-image">
                <img src="##feature_image" alt="##title">
            </div>
            <div class="search-content">
                <h4><a href="##url">##title</a></h4>
                <div class="date">##published_at</div>
                <div class="post-meta">
                    <span><a href="##primary_author_url"><img src="##primary_author_avater" alt="##primary_author_name"></a></span>
                    <span><a href="##primary_tag_url">##primary_tag_name</a></span>
                    <span><a href="##primary_author_url"><img src="##primary_author_avater" alt="##primary_author_name"></a></span>
                </div>
                <p>##excerpt</p>
            </div>
        </div>
    </div>
</div>
  • Đừng quên format kết quả với CSS

Mình hy vọng qua tất cả các thông tin được chia sẻ bên trên, bạn có thể tự tay thêm thanh Search để đọc giả nhanh chóng tìm kiếm được nội dung trên trang của bạn. Nếu có thắc mắc gì, đừng ngại comment bên dưới!

Bạn cũng có thể Subscribe trang để luôn được cập nhật những bài viết mới nhất! Nếu bạn thấy bài viết này chứa thông tin hữu ích, đừng quên like, share giúp chúng mình bạn nhé...