Cutter.js - Công cụ để tạo Auto Readmore cho Blogger tốt ?
Tôi vừa mới nhận được tin giới thiệu 1 thư viện Javascript mới: Cutter.js. Theo lời giới thiệu thì thư viện này thì nó có thể cắt ngắn đoạn text mà không làm mất đi các thẻ HTML và định dạng của chúng. Thiết nghĩ cái này có ích cho việc làm auto readmore cho Blogger, nên gửi lên đây để mọi người cùng tham khảo.
Ở cách làm auto readmore cũ, chúng ta thường loại bỏ hoàn toàn các thẻ HTML để thu được đoạn text đơn thuần (plain text), từ đó áp dụng các hàm cắt xâu để thu được 1 đoạn trích dẫn ngắn mà không sợ bị lỗi. Nhược điểm kiểu làm này là do ta tước đoạt hết các thẻ HTML và định dạng nên không còn các định dạng chữ đậm, nghiêng, ...
Với cách dùng Cutter.js (mới chỉ là ý tưởng, chưa làm thành sản phẩm) thì có thể khắc phục được điều này. Vừa giữ được định dạng, vừa có đoạn trích dẫn phù hợp.
Hiện tại chưa có ai phát triển theo ý tưởng này, tôi chắc cũng không làm vì không cần dùng mấy :D, nên hy vọng ai đó đọc được bài này và có nhu cầu thì sẽ phát triển ra 1 ý tưởng cho cộng đồng Blogger.
PS: Đối với ai đã dùng Readmore được hỗ trợ sẵn của Blogger thì có lẽ các loại auto readmore này không còn cần thiết nữa.
Ở cách làm auto readmore cũ, chúng ta thường loại bỏ hoàn toàn các thẻ HTML để thu được đoạn text đơn thuần (plain text), từ đó áp dụng các hàm cắt xâu để thu được 1 đoạn trích dẫn ngắn mà không sợ bị lỗi. Nhược điểm kiểu làm này là do ta tước đoạt hết các thẻ HTML và định dạng nên không còn các định dạng chữ đậm, nghiêng, ...
Với cách dùng Cutter.js (mới chỉ là ý tưởng, chưa làm thành sản phẩm) thì có thể khắc phục được điều này. Vừa giữ được định dạng, vừa có đoạn trích dẫn phù hợp.
Hiện tại chưa có ai phát triển theo ý tưởng này, tôi chắc cũng không làm vì không cần dùng mấy :D, nên hy vọng ai đó đọc được bài này và có nhu cầu thì sẽ phát triển ra 1 ý tưởng cho cộng đồng Blogger.
PS: Đối với ai đã dùng Readmore được hỗ trợ sẵn của Blogger thì có lẽ các loại auto readmore này không còn cần thiết nữa.
Tạo Forum cho Blog
Chả là ngày mai được phép ngủ nướng, nên tối nay có hứng thú viết tí blog, chia sẻ với mọi người 1 cách làm forum cho blog. Thực ra gọi đúng phải là forum tích hợp với blog, mà cách làm trong bài viết này cũng không chỉ giới hạn trong blog mà có thể tích hợp forum vào bất cứ trang web nào, kể cả trang HTML đơn giản!
Hỗn tạp Blog đã có SiteLink
Cuối cùng thì Hỗn tạp Blog cũng đã có SiteLink! Tin tức tốt lành này tôi mới nhận được nhờ bạn Hoc Nguyen thông báo.
Như trong bài viết về SiteLink cho Blogger trước đây, tôi có nhận định rằng Blogger khó có khả năng có SiteLink. Chủ yếu là vì hệ thống trang phân cấp của Blogger chưa được tốt lắm, và chúng còn bị block bởi robots.txt. Chỉ có những bài viết hay mới có khả năng nhận được SiteLink mà thôi. Và không phải blog nào cũng có những bài viết như vậy.
Tùy biến template Blogger chuyên nghiệp hơn bằng CSS Variables
Thông thường để điều chỉnh các thuộc tính màu sắc chữ, kích cỡ chữ, kiểu chữ, ... của blog làm tại Blogger, ta thường dùng phương pháp thử: Download template -> Điều chỉnh CSS -> Upload template -> Xem thử; nếu chưa vừa ý thì lặp lại quá trình đó!
Làm vậy sẽ mất nhiều thời gian và công sức. Thực tế, Blogger cho phép chúng ta tạo các biến CSS (variables) trong template và tận dụng công cụ Template Designer của nó để chỉnh các thuộc tính này và xem trước chúng ngay trong phần Dashboard mà không phải lặp lại các thao tác trên.
Bài viết này trình bày cơ bản về cách làm đó.
Làm vậy sẽ mất nhiều thời gian và công sức. Thực tế, Blogger cho phép chúng ta tạo các biến CSS (variables) trong template và tận dụng công cụ Template Designer của nó để chỉnh các thuộc tính này và xem trước chúng ngay trong phần Dashboard mà không phải lặp lại các thao tác trên.
Bài viết này trình bày cơ bản về cách làm đó.
Thêm target blank và nofollow cho links trong blog
Trước đây Anh Võ có hướng dẫn chèn thuộc tính
target="_blank" cho các link trong bài viết để khi click vào link đó sẽ mở ra 1 tab mới trong trình duyệt. Như vậy người đọc sẽ không phải rời trang hiện thời để đọc trang mới. Tiếc là blog của Anh Võ hiện giờ đã không còn hoạt động, nên hôm nay tôi trình bày lại thủ thuật này kèm 1 chút cải tiến cho phép chèn cả thuộc tính rel="nofollow" cho các link ra trang ngoài, có domain khác domain của blog.Làm đẹp code trong blog với SyntaxHighlighter
Có một vài comment trên Hỗn tạp Blog hỏi về cách hiển thị code sao cho đẹp giống như Hỗn tạp Blog đang dùng. Hôm qua bạn ruabien cũng gửi email cho tôi và hỏi về vấn đề này. Thấy các bạn quan tâm như vậy, nên tôi viết bài hướng dẫn cách làm, hy vọng có thể giúp các bạn có 1 blog đẹp hơn.
Blogger khó có khả năng có Site Links
Site Links là những link trong 1 website được các Search Engines (SE) đánh giá là quan trọng nhất. Những trang nào có site links (như trang của bác Tỉnh) thì hẳn phải có 1 nội dung phong phú và cấu trúc site rõ ràng. Nhưng mà, hôm nay tôi vừa mới phát hiện ra, Blogger rất ít (gần như không) có khả năng có site links.
Page Navigation với phong cách WP-PageNavi
Như đã hứa với các bạn, hôm nay tôi chia sẻ tiếp cách làm Page Navigation cho Blogger với phong cách giống như plugin WP-PageNavi của WordPress, vốn đang được dùng cho Hỗn tạp Blog.
Chúng ta đều đã biết rằng Blogger vốn chỉ cung cấp 2 link "Previous" và "Next" để chuyển bài, điều đó hiển nhiên không làm thỏa mãn người dùng. Vì thế có nhiều hack cho Blogger ra đời. Hack lần này tôi trình bày về cơ bản không khác các hack trước, chức năng cũng không nổi bật hơn nhiều, chỉ có duy nhất 1 điểm là nó được viết lại hoàn toàn theo phong cách của 1 plugin nổi tiếng cho WordPress - WP-PageNavi. Vì thế, nếu bạn mong chờ 1 bản đột phá hơn cho Blogger, thì điều đó chỉ có thể làm được nhờ các góp ý của các bạn!
Blogger Auto Readmore nâng cao và hướng dẫn tùy biến
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.
Hỗn tạp Blog đổi giao diện lần 2
Sau gần một năm sử dụng giao diện mới (version 1), vốn được tinh giản tới mức tối đa, hôm nay Hỗn tạp Blog chính thức chuyển đổi sang version 2.
Phiên bản lần này phần lớn vẫn dựa trên version 1 trước, bổ sung thêm 1 vài cải tiến:
"Bài viết liên quan" cho Blogger, bản nâng cao, có phân trang
Script tạo danh sách các bài viết liên quan cho Blogger ban đầu được Hoctro phát triển, sau đó được nhân rộng ra với khá nhiều chỉnh sửa. Các bản "bài viết liên quan" hiện nay đều cho phép cấu hình số bài viết hiển thị và số bài viết lấy theo mỗi label. Tuy vậy, trong trường hợp cần liệt kê số lượng lớn các bài viết liên quan thì chưa script nào có khả năng phân trang. Trong bài viết này, tôi sẽ hướng dẫn các bạn làm phân trang cho chúng.
Làm favicon cho Blogger, hoạt động 100%
Favicon là biểu tượng nhỏ của website hiển thị ở trên thanh địa chỉ của trình duyệt. Favicon giúp khách viếng thăm website dễ nhận diện và phân biệt website này với các website khác.
Đối với Blogger, mặc định favicon là biểu tượng chữ B. Có khá nhiều hướng dẫn làm thay đổi favicon cho Blogger. Tôi cũng có thử làm theo, nhưng lúc được, lúc không. Hôm trước trong lúc dọn dẹp lại đống header của template thì phát hiện ra cách làm mới nên chia sẻ cùng các bạn.
Đối với Blogger, mặc định favicon là biểu tượng chữ B. Có khá nhiều hướng dẫn làm thay đổi favicon cho Blogger. Tôi cũng có thử làm theo, nhưng lúc được, lúc không. Hôm trước trong lúc dọn dẹp lại đống header của template thì phát hiện ra cách làm mới nên chia sẻ cùng các bạn.
Thêm link canonical cho Blogspot
Link canonical dùng để ngăn chặn trùng lặp nội dung trong website. Với cùng 1 trang web có thể có nhiều url cùng trỏ đến, thường gồm url chứa session id, url có/không chứa www, url có index.html hay home.aspx ở cuối, url có/không chứa dấu sượt (/) ở cuối... Các bộ máy tìm kiếm sẽ nhận diện các url này khác nhau nhưng lại trỏ tới cùng 1 nội dung dẫn đến tình trạng trùng lặp. Để ngăn chặn tình trạng đó, chúng ta quy định tất cả các url đó đều là bản sao (canonical) của 1 url gốc, như vậy các bộ máy tìm kiếm sẽ chỉ index 1 url gốc duy nhất và bỏ qua các bản sao khác.
ShortCode hoàn thiện để chèn nhạc vào Blogger và website
Như đã nói ở bài trước, sử dụng shortcode để thu gọn nhiều thao tác tạo ra sự thuận lợi rất lớn cho người dùng. Chúng ta cũng đã coi qua cách dùng shortcode để chèn nhạc MP3. Bài viết này là sự mở rộng hơn, cho phép chèn nhạc vào bài viết của Blogger với các ưu điểm sau:
- Hỗ trợ nhiều định dạng nhạc, bao gồm MP3, AAC, FLV, MP4
- Hỗ trợ chèn video từ Youtube
- Cho phép tùy biến nhiều tham số của player, VD như chiều cao, chiều rộng, tiêu đề bài hát, tên ca sĩ, màu sắc, ...
- Hỗ trợ nhiều định dạng nhạc, bao gồm MP3, AAC, FLV, MP4
- Hỗ trợ chèn video từ Youtube
- Cho phép tùy biến nhiều tham số của player, VD như chiều cao, chiều rộng, tiêu đề bài hát, tên ca sĩ, màu sắc, ...
Sửa lỗi Auto Readmore khi xem Page trong Blogger
Blogger mới bổ sung tính năng viết Page, cho phép chúng ta viết các trang tĩnh và quan trọng trong blog như About, Contact Us, ... Tính năng này khá giống với WordPress, và cũng là 1 cải tiến đáng kể của Blogger. Tuy vậy chúng lại không tương thích với hack Auto Readmore nổi tiếng mà cộng đồng Blogger hay dùng. Hack Auto Readmore này được AnhVo ở VietWebGuide.com phát triển (domain này hiện không còn hoạt động) và được tôi cải tiến thêm chút ít. Bài viết này sẽ tìm hiểu nguyên nhân và đưa ra cách khắc phục để chúng tương thích với tính năng Page của Blogger.
Chơi nhạc MP3 trên Blogger dùng ShortCode! Tại sao không?
Cách làm shortcode trong bài viết này chỉ mang tính minh họa và thử nghiệm ban đầu. Hiện đã có phiên bản hoàn chỉnh hơn shortcode này tại đây.
Nếu đã dùng WordPress, bạn chắc chắn biết tính năng shortcode của nó. Shortcode có nhiều điểm giống như BBCode trong các diễn đàn, dùng để thực hiện 1 thao tác nào đó 1 cách đơn giản. Người dùng không cần phải nhớ các đoạn mã HTML phức tạp, mà chỉ cần ghi nhớ 1 vài quy tắc viết giản lược đi rất nhiều.
VD để ẩn nội dung 1 đoạn văn bản đối với khách không phải thành viên, chúng ta thường gặp cách viết:
DISQUS nâng cấp hệ thống comment
Như chúng ta đã biết, DISQUS là 1 trong những hệ thống comment được dùng khá rộng rãi hiện nay. Hỗn tạp đã dùng DISQUS được 1 thời gian và cảm thấy rất ổn định và tiện lợi. Trong thời gian gần đây, DISQUS đã bổ xung khá nhiều tính năng mới vào hệ thống comment của mình, khiến nó ngày càng trở nên mạnh mẽ hơn.
Trong số các tính năng đó, có 1 tính năng rất đặc biệt dành cho Blogger, đó là cho phép Import các comments cũ từ Blogger vào DISQUS. Từ đó, chúng ta có thể dùng DISQUS cho toàn bộ các bài viết cả cũ lẫn mới mà không cần phải chú ý khi cài đặt như trước. Lưu ý, trước đây khi cài đặt có 2 lựa chọn: chỉ dùng DISQUS cho các bài viết mới, và dùng DISQUS cho tất cả blog. Nếu chọn dùng DISQUS cho cả blog thì các comment cũ sẽ bị ẩn đi - tình trạng này đã được khắc phục trong lần nâng cấp này.
Tất nhiên là DISQUS cũng hỗ trợ việc Import comments từ nhiều nguồn khác nữa, như IntenseDebate, JS-Kit, WordPress và Movable Type.
Ngoài tính năng đó, DISQUS còn bổ sung 1 số tính năng hữu ích khác như:
Và 1 điều quan trọng nữa là giao diện trang chủ DISQUS đã được thay đổi hoàn toàn, việc duyệt các comments hay tùy biến các công cụ giờ đây trông chuyên nghiệp hơn rất nhiều.
Tuy vậy, lần nâng cấp này không thấy DISQUS bổ sung tính năng đánh giá bài viết như của JS-Kit và cho phép tùy biến các widget thống kê tốt hơn. Dù vậy, DISQUS cũng đã sắm sửa cho mình khá đầy đủ các công cụ mà 1 blogger cần. Hy vọng trong thời gian tới, DISQUS sẽ ngày càng hoàn thiện.
Trong số các tính năng đó, có 1 tính năng rất đặc biệt dành cho Blogger, đó là cho phép Import các comments cũ từ Blogger vào DISQUS. Từ đó, chúng ta có thể dùng DISQUS cho toàn bộ các bài viết cả cũ lẫn mới mà không cần phải chú ý khi cài đặt như trước. Lưu ý, trước đây khi cài đặt có 2 lựa chọn: chỉ dùng DISQUS cho các bài viết mới, và dùng DISQUS cho tất cả blog. Nếu chọn dùng DISQUS cho cả blog thì các comment cũ sẽ bị ẩn đi - tình trạng này đã được khắc phục trong lần nâng cấp này.
Tất nhiên là DISQUS cũng hỗ trợ việc Import comments từ nhiều nguồn khác nữa, như IntenseDebate, JS-Kit, WordPress và Movable Type.
Ngoài tính năng đó, DISQUS còn bổ sung 1 số tính năng hữu ích khác như:
- Cho phép sử dụng OpenID để tạo tài khoản ở DISQUS
- Cho phép dùng OpenID, Yahoo! ID, Twitter và tài khoản Facebook để đăng nhập khi comment
- Hỗ trợ các Reaction (cái này không biết dịch sao) từ các mạng xã hội phổ biến
- Tùy biến theme và hỗ trợ Custom CSS
Và 1 điều quan trọng nữa là giao diện trang chủ DISQUS đã được thay đổi hoàn toàn, việc duyệt các comments hay tùy biến các công cụ giờ đây trông chuyên nghiệp hơn rất nhiều.
Tuy vậy, lần nâng cấp này không thấy DISQUS bổ sung tính năng đánh giá bài viết như của JS-Kit và cho phép tùy biến các widget thống kê tốt hơn. Dù vậy, DISQUS cũng đã sắm sửa cho mình khá đầy đủ các công cụ mà 1 blogger cần. Hy vọng trong thời gian tới, DISQUS sẽ ngày càng hoàn thiện.
Comment Spam trong DISQUS
Như mọi người đã biết, Hỗn tạp Blog đang sử dụng hệ thống comment của DISQUS. Trong thời gian vừa qua, có 1 số comment của bạn bè trên Hỗn tạp bị DISQUS cho là spam nên bị ẩn đi. Tôi cũng không để ý chuyện này cho đến ngày hôm nay khi xem lại danh sách các comment spam đó và thấy rằng hầu hết chúng bị nhận lầm. Hiện thời tôi đã public lại những comment đó, chỉ tiếc là hơi muộn vì có những comment cách đây tới 4 tháng. Thành thật xin lỗi tới các bạn.
Nếu ai dùng DISQUS thì nên để ý điều này và thường xuyên ghé qua mục Spam trong phần quản lí comment tại DISQUS nhé.
Nếu ai dùng DISQUS thì nên để ý điều này và thường xuyên ghé qua mục Spam trong phần quản lí comment tại DISQUS nhé.
Làm Readmore trong Blogger giống WordPress
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).
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).
Tìm hiểu và cải tiến Auto Readmore
Mọi người dùng Blogger chắc đều biết đến tiện ích Auto Readmore nổi tiếng của AnhVo. Ở bài viết này, tôi sẽ cùng các bạn tìm hiểu qua cách code của tiện ích này, đồng thời đề xuất 1 cách nâng cấp để code được tốt hơn.
Trước hết, chúng ta xem qua nội dung của script này:
Đoạn script này gồm 2 hàm:
- hàm đầu tiên removeHtmlTag dùng để loại bỏ các thẻ HTML và lấy ra chop kí tự đầu tiên của 1 xâu
- hàm thứ 2 createSummaryAndThumb có nhiệm vụ lấy nội dung của bài viết (nơi có ID là pID), lấy ra hình ảnh đầu tiên nằm trong phần nội dung đó, sau đó sử dụng hàm removeHtmlTag để sinh ra đoạn văn bản cần rút gọn
Ứng với mỗi hàm này, chúng ta sẽ đưa ra các cải tiến tương ứng.
Trước tiên, xét hàm removeHtmlTag, ta có thể đưa ra 1 chút nhận xét như sau:
Công việc này được thực hiện lần lượt qua các bước sau:
- tìm các kí tự <
- chia xâu văn bản ban đầu thành các mảng dựa vào kí tự đó
- trong mỗi phần được chia, tìm kí tự > tương ứng và xóa phần giữa chúng đi
- cuối cùng là nối tất cả các phần lại với nhau
Có vẻ khá rắc rối! Nhất là ở việc tìm các kí tự < và >. Chúng ta biết rằng Javascript có 1 công cụ cực mạnh để tìm kiếm và thay thế các đoạn văn bản theo mẫu, đó là biểu thức tiêu chuẩn (regular expression). Vì thế, chúng ta sẽ ứng dụng nó thay cho việc dùng các hàm tìm kiếm như trên.
Toàn bộ công việc tìm kiếm, thay thế (loại bỏ) các thẻ HTML đối với biểu thức tiêu chuẩn chỉ cần thực hiện 1 câu lệnh đơn giản như sau:
trong đó s là xâu ban đầu. Tôi gán luôn giá trị trả về cho s để khỏi mất công khai báo thêm biến.
Phần này AnhVo xử lí khá khéo! Khéo ở chỗ đã tính đến việc kí tự cuối cùng bị lấy nằm giữa từ, hơn nữa, có thể là kí tự unicode của tiếng Việt ("chăt" vào giữa chúng có thể gây ra tình trạng kí tự ô vuông). Do đó AnhVo đã dùng 1 mẹo: tìm kiếm kí tự trắng (space) liền sau kí tự cuối cùng và lấy đến đó.
Chỗ này tôi chỉ để xuất 1 cách làm khác thôi, là thay vì cắt theo kí tự thì ta cắt theo từ, như thế xử lí tiện hơn vì không phải lo cắt vào giữa, cũng không phải lo việc tìm kiếm kí tự trắng.
Nếu cắt theo từ, thì có thể dùng tiếp tục biểu thức tiêu chuẩn. Toàn bộ công việc cũng chỉ đơn giản như sau:
Ở đây có 3 hàm, chúng lần lượt làm các công việc sau:
- chia xâu s ban đầu thành nhiều phần, lấy 1 hoặc nhiều kí tự trắng (bao gồm cả xuống dòng) làm kí tự phân cách
- lấy ra n phần đầu tiên
- nối n phần đó lại với nhau
Kết hợp với phần trước, hàm của chúng ta có cả thảy 4 dòng code:
Javascript còn có 1 tính năng khá hay là xâu chuỗi các hàm của 1 đối tượng (chain), nhờ đó, toàn bộ hàm đầu tiên của chúng ta có thể viết ngắn gọn lại trong 1 dòng như sau:
Lưu ý 1 chút là trong hàm này, tôi có đổi tên hàm, tên các biến cho gọn gàng.
Bây giờ ta xét đến hàm thứ 2. Để cải tiến nó, chúng ta xem lại 1 chút cách toàn bộ script hoạt động. Khi cài đặt script này, chắc hẳn các bạn còn nhớ chúng ta phải cấu hình 1 chút cho nó:
Việc cấu hình này gồm 2 phần chính là cấu hình cho hình ảnh thumbnail (gồm chiều rộng và chiều cao, cũng như thuộc tính float) và cấu hình cho số lượng kí tự cần hiển thị. Phần cấu hình cho hình ảnh, ta có thể thấy là sau đó được gán vào thuộc tính style, width và height khi sinh ra đoạn mã HTML (ở hàm thứ 2 createSummaryAndThumb). Sau này AnhVo có cải tiến chút ít là đưa tất cả các thuộc tính width và height đó vào CSS (trong thẻ style).
Như vậy, nhận thấy rằng toàn bộ phần cấu hình dành cho hình ảnh đều thuộc về CSS. Vậy thì sao ta không gán cho chúng 1 lớp (class) để khỏi phải lặp lại nhiều lần ở các hình ảnh ở các bài viết? Điều này có 2 điều lợi: 1 là làm mã HTML của trang web sáng sủa, gọn gàng hơn vì CSS không bị gán trong từng thẻ IMG mà được rút ra thành 1 class; 2 là làm đoạn code javascript của chúng ta cũng đơn giản hơn (do không phải cấu hình nữa).
Như thế, tôi đã viết lại hàm thứ 2 này theo hướng đó, gán cho các hình ảnh thuộc tính CSS của lớp thumb. Ngoài ra, số kí tự hiển thị cũng được thay bằng số từ hiển thị (cho phù hợp với hàm đầu tiên mà tôi cải tiến), ở đây là 125 (xem cuối hàm).
Công việc cuối cùng là bạn chỉ cần chỉnh sửa CSS cho class thumb thôi, VD như tôi làm như sau (chèn đoạn này vào phần trước ]]></b:skin> là được):
Như vậy, toàn bộ script Auto Readmore sẽ được viết lại như sau:
Đoạn mã này chèn trong thẻ HEAD, ngay trước </head>.
Trong template, để kích hoạt auto readmore, bạn tìm đến phần:
Sửa nó thành:
Hy vọng vài phần tích và cải tiến nhỏ ở trên có thể giúp các bạn hiểu phần nào đoạn mã mà mình đang dùng. Thân ái.
Trước hết, chúng ta xem qua nội dung của script này:
function removeHtmlTag(strx, chop) {
if (strx.indexOf("<") != -1) {
var s = strx.split("<");
for (var i = 0; i < s.length; i++) {
if (s[i].indexOf(">") != -1) {
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length - 1) ? chop : strx.length - 2;
while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
strx = strx.substring(0, chop - 1);
return strx + '...';
}
function createSummaryAndThumb(pID) {
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if (img.length >= 1) {
if (thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:' + img_thumb_width + 'px; max-height:' + img_thumb_height + 'px;" src="' + img[0].src + '" /></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
div.innerHTML = summary;
}
Đoạn script này gồm 2 hàm:
- hàm đầu tiên removeHtmlTag dùng để loại bỏ các thẻ HTML và lấy ra chop kí tự đầu tiên của 1 xâu
- hàm thứ 2 createSummaryAndThumb có nhiệm vụ lấy nội dung của bài viết (nơi có ID là pID), lấy ra hình ảnh đầu tiên nằm trong phần nội dung đó, sau đó sử dụng hàm removeHtmlTag để sinh ra đoạn văn bản cần rút gọn
Ứng với mỗi hàm này, chúng ta sẽ đưa ra các cải tiến tương ứng.
1.Cải tiến đầu tiên
Trước tiên, xét hàm removeHtmlTag, ta có thể đưa ra 1 chút nhận xét như sau:
1.1. Về việc loại bỏ các thẻ HTML
Công việc này được thực hiện lần lượt qua các bước sau:
- tìm các kí tự <
- chia xâu văn bản ban đầu thành các mảng dựa vào kí tự đó
- trong mỗi phần được chia, tìm kí tự > tương ứng và xóa phần giữa chúng đi
- cuối cùng là nối tất cả các phần lại với nhau
Có vẻ khá rắc rối! Nhất là ở việc tìm các kí tự < và >. Chúng ta biết rằng Javascript có 1 công cụ cực mạnh để tìm kiếm và thay thế các đoạn văn bản theo mẫu, đó là biểu thức tiêu chuẩn (regular expression). Vì thế, chúng ta sẽ ứng dụng nó thay cho việc dùng các hàm tìm kiếm như trên.
Toàn bộ công việc tìm kiếm, thay thế (loại bỏ) các thẻ HTML đối với biểu thức tiêu chuẩn chỉ cần thực hiện 1 câu lệnh đơn giản như sau:
s = s.replace(/<.*?>/ig, '');
trong đó s là xâu ban đầu. Tôi gán luôn giá trị trả về cho s để khỏi mất công khai báo thêm biến.
1.2. Lấy ra n kí tự đầu tiên
Phần này AnhVo xử lí khá khéo! Khéo ở chỗ đã tính đến việc kí tự cuối cùng bị lấy nằm giữa từ, hơn nữa, có thể là kí tự unicode của tiếng Việt ("chăt" vào giữa chúng có thể gây ra tình trạng kí tự ô vuông). Do đó AnhVo đã dùng 1 mẹo: tìm kiếm kí tự trắng (space) liền sau kí tự cuối cùng và lấy đến đó.
Chỗ này tôi chỉ để xuất 1 cách làm khác thôi, là thay vì cắt theo kí tự thì ta cắt theo từ, như thế xử lí tiện hơn vì không phải lo cắt vào giữa, cũng không phải lo việc tìm kiếm kí tự trắng.
Nếu cắt theo từ, thì có thể dùng tiếp tục biểu thức tiêu chuẩn. Toàn bộ công việc cũng chỉ đơn giản như sau:
s = s.split(/\s+/);
s = s.slice(0,n-1);
s = s.join(' ');
Ở đây có 3 hàm, chúng lần lượt làm các công việc sau:
- chia xâu s ban đầu thành nhiều phần, lấy 1 hoặc nhiều kí tự trắng (bao gồm cả xuống dòng) làm kí tự phân cách
- lấy ra n phần đầu tiên
- nối n phần đó lại với nhau
Kết hợp với phần trước, hàm của chúng ta có cả thảy 4 dòng code:
function stripTags(s, n) {
s = s.replace(/<.*?>/ig, '');
s = s.split(/\s+/);
s = s.slice(0, n - 1);
s = s.join(' ');
}
Javascript còn có 1 tính năng khá hay là xâu chuỗi các hàm của 1 đối tượng (chain), nhờ đó, toàn bộ hàm đầu tiên của chúng ta có thể viết ngắn gọn lại trong 1 dòng như sau:
function stripTags(s, n) {
return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0, n - 1).join(' ');
}
Lưu ý 1 chút là trong hàm này, tôi có đổi tên hàm, tên các biến cho gọn gàng.
2.Cải tiến thứ 2
Bây giờ ta xét đến hàm thứ 2. Để cải tiến nó, chúng ta xem lại 1 chút cách toàn bộ script hoạt động. Khi cài đặt script này, chắc hẳn các bạn còn nhớ chúng ta phải cấu hình 1 chút cho nó:
thumbnail_mode = 'no-float'; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120;
Việc cấu hình này gồm 2 phần chính là cấu hình cho hình ảnh thumbnail (gồm chiều rộng và chiều cao, cũng như thuộc tính float) và cấu hình cho số lượng kí tự cần hiển thị. Phần cấu hình cho hình ảnh, ta có thể thấy là sau đó được gán vào thuộc tính style, width và height khi sinh ra đoạn mã HTML (ở hàm thứ 2 createSummaryAndThumb). Sau này AnhVo có cải tiến chút ít là đưa tất cả các thuộc tính width và height đó vào CSS (trong thẻ style).
Như vậy, nhận thấy rằng toàn bộ phần cấu hình dành cho hình ảnh đều thuộc về CSS. Vậy thì sao ta không gán cho chúng 1 lớp (class) để khỏi phải lặp lại nhiều lần ở các hình ảnh ở các bài viết? Điều này có 2 điều lợi: 1 là làm mã HTML của trang web sáng sủa, gọn gàng hơn vì CSS không bị gán trong từng thẻ IMG mà được rút ra thành 1 class; 2 là làm đoạn code javascript của chúng ta cũng đơn giản hơn (do không phải cấu hình nữa).
Như thế, tôi đã viết lại hàm thứ 2 này theo hướng đó, gán cho các hình ảnh thuộc tính CSS của lớp thumb. Ngoài ra, số kí tự hiển thị cũng được thay bằng số từ hiển thị (cho phù hợp với hàm đầu tiên mà tôi cải tiến), ở đây là 125 (xem cuối hàm).
function createSummaryAndThumb(id) {
var p = document.getElementById(id),
imgtag = '',
img = p.getElementsByTagName('img');
if (img.length >= 1) {
imgtag = '<img class="thumb" src="' + img[0].src + '" />';
}
p.innerHTML = imgtag + stripTags(p.innerHTML, 125) + '...';
}
Công việc cuối cùng là bạn chỉ cần chỉnh sửa CSS cho class thumb thôi, VD như tôi làm như sau (chèn đoạn này vào phần trước ]]></b:skin> là được):
.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}
Như vậy, toàn bộ script Auto Readmore sẽ được viết lại như sau:
<script type='text/javascript'>
//<![CDATA[
function stripTags(s, n) {
return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0, n - 1).join(' ')
}
function createSummaryAndThumb(id) {
var p = document.getElementById(id),
imgtag = '',
img = p.getElementsByTagName('img');
if (img.length >= 1) {
imgtag = '<img class="thumb" src="' + img[0].src + '" />';
}
p.innerHTML = imgtag + stripTags(p.innerHTML, 125) + '...';
}
//]]>
</script>
Đoạn mã này chèn trong thẻ HEAD, ngay trước </head>.
Trong template, để kích hoạt auto readmore, bạn tìm đến phần:
<data:post.body/>
Sửa nó thành:
<b:if cond='data:blog.pageType != "item"'>
<span expr:id='"p" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>createSummaryAndThumb("p<data:post.id/>")</script>
<a expr:href='data:post.url' title='Read more' rel="nofollow">Read more →</a>
<b:else/>
<data:post.body/>
</b:if>
Hy vọng vài phần tích và cải tiến nhỏ ở trên có thể giúp các bạn hiểu phần nào đoạn mã mà mình đang dùng. Thân ái.
Cách cài đặt hack auto readmore này có chút không tương thích với tính năng viết Page của Blogger. Nếu bạn gặp phải lỗi này, có thể xem cách khắc phục tại đây.
Bài đăng
0 nhận xét:
Đăng nhận xét