menu

Dành cho các tác giả trang

Đăng lúc 15/07/2017, trong chuyên mục Không phân loại

Bài viết này tôi viết dành cho tôi và cho những người bạn cùng viết trang này những shortcodes hay dùng.

YAML front matter

  • comments : hiển thị comment hay không.
  • date : hiển thị ngày cập nhật, dạng YYYY-MM-DD HH:MM:SS +/-TTTT.
  • maths : 1 nếu bạn có dùng công thức toán học trong trang.
  • update: 1 nếu như bài viết cũ vừa được cập nhật.
  • info : thêm thẻ này và ghi nội dung vào để hiện thông tin thêm ngoài các ô bài viết trên trang chủ, ví dụ "copy" (nếu bài viết copy từ nguồn khác), "chưa hoàn tất", "math2it", "bài dịch" (nếu bài viết dịch từ nguồn khác),…
  • tags : các nhãn/từ khóa liên quan đến bài viết, bạn xem thêm các nhãn đã được sử dụng ở mục Categories và Tags. Nếu nhiều nhãn thì bạn ghi theo cấu trúc ["nhãn 1","nhãn 2]
  • categories : bài viết này thuộc chủ đề gì? Lưu ý chỉ nên có 1 chủ đề duy nhất. Xem danh sách các chủ đề đã sử dụng ở mục Categories và Tags.
  • unrelated : 1 nếu bạn muốn bài post đó không hiện các bài liên quan.
  • bgimage: tên-file-hinh.png nếu bạn muốn có thêm ảnh nền cho bài viết (sẽ xuất hiện khi share trên facebook). Lưu ý file tên-file.png bạn cần lưu vào đường dẫn /bgimgages/.

Chèn code

Highlight cho code

Có các ngôn ngữ : ruby, python, c, matlab, latex, html, css, javascript.

{% highlight ruby %}

{% endhighlight %}

Python với đánh số dòng:

{% highlight python linenos %}

{% endhighlight %}

Chèn code liquid

  • Nếu muốn thêm tag {% this %} thì ghi {{"{% this "}}%}.
  • Còn nếu muốn thêm {{ this }} thì ghi {{"{{ this "}}}}.

Quan trọng là mở đầu bằng {{" trước từ khóa và kết thúc bằng "}} trước kết thúc từ khóa.

Hoặc một cách khác dễ hơn, đó là dùng {% raw %}{% endraw %} bao quanh từ khóa cần hiện. Hai từ này còn có thể dùng để hiện một đoạn code nếu được đặt trước đó.

~~~ {% raw %}{% for %}
// các dòng codes
{% end for %}{% endraw %} ~~~

Lưu ý, để cho khung code đẹp, bạn nên đặt {% raw %}{% endraw %} giống như đoạn code mẫu trên.

Chèn hình & video

Chèn hình

Thư mục chứa hình

/images/posts/

Tùy chỉnh kích thước của hình

![Từ thay thế cho hình](/images/posts/...){:class="các-class-có-sẵn"}

Danh sách các class có sẵn

![](/images/posts/toan-so-cap/){:.w-500 .no-border}
  • no-border: bỏ đi khung bao quanh hình
  • w-300: giảm kích thước hình về tối đa 300px (với màn hình có chiều ngang tối đa 500px thì sẽ chuyển về 100% kích thước màn hình). Có thể thay số 3 trong 300 bởi 2,4,5,6,7,8,10 hoặc w-150.

Chèn hình inline

Ví dụ bạn muốn thêm hình thì dùng cấu trúc sau

{% include img-inline.html content="đường/dẫn/đến/hình" %}

Chèn video

Để chèn video từ youtube, bạn tìm trong đường link của video, ví dụ

https://www.youtube.com/watch?v=wIsK4kQTrIg

bạn chọn wIsK4kQTrIg để thêm vào nội dung của đoạn code sau

{% include youtube.html content="wIsK4kQTrIg" %}

Soạn thảo

Bỏ đánh số một heading

Nếu bạn muốn bỏ đánh số một headings nào đó, bạn chỉ việc thêm vào NGAY TRƯỚC heading ấy {.nocount}, ví dụ

{:.nocount}
## Heading không có đánh số

Nếu bạn muốn dùng nhiều class thì các class cách nhau bởi khoảng trắng (space).

Gán một id cho heading

Nếu bạn muốn gán một id cho heading nào đó mà không muốn nó tự động được tạo thì bạn thêm {#id-cua-ban} vào NGAY TRƯỚC heading đó, ví dụ

{:#id-cua-ban}
## Thêm heading

Đến khi bạn muốn gọi lại nó thì dùng

[Caption]({{ page.url }}#id-cua-ban)

Thêm mục lục

Thêm dòng code sau vào đoạn thứ hai trong văn bản.

{% include toc.html %}

Thêm headings nhưng không hiện nó ra, chỉ hiện ở toc

Để ẩn một cái gì đó, dùng class notdisplay. Nếu muốn ẩn heading nào đó thì dùng

{:.notdisplay}
# heading ẩn

Chia cột cho danh sách

Đặt danh sách trong thẻ <div> như sau

<div class="thi-columns" markdown="1">
- item 1
- item 2
- item 3
- item 4
- item 5
- item 6
</div>

Kết quả

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6

Chia cột (code va kết quả)

<div class="row" markdown="1">
<div class="col m12 l5" markdown="1">
~~~
this is the code
~~~
</div>
<div class="col m12 l7" markdown="1">
~~~
this is the result
~~~
</div>
</div>

Kết quả

this is the code
this is the result

Bạn có thể thay đổi giá trị của 57 tùy theo chênh lệch độ rộng của 2 cột (sao cho tổng là 12 là được). Xem thêm về grid của theme materialize tại đây.

Bạn có thể chèn thêm link đọc thêm dạng

keyboard_arrow_right Mời bạn ghé thăm Math2IT.

Bạn soạn

{% include more.html content="[Mời bạn ghé thăm Math2IT](http://math2it.com)." %}

Chèn các bước (steps)

Nếu bạn muốn viết bài hướng dẫn với các “steps” như ví dụ dưới đây

Nội dung trong bước 1.

Nội dung trong bước 2

Thì bạn có thể dùng đoạn code sau

<div  class="thi-step">
<div class="step" markdown="1">
Nội dung trong bước 1.
</div>
<div class="step" markdown="1">
Nội dung trong bước 2
</div>
</div>

Lưu ý, nếu bạn tạo một trang mới không phải là một post bình thường, bạn cần phải để dòng code sau ở YAML đầu trang.

css: "step.css"

CSS câu hỏi

Để có thể hiện câu hỏi dạng như sau

help Nội dung câu hỏi?

Bạn dùng

{% include question.html content="Nội dung câu hỏi?" %}

Soạn thảo toán học

  • Trong hàng thì dùng $cong-thuc-toan$
  • Ngoài hàng thì dùng $$cong-thuc-toan$$. Tuy nhiên bạn nên để cong-thuc-toan ở một hàng riêng, ví dụ
$$
cong-thuc-toan
$$
  • Nếu muốn dùng các ký tự đặc biệt, phải để thêm dấu \ trước nó, ví dụ tập hợp \\{cac-phan-tu\\}
  • Nếu gõ trong hàng mà có ký tự _ thì phải thêm \ trước nó, ví dụ a\_1
  • Đừng dùng || cho giá trị tuyệt đối, mà dùng \vert \vert
  • Đừng dùng \left\| \right\| cho chuẩn, hãy dùng \Vert \Vert
  • Đừng dùng * mà hãy dùng \ast
  • \\ thì dùng \\\\

Riêng việc gõ ma trận trong hàng, ví dụ như $[A]=\begin{bmatrix}1 & 2 \\ 2 & 3.999 \end{bmatrix},$ thì ta gõ như sau

$[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix},$

Để có thể \label\ref lại công thức toán giống trong LaTeX, bạn gõ như sau

$$
\begin{align}\tag{1}\label{eq1}
cong-thuc-toan
\end{align}
$$
Gọi lại công thức $\eqref{eq1}$.

Kết quả giống như sau

Gọi lại công thức $\eqref{eq1}$.

Lưu ý, bạn không cần phải dùng môi trường align để có thể sử dụng label, bạn dùng như sau vẫn được

$$
cong-thuc-toan \tag{1}\label{eq1}
$$
Gọi lại công thức $\eqref{eq1}$.

Các loại khung

Thêm box định nghịa, định lý

Bạn dùng đoạn code sau đây

<div class="thi-box" markdown="1">
<div class="box-title" markdown="1">
**Tựa đề**
</div>
<div class="box-content" markdown="1">
Nội dung văn bản
</div>
</div>

Sẽ cho ra kết quả

Tựa đề

Nội dung văn bản

Lưu ý, nếu có gõ công thức toán học $$cong-thuc$$ riêng dùng thì nên để 1 hàng trước trước </div> gần cuối.

Thêm các khung thông báo

Để có thể thêm khung cảnh báo như

errorNội dung cảnh báo!

Bạn dùng đoạn code

{% include warning.html content="Nội dung cảnh báo!" %}

Để có thể thêm khung gợi ý (tip)

infoNội dung gợi ý.

Bạn dùng

{% include tip.html content="Nội dung gợi ý." %}

Chèn khung hide/show

Vì tạm thời chưa biết cách include một đoạn dài văn bản, bạn dùng cấu trúc dài sau

  • face Tựa đề

    Nội dung

<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header" markdown="1"><i class="material-icons">face</i>
Tựa đề
</div>
<div class="collapsible-body" markdown="1">
Nội dung
</div>
</li>
</ul>

Để có thể chèn thêm list vào trong cái collapse này, bạn soạn như sau

<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header" markdown="1"><i class="material-icons">face</i>
Tựa đề
</div>
<div class="collapsible-body" markdown="1">
Văn bản thường
<p markdown="1">
- item 1 <br />
- item 2 <br />
</p>
</div>
</li>
</ul>

Khung thông tin đọc thêm cho bài

Nếu bạn muốn thêm thông tin đọc thêm cho bài viết (một ô vuông nhỏ nằm chệch hẳn về bên phải của bài đăng), bạn thêm đoạn code sau đây vào SAU đoạn mà bạn muốn thêm đọc thêm.

<p class="post-more-info" markdown="1">
Nội dung của thông tin thêm.
</p>

Lưu ý, nếu bạn tạo một trang mới không phải là một post bình thường, bạn cần phải để dòng code sau ở YAML đầu trang.

css: "step.css"

Khung tóm tắt nội dung

Tựa đề Nội dung
{:.tomtat}
### Tóm tắt phần học

<fieldset class="field-set" markdown="1">
<legend class="leg-title">Tựa đề</legend>
Nội dung
</fieldset>

Categories và tags

Tạo một category mới

  1. Category dùng để hiển thị chủ đề bài viết ở trang chủ (ở góc dưới trái mỗi bài đăng). Nó cũng hiển thị trong mục Lưu trữ
  2. Thêm vào _data\categories.yml
  3. Màu sắc theo quy luật sau
    • Toán: lightcyan (color), darkcyan (txt)
    • Tin: lightyellow (color), darkgoldenrod (txt)
    • Khám phá: "#f0ffdf" (color), darkolivegreen (txt)
    • Không phân loại: "#eceff1" (color), darkslategrey (txt)
  4. Thêm file vào category\
    • Chỉ thêm file nào khác với tag bên dưới!!!
    • Bắt chước cấu trúc các file đang có
    • Tên giống như phần slug của file categories.yml.
    • Nội dung của file đó có phần slug giống tên file.

Tạo một tag mới

  1. Thêm vào _data\tags.yml theo quy luật
    • (1) the: tên của tag ở trong mỗi bài viết vẫn ghi, ví dụ "thiết kế web".
    • (2) slug: cái dùng để tạo đường dẫn cho tag đó (/tag/web-design), ví dụ web-design.
    • (3) name: tên để hiển thị ở Chủ đề
  2. Tạo một file .html tương ứng trong thư mục \tag với tên được đặt giống như cái (2). Nội dung của nó đảm bảo
    • title: giống (3), có thể sửa khác.
    • slug: giống (1)

Đang dùng

Các categories có sẵn

Các tags có trong mục Chủ đề

calculus , lịch sử toán học , quen lại toán , học tiếng pháp , c++ , linux , programming , python , matlab , jekyll , không phân loại , toán sơ cấp , toán cao cấp , hiểu toán học , finite element method , giải tích số , thiết kế web , khoa học máy tính , latex , git , github , lập trình web , animation , khám phá .

Các tags đang dùng

đồ thị , tiếp tuyến , đạo hàm , toán sơ cấp , hiểu toán học , toán cao cấp , giải tích số , condition number , ma trận , chuẩn , navier stokes , ý nghĩa thực tiễn , đếm được , quen lại toán , lập trình web , ssl , domain , jekyll , github pages , tôi tự học , không phân loại , phép toán , lịch sử toán học , giải mã , đọc sách , khám phá , tâm sự , thiết kế web , github , tạo website , hệ số góc , giới hạn , calculus , infinitesimal , đại lượng vô cùng nhỏ , giải tích , nghịch lý , email , newsletter , rss , sitemap , search engine , programming , python , matlab , c++ , git , bitbucket , finite difference method , finite element method , so sánh , latex , latex editor , liquid , link , matlab tips , tự học matlab .

tôi tự học
không phân loại
Top