Shortcode sử dụng cho Template Plus UI

Tổng hợp Shortcode sử dụng cho Template Plus UI

Có thể bạn đã từng sử dụng template Plus UI, nhưng vẫn chưa biết cách sử dụng các shortcode đi kèm. Trong bài viết này, TruongDevs sẽ chia sẻ với bạn các shortcode Plus UI đã được định dạng sẵn để bạn có thể dễ dàng thêm vào bài viết của mình.

Cách để thêm những code này thì rất đơn giản, bạn chỉ cần thêm Bài viết hoặc Trang sau đó chuyển sang Chế độ xem HTML để thêm vào là được, chú ý thay những phần mình bôi màu nhé.

Trong chế độ chỉnh sửa bài viết, nhấp vào biểu tượng ở góc dưới bên phải của tiêu đề.
Hai tùy chọn sẽ xuất hiện: Xem HTML và Soạn thư.
Chọn Xem HTML.
Sao chép và dán mã thành phần vào nơi bạn muốn thêm và thực hiện các thay đổi phù hợp.

Đoạn văn

Sử dụng thẻ p để thêm các đoạn văn vào bài viết.

<!--[ Paragraph ]-->
<p>Đây là một đoạn văn</p>

Đoạn văn với thụt đầu dòng

Tính năng này giúp thụt đầu dòng của đoạn văn với một giá trị được xác định trước. Bạn cũng có thể áp dụng nó cho một số đoạn văn khác.

<!--[ Text Indent paragraph ]-->
<p class='pIndent'>Đây là một đoạn văn với thụt đầu dòng.</p>

Đoạn văn với chữ cái đầu lớn

Chữ cái đầu lớn sẽ thay đổi kích thước chữ cái đầu tiên của đoạn văn để nó hạ xuống một hoặc nhiều dòng. Nhiều loại phương tiện in ấn sử dụng chữ cái đầu lớn như sách, tạp chí, báo chí, v.v. vì chúng có thể tăng thêm sức hấp dẫn thị giác.

Một chữ cái in hoa lớn được sử dụng như một yếu tố trang trí ở đầu đoạn văn hoặc phần. Kích thước của giới hạn hạ xuống thường là hai dòng hoặc nhiều hơn.

<!--[ Drop Cap paragraph ]-->
<p><span class='dropCap'>T</span>his là một đoạn văn với chữ cái đầu lớn.</p>

Đoạn văn tham chiếu bài viết

Để viết danh sách tham chiếu hoặc chú thích dưới bài viết.

Nguồn:
www.example.com

<!--[ Post Reference paragraph ]-->
<p class='pRef'>Nguồn:<br> www.example.com</p>

Hình ảnh bài viết

Dưới đây là hình ảnh tiêu chuẩn không có bất kỳ container nào, nghĩa là sẽ không có lightbox cho hình ảnh này.

<!--[ Standard image ]-->
<img class='full' alt='alt_here' width='1280' height='720' src='image_link'/>

Mẹo!
Bạn có nhận thấy classname full không? Việc thêm classname này vào thẻ img sẽ loại bỏ lề ngang và thích nghi với chiều rộng toàn màn hình trên thiết bị di động.

Thông tin hữu ích:

Chúng tôi khuyến nghị thêm các thuộc tính alt, width và height vào thẻ img.

Hình ảnh với chú thích

Chú thích trong hình ảnh này sẽ không được đọc trong phần mô tả/tóm tắt bài viết. Bạn cũng có thể chọn để giữ chú thích hiển thị trong các đoạn tóm tắt bài viết.

Chú thích hình ảnh ở đây! Bạn đang tìm nó ở đâu?

<!--[ Image with Caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_alt' src='image_link'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>caption_here</td>
    </tr>
  </tbody>
</table>

Cảnh báo!
Bạn không nên thêm thành phần này vào bài viết hoặc trang một cách thủ công vì đây là đoạn mã HTML được Blogger sử dụng cho hình ảnh có chú thích. Do đó, chúng tôi khuyến nghị bạn sử dụng cách tiếp cận dưới đây khi thêm hình ảnh với thành phần chú thích một cách thủ công.

Bạn có thể tự hỏi tại sao nên sử dụng thẻ table chỉ để thêm chú thích cho hình ảnh dù đã có các thẻ HTML figure và figcaption?

Hãy để tôi giải thích! Đó là vì khi chúng ta thêm chú thích vào hình ảnh thông qua trình chỉnh sửa bài viết của Blogger mà không chỉnh sửa HTML thủ công, nó sử dụng đoạn mã ở trên cho hình ảnh có chú thích. Do đó, cần hỗ trợ chúng.

Bạn cũng có thể sử dụng các thẻ figure và figcaption thay vì thẻ table như được hiển thị dưới đây.

<!--[ Image with Caption ]-->
<figure>
  <img alt='image_alt' src='image_src'/>
  <figcaption>caption_here</figcaption>
</figure>

Hình ảnh với Lightbox tự động

Lightbox giúp phóng to hình ảnh và làm cho nó trở nên tập trung hoàn toàn khi nhấp vào. Lightbox cũng chứa nội dung của thuộc tính alt của hình ảnh khi nó xuất hiện khi nhấp vào hình ảnh.

Bạn tìm thấy lightbox ở đâu? Nhấp vào hình ảnh này!

Thông tin hữu ích:

Tất cả các hình ảnh trong bài viết sẽ tự động có chức năng lightbox nếu hình ảnh được bao bọc trong một container cha có một trong các classname lbx, separator, psImg, btImg, glImg hoặc đáp ứng một trong các bộ chọn .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator >img, .pS .tr-caption-container td >img, figure img.
Nếu một hình ảnh có lightbox được bao bọc trong thẻ liên kết, nhấp vào hình ảnh sẽ chỉ mở liên kết khi lightbox được hiển thị.
Để tắt chức năng lightbox tự động cho một hình ảnh cụ thể, thêm thuộc tính data-lightbox='false' vào thẻ img.
Để tắt việc lightbox tự động chứa nội dung thuộc tính alt, thêm thuộc tính data-caption='false' vào thẻ img.

Hình ảnh với bố cục lưới

Bố cục lưới trong bối cảnh hình ảnh thường đề cập đến việc sắp xếp nhiều hình ảnh trong một định dạng lưới có cấu trúc trên trang web hoặc trong tài liệu. Bố cục này phổ biến cho các bộ sưu tập, danh mục đầu tư hoặc bất kỳ bộ sưu tập hình ảnh nào mà bạn muốn hiển thị nhiều hình ảnh một cách gọn gàng và có tổ chức.

<!--[ Images with Grid Layout ]-->
<div class='psImg grImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Hình ảnh với chức năng Hiển thị tất cả

Được sử dụng để ẩn một số hình ảnh và sẽ hiển thị khi người dùng nhấp vào nút Hiển thị tất cả. Chức năng Hiển thị tất cả chỉ có thể được kích hoạt một lần, hình ảnh không thể ẩn lại khi bạn kích hoạt nó.

Hiển thị tất cả

<!--[ Images with Show All Function ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='image_alt' src='image_link'/>
    
    <!--[ Button to activate ]-->
    <label for='hideImg1' aria-label='Hiển thị tất cả hình ảnh'>Hiển thị tất cả</label>
  </div>

  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
  </div>
</div>

Hình ảnh với bố cục cuộn

Hình ảnh với bố cục cuộn thường đề cập đến một kỹ thuật thiết kế nơi các hình ảnh được hiển thị theo cách cuộn ngang hoặc dọc trong một container. Phương pháp này thường được sử dụng khi bạn có một bộ sưu tập hình ảnh vượt quá không gian có sẵn trên màn hình, và bạn muốn người dùng có thể cuộn qua chúng.

<!--[ Images with Scroll Layout (Style 1) ]-->
<div class='glImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Mẹo!
Bạn có thể thay đổi chiều cao của hình ảnh cuộn bằng cách thêm một trong các classname h150, h200, h250, vào phần tử div.galWrp.

Phong cách bố cục cuộn này chỉ hoạt động trong chế độ xem di động. Vui lòng thử mở trang này trên thiết bị di động của bạn.

<!--[ Images with Scroll Layout (Style 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Hình ảnh tải chậm

Hữu ích để trì hoãn việc tải hình ảnh nhằm tăng điểm số PageSpeed của blog, hình ảnh chỉ tải khi người dùng cuộn đến khu vực hình ảnh. Tính năng này sử dụng @aFarkas/lazysizes để tải chậm hình ảnh.

<!--[ Lazyload Image ]-->
<img class='lazyload' alt='image_title' data-src='image_link' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Cảnh báo!
Không bao giờ tải chậm hình ảnh đầu tiên của bài viết một cách thủ công. Làm như vậy sẽ dẫn đến các hành vi không mong muốn.
Cũng khuyến nghị không sử dụng, thay vào đó bạn có thể bật Tải chậm hình ảnh trong cài đặt Blog. Nó sẽ tự động tải chậm các hình ảnh bài viết của bạn.

Liên kết bên ngoài

Thông báo cho người dùng nếu liên kết dẫn đến một trang web khác.

Liên kết bên ngoài

<a class='extL' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

Các phong cách thay thế:

Liên kết bên ngoài

<a class='extL alt' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

Liên kết bên ngoài

<a class='extL sec' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

Nút

Xác định các nút mà người dùng có thể nhấp vào.

Văn bản nút

<!--[ Button ]-->
<a class='button' href='link_here'>link_title</a>

Văn bản nút

<!--[ Button outlined ]-->
<a class='button ln' href='link_here'>link_title</a>

Tải xuống

<!--[ Button with download icon ]-->
<a class='button' href='link_here'><i class='icon dl'></i>link_title</a>

Demo

<!--[ Button with demo icon ]-->
<a class='button' href='link_here'><i class='icon demo'></i>link_title</a>

Liên kết tải xuống

Để cung cấp thông tin về các tệp được tải xuống cho người dùng.

file_name.zip 200kb

<!--[ Download Box ]-->
<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200KiB</span>
  </div>

  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Tải xuống' href='link_here' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
</div>

Trích dẫn

Hai thứ vô hạn: vũ trụ và sự ngu ngốc của con người; và tôi không chắc về vũ trụ.
Albert Einstein

<!--[ Standard Blockquote ]-->
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Hãy là chính bạn và nói những gì bạn cảm thấy, vì những người để ý không quan trọng, và những người quan trọng không để ý.
Bernard M. Baruch

<!--[ Blockquote (Style 1) ]-->
<blockquote class='s1'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Tôi đã học được rằng mọi người sẽ quên những gì bạn nói, quên những gì bạn làm, nhưng họ sẽ không bao giờ quên bạn đã khiến họ cảm thấy như thế nào.
Maya Angelou

<!--[ Blockquote (Style 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Khối ghi chú

Tính năng này dùng để thêm thông tin quan trọng, câu cảnh báo hoặc làm nổi bật các câu, có hai phong cách như dưới đây.

Thông tin!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note info ]-->
<p class='note'><b>Thông tin!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Cảnh báo!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note warning ]-->
<p class='note wr'><b>Cảnh báo!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Cảnh báo

Tương tự như Khối ghi chú, điểm khác biệt duy nhất là Cảnh báo có phong cách khác và có nhiều biến thể hơn:

Mặc định Một cảnh báo mặc định đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert default ]-->
<div class='alert'><b>Mặc định</b>
  Một cảnh báo mặc định đơn giản - Lorem ipsum dolor sit amet.
</div>

Viền Một cảnh báo viền đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert outlined ]-->
<div class='alert outline'><b>Viền</b>
  Một cảnh báo viền đơn giản - Lorem ipsum dolor sit amet.
</div>

Thông tin! Một cảnh báo thông tin đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert variant info ]-->
<div class='alert info'><b>Thông tin!</b>
  Một cảnh báo thông tin đơn giản - Lorem ipsum dolor sit amet.
</div>

Cảnh báo! Một cảnh báo cảnh báo đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning ]-->
<div class='alert warning'><b>Cảnh báo!</b>
  Một cảnh báo cảnh báo đơn giản - Lorem ipsum dolor sit amet.
</div>

Thành công! Một cảnh báo thành công đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert variant success ]-->
<div class='alert success'><b>Thành công!</b>
  Một cảnh báo thành công đơn giản - Lorem ipsum dolor sit amet.
</div>

Lỗi! Một cảnh báo lỗi đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert variant error ]-->
<div class='alert error'><b>Lỗi!</b>
  Một cảnh báo lỗi đơn giản - Lorem ipsum dolor sit amet.
</div>

Thông tin! Một cảnh báo thông tin đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Thông tin!</b>
  Một cảnh báo thông tin đơn giản - Lorem ipsum dolor sit amet.
</div>

Cảnh báo! Một cảnh báo cảnh báo đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Cảnh báo!</b>
  Một cảnh báo cảnh báo đơn giản - Lorem ipsum dolor sit amet.
</div>

Thành công! Một cảnh báo thành công đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Thành công!</b>
  Một cảnh báo thành công đơn giản - Lorem ipsum dolor sit amet.
</div>

Lỗi! Một cảnh báo lỗi đơn giản - Lorem ipsum dolor sit amet.

<!--[ Alert variant error outlined ]-->
<div class='alert error outline'><b>Lỗi!</b>
  Một cảnh báo lỗi đơn giản - Lorem ipsum dolor sit amet.
</div>

Bảng

Việc sử dụng bảng trong HTML phức tạp hơn một chút, chúng tôi khuyến nghị bạn tìm hiểu thêm về bảng HTML trước khi sử dụng. Dưới đây là một ví dụ về bảng với dữ liệu:

Tên	Vị trí	Văn phòng	Tuổi	Ngày bắt đầu	Lương
Tiger Nixon	Kiến trúc sư hệ thống	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Kế toán	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Tác giả kỹ thuật cấp dưới	San Francisco	66	2009/01/12	$86,000

<!--[ Table ]-->
<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>Tên</th>
        <th>Vị trí</th>
        <th>Văn phòng</th>
        <th>Tuổi</th>
        <th>Ngày bắt đầu</th>
        <th>Lương</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>Kiến trúc sư hệ thống</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Kế toán</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Tác giả kỹ thuật cấp dưới</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

Đối với các phong cách bảng, bạn có thể thêm classname vào phần tử .table, bao gồm:

cborder: viền cho container bảng.
bordered / noborder (chọn một): viền nội dung bảng.
clr / primary / warning / success / error: nền tiêu đề bảng.
stripped: kiểu dải dòng bảng.
hovered: hiệu ứng di chuột trên dòng bảng.
mh100 / mhvh / mh200 / mh300: chiều cao tối đa của bảng tính bằng px (ngoại lệ: mh100 đặt chiều cao thành 100%).
sp5 / sp10 / sp20: khoảng đệm nội dung bảng.

Các classname stripped và hovered được thêm vào trong phiên bản v3.1.0

Các bước

Được sử dụng để xác định các bước cho một hướng dẫn.

bước_1
bước_2
bước_3

<!--[ Steps ]-->
<ol class='steps'>
  <li>bước_1</li>
  <li>bước_2</li>
  <li>bước_3</li>
</ol>

Khối mã

Được sử dụng để xác định các dòng mã máy tính (HTML, CSS, Javascript, v.v.) trong bài viết.

<pre data-comment='.html' data-source='src/index.html'><code>escaped_code_here</code></pre>

Thẻ code có thể được sử dụng để xác định mã nội tuyến như thế này: escaped_code_here.

<code>escaped_code_here</code>

Thẻ kbd có thể được sử dụng để xác định đầu vào bàn phím như thế này: ⌘ + A.

<kbd>⌘ + A</kbd>

Bên trong thẻ <code>, một phần có thể được đánh dấu bằng cách bao bọc nó với thẻ <mark>.

// mark examples
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");

// mark codes
console.log("<mark>Hello World!</mark>");
console.log("<mark class='block'>Hello World!</mark>");
console.log("<mark class='gray'>Hello World!</mark>");
console.log("<mark class='red'>Hello World!</mark>");
console.log("<mark class='orange'>Hello World!</mark>");
console.log("<mark class='blue'>Hello World!</mark>");
console.log("<mark class='green block'>Hello World!</mark>");
console.log("<mark class='gold'>Hello World!</mark>");
console.log("<mark class='purple'>Hello World!</mark>");
console.log("<mark data-before='Message before'>Hello World!</mark>");
console.log("<mark class='block red' data-after='Message after'>Hello World!</mark>");
console.log("<mark class='green' data-before='$'>Hello World!</mark>");
console.log("<mark data-after='$'>Hello World!</mark>");

Thông tin hữu ích:

Bạn cần sử dụng mã đã được thoát trong các phần tử <code>, điều này có nghĩa là bạn phải thay thế tất cả & thành &, < thành < và > thành >.
Tất cả các khối mã được tự động làm nổi bật bằng cách sử dụng @highlightjs/highlight.js, một trong những thư viện phổ biến để làm nổi bật mã và một plugin tùy chỉnh. Nút sao chép và số dòng cũng được tự động thêm vào.
Thư viện chỉ được tải nếu có ít nhất một khối mã trong bài viết để đảm bảo không tạo thêm yêu cầu không cần thiết.
Mã nội tuyến cũng được làm nổi bật.
Thư viện tự động phát hiện ngôn ngữ phù hợp nhất cho mã của bạn và làm nổi bật nó, nhưng đôi khi nó có thể không phát hiện đúng ngôn ngữ.
Nếu thư viện phát hiện sai ngôn ngữ hoặc bạn muốn chỉ định ngôn ngữ mã rõ ràng, bạn có thể thêm một classname theo cách, tên ngôn ngữ có tiền tố language-, vào phần tử <code>. Ví dụ, nếu mã của bạn được viết bằng javascript, bạn có thể thêm classname language-js hoặc language-javascript vào phần tử <code>.

Khối mã nhiều tab

Được sử dụng để nhóm nhiều khối mã lại với nhau.

[HTML] escaped_code_here

[CSS] escaped_code_here

[JS] escaped_code_here

[JSON] escaped_code_here

<!--[ Multi-tabs Code Block Highlighter ]-->
<div class='pre tabs'>
  <!--[ Active function ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>
  
  <!--[ Header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>

  <!--[ Content ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>[HTML] escaped_code_here</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>[CSS] escaped_code_here</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] escaped_code_here</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] escaped_code_here</code></pre>
</div>

Spoiler

Được sử dụng để tạo các widget tương tác mà người dùng có thể mở và đóng theo nhu cầu. Theo mặc định, widget này được đóng, sẽ hiển thị nội dung trong đó khi người dùng nhấn vào nút lệnh. Bất kỳ nội dung nào cũng có thể được bao gồm trong widget này.

Spoiler:

text_here

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Hiển thị tất cả' data-hide='Ẩn tất cả'>Spoiler:</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Hợp âm

Xác định nội dung bổ sung mà người dùng có thể mở và đóng theo nhu cầu trong các nhóm, thường được sử dụng cho danh sách câu hỏi hoặc FAQ (Câu hỏi thường gặp).

Tiêu đề_ở_đây

text_here

<!--[ Accordion ]-->
<details class='ac'>
  <summary>Tiêu đề_ở_đây</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Tiêu đề_ở_đây

text_here

<!--[ Accordion (Alternate) ]-->
<details class='ac alt'>
  <summary>Tiêu đề_ở_đây</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Tiêu đề_ở_đây

text_here

Tiêu đề_ở_đây

text_here

Tiêu đề_ở_đây

text_here

Tiêu đề_ở_đây

text_here

<!--[ Accordion (Grouped) ]-->
<div class='showH'>
  <details class='ac'>
    <summary>Tiêu đề_ở_đây</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Tiêu đề_ở_đây</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Tiêu đề_ở_đây</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Tiêu đề_ở_đây</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
</div>

Câu hỏi thường gặp trong microdata

Trang Câu hỏi thường gặp (FAQ) chứa danh sách các câu hỏi và câu trả lời liên quan đến một chủ đề cụ thể. Các trang FAQ được đánh dấu đúng cách có thể đủ điều kiện để có kết quả phong phú trên Tìm kiếm và một Hành động trên Google Assistant, giúp trang web của bạn tiếp cận đúng người dùng.

<!--[ Accordion (FAQPage) ]-->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Tiêu đề_ở_đây</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Tiêu đề_ở_đây</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Tiêu đề_ở_đây</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Tiêu đề_ở_đây</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
</div>

Cảnh báo!
Bạn không thể sử dụng thành phần này ở nhiều nơi trong một bài viết hoặc trang duy nhất, hãy cân nhắc nhóm tất cả các FAQ vào một thành phần duy nhất.

Mục lục

Mục lục (TOC - viết tắt của Table of Contents) giúp người dùng nhanh chóng điều hướng qua nội dung của một trang web bằng cách cung cấp các liên kết trực tiếp đến các phần khác nhau. Điều này đặc biệt hữu ích cho các bài viết dài hoặc các trang có nhiều phần riêng biệt.

Có hai cách để định nghĩa một mục lục.

Mục lục thủ công

Sử dụng mục lục thủ công rất phức tạp, bạn phải thêm một thuộc tính id khác nhau vào mỗi thẻ tiêu đề và viết nó trong danh sách nội dung.

Mục lục tự động

Việc sử dụng mục lục thủ công không dễ dàng, do đó chúng tôi cung cấp một mục lục tự động, nó sẽ tìm tất cả các tiêu đề trong bài viết và điền vào danh sách nội dung một cách có tổ chức.

Mục lục

<!--[ Automatic Table of Contents ]-->
<details class='sp toc' open>
  <summary data-show='Hiển thị tất cả' data-hide='Ẩn tất cả'>Mục lục</summary>
  <div class='aToc'></div>
</details>

Bài viết liên quan

Bài viết liên quan là các liên kết hoặc gợi ý nội dung trên một trang web liên kết đến các chủ đề hoặc bài viết tương tự, giúp người dùng khám phá thêm thông tin liên quan.

Có hai cách để định nghĩa thành phần này.

Bài viết liên quan thủ công

Bài viết liên quan thủ công được tác giả chọn và thêm vào dựa trên mức độ liên quan, cho phép kiểm soát hoàn toàn các gợi ý.

Bạn có thể muốn đọc bài viết này:

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>Bạn có thể muốn đọc bài viết này:</b>
  <ul>
    <li><a href='liên_kết_bài_viết'>tiêu_đề_bài_viết</a></li>
    <li><a href='liên_kết_bài_viết'>tiêu_đề_bài_viết</a></li>
    <li><a href='liên_kết_bài_viết'>tiêu_đề_bài_viết</a></li>
  </ul>
</div>

Bài viết liên quan tự động

Bài viết liên quan tự động được tạo ra bởi các thuật toán sử dụng các danh mục, tiết kiệm thời gian nhưng kém chính xác hơn.

YouTube tải chậm

Tải iframe khi nút phát được nhấp, nếu không sẽ hiển thị hình ảnh thu nhỏ làm placeholder được tải chậm bằng @aFarkas/lazysizes.

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

Thông tin hữu ích:

Bạn có thể đặt tỷ lệ iframe như sau:

<!--[ Lazy YouTube ]-->
<div class='lazyYt' style='--ratio: 4 / 3' data-embed='video_id'></div>

Hoãn YouTube

Hoãn tải iframe bằng @aFarkas/lazysizes.

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' title='Trình phát video YouTube' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

Thông tin hữu ích:

Bạn có thể đặt tỷ lệ iframe như sau:

<!--[ Defer YouTube ]-->
<div class='videoYt' style='--ratio: 4 / 3'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' title='Trình phát video YouTube' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

Những điều cần thiết

Phần này không cung cấp bất kỳ thành phần nào, nhưng chứa các đoạn mã HTML chung có thể được sử dụng cho các mục đích khác nhau.

Đoạn trích bài viết rõ ràng

Đoạn trích bài viết hiển thị một vài dòng nội dung văn bản của bài viết. Nó tự động chọn các văn bản từ đầu bài viết. Nếu bạn muốn đặt một đoạn trích bài viết tùy chỉnh, bạn có thể thêm đoạn mã sau vào đầu bài viết:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>đoạn_trích_bài_viết</div>

<!--more-->

Hình thu nhỏ bài viết rõ ràng

Blogger tự động chọn hình ảnh đầu tiên của bài viết làm hình thu nhỏ. Nếu bạn muốn đặt hình thu nhỏ bài viết tùy chỉnh mà không xuất hiện trong bài viết, bạn có thể thêm đoạn mã sau vào đầu bài viết:

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='nguồn_hình_ảnh'/></div>
]-->

<!--more-->

Bạn có thể đặt đoạn trích bài viết và hình thu nhỏ bài viết tùy chỉnh bằng cách kết hợp hai đoạn mã trên như sau:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>đoạn_trích_bài_viết</div>

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='nguồn_hình_ảnh'/></div>
]-->

<!--more-->

Tiêu đề phụ

Thêm tiêu đề phụ bên cạnh tiêu đề chính trong một bài viết hoặc trang cụ thể.

<style>
  /* Tiêu đề phụ tùy chỉnh */
  .headH::after{content:'Tiêu_đề_phụ'}
</style>

Shortcode sử dụng cho Template Plus UI

Đoạn văn

Đoạn văn với thụt đầu dòng

Đoạn văn với chữ cái đầu lớn

Đoạn văn tham chiếu bài viết

Hình ảnh bài viết

Hình ảnh với chú thích

Hình ảnh với Lightbox tự động

Hình ảnh với bố cục lưới

Hình ảnh với chức năng Hiển thị tất cả

Hình ảnh với bố cục cuộn

Hình ảnh tải chậm

Liên kết bên ngoài

Nút

Liên kết tải xuống

Trích dẫn

Khối ghi chú

Cảnh báo

Bảng

Các bước

Khối mã

Khối mã nhiều tab

Spoiler

Hợp âm

Câu hỏi thường gặp trong microdata

Mục lục

Mục lục thủ công

Mục lục tự động

Bài viết liên quan

Bài viết liên quan thủ công

Bài viết liên quan tự động

YouTube tải chậm

Hoãn YouTube

Những điều cần thiết

Đoạn trích bài viết rõ ràng

Hình thu nhỏ bài viết rõ ràng

Tiêu đề phụ

About the author

1 comment