Tự động rút gọn bài viết ngoài trang chủ không sử dụng JavaScript

Xây dựng tính năng rút gọn bài viết ngoài trang chủ tự động, điều này trước đây chỉ có thể làm được với JavaScript. Nếu không sử dụng JavaScript thì sẽ bị giới hạn ở một số điểm như : Trích đoạn bài viết bị giới hạn ở 140 ký tự, ảnh minh họa bài viết bị giới hạn ở kích thước 72x72 pixels. Nhưng giờ đây đã làm được điều này mà không cần đến JavaScript nữa, các bước thực hiện như sau:
Bước 1 Lấy ra ảnh minh họa của bài viết:
Lấy được hình ảnh đầu tiên của bài viết với kích thước gốc thông qua thẻ  data:post.featuredImage

<div class="post-thumbnail">
<a expr:href="data:post.url" href="https://draft.blogger.com/null">
<img expr:src="data:post.featuredImage" />
</a>
</div>

Việc lấy ra ảnh minh họa cho bài viết sẽ chuyên nghiệp hơn bằng cách áp dụng hàm resizeImage hoặc hàm sourceSet để xử lý như sau:
Sử dụng hàm resizeImage

<div class="post-thumbnail">
<a expr:href="data:post.url" href="https://draft.blogger.com/null">
<img expr:src="data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage,300,&quot;4:3&quot;) : data:post.featuredImage" />
</a>
</div>

Hàm resizeImage sẽ tự động lấy ra ảnh minh họa với kích thước chiều rộng 300 pixels và theo tỷ lệ 4:3
Sử dụng hàm sourceSet

<div class="post-thumbnail">
<a expr:href="data:post.url" href="https://draft.blogger.com/null">
<img expr:src="data:post.featuredImage" expr:srcset="sourceSet(data:post.featuredImage, [300,600,900,1600], &quot;4:3&quot;)" />
</a>
</div>

Hàm sourceSet sẽ tự động lấy ra ảnh minh họa với kích thước phù hợp cho từng loại kích cỡ màn hình thiết bị khác nhau.
Bước 2 Lấy ra trích đoạn của bài viết:
Tôi sử dụng b:eval kết hợp với hàm snippet cùng 4 tham số truyền vào dưới dạng một đối tượng để có thể thu được kết quả như mong muốn:

<div class="post-snippet">
<b:eval expr="snippet(data:post.body, { length: 250, links: false, linebreaks: false, ellipsis: false })">
</b:eval></div>

hoặc một cách viết khác:

<div class="post-snippet">
<b:eval expr="data:post.body snippet { length: 250, links: false, linebreaks: false, ellipsis: false }">
</b:eval></div>

Trong đó data:post.body được truyền vào để xử lý, 4 giá trị bên trong đối tượng lần lượt có ý nghĩa như sau:
length : Số lượng ký tự sẽ xuất hiện trong trích đoạn, tối thiểu 50, tối đa 1000 ký tự).
links : Giữ lại các liên kết (nếu có) trong trích đoạn, mặc định là true.
linebreaks : Giữ lại các ký tự xuống dòng
(nếu có) trong trích đoạn, mặc định là true.
ellipsis : Thêm dấu ba chấm ... ở cuối trích đoạn, mặc định là true.
Ngoài ra chúng ta có thể sử dụng data:post.longSnippet để lấy ra trích đoạn cho bài viết tuy nhiên cách này có một số nhược điểm như: Không kiểm soát được chính xác số lượng ký tự xuất hiện, trích đoạn không chứa HTML... nên tôi sẽ không trình bày chi tiết trong bài viết này.
Bước 3 Thêm liên kết dẫn tới bài viết chi tiết:
Ở bước này tôi sẽ kết hợp code của 2 bước trước lại với nhau, đồng thời thêm tiêu đề bài viết trước mỗi trích đoạn và thêm một liên kết dẫn tới bài viết chi tiết sau mỗi trích đoạn.

<div class="post-thumbnail">
<a expr:href="data:post.url" href="https://draft.blogger.com/null">
<img expr:src="data:post.featuredImage" expr:srcset="sourceSet(data:post.featuredImage, [300,600,900,1600], &quot;4:3&quot;)" />
</a>
</div>
<h2>
<a expr:href="data:post.url" href="https://draft.blogger.com/null">
<data:post .title="">
</data:post></a>
</h2>
<div class="post-snippet">
<b:eval expr="snippet(data:post.body, { length: 250, links: false, linebreaks: false, ellipsis: false })">
</b:eval></div>
<a expr:href="data:post.url fragment &quot;more&quot;" href="https://draft.blogger.com/null">
<data:blog .jumplinkmessage="">
</data:blog></a>

Bước 4 Xây dựng điều kiện cho từng trường hợp:
Dường như lại có thêm một vấn đề phát sinh ở đây, nếu tôi không muốn tự động rút gọn tất cả các bài viết thì sao? Một số bài viết đặc biệt tôi muốn rút gọn thủ công bằng tính năng rút gọn mặc định mà Blogger cung cấp khi viết bài thì phải làm thế nào?
Chỉ cần thêm điều kện cho từng trường hợp như sau:

<b:if cond="data:post.hasJumpLink">
<h2>
<a expr:href="data:post.url" href="https://draft.blogger.com/null">
<data:post .title="">
</data:post></a>
</h2>
<div class="post-snippet">
<data:post .body="">
</data:post></div>
<a expr:href="data:post.url fragment &quot;more&quot;" href="https://draft.blogger.com/null">
<data:blog .jumplinkmessage="">
</data:blog></a>
<b:else>
<div class="post-thumbnail">
<a expr:href="data:post.url" href="https://draft.blogger.com/null">
<img expr:src="data:post.featuredImage" expr:srcset="sourceSet(data:post.featuredImage, [300,600,900,1600], &quot;4:3&quot;)" />
</a>
</div>
<h2>
<a expr:href="data:post.url" href="https://draft.blogger.com/null">
<data:post .title="">
</data:post></a>
</h2>
<div class="post-snippet">
<b:eval expr="snippet(data:post.body, { length: 250, links: false, linebreaks: false, ellipsis: false })">
</b:eval></div>
<a expr:href="data:post.url fragment &quot;more&quot;" href="https://draft.blogger.com/null">
<data:blog .jumplinkmessage="">
</data:blog></a>
</b:else></b:if>

Đây là một cách rút gọn bài viết ngoài trang chủ không sử dụng JavaScript, nếu có thắc mắc gì thì bạn có thể để lại bình luận, hi vọng chúng ta sẽ có những cuộc trò chuyện thú vị.

N LinkPro