Thêm tính năng truyện tranh trên Blgoger bằng JavaScript

Để thêm tính năng truyện tranh vào blog, trước tiên hãy mở trình chỉnh sửa HTML của chủ đề, sau đó bạn làm theo các hướng dẫn sau:

XEM DEMO

Bước 1: Tìm đến thẻ  <b:widget id='Blog1' type='Blog'>  và thêm sau nó:

<b:includable id='postTypeComic' var='post'>
  <b:if cond='data:view.isSingleItem and data:post.labels any (i => i.name in ["Comic", "Komik", "type:comic"])'>
    <b:class name='type:comic'/>
    <script src='//dte-project.github.io/blogger/comic.min.js?save=false'></script>
  </b:if>

Bước 2: Tiếp tục tìm đến mã  <data:post.body/>  và thêm sau nó:

<b:include data="post" name="postTypeComic"></b:include>

Bước 3: Lưu lại và mẫu Post bài

Sau khi lưu lại tất cả, bạn vào post bài, chuyển sang chế độ HTML. Những gì bạn cần làm tiếp theo là tạo bài viết mới chứa hình ảnh, sau đó chỉ cần thêm một nhãn Comic hoặc Komic nhãn để kích hoạt sự xuất hiện truyện tranh.

Widget này sẽ tìm kiếm tất cả các phần tử <a> và <img> trong bài viết có nhãn Comic hoặc Komic và sẽ lấy giá trị của thuộc tính href và src các phần tử sẽ được sử dụng làm hình ảnh danh sách hàng đợi. Đặc biệt đối với giá trị thuộc tính của href phần tử <a>, widget này sẽ chỉ lấy các liên kết xuất hiện dưới dạng liên kết hình ảnh, tức là những liên kết có phần mở rộng dưới dạng phần mở rộng GIF, JPEG, JPG và PNG.

Để tiện hơn, mình tạo mẫu như sau:

<p>In every class, it’s not usual for there to be one or two people who seem a little strange. In Oda’s class, there is Hototogi.</p>
<p><img alt="Cover" title="Page 1" src="/path/to/image/1.png"></p>
<p><a href="/path/to/image/2.png">Page 2</a></p>
<p><a href="/path/to/image/3.png">Page 3</a></p>
<p><a href="/path/to/image/4.png">Page 4</a></p>
<p><a href="/path/to/image/5.png">Page 5</a></p>
<p><a href="/path/to/image/6.png">Page 6</a></p>
<p><a href="/path/to/image/7.png">Page 7</a></p>

*Bài viết gốc xem Tại đây.