Các thành phần giao diện người dùng và kiểu chữ Plus Ui v3.2.0

Bạn đang dùng phiên bản 2.6? Bạn đang tìm tài liệu hướng dẫn cho phiên bản 2.6? Hãy xem tại đây. tài liệu cũ.

Table of Contents

Hầu hết các tính năng này chỉ có thể được sử dụng ở chế độ Xem HTML, và bạn cũng không thể chuyển sang chế độ 'Xem văn bản' khi đang sử dụng một số tính năng này.

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

Đoạn văn

Sử dụng p Thẻ dùng để thêm đ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 có thụt lề

Tính năng này dùng để thụt lề dòng đầu tiên 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 nhiều đoạn văn khác.

<!--[ Text Indent paragraph ]-->
<p class='pIndent'>Đây là một đoạn văn có thụt lề.</p>

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

Chữ cái đầu đoạn lớn (drop cap) sẽ điều chỉnh kích thước chữ cái đầu tiên của đoạn văn sao cho nó rơi xuống một hoặc nhiều dòng. Nhiều loại ấn phẩm sử dụng chữ cái đầu đoạn lớn, chẳng hạn như sách, tạp chí, báo, v.v., vì chúng có thể làm tăng tính thẩm mỹ trực quan.

Chữ 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 giảm dần thường là hai dòng trở lên.

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

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

Viết danh sách tài liệu tham khảo hoặc chú thích bên 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 đăng

Ảnh dưới đây là ảnh tiêu chuẩn không có khung chứa, nghĩa là ảnh này sẽ không có hiệu ứng lightbox.

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

Mẹo nhỏ!
Bạn có để ý đến tên lớp (classname ) không full? Thêm tên lớp này vào img thẻ sẽ loại bỏ lề ngang và tự động điều chỉnh 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 bạn nên thêm các thuộc tính alt, width và height cho thuộc tính thẻ img.
Tất cả hình ảnh trong bài đăng đều được tự động chuyển đổi nếu có bất kỳ width hoặc height Các thuộc tính được cung cấp, ở định dạng webp và được lưu vào bộ nhớ đệm trong 90 ngày.
Để từ chối việc chuyển đổi một hình ảnh cụ thể, hãy thêm thuộc tính. data-transform='false' vào thẻ img.
Để từ chối rõ ràng việc hiển thị hình ảnh định dạng webp cho một hình ảnh cụ thể, hãy thêm thuộc tính data-webp='false' vào thẻ img.
Để thiết lập thời gian lưu cache tùy chỉnh cho một hình ảnh cụ thể, hãy thêm thuộc tính. data-cache='30' vào thẻ img thẻ nơi 30 Đây là số ngày hết hạn của bộ nhớ đệm, phạm vi chấp nhận được là từ 1 đến 90.

Hình ảnh kèm chú thích

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

Chú thích ảnh ở đây rồi! Bạn tìm nó ở đâu vậy?

<!--[ 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ủ công thành phần này vào bài viết hoặc trang 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 bạn nên sử dụng phương pháp dưới đây khi thêm thành phần hình ảnh có chú thích theo cách thủ công.

Có thể bạn đang thắc mắc tại sao lại phải sử dụng table thẻ <img> chỉ để thêm chú thích cho hình ảnh trong khi đã có các thẻ HTML khác như figure và figcaption

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

Bạn cũng có thể sử dụng thẻ figure và figcaption thay vì table như hình bên dưới.

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

Hình ảnh tự động Lightbox

Lightbox giúp phóng to hình ảnh và làm cho hình ảnh tập trung hoàn toàn khi nhấp chuột. Lightbox cũng chứa nội dung của... alt Thuộc tính của hình ảnh khi nó xuất hiện khi nhấp chuột 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ả hình ảnh trong bài đăng sẽ tự động có chức năng lightbox nếu hình ảnh đó được đặt trong một vùng chứa cha có một trong các tên lớp được chỉ định lbx, separator, psImg, btImg, glImg hoặc thỏa mãn một trong các điều kiện 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ó chứa lightbox được đặt trong thẻ liên kết (anchor tag), việc 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ể, hãy thêm thuộc tính data-lightbox='false' với thẻ img.
Để từ chối hiển thị hộp thoại tự động chứa alt nội dung thuộc tính, hãy thêm thuộc tính vào thẻ data-caption='false' với thẻ img.

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

Trong ngữ cảnh hình ảnh, bố cục dạng lưới thường đề cập đến việc sắp xếp nhiều hình ảnh theo đị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 thư viện ảnh, portfolio 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ả

Chức năng này được sử dụng để ẩn một số hình ảnh và sẽ được 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ể bị ẩn lại sau khi bạn kích hoạt chức năng này.

Show All

<!--[ 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='Show all images'>Show All</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 có bố cục cuộn thường đề cập đến kỹ thuật thiết kế trong đó hình ảnh được hiển thị theo kiểu cuộn ngang hoặc dọc trong một vùng chứa. Cách tiếp cận này thường được sử dụng khi bạn có một bộ sưu tập hình ảnh có thể 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 để xem hết 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 hay!
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 lớp h150, h200, h250, vào phần tử div.galWrp.

Kiểu bố cục cuộn này chỉ hoạt động trên thiết bị 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>

Lazyload Image

Hữu ích để trì hoãn việc tải hình ảnh, giúp blog hiển thị nhanh hơn PageSpeed Nếu điểm số cao hơn, hình ảnh sẽ 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 to lazyload images.

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

Cảnh báo!
Tuyệt đối không được tải ảnh đầu tiên của bài viết theo kiểu lazyload thủ công Làm như vậy sẽ dẫn đến các lỗi không mong muốn.
Tốt hơn hết là bạn không nên sử dụng tính năng này, thay vào đó hãy bật tùy chọn Lazy load images trong cài đặt Blog. Tính năng này sẽ tự động tải ảnh cho bài viết của bạn theo kiểu lazyload.

Liên kết 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.

External Link

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

Styles thay thế khác:

External Link

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

External Link

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

Button

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

Button Text

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

Button Text

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

Download

<!--[ 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>

Download Link

Cung cấp thông tin về các tệp Download 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='Download' href='link_here' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
</div>

Blockquote

Có hai thứ vô hạn: vũ trụ và sự ngu dốt 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 mình và nói lên cảm xúc của bạn, bởi vì những người quan tâm đến điều đó thì không quan trọng, còn những người quan trọng thì không quan tâm.
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 nhận ra rằng mọi người sẽ quên những gì bạn nói, mọi người sẽ quên những gì bạn làm, nhưng mọi người sẽ không bao giờ quên cảm giác mà bạn mang lại cho họ.
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>

Note Block

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 kiểu như hình bên dưới.

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>Info!</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>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Alert

Tương tự như Note Block, điểm khác biệt duy nhất là Alert có kiểu dáng khác và 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>

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

<!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
  Một cảnh báo phác thảo đơ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 đơ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 đơ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 đơ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 đơ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>

Table

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 bạn nên tìm hiểu thêm về bảng HTML trước khi sử dụng chúng. Sau đây là một ví dụ về bảng có dữ liệu:

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000

<!--[ Table ]-->
<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

Đối với kiểu bảng, bạn có thể thêm tên lớp vào phần tử, ví dụ: .table

cborder : Viền cho khung chứa bảng.
bordered / noborder (chọn một): viền nội dung bảng.
clr / primary / warning / success / error : bảng tiêu đề nền.
stripped : kiểu hàng bảng bị lược bỏ.
hovered : Di chuột qua hàng trong bảng.
mh100 / mhvh / mh200 / mh300 : Chiều cao tối đa của bảng tính bằng pixel (ngoại lệ: mh100 đặt chiều cao thành 100%).
sp5 / sp10 / sp20 : khoảng đệm nội dung bảng

đã bị tước bỏ và hovered Tên lớp đã được thêm vào trong phiên bản v3.1.0.

Steps

Dùng để xác định các bước cho một hướng dẫn.

step_1
step_2
step_3

<!--[ Steps ]-->
<ol class='steps'>
  <li>step_1</li>
  <li>step_2</li>
  <li>step_3</li>
</ol>

Code Block

Dùng để định nghĩa các dòng mã máy tính (HTML, CSS, Javascript, v.v.) trong bài đăng.

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

code Thẻ `<tag>` có thể được sử dụng để định nghĩa mã nội tuyến như sau: escaped_code_here.

<code>escaped_code_here</code>

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

<kbd>⌘ + A</kbd>

Bên trong thẻ <code> một bộ phận có thể được đánh dấu bằng cách bao bọc nó bằng 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ã thoát bên trong <code> các phần tử, 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ã đều được tự động tô sáng bằng cách sử dụng @highlightjs/highlight.js, Đây là một trong những thư viện phổ biến để tô sáng cú pháp mã và là 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 khi và chỉ khi có ít nhất một khối mã trong bài đăng để đảm bảo chúng ta không thực hiện thêm các yêu cầu không cần thiết.
Mã nội tuyến cũng được tô sáng.
Thư viện tự động phát hiện ngôn ngữ phù hợp nhất với mã của bạn và tô sáng nó, nhưng đôi khi nó có thể không phát hiện đúng ngôn ngữ.
Nếu thư viện nhận diện ngôn ngữ không chính xác hoặc bạn muốn chỉ định rõ ngôn ngữ lập trình, bạn có thể thêm tên lớp theo cách sau: tên ngôn ngữ được đặt trước bằng dấu * language-, đến <code> phần tử. Ví dụ, nếu mã của bạn được viết bằng JavaScript, bạn có thể thêm tên lớp language-js hoặc language-javascript đến <code>

Multi-tabs Code Block

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ông cụ này được sử dụng để tạo các widget tương tác mà người dùng có thể mở và đóng theo yêu cầu. Theo mặc định, widget này ở trạng thái đóng, và nội dung bên trong sẽ được hiển thị khi người dùng nhấn nút lệnh. Bất kỳ nội dung nào cũng có thể được đưa vào widget này.

Spoiler:

text_here

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Accordion

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

Title_here

text_here

<!--[ Accordion ]-->
<details class='ac'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Title_here

text_here

<!--[ Accordion (Alternate) ]-->
<details class='ac alt'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

<!--[ Accordion (Grouped) ]-->
<div class='showH'>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
</div>

FAQs in 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ả hiển thị phong phú hơn trên Tìm kiếm và Trợ lý Google Assistant, Điều này có thể giúp trang web của bạn tiếp cận đúng đối tượ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'>Title_here</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'>Title_here</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'>Title_here</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'>Title_here</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 hơn một vị trí trong cùng một bài đăng hoặc trang, hãy cân nhắc nhóm tất cả các câu hỏi thường gặp vào một thành phần duy nhất.

Mục lục

Mục lục (viết tắt của Table of Contents - Mục lục) giúp người dùng nhanh chóng điều hướng 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 đối với 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ục lục.

Hướng dẫn sử dụng Mục lục

Việc sử dụng mục lục thủ công rất phức tạp, bạn phải thêm một id thuộc tính khác nhau vào mỗi thẻ tiêu đề và viết nó vào 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 lắm, vì vậy chúng tôi cung cấp mục lục tự động, chức năng này sẽ tìm kiế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='Show all' data-hide='Hide all'>Table of Contents</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, kết nối đến các chủ đề hoặc bài viết tương tự, giúp người dùng tìm thấy thêm thông tin phù hợp.

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

Hướng dẫn sử dụng các bài viết liên quan

Các bài viết liên quan đến hướng dẫn sử dụng được tác giả lựa chọn và thêm vào dựa trên mức độ phù hợp, cho phép người dùng hoàn toàn kiểm soát các đề xuất.

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='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
  </ul>
</div>

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

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

Lazy YouTube

Tải iframe một lần khi nhấn nút phát, nếu không sẽ hiển thị hình ảnh thu nhỏ làm hình giữ chỗ, hình ảnh này được tải lazyloaded bằng cách sử dụng @aFarkas/lazysizes.

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

Thông tin hữu ích:

Bạn có thể thiết lập tỷ lệ iframe như hình bên dưới:

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

Defer YouTube

Trì hoãn việc tải iframe bằng cách sử dụng @aFarkas/lazysizes.

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' title='YouTube video player' 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ể thiết lập tỷ lệ iframe như hình bên dưới:

<!--[ Defer YouTube ]-->
<div class='videoYt' style='--ratio: 4 / 3'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' title='YouTube video player' 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 cho bạn bất kỳ thành phần nào, mà chỉ chứa các đoạn mã HTML tổng quát có thể được sử dụng cho nhiều mục đích khác nhau.

Đoạn trích bài đăng Snippet

Đ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 văn bản từ đầu bài viết. Nếu bạn muốn thiết lập đ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'>post_snippet</div>

<!--more-->

Ảnh thu nhỏ bài đăng Thumbnail

Blogger tự động chọn ảnh đầu tiên của bài viết làm ảnh thu nhỏ. Nếu bạn muốn đặt ảnh thu nhỏ tùy chỉnh không hiển thị 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='image_src'/></div>
]-->

<!--more-->

Bạn có thể thiết lập đ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ư hình bên dưới:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>post_snippet</div>

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->

Tiêu đề Phụ đề

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

<style>
  /* Custom Header subtitle */
  .headH::after{content:'Subtitle'}
</style>

Các thành phần giao diện người dùng và kiểu chữ Plus Ui v3.2.0

Đoạn văn

Đoạn văn có thụt lề

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

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

Hình ảnh bài đăng

Hình ảnh kèm chú thích

Hình ảnh tự động Lightbox

Hình ảnh với bố cục dạng 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

Lazyload Image

Liên kết ngoài

Button

Download Link

Blockquote

Note Block

Alert

Table

Steps

Code Block

Multi-tabs Code Block

Spoiler

Accordion

FAQs in microdata

Mục lục

Hướng dẫn sử dụng Mục lục

Mục lục tự động

Bài viết liên quan

Hướng dẫn sử dụng các bài viết liên quan

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

Lazy YouTube

Defer YouTube

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

Đoạn trích bài đăng Snippet

Ảnh thu nhỏ bài đăng Thumbnail

Tiêu đề Phụ đề

Đăng nhận xét