Kinh nghiệm Blogspot
📅 — 👀 1086 — 👦Mục lục :
Trong Blogspot, mình có một số kinh nghiệm sau muốn chia sẻ cùng các bạn, nếu có gì không đúng thì các bạn bình luận bên dưới để mình sửa lại. (bài viết sẽ cập nhật liên tục khi mình có thêm kinh nghiệm mới)
1. Chọn Template cho Blogspot
Việc đầu thiên và quan trọng nhất là chọn Template cho Blogspot. Hiện nay trên Internet có rất nhiều website cung cấp miễn phí Template cho Blogspot. Vì vậy việc chọn lựa template là ta bối rối. Vì mục đích chính của mình là ở hiệu năng chứ không chú trọng vào đẹp nên mình sẽ chọn lựa những template load nhanh, giao diện đơn giản, và đặt biệt là có Responsive. Vì vậy trước khi chọn template thì bạn vào https://developers.google.com/speed/pagespeed/insights/ để đánh giá số điểm mà Google đánh giá (điểm càng cao càng tốt).
2. Nên thêm code trong widget
Khi xây dựng thêm chức năng mới cho Blog (ví dụ : Bài viết liên quan, Nhận xét mới nhất...) thì chúng ta không nên thêm code trực tiếp trong Edit Template mà chúng ta nên thêm code trong Widget. Vì khi ta thao tác trên Widget, 1 là dễ quản lý, 2 là sau này muốn thay đổi template mới cũng dễ dàng hơn. Còn sau đây là mẹo để cho Widget xuất hiện tại trang cần xuất hiện.
<b:widget id='HTML9' locked='false' title='Bài viết liên quan' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "item"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div>
<b:include name='quickedit' />
</b:if>
</b:includable>
</b:widget>
Với đoạn code trên thì tôi đã tạo thêm 1 widget HTML9 và dòng
<b:if cond='data:blog.pageType == "item"'></b:if>
có nghĩa là tôi muốn nó xuất hiện trong chi tiết bài viết.
Vậy với cách code như thế này thì ta rất dễ dàng quản lý những đoạn code mà mình đã thêm, đồng thời sau này thay đổi sẽ dễ dàng hơn.
3. Thêm Javascript + CSS trực tiếp trong widget
Đố với những CSS (hay Javascript) dùng chung thì ta vẫn để nằm trong <skin></skin> (hay <head></head> đối với Javascript) , còn đối với những CSS (hay Javascript) ít dùng hay chỉ dùng đối với widget đó thì ta nên chèn trực tiếp vào widget luôn, đồng thời gán những CSS (hay Javascript) trong điền kiện chỉ xuất hiện tại trang chủ hay trang chi tiết hoặc trong mobile hay không. Với cách này ta sẽ hạn chế tối đa load nhưng đoạn code CSS (hay Javascript) dư thừa, làm cho tốc độ load web chậm -> dẫn đến người dùng nản và rời bỏ website (đây cũng là 1 trong những phần tối ưu hóa SEO). Riêng đối với Javascript bạn nên Rút gọn code Javascript (cách rút gọn code Javascript tại đây)
4. Tạo widget dùng chung.
Có nghĩa là bạn tạo 1 widget mà nội dung widget chứa các đoạn code CSS hay Javascript dùng chung cho toàn bộ trang web. Vì vậy widget này sẽ nằm trong <section></section> xuất hiện trên toàn trang web. Nếu bạn siêng thì đưa CSS trong <skin></skin> vào luôn widget này.
5. Thuần Javascript & Thuần CSS
Tạm thời dùng từ "thuần", vì chưa tìm được từ thích hợp. Thực ra rất là dễ hiểu, có nghĩa là không dẫn file CSS hay Javascript vào web, mà ta đưa thẳng code đó lên Web luôn. Chủ yếu là không phụ thuộc CSS và Javascript bên ngoài (do chia sẻ template trên mạng nên không biết những file này khi nào bị xóa) và load web nhanh hơn do load local. Không nên dẫn file vào web như bên code bên dưới :
<link type='text/css' rel='stylesheet' href='https://thichcode.net/style.css' /> <script type='text/javascript' src='https://thichcode.net/style.js'></script>
6. Hạn chế dùng Jquery
Thực ra Jquery dùng rất tiện, nhưng các bạn không nên lạm dụng quá. Ở đây mình chỉ ví dụ một chút cho các bạn dễ hiểu. Với dòng code bên dưới: (Khuyến khích nên dùng lệnh docment.write() thay cho append())
<div id="noi_dung" >Nội dung bài viết</div>
<script type="text/javascript">
var noi_dung_moi = "Nội dung mới";
$(#noi_dung) .empty().append(noi_dung_moi);
</script>
Với đoạn code đơn giản trên thì tốc đô xử lý rất nhanh, nhưng nếu bạn nghĩ khi mà ta dùng một hàm khác, phúc tạp hơn nhiều để lấy giá trị noi_dung_moi thì với hàm append() sẽ làm cho ta có cảm giác website chậm và bị giựt trang khi ta thực thì lệnh append(). Điều này bạn sẽ nhận ra khi làm nhiều webstie.
7. Nên Bật chế độ Template cho mobile
Mặc dù Template hiện tại của website bạn đã có Resposive thì mình cũng khuyến khích bạn nên bật chế độ template cho mobile. Vì sao ? Nếu khách hàng đang sử dụng wifi tốc độ cao thì không có vấn đề gì, còn nếu khách hàng dùng 3G(đặc biệt là hết lưu lượng để truy cập tốc độ cao) thì đây là một vấn đề lớn. Mình đã kiểm tra trên thichcode.net thì thua với 3G luôn, load mãi mà không vào được web. Vì vậy bạn nên bật template cho mobile, nếu cần thêm Danh mục cho website thì thêm widget vào là xong.
Tạm thời chỉ viết tới đây, sắp tới sẽ viết thêm cách quản lý Label cho các bạn.
📁 Blogspot