Home » Bài viết đang xem:

Blogger Auto Readmore nâng cao và hướng dẫn tùy biến Hiển trị trên trang Homepage và trang Label tự tùy biến script cho mục đích của riêng mình.

Tác giả : Bùi Huệ

Auto readmore là chủ đề đã quá quen thuộc với Blogger. Mặc dù Google đã hỗ trợ tính năng này cho Blogger, nhưng nó chưa thực sự thỏa mãn người dùng vì 1 lẽ: nó chỉ cắt nội dung chứ chưa thể tùy biến giao diện. Bởi vậy chúng ta thường nhờ vả tới các script auto readmore.
Script auto readmore vốn ban đầu được AnhVo ở VietWebGuide.com phát triển, sau đó tôi có cải tiến 1 chút ít (tiếc là bây giờ blog của AnhVo đã không còn hoạt động). Ở bài viết này, tôi muốn trình bày với các bạn 1 vài tùy biến nâng cao của script auto readmore mà tôi áp dụng cho Hỗn tạp Blog, đồng thời cố gắng hướng dẫn để các bạn có thể tự tùy biến script cho mục đích của riêng mình.


Script vẫn giữ nguyên ý tưởng cốt lõi, chỉ bổ sung thêm các tùy chọn cho sự hiển thị thêm đa dạng.

Trong script này, tôi bổ sung 3 điểm nâng cao sau:

  1. Thêm hình thumbnail mặc định khi bài viết không có hình ảnh
  2. Tùy chọn không auto readmore cho 1 số bài đầu tiên
  3. Tùy chọn auto readmore cho trang homepage và trang label

Fast Food - Code dùng luôn


Dành cho các bạn không muốn lăn vào bếp, dưới đây là code có thể áp dụng luôn cho blog của bạn:

<script type="text/javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'http://rilwis.googlecode.com/svn/trunk/hontap/images/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/summary.min.js"></script>

Chèn đoạn code trên vào trước thẻ </head> là được. Các tham số có ý nghĩa như sau:

showImage: bạn có muốn hiển thị thumbnail không? Nếu có để là true, nếu không để là false.

imgFloat: có 3 giá trị: 'left' - để thumbnail float về bên trái, 'right' - để thumbnail float về bên phải và 'no' - để thumbnail không có chế độ float. Lưu ý có dấu nháy bọc quanh giá trị nhé.

imgWidth và imgHeight: chỉ định kích thước của thumbnail.

defaultThumb: hình thumbnail mặc định trong trường hợp bài viết không có hình ảnh.

words và wordsNoImg: số từ hiển thị trong trường hợp có ảnh thumbnail và không có ảnh.

skip: bỏ qua 1 số (giá trị của skip) bài, không thực hiện auto readmore với chúng. Nếu khai báo số lượng là 0 thì coi như không bỏ qua bài nào (sẽ auto readmore với tất cả các bài).

showHome và showLabel: cho phép auto readmore ở trang chủ và trang label. Giá trị true là cho phép, false là không cho phép.

Sau đó, bạn tìm trong template của bạn đoạn:

<data:post.body/>

sửa thành:

<span expr:id='data:post.id'><data:post.body/></span>

<b:if cond='data:blog.pageType == "index"'>
    <script type='text/javascript'>summary("<data:post.id/>")</script>
<b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <script type='text/javascript'>summary("<data:post.id/>")</script>
    </b:if>
</b:if>

Sau khi cài đặt, các bạn hãy thử nghiệm thay đổi giá trị của các tùy chọn trên cho phù hợp với blog của mình.

Code trên đã khắc phục tình trạng xung đột với kiểu trang Page trong Blogger mà tôi đã đề cập đến ở đây.

Vào bếp xào nấu


Fast Food ở trên dành cho những người muốn áp dụng ngay. Nếu bạn đã đọc đến đây, có nghĩa là bạn đã muốn tìm hiểu kỹ làm sao có thể tùy biến như vậy, và làm thế nào có thể tùy biến hơn nữa? Tôi sẽ cố gắng trình bày nội dung và cách hoạt động của code trên, đồng thời sẽ đưa ra 1 vài gợi ý cho các bạn tùy biến thêm.

Trước tiên cần phải xem code đầy đủ của script, nó nằm tại địa chỉ này. Chúng ta sẽ thảo luận về các tùy chọn mở rộng có trong script (skip, showHome, showLabel), còn các tùy chọn cũ về thumbnail và cách cắt ngắn nội dung, các bạn tham khảo lại bài viết cũ này.

Thuộc tính skip


Để nhận biết bài đang được auto readmore là bài thứ mấy, trong script có dùng 1 biến count để đếm:

summary.count = summary.count || 0;
summary.count++;

Ở đây biến count được khai báo như 1 thuộc tính của hàm summary. Nếu tìm hiểu kỹ về Javascript, bạn đã biết 1 hàm cũng là 1 đối tượng nên nó có thể có thuộc tính riêng. Làm như vậy sẽ hạn chế các biến toàn cục và đảm bảo không conflict với các script khác. (Hàm summary.strip dùng để cắt bớt ký tự cũng được làm theo nguyên tắc này)

Sau khi đếm thứ tự của bài viết hiện tại, nếu vẫn nằm trong diện "không cần auto readmore" thì bỏ qua ở câu lệnh sau:

if (summary.count <= summaryConf.skip) return;

Việc xét duyệt điều kiện này rất đơn giản, chỉ là một phép so sánh!

Mở rộng: bạn có thể thay đổi điều kiện so sánh ở trên để tùy biến việc hiển thị, VD bỏ qua các bài viết có thứ tự chẵn (lẻ), hoặc cứ 3 bài thì mới auto readmore 1 bài, ... (gợi ý: hãy xét đến điều kiện chia hết của biến count)

Hiển trị trên trang Homepage và trang Label

Để kiểm tra xem trang hiện tại đang xem có phải là homepage hay trang label không thì script có sử dụng 2 câu lệnh sau:

var isHome = location.href.indexOf('/search/label/') == -1 && location.href.indexOf('/search?') == -1,
 isLabel = location.href.indexOf('/search/label/') != -1;

Việc kiểm tra chỉ dựa trên URL của trang hiện tại mà thôi. Sau khi kiểm tra xong thì chỉ cần so sánh với tùy chọn đã khai báo để quyết định bỏ qua hay tiếp tục thực hiện auto readmore:

if (isHome && !summaryConf.showHome) return;
if (isLabel && !summaryConf.showLabel) return;

Mở rộng: hãy nghiên cứu cấu trúc URL của các trang trong Blogger để thử làm auto readmore cho trang tìm kiếm, trang archive.

Nếu bạn muốn mở rộng thêm


Nếu tinh ý, bạn có thể sẽ nhận thấy script auto readmore từ trước tới nay chỉ mới thực hiện được cho phần nội dung của bài viết. Còn các phần như tiêu đề, meta (ngày tháng viết bài, tác giả), ... thì không được tính đến. Điều này gây ra 1 hạn chế rất lớn trong việc tùy biến cách hiển thị. Nói đơn giản như việc nếu bạn muốn trong trang label chỉ hiện tiêu đề bài viết thì làm thế nào? Nếu bạn muốn layout kiểu như các trang tin, khi mà cả tiêu đề, meta dạt về bên phải, còn thumbnail dạt về bên trái thì làm sao? ... Có rất nhiều cách tùy biến, phụ thuộc vào khẩu vị mỗi người, nhưng script auto readmore hiện tại thì vẫn chưa làm được hết các thứ đó. Muốn mở rộng khả năng của script auto readmore (để thực hiện các công việc trên), trước hết phải mở rộng khả năng thực thi của nó, không chỉ gói gọn trong phần nội dung bài viết nữa. Làm điều này cũng không khó lắm, chỉ cần thay đổi vị trí thực hiện auto readmore.

VD: ban đầu template bạn có dạng (đây chỉ là ví dụ lấy từ template của Hỗn tạp Blog nhằm mô phỏng cấu trúc của 1 bài viết, template của bạn có thể sẽ khác, nhưng hãy chú ý đến cấu trúc chung)

<div class='post'>
    <h2 class='post-title'>
        <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
    </h2>
    <div class='post-meta'>
        <data:post.timestamp/> |
        <b:if cond='data:post.labels'>
            <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url + "?max-results=5"'><data:label.name/></a>
                <b:if cond='data:label.isLast != "true"'>,</b:if>
            </b:loop>
        </b:if>
    </div>
    <div class='post-body'>
        <data:post.body/>
        <div class='clear' />
    </div>
</div>

Thay vì chỉ khoanh vùng khu vực <data:post.body/> như cũ, chúng ta cần mở rộng ra cho tất cả mọi dữ liệu của blog. Để làm vậy, hãy sửa dòng đầu tiên của code trên thành:

<div class='post' expr:id='data:post.id'>

Điều này nhằm gán id cho toàn bộ bài viết để script có thể truy xuất đến sau này. Sau khi gán xong, phía dưới của đoạn code chèn đoạn thực thi script:

<b:if cond='data:blog.pageType == "index"'>
    <script type='text/javascript'>summary("<data:post.id/>")</script>
<b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <script type='text/javascript'>summary("<data:post.id/>")</script>
    </b:if>
</b:if>

Vậy là xong phần cài đặt cơ bản, tiếp theo đó, để lấy được giá trị của tiêu đề, các thẻ meta, các bạn hãy tận dụng hàm javascript getElementByTagName, VD:

function summary(id) {
var p = document.getElementById(id), // lấy toàn bộ nội dung bài viết
    title = p.getElementByTagName('h2'), // lấy tiêu đề bài viết, lưu vào 1 mảng
    img = p.getElementByTagName('img'); // lấy hình ảnh trong bài viết, lưu vào 1 mảng

title = title[0].innerHTML; // lấy phần tử đầu tiên, chính là tiêu đề ta cần
img = img[0].src; // lấy src của hình ảnh đầu tiên
}

Sau đó, có thể tùy biến các giá trị lấy được và thêm vào các thuộc tính CSS cho vừa vặn với khẩu vị (VD với hình ảnh, bạn có thể gán kích thước, float như tôi đã làm; với tiêu đề có thể gán kích thước, màu sắc, float, ...). Cuối cùng là gán ngược trở lại vào bài viết qua p.innerHTML.

Lưu ý 1: Lấy các giá trị của các thẻ HTML thông qua raw javascript có chút khó khăn. Nên sử dụng 1 thư viện javascript nào đó để làm việc này cho nhanh. Với Hỗn tạp Blog này, tôi có dùng jQuery.

Lưu ý 2: Các gợi ý trong phần cuối này chỉ mang tính hướng dẫn. Vì layout mỗi blog và khẩu vị mỗi người khác nhau nên không thể trình bày hết tất cả các cách tùy biến. Chỉ hy vọng các bạn nắm được ý tưởng để tự hoàn thiện cho blog của chính mình.

Việc xào đi xào lại thủ thuật auto readmore này có thể sẽ không mấy thú vị nếu ta không tự tìm các điểm mới. Với bài viết này, mong rằng các bạn có thể tự chế biến cho mình các món auto readmore mới không lặp lại, không nhàm chán. Và khi nào có món mới đừng quên mời tôi dùng thử nhé!

Chuyên mục:
DMCA.com Protection Status

0 Nhận xét