Định dạng bài viết Median UI 1.6

Không phải tất cả các kiểu dưới đây đều có thể được sử dụng trực tiếp trong chế độ "Chế độ xem viết", nhưng cũng có một số tính năng chỉ có thể được sử dụng từ chế độ "Chế độ xem HTML".

Hình ảnh có chú thích và hộp đèn tự động

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

Tất cả kiểu chữ và định dạng bài viết
Tất cả hình ảnh trong bài viết sẽ tự động có chức năng hộp đèn ngoại trừ những hình ảnh trong thẻ <figure>, hãy thử click vào một trong những hình ảnh trong bài này
<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <div class="zmImg"><img alt="Image_Alt_Here" class="fullImg" src="image_src.png" onclick="return false"></div>
      </td>
    </tr>
    <tr>
      <td class="tr-caption" style="text-align: center;">Chú_thích_ở_đây</td>
    </tr>
  </tbody>
</table>

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

Xây dựng đường cao tốc mới
Điểm thu hút chính theo dõi Langtang
Chế phẩm De Spain
Trải nghiệm chèo thuyền ở Pokhara
<!--[ Grid Image ]-->
<div class="psImg grImg">
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
</div>

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

Đượ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, Không thể ẩn hình ảnh một lần nữa khi bạn kích hoạt nó

Xây dựng đường cao tốc mới
Điểm thu hút chính theo dõi Langtang
Chế phẩm De Spain
Trải nghiệm chèo thuyền ở Pokhara
Xây dựng đường cao tốc mới
Điểm thu hút chính theo dõi Langtang
Chế phẩm De Spain
Trải nghiệm chèo thuyền ở Pokhara
<input class="inImg hidden" id="for-hideImage" type="checkbox">
<div class="psImg hdImg">
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  
  <div class="btImg">
    <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
    
    <!--[ Button image to activate ]-->
    <label for="for-hideImage" aria-label="Show all image">Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class="psImg shImg">
    <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
    <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  </div>
</div>

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

Giống như cách bố trí hình ảnh ở trên, chỉ khác là trên màn hình di động, các hình ảnh sẽ được sắp xếp song song với chức năng cuộn bên bổ sung trên màn hình di động.

Chúng tôi cũng đã thêm hiệu ứng cuộn mượt mà vào tính năng này, Vui lòng thử mở trang này trên thiết bị di động của bạn:

Xây dựng đường cao tốc mới
Điểm thu hút chính theo dõi Langtang
Chế phẩm De Spain
<!--[ Scroll Image ]-->
<div class="psImg scImg scrlH">
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
  <div class="zmImg"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>
</div>

Hình ảnh Lazyload

Hữu ích cho việc trì hoãn tải hình ảnh để điểm PageSpeed của blog cao hơn, hình ảnh sẽ chỉ tải khi người dùng cuộn đến vùng hình ảnh. Tất cả hình ảnh trong bài viết này đều sử dụng Lazyload.

<!--[ Lazyload Image ]-->
<div class="zmImg" style="text-align: center;"><img alt="Image_Alt_Here" class="lazy loaded" data-src="image_src.png" src="image_src.png" onclick="return false" lazied=""></div>

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

Điều quan trọng cần lưu ý là tính năng này được viết thủ công, nó không tự động xuất hiện trên mọi trang.

<div class="pRelate notranslate">
  <!--[ Related title ]-->
  <b>Đọc thêm:</b>

  <ul>
    <li><a href="javascript:;">Your_text_here</a></li>
    <li><a href="javascript:;">Your_text_here</a></li>
    <li><a href="javascript:;">Your_text_here</a></li>
  </ul>
</div>

Ngắt bài

Bạn có thể sử dụng tính năng này để tách các đoạn văn hoặc để mở một chương mới trong một bài đăng, đây là một ví dụ về giao diện của nó:

<!--[ To break paragraphs apart ]-->
<hr>

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

Đoạn văn này sẽ có thụt lề dòng đầu tiên, chỉ đơn giản là để tạo một câu trong đoạn văn đầu tiên thụt lề với giá trị định trước.

Bạn có thể áp dụng tính năng này cho bao nhiêu đoạn văn tùy ý.

<p class="pIndent">Your_text_here</p>

Đoạn văn có Drop cap

Là một 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 hoặc nhiều dòng.

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

<p><span class="dropCap">Y</span>our_text_here</p>

Blockquote

Giá kết bạn là giá cao hơn giá bình thường vì nó nhằm mục đích giúp đỡ những người bạn đang bắt đầu kinh doanh

—Ivan Lanin
<blockquote><i>Your_text_here<br><br>

  —Your_text_here</i></blockquote>

Các định dạng kiểu khác mà bạn có thể sử dụng:

Bản thân đau rất nhiều, mà nguyên nhân chính là đau. Theo đó, các vòm của tài sản phát triển, và nó trở thành một món hàng và một con mèo. Mauris vel diam pastyesque lorem lacinia luctus. Không tuyệt làm sao, rung động trước sự báo thù, nước sốt mà trái đất.
  • Nhưng anh ta lấy bộ phim hoạt hình báo thù khôn ngoan nhưng đáng xấu hổ. Điều đó có thể cảm thấy tốt, nhưng với sự căm ghét đối với việc khắc phục sự cố.
  • Có một số sợ hãi về cuộc sống trong các hóa đơn, vì protein là quan trọng, hệ thống miễn dịch. Nhưng ở Pakistan, nó là tinh khiết.
<blockquote class="s-1 notranslate">
  <div>Your_text_here
    <ul>
      <li>Your_text_here</li>
      <li>Your_text_here</li>
    </ul>
  </div>
</blockquote>

Chữ trên và chữ dưới

H2

M2

<p>H<sub>2</sub></p>
<p>M<sup>2</sup></p>

Tabs post

Nhập nội dung 1...
Nhập nội dung 2...
Nhập nội dung 3...
<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Tabs_1'></label>
  <label for='fTabs-2' data-text='Tabs_2'></label>
  <label for='fTabs-3' data-text='Tabs_3'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    Nhập nội dung 1... 

  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    Nhập nội dung 2...
  
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    Nhập nội dung 3...

  </div>
</div>

Table

Bảng trong chủ đề này đã được đặt đáp ứng, ví dụ: nếu số cột hoặc chiều rộng của bảng vượt quá chiều rộng của màn hình, để không làm hỏng bố cục, bảng sẽ tự động có chức năng cuộn.

Vui lòng mở bài viết này trên thiết bị di động của bạn và đánh dấu phần bảng bên dưới:

No Column_1 Column_2 Column_3 Column_4 Column_5
1 Data_table_1 00.000.000 0.000.000 0.000.000 0.000.000
2 Data_table_2 00.000.000 0.000.000 0.000.000 0.000.000
3 Data_table_3 00.000.000 0.000.000 0.000.000 0.000.000
4 Data_table_4 00.000.000 0.000.000 0.000.000 0.000.000
<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data_table_1</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data_table_2</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data_table_3</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data_table_4</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

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

Bạn có thể chọn sử dụng ToC thủ công nếu bạn không muốn tất cả các thẻ tiêu đề (h1, h2, h3, h4, h5, h6) được hiển thị trong Mục lục.

Để viết thủ công, bạn phải thêm các thuộc tính id=' ... ' tiêu đề mới cho mỗi thẻ tiêu đề bạn muốn thêm vào mục lục, có thể hơi khó triển khai nhưng bạn có thể chọn Tiêu đề nào bạn muốn xuất hiện.

Nội dung
<details class="sp toc" open="">
  <summary data-show="Show all" data-hide="Hide all">Nội dung</summary>  
  <div class="toC">
    <ol>
      <li><a href="javascript:;">Your_text_here</a></li>
      <li><a href="javascript:;">Your_text_here</a></li>
      <li><a href="javascript:;">Your_text_here</a></li>
      <li><a href="javascript:;">Your_text_here</a></li>
    </ol>

    <!--[ Sample with subheading ]-->
    <p>With sub-heading</p>
    <ol>
      <li><a href="javascript:;">Heading_title</a>
        <ol>
          <li><a href="javascript:;">Subheading_1</a></li>
          <li><a href="javascript:;">Subheading_2</a></li>
          <li><a href="javascript:;">Subheading_3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>

Bảng nội dung bán tự động

Tùy chọn thứ hai này sẽ tự động thêm một bảng nội dung vào bài đăng của bạn, nhược điểm duy nhất là nó sẽ thêm từng thẻ tiêu đề vào ToC, thứ tự có thể lộn xộn hoặc lỗi nếu các thẻ tiêu đề bạn viết thường xuyên

Table of Contents
<details class="sp toc">
  <summary data-show="Show all" data-hide="Hide all">Table of Contents</summary>  
  <div class="toC" id="toContent"><ol>
  <li><a href="javascript:;">Your_text_here</a></li>
  <li><a href="javascript:;">Your_text_here</a></li>
  <li><a href="javascript:;">Your_text_here</a></li>
  <li><a href="javascript:;">Your_text_here</a></li>
  <li><a href="javascript:;">Your_text_here</a></li>
  </ol></div>
</details>

Công cụ đánh dấu cú pháp

Được sử dụng để viết các dòng mã HTML trong các bài đăng

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>
Để viết mã CODE trong một bài đăng, định dạng viết là:
<div class="pre code">
  <pre>Your_code_here</pre>
</div>
Viết cú pháp cho định dạng HTML:
<div class="pre html">
  <pre>Your_code_here</pre>
</div>
Viết cú pháp cho định dạng CSS:
<div class="pre css">
  <pre>Your_code_here</pre>
</div>
Viết cú pháp cho định dạng JS:
<div class="pre js">
  <pre>Your_code_here</pre>
</div>
Bôi đen mã code:
<i class="block">Your_code_here</i>
Đánh dấu mã code trên bài viết: <code>Your_code_here</code>

Bạn cũng có thể viết mã <html> trong một đoạn văn như thế này: <p>code</p>

Công cụ đánh dấu cú pháp MultiTabs

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>
/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}
JS here
<div class="pre tb">
  <!--[ Active function ]-->
  <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked="">
  <input class="prei hidden" id="preT-2" type="radio" name="preTab">
  <input class="prei hidden" id="preT-3" type="radio" name="preTab">
  <!--[ Header/title ]-->
  <div class="preH tbHd scrlH">
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for="preT-1" data-text="HTML"></label>
    <label for="preT-2" data-text="CSS"></label>
    <label for="preT-3" data-text="JS"></label>
  </div>

  <!--[ Content ]-->
  <div class="preC-1">
    <pre>HTML here</pre>
  </div>
  <div class="preC-2">
    <pre>CSS here</pre>
  </div>
  <div class="preC-3">
    <pre>JS here</pre>
  </div>
</div>

Hiển thị nút ẩn

Spoiler:

Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế, pháo hoa từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

<details class="sp notranslate">
  <summary data-show="Show all" data-hide="Hide all">Spoiler:</summary>
  <p>Your_text_here</p>
</details>

Accordion/Toggle Menu

Accordion_first_title

Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế, pháo hoa từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

Accordion_second_title

Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế, pháo hoa từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

Accordion_third_title

Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế, pháo hoa từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

Accordion_fourth_title (alt)

Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế, pháo hoa từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

<!--[ Accordion start ]-->
<div class="showH">
  <!--[ Accordion line 1 ]-->
  <details class="ac">
    <summary>Accordion_first_title</summary>
    <div class="aC">
      <p>Your_text_here</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class="ac">
    <summary>Accordion_second_title</summary>
    <div class="aC">
      <p>Your_text_here</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class="ac">
    <summary>Accordion_third_title</summary>
    <div class="aC">
      <p>Your_text_here</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class="ac alt">
    <summary>Accordion_fourth_title (alt)</summary>
    <div class="aC">
      <p>Your_text_here</p>
    </div>
  </details>
</div>

Ghi chú khối

Tính năng này dùng để thêm thông tin quan trọng, câu cảnh báo hoặc câu đánh dấu, có hai kiểu mà bạn có thể thử bao gồm:

Bản thân đau rất nhiều, mà nguyên nhân chính là đau. Theo đó, các vòm của tài sản phát triển, và nó trở thành một món hàng và một con mèo.

<p class="note notranslate">Your_text_here</p>

Chú ý!
Không tuyệt làm sao, rung động trước sự báo thù, nước sốt mà trái đất. Nhưng anh ta lấy bộ phim hoạt hình báo thù khôn ngoan nhưng đáng xấu hổ.

<p class="note wr notranslate"><b>Chú ý!</b><br>Your_text_here</p>

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

Nếu có một liên kết bên ngoài trong bài đăng, bạn có thể thông báo cho người dùng bằng cách sử dụng tính năng này:

Sample_external_link
<a class="extL" href="javascript:;">Sample_external_link</a>

Button Link

Standard_button
<a class="button" href="javascript:;">Standard_button</a>

Phong cách thay thế

Download
<a class="button ln" href="javascript:;"><i class="icon dl"></i>Download</a>

Với các biểu tượng tải xuống:

Download
<a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>

Các biểu tượng có sẵn:

Demo
<a class="button" href="javascript:;"><i class="icon demo"></i>Demo</a>

Ghi chú: Bạn cũng có thể thêm các biểu tượng khác bằng cách sử dụng <svg>

Hai nút trong một thanh:

<div class="btnF">
  <a class="button ln" href="javascript:;">Demo</a>
  <a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>
</div>

Download Link

file_name.zip 200kb
<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">200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class="button" aria-label="Download" href="javascript:;"><i class="icon dl"></i></a>
</div>

Lazy Youtube

Phục vụ tải video youtube sau khi cuộn trang để tăng tốc độ tải blog

Youtube video
<!--[ Lazy youtube ]-->
<div class="lazyYt" data-embed="ID_Youtube">
  <div class="play">
    <svg viewBox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
<img class="lazy loaded" data-src="https://img.youtube.com/vi/ID_Youtube/sddefault.jpg" src="https://img.youtube.com/vi/ID_Youtube/sddefault.jpg" alt="Youtube video" lazied=""></div>

một giải pháp thay thế khác để trì hoãn tải iframe với chức năng trì hoãn

<!--[ Lazysize iframe ]-->
<div class="videoYt">
  <iframe title="Lazy Iframe" class="lazy loaded" data-src="//www.youtube.com/embed/ID_Youtube" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" lazied="" src="//www.youtube.com/embed/ID_Youtube"></iframe>
</div>

Bài tham khảo

Để thêm danh sách các tham chiếu đến các bài báo bạn đã viết:

Tham khảo: www.giahuy.net

<p class="pRef">Tham khảo: www.giahuy.net</p>
Khi cuộc đời cho bạn cả trăm lý do để khóc, hãy cho đời thấy bạn có cả ngàn lý do để cười.

2 nhận xét

  1. qua thi e phải áp dụng cho blog của e mới dc, toàn những cái e cần k a ạa
    1. Cám ơn bạn đã ghé thăm!
Cám ơn bạn đã quan tâm đặt câu hỏi với chúng tôi!
Chúng tôi sẻ phản hồi sớm nhất cho bạn.
Chúc bạn một ngày tốt đẹp!