Viết bài trên Math2IT

Bài này dành riêng cho cộng tác viên của Math2IT. Thường xuyên thay đổi và cập nhật tính năng. Nếu có gì thắc mắc, xin vui lòng nhắn tin trực tiếp cho Thi.

Phím tắt với Gutenberg

WordPress 5 hỗ trợ giao diện soạn thảo hoàn toàn mới với các block (giao diện mà bạn sẽ gặp khi tạo một bài mới trên Math2IT).

Mỗi lần Enter, block mặc định được tạo sẽ là một paragraph mới. Bạn có thể chọn một block khác rất nhanh bằng cách nhấn phím /. Gõ vài từ bắt đầu tên của block đó để nó hiện ra v2 chọn.

Chèn một link mới, bạn có thể chọn đoạn text cần chèn link sau đó nhấn Ctrl + K để hiện khung chèn link.

Bạn có thể xóa một block bằng cách chọn block đó, sau đó nhấn Shift + Alt + Z.

Headings (tựa đề)

Chỉ được tạo hai dạng tựa đề tối đa là h2 và h3 thôi nha. Đừng bao giờ tạo h4! Hãy cấu trúc bài viết như thế!

Các tùy chọn cho một bài

Bạn lưu ý ở khung bên phải là các options cho bài viết hoặc các options cho một loại block cụ thể nào đó. Với bài viết, bạn có các options sau:

• Featured Image: Hình đại diện cho bài viết, bắt buộc phải có! Nếu bạn down và sử dụng các hình trên các trang chia sẻ hình trực tuyến miễn phí như Unsplash, pixabay, freepik,… Bạn có thể chọn để nguồn hoặc không cũng được. Tuy nhiên nếu bạn search hình trên một trang Google gợi ý, bạn cần tìm được nguồn của hình đó và để nó bên dưới bài viết theo chuẩn “Nguồn hình đại diện từ abc.xyz“.
• Toc on sidebar: Hiển thị mục lục cho bài viết. Chỉ nên tick chọn nếu bài viết có trên 4 mục lục.
• Display math?: Tick chọn nếu bài viết của bạn có chứa công thức toán.
• Show author box: Nếu bạn muốn hiển thị 1 khung miêu tả bạn hiển thị bên dưới bài viết.
• Display Series: Nếu bài viết nằm trong một series nào đó và bạn muốn hiển thị series ấy ra (kèm các bài viết khác). Mặc định là sẽ luôn hiện series, bạn có thể bỏ tick để bỏ hiện.
• Update: nếu bạn cập nhật nội dung cho bài viết. Đừng quên chọn lại ngày cho bài viết là ngày bạn đang viết nhé.

Chèn hình

Có các kiểu chèn hình sau đây trên Math2IT:

Lấn màn hình: Kiểu này nó lấn sang hai bên nếu màn hình to. Nó sẽ vừa khít chiều rộng chữ nếu ở màn hình bé hơn. Một dạng của các bài viết trên Medium.

Canh trái, canh phải: Kiểu này rất bình thường. Khi hiển thị nó sẽ lấn sang trái/phải một tí so với text.

Vừa chiều rộng text: Kiểu này cũng full nhưng nó không lấn sang hai bên, nó vừa với chiều rộng của text, như sau. Lưu ý, có sự khác nhau giữa hiện thị bên trong khung soạn thảo và ở ngoài Math2IT!

Hình cỡ nhỏ: Trong trường hợp hình chỉ vừa một nửa chiều rộng text hoặc 3/4, bạn cần thêm class cho hình ấy. Đầu tiên chọn hình > Chọn canh giữa > Kế đến bên cột bên trái tên Block, kéo xuống tận cùng chọn options Advanced > Điền vào ô Additional CSS Class một trong những class sau:

• full-50 : nếu bạn muốn hình chỉ rộng bằng 1/2 chiều dài text (chiều cao tự động).
• full-75 : nếu bạn muốn hình rộng 3/4 chiều dài text (chiều cao tự động)
• max-300 : nếu bạn muốn chiều rộng tối đa của hình là 300px.
• max-250 : nếu bạn muốn chiều rộng tối đa của hình là 250px.
• max-200 : nếu bạn muốn chiều rộng tối đa của hình là 200px.

Dưới đầy là vài ví dụ:

Bạn cũng có thể chèn hình trong cùng hàng với text bằng cách chọn option Inline image như sau.

Trong trường hợp bạn muốn hình một bên, đoạn text giới thiệu một bên như ở trên, bạn có thể chèn cột (nhấn /, sau đó gõ column và chọn block Columns). Mỗi bên của column sẽ giống như một block bình thường. Bạn có thể chèn text hay hình như bình thường.

Nếu bạn muốn cho 2 columns tràn ra hai bên như ở trên, bạn chọn block column, sau đó chọn Wide width như chèn hình vậy!

Chèn video

Bạn có thể chèn video từ Youtube một cách dễ dàng bằng cách gõ / sau đó gõ youtube và chọn block Youtube. Bạn chỉ việc dán link video vào và nhấn Embed là được. Khung video vẫn có các options về chiều rộng của video như các options của việc chèn hình.

Bạn cũng có thể chèn các video tự up lên host của Math2IT hoặc link từ Vimeo.

Chia cột

Như ví dụ trong mục chèn hình một bên, chữ một bên, bạn chỉ việc gõ / sau đó gõ column là có thể chèn cột trong Worpdress. Theo mặc định, hai cột sẽ được canh giữa theo chiều dọc. Nếu bạn muốn áp dụng vị trí khác cho hai cột thì thêm các class sau vào mục Advanced khi chọn block cột đó (không cần dấu . trước tên class).

• Không để gì: canh middle (mặc định)
• align-top: hai cột sẽ ngang nhau ở trên.
• align-bottom: hai cột sẽ ngang nhau ở dưới.

Các loại khung (box)

Khung thông báo

Khung định lý, định nghĩa (khung có tiêu đề)

Pullquote

Nếu bạn muốn chèn pullquote, cái mà đại loại như vầy

Thì bạn làm như gif bên dưới.

Khung ẩn/hiện

Nếu bạn muốn chèn khung ẩn/hiện thì

Chèn code

Bạn muốn chèn code, bạn chỉ việc nhấn /, sau đó gõ code để chọn block Code. Sau đó bên khung option của Block bên phải, bạn có thể chọn ngôn ngữ cho code của mình. Ví dụ,

\begin{document}
\dfrac{1}{2} % phân số
\end{document}

Trong trường hợp bạn muốn chèn code cùng dòng văn bản như thế này, bạn quét khối từ bạn muốn, sau đó chọn trong list tùy chọn option Inline code.

Chèn code trong list

Giả sử bạn muốn chèn code block bên trong list ul hoặc ol. Nếu làm trực tiếp trực quan bằng các block Gutenberg là không thể. Dưới đây là một thủ thuật (Nếu quá phức tạp với bạn, hãy liên hệ với Thi để được trợ giúp!).

Giả sử bạn cần tạo một code block trong một list như dưới đây:

Bạn làm theo các bước sau đây:

1. Đầu tiên, bạn cứ tạo một danh sách bình thường mà không có các block code này.
2. Mỗi block code, bạn hãy tạo riêng một block code bình thường.
3. Sau đó bạn mở trình xem thử bài viết để xem trước bài ấy sẽ ra như thế nào nếu publish. Nhấn F12 để đi đến chế độ xem source code (hoặc chuột phải vào trình duyệt, để chuột ngay chỗ trước khung code bạn muốn chèn, chọn Inspect).
4. Trong khung Elements của trình Inspect, bạn đi đến đoạn code chứa khung code (nó bắt đầu bằng <pre class="...), chuột phải vào nó, chọn Copy > Copy element.
5. Quay lại trình soạn thảo, ngay block của danh sách đã tạo, bạn chọn biểu tượng 3 chấm đứng > chọn Edit as HTML. Khi ấy bạn sẽ thấy đoạn code giống vầy:

   <ul> <li> Item 1 </li> <li>Item 2</li><li>Item 3</li></ul>

6. Dán đoạn code bạn đã copy ở bước 4 vào, đoạn code sau đó sẽ thành thế này:

   <ul> <li> Item 1 <pre class="wp-block-code line-numbers language-bash"><code lang="bash" class="  language-bash">// Đoạn code bạn muốn chèn vào // Có thể nhiều hàng<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre> </li> <li>Item 2</li><li>Item 3</li></ul>

7. Vậy là xong.

Trang trí cho chữ

Bạn có thể tô màu cho chữ như màu xanh, hoặc màu hường như thế này bằng cách chọn các tùy chọn Green text hay Pink text.

Trong các options trên, bạn còn có thể tạo các chữ kiểu bàn phím Như thế này (Keyboard button) hoặc highlight dòng chữ này (Highlight button) hoặc thêm các nút (Badge) hoặc xóa chữ kiểu này (Strikethrough).

1 Bạn cũng có thể tạo một nút số bự mỗi dòng bằng tùy chọn Big number button. Cái này thích hợp cho các bài mà có các bước hướng dẫn.

2 Ví dụ đây là bước thứ hai.

Chèn công thức toán

Để có thể chèn công thức toán, bạn sử dụng kiểu gõ toán trong LaTeX. Một lưu ý khi gõ xuống dòng, thay vì nhấn Enter, bạn hãy nhấn Shift + Enter. Điều này đảm bảo mỗi hàng của công thức không nằm ở các paragraph riêng lẻ.

Sau khi soạn công thức toán, bạn cần chọn tùy chọn Display math ở bên cột bên phải (thẻ Document).

Tài liệu tham khảo

Nếu bạn muốn chèn tài liệu tham khảo cho một dòng, một cụm từ,… (như khi viết một bài báo khoa học), thì bạn có thể dùng shortcode như bên dưới.

[abc]Kalid Azad. “Quick Insight: Substracting negative numbers”, Better Explained.[/abc]

Sau khi chèn shortcode trên vào đoạn văn, ngay tại chỗ bạn chèn sẽ có một con số nhỏ nhỏ hiện lên kèm link đến đoạn giới thiệu bên dưới bài viết. Bạn có thể xem ví dụ ở bài viết này.