Hiểu về đoạn trích ngắn trong Blogger

Đoạn trích ngắn (post snippet) có thể hiểu như phần mở bài của mỗi bài đăng khi hiển thị ngoài trang index. Ngoài tiêu đề giật tít ra, việc bạn viết mở bài hay sẽ là một cơ hội cực lớn để thu hút người đọc nhấn vào xem bài viết. Trong bài viết này tôi sẽ cùng các bạn tìm hiểu sơ qua về vấn đề này

Để lấy được đoạn trích ngắn ta có thể dùng rất nhiều cách như

• Dùng thẻ gọi dữ liệu cơ bản của blogger
• Tải feed lấy nội dung theo label và cắt chuỗi
• Lấy nội dung trong div .post-body và cắt chuỗi

I. Dùng thẻ gọi dữ liệu

Đây là cách đơn giản nhất để lấy được đoạn trích., bloger cung cấp cho ta thẻ data:post.snippet để lấy đoạn trích ngắn và data:post.longSnippet để lấy đoạn trích dài

Theo đó với auto readmore không sử dụng js, đoạn trích thường được đặt trong div có class là resumo. Tôi sẽ sử dụng thẻ điều kiện để lấy dữ liệu như sau

+ Với đoạn trích ngắn

<div class='resumo'>
    <span class='post-summary'>
        <b:if cond='data:post.snippet'>
            <data:post.snippet/>
        </b:if>
    </span>
</div>

Kết quả thu được

+ Với đoạn trích dài

<div class='resumo'>
    <span class='post-summary'>
        <b:if cond='data:post.snippet'>
            <data:post.longSnippet/>
        </b:if>
    </span>
</div>

Kết quả thu được

* Nếu bạn vẫn chưa hài lòng ?

Đừng lo, blogger còn cung cấp cho bạn một hàm để cắt chuỗi đoạn trích nữa. Cú pháp như sau

snippet(string, options) : Produces a short snippet from an HTML string.

options: Object specifying the snippeting options, which are:

• links: boolean for whether to preserve anchors/links in the snippet. Defaults to true.
• linebreaks: boolean for whether to preserve linebreaks (tags) in the snippet. Defaults to true.
• ellipsis: boolean for whether to append an ellipsis (…) to the end of the snippet. Defaults to true.
• length: Number specifying the maximum length of the snippet.

Theo đó ví dụ tôi muốn đoạn trích dài 300 kí tự và không chứa link trong đoạn trích code sẽ như sau

<div class='resumo'>
    <span class='post-summary'>
        <b:if cond='data:post.snippet'>
            <b:eval expr='snippet(data:post.body, {length: 300, links: false})' />
        </b:if>
    </span>
</div>

Kết quả thu được

Việc sử dụng hàm cắt chuỗi này sẽ giúp bạn cố định được bố cục của bài đăng, tránh đoạn trích quá dài gây tràn div

Đây là cách được khuyên dùng vì không đụng tới js và có thể tùy biến theo ý thích

II. Sử dụng javascript

Đương nhiên phương pháp này không được khuyên dùng vì số lượng bài đăng trên trang chính càng nhiều thì quá trình lấy dữ liệu và cắt chuỗi càng lâu khiến trang bị chậm, nhưng trong khuôn khổ bài viết tôi vẫn giới thiệu cho bạn biết thêm

Ví dụ div chứa đoạn trích của tôi trống như sau

<div class='resumo'>
    <span class='post-summary' expr:data-url='data:post.url'/>
</div>

Bắt buộc có đoạn expr:data-url='data:post.url' để lấy url. Tôi sẽ chèn thêm code js trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(t) {
    t(".post-summary").each(function() {
        var a = t(this),
            n = a.attr("data-url");
        t.get(n, function(n) {
            var r = t(n).find(".post-body").text().substr(0, 150);
            a.html("<p>" + r + "...</p>")
        }, "html")
    })
});
//]]></script>

Giá trị 150 chính là số lượng kí tự bạn muốn cắt chuỗi

Kết quả thu được

KẾT LUẬN: như vậy qua bài viết này bạn đã biết thêm được một thẻ gọi dữ liệu quan trọng của blogger nữa, chắc bài này không quá làm khó được bạn

Để lại bình luận nếu gặp khó khăn và chúc thành công nhé !