Làm Readmore trong Blogger giống WordPress

vào lúc 20:28 | Nhãn:
Trong WordPress, để tạo đoạn phân cách Readmore, chúng ta nhấn vào nút More (có hình trang giấy ngăn đôi), nếu chuyển sang kiểu soạn thảo HTML, sẽ thấy có thẻ <!--more--> được chèn vào vị trí đó. Khi đó, phần phía trên thẻ<!--more--> này sẽ được hiển thị ở trang chủ và các trang category (nếu chọn kiểu hiển thị là summary), phần còn lại sẽ chỉ xem được khi vào xem 1 bài viết. Cách làm này có 1 điểm lợi là giữ được định dạng HTML.



Trong Blogger, chúng ta từ trước đến giờ chỉ có cách hiển thị tự động theo 1 số lượng kí tự hoặc từ (xem bài viết trước) và toàn bộ phần văn bản đó sẽ bị xóa định dạng HTML đi.

Bài viết này sẽ trình bày 1 cách làm Auto Readmore cho Blogger đảm bảo được cả 2 yêu cầu trên: vừa có thể tùy biến theo thẻ <!--more--> (giữ nguyên định dạng HTML) và vừa có thể tự động sinh ra phần văn bản thu gọn (không có định dạng HTML).

Chức năng của script


- Nếu trong bài viết của bạn có thẻ <!--more-->, nó sẽ lấy đó làm dấu phân cách, phần trước thẻ đó sẽ được hiển thị ở trang chủ và giữ nguyên định dạng HTML, phần sau đó chỉ hiển thị khi đọc 1 bài viết.

- Nếu trong bài viết của bạn không có thẻ <!--more-->, thì script sẽ tự động sinh ra đoạn văn bản thu gọn ở trang chủ như script auto readmore thông thường. Lúc này định dạng HTML sẽ không còn (hình ảnh thumbnail vẫn được duy trì).

Cách làm này đảm bảo rằng các tùy biến của bạn về auto readmore trước đây vẫn được bảo tồn (khi không có thẻ <!--more-->), đồng thời, có 1 ưu điểm nữa là khi bạn có ý định chuyển sang WordPress, thì nội dung bài viết cũng đã có sẵn Readmore cho bạn! Hơn thế nữa, với việc dùng <!--more-->, bạn có khả năng uyển chuyển hơn trong việc tùy biến độ dài đoạn văn bản thu gọn.

Cách cài đặt script


Trước tiên, các bạn vào phần chỉnh sửa template, chọn kiểu chỉnh sửa HTML, và đánh dấu vào ô Expand Widget Templates. Nhớ sao lưu trước khi thực hiện. Tốt hơn hết là bạn nên download template về máy tính và chỉnh sửa ở file này.

Tìm đến thẻ </head> và chèn đoạn mã sau vào ngay trước đó:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    function strip(s,n){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,n-1).join(' ')}
    function createSummary(id) {
        var p = document.getElementById(id), content = p.innerHTML;
        if (/<!--\s*more\s*-->/.test(content)) {
            p.innerHTML = content.split(/<!--\s*more\s*-->/)[0];
        } else {
            var imgTag = '', img = p.getElementsByTagName('img');
            if (img.length >= 1) {
                imgTag = '<img class="thumb" src="'+img[0].src+'" />';
            }
            p.innerHTML = imgTag + strip(content, 125) + '...';
        }
    }
    //]]>
    </script>
</b:if>

Bạn lưu ý, hình ảnh thumbnail sẽ có class CSS là .thumb, bạn nên tùy biến CSS cho nó, VD như tôi làm như sau (chèn đoạn này vào phần trước ]]></b:skin>):

.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}

Đồng thời, bạn có thể tùy biến số từ hiển thị (trong trường hợp tự động sinh đoạn văn bản thu gọn) ở trong đoạn code trên (thay số 125 bằng số tùy ý bạn).

Sau đó, tìm đến thẻ <data:post.body/> và thay thế bắng đoạn mã sau:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
    <script type='text/javascript'>createSummary(&quot;p<data:post.id/>&quot;);</script>
    <a expr:href='data:post.url' title='Đọc tiếp'>Đọc tiếp &amp;rarr;</a>
<b:else/>
    <data:post.body/>
</b:if>

Xong!

Hy vọng rằng script này sẽ có ích đối với bạn.

Không có nhận xét nào :

Đăng nhận xét