Nút chỉnh sửa nhanh (Quick Edit Button) là một tính năng nhỏ blogger cung cấp để tiện cho quản trị viên có thể chỉnh sửa bài viết mà không cần thiết phải truy cập vào trang quản trị. Trong bài viết này tôi sẽ hướng dẫn bạn cách tích hợp nó.
Như đã trình bày, đây là tính năng dành cho nhà quản trị, vì vậy nó sẽ không được hiển thị cho khách truy cập thấy. File authorization.css blogger sinh ra sẽ chịu trách nhiệm làm điều đó. Để file này hoạt động bạn cần giữ nguyên cặp thẻ
<head> ... </head>
chứ không được đổi thành
<head> ... </head><!--<head/>-->
I. Trường hợp bật css mặc định
Bước 1: Bật chức năng chỉnh sửa nhanh
Bước 2: Quay sang chỉnh sửa HTML và chuyển đến tiện ích Blog1
Tại đây bạn tiến hành ấn vào hàng số bên trái để thu nhỏ các thẻ b:includable lại.
Bước 3: Thêm thẻ định nghĩa
Bạn kiểm tra xem template đã có <b:includable id='postQuickEdit' var='post'> hay chưa
Nếu chưa có thêm toàn bộ nội dung sau (chèn vào sau 1 thẻ </b:includable> bất kì)
<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='edit' class='icon-action' height='18' src='https://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if> </b:includable>
Nếu có rồi thì sửa nội dung của nó thành
<b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='edit' class='icon-action' height='18' src='https://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if>
Đến đây bạn đã định nghĩa xong, nhiệm vụ tiếp theo là chèn nó vào bố cục bài đăng
Bước 4: Tìm <b:include data='post' name='postQuickEdit'/> và xóa nó đi để đặt ở vị trí thích hợp, nếu không thấy kết quả thì coi như đã qua bước này
Bước 5: Đặt icon chỉnh sửa ở vị trí thích hợp
Không biết sở thích các bạn thế nào, còn tôi thì thường đặt nó ở cạnh tiêu đề bài viết. Tiêu đề bài viết thường là thẻ h1 và nằm trong class <div class='post-head'>
Code đặt
<b:if cond='data:view.isPost'> <b:include data='post' name='postQuickEdit'/> </b:if>
Vị trí đặt
Khi đó bạn sẽ thu được kết quả sau
Khi ấn vào biểu tượng bút chì sẽ chuyển đến giao diện viết bài
II. Trường hợp tắt css mặc định
Các bước hoàn toàn như trên chỉ khác là bạn cần thêm 1 dòng css trích xuất từ css bundle
.item-control{display:none}
Để biểu tượng edit không hiển thị với khách xem blog
III. Trường hợp muốn tắt authorization.css
Như đã trình bày file authorization.css sinh ra để check quyền admin từ đó quyết định có cho hiển thị icon edit hay không. Trên thực tế file này cũng chiếm kha khá thời gian load trang của bạn, nếu bạn muốn tắt nó nhưng vẫn muốn có chức năng quick edit thì hãy theo thủ thuật hơi lầy này của tôi như sauThay cặp thẻ
<head> ... </head>
thành
<head> ... </head><!--<head/>-->
Các bước tương tự phần I chỉ khác: sửa nội dung thẻ <b:includable id='postQuickEdit' var='post'> thành
<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl'>Edit</a> </span> </b:if> </b:includable>
Sử dụng opacity hoặc color trùng với màu nền của body để ẩn biểu tượng edit đi
Như vậy ta vẫn có nút chỉnh sửa nhanh bài viết dù đã tắt authorization.css, còn về phía guest, nếu có vô tình ấn vào họ cũng chẳng làm gì được vì tài khoản của họ không có quyền chỉnh sửa bài đăng
OK tôi nghĩ đã trình bày rất chi tiết và các trường hợp có thể xảy ra với cái nút quick edit này rồi. Nếu có khó khăn gì hãy để lại bình luận để được trợ giúp nhé
Good Luck
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên