Cú pháp Code Nâng cao


đánh giá: +8+–x

Ghi chú: Hầu hết nội dung trang này được sửa đổi từ trang 難解Wikidot構文 của chi nhánh tiếng Nhật. Mọi hướng dẫn trên đây đều giả sử bạn đang dùng trình duyệt Chrome.

Đây là trang tổng hợp các loại cú pháp coding nâng cao và phức tạp hơn của Wikidot, và dành cho những tác giả có kỹ năng chuyên sâu hơn về HTML, CSS và JS muốn thêm các coding, kiểu dáng và format nâng cao hơn vào bài viết hoặc trang tác giả của mình. Nếu bạn muốn tìm hiểu về cú pháp coding cơ bản hơn, hãy xem trang Cú Pháp Coding Wiki, và nếu bạn muốn xem và copy paste các bản mẫu cho những format trình bày bổ sung, hãy xem trang SCP Style Resource (Nguồn tham khảo Cách trình bày SCP) (hiện chưa có phiên bản tiếng Việt). Bạn có thể xem thêm tài liệu chính thức về cú pháp coding Wikidot tại đây.

Để dễ dàng đóng góp, trang này sẽ được mở dưới dạng một trang hợp tác. Vui lòng tuân thủ nguyên tắc trình bày.

Khối HTML

Để thêm mã nguồn HTML/CSS/JS tùy chỉnh vào một trang, sử dụng khối lệnh [[html]] … [[/html]] (mỗi tag [[html]] và [[/html]] ở khác dòng (không ở cùng dòng với nhau). Code trong khối lệnh html được thêm vào một khối iframe riêng trong mã HTML được Wikidot tạo ra, vì thế bạn có thể dễ dàng thêm HTML tùy chỉnh vào trang của mình.

Code HTML thường được sử dụng để thêm coding và chức năng nâng cao mà không thể được tạo ra bởi coding Wikidot thông thường vào trang của bạn.

[[html]]
<h1>HTML tùy chỉnh</h1>
<p>Nội dung</p>
[[/html]]

Mọi cú pháp coding Wikidot bình thường trong khối lệnh html không được xử lý và được coi như là một phần của code HTML.

Bạn có thể áp dụng style CSS vào các phần tử trong code HTML của bạn (nghĩa là bạn có thể sử dụng <style type="text/css">…</style> và <element style="…">, nhưng bạn không thể áp dụng style CSS vào các phần tử html và body, nghĩa là nếu trong code HTML của bạn có chứa phần tử html hoặc body, CSS không thể áp dụng được vào các phần tử đó).

[[html]]
<div style="background-color: black; color: lightgreen">
<p>Nội dung</p>
</div>
[[/html]]

Toàn bộ khối HTML sẽ có nền đen và chữ sẽ có màu xanh lá nhạt.

Bạn cũng có thể thêm code JavaScript vào code HTML của bạn.

[[html]]
<script type="text/javascript">
function HelloWorld(){
alert("Hello World");
}
</script>
<button onclick="HelloWorld()">Hello World</button>
[[/html]]

Mỗi khối HTML trên một trang có một URL riêng và bạn có thể vào đường link của từng khối. Bạn có thể nhấn chuột phải vào một khối HTML và chọn View frame source (Xem nguồn khung trong giao diện tiếng Việt) để xem mã nguồn của một khối HTML. Để xem trực tiếp khối HTML, bỏ view-source: khỏi URL trên trình duyệt.

Các tính năng bổ sung dành cho khối HTML

Code Wikidot trong khối HTML

Bạn có gặp vấn đề này không?

+ Mở

Phần này sẽ khắc phục điều trên.
+ Mở

Cách sử dụng:
Thêm code dưới vào code HTML của bạn. Nếu bạn có phân chia tag head và body, nên đặt code vào tag body.

<style type="text/css">
@import url(https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--modules/css/pagerate/PageRateWidgetModule.css);
@import url(https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css);
@import url(https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/shiny/css/style.css);
@import url(https://scp-vn.wdfiles.com/local--code/component%3Atheme/1);

.fake-link {
color: #b01;
text-decoration: none;
background: transparent;
cursor:pointer;

}

.fake-link:hover {
text-decoration: underline;
background-color: transparent;
cursor:ponter;
}
</style>
<script type="text/javascript" src="https://scp-vn.wdfiles.com/local--files/esoteric-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>
<script type="text/javascript">
isHTMLblockHide = true;
</script>

Thêm nội dung vào đây.

<div id="scpHTMLblockResizeSwitch"></div>


Bạn cần thêm phần mã CSS và JS ở phía trên nội dung của bạn, và phần div scpHTMLblockResizeSwitch ở phía cuối nội dung code HTML.
Nếu bạn muốn sử dụng tính năng như blockquote và hộp sập, tiếp tục xem bên dưới（Hãy thêm code bên trên trước!）

<collapsible show = "+ Mở hộp sập 1" hide="- Đóng">
Nội dung trong hộp sập
</collapsible>


Cú pháp này gần giống với cú pháp của Wikidot. Để sử dụng thuộc tính hideLocation="bottom", bạn có thể làm như sau

<collapsible show = "+ Mở hộp sập 2" hide="- Đóng" hideLocation="bottom">
Nội dung trong hộp sập
</collapsible>


Để thêm blockquote:

<blockquote>
Nội dung trong blockquote
</blockquote>


Thêm "<blockquote>" và "</blockquote>" lần lượt vào đầu và cuối nội dung trong blockquote.

Bạn cũng có thể cho nhiều hộp sập vào với nhau:

+ Mở hộp sập 1

Hãy sử dụng phần code được mô tả bên trên để thêm tính năng mới vào code HTML của bạn!

Cài Đặt Nâng Cao: Từ phần này trở đi, cần có kỹ năng về HTML và CSS. Hộp sập bình thường được giới thiệu ở trên được viết với cú pháp sau:

<collapsible show = "+ Mở" hide="- Đóng">
Nội dung
</collapsible>

Viết lại code trên thành code sau:

<div class="ParentCollapsible">

<div id="scpCollapsibleLink+n+0">

<span class="fake-link" onclick="scpRunCollapsible('scpCollapsibleLink + n',0)">+ Mở</span>


</div>
<div id="scpCollapsibleLink+n+1">

<span class="fake-link" onclick="scpRunCollapsible('scpCollapsibleLink + n',1)">- Đóng</span>
<div>

Nội dung


</div>

</div>

</div>

Đây là cú pháp nâng cao hơn của một hộp sập HTML. Có thể lặp lại cú pháp trên trong code HTML để thêm nhiều hộp sập hơn. Trong đó, có thể thấy những thuộc tính id như sau:

id="scpCollapsibleLink+n+0"

Thay số n bằng số thứ tự của hộp sập trong code HTML, bắt đầu từ 0. Ví dụ:

Hộp sập thứ nhất: scpCollapsibleLink00
Hộp sập thứ hai: scpCollapsibleLink10

Bỏ các dấu + khi thay số n. Nếu chỉ có duy nhất một hộp sập, thay số n thành 0.

Khi đó:

onclick="scpRunCollapsible('scpCollapsibleLink + n',0)"

Bỏ dấu + và hai dấu cách trước và sau nó, sau đó thay số n bằng số thứ tự của hộp sập như hướng dẫn ở trên.

Hộp sập thứ nhất: scpRunCollapsible('scpCollapsibleLink0',0)
Hộp sập thứ hai: scpRunCollapsible('scpCollapsibleLink1',0)

Thêm nữa, vì nút đóng/mở hộp sập ở trong một phần tử span có thuộc tính class là fake-link, có thể chỉnh sửa kiểu dáng của nút đóng/mở hộp sập như ví dụ dưới đây:

<style type="text/css">
@import url(https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--modules/css/pagerate/PageRateWidgetModule.css);
@import url(https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css);
@import url(https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/shiny/css/style.css);
@import url(https://scp-vn.wdfiles.com/local--code/component%3Atheme/1);

.specialCollapsible .fake-link{
display:block;
text-align:center;
cursor:pointer;
color:#000;
background-color:#EEE;
padding:2px;
margin:auto;
width:200px;
}

.specialCollapsible .fake-link:hover{
display:block;
text-align:center;
cursor:pointer;
color:#000;
background-color:#AAA;
padding:2px;
margin:auto;
width:200px;
}
</style>
<script type="text/javascript" src="https://scp-vn.wdfiles.com/local--files/esoteric-syntax/scpHTMLblockCtrl_ver1_ex.js"></script>
<div class="specialCollapsible">
<collapsible show = "+ Mở hộp sập 1" hide="- Đóng">
<blockquote>
Nội dung hộp sập
</blockquote>
</collapsible>
</div>
<div id="scpHTMLblockResizeSwitch"></div>

Sau đây là danh sách các hàm và biến toàn cục được sử dụng bởi code này. Lưu ý rằng các hàm và biến này không còn có thể sử dụng được như bình thường bởi code JavaScript trong khối HTML sau khi thêm các file chức năng bên trên.

scpHTMLblockUrl_array
scpHTMLblockIframe_hash
scpForResizeRandomNumber
scpHTMLblockResize_div_id
scpHTMLblockResize_iframe_id
scpHTMLblockResize_url
scpMonitoringTimeSpan
scpHTMLblockResizeSwitch
HTMLblockOldHeight
isHTMLblockHide
scpParentCollasibleClassName
scpCreateCollapsible
scpResizeHTMLblock
ctrlHideHTMLblockSize
scpRunCollasible
correctIframeSize

Thay đổi kích cỡ khối HTML bằng code

Lưu ý: Cần thêm các file cần thiết như đã được hướng dẫn ở trên.

Bạn đã từng tạo code HTML như thế này chưa?

Truyện Kiều
Tên gốc: Đoạn Trường Tân Thanh (斷腸新聲)
của: Nguyễn Du (1766-1820）

Trích từ Wikisource, từ đầu đến câu 232. Giấy phép: Public Domain

Đây là ví dụ của một khối HTML chỉnh sửa nội dung văn bản trong khối. Bạn đã từng có bất kỳ vấn đề gì với loại code này chưa?

Sau khi hiện một câu dài trong khối HTML, khi chuyển sang câu ngắn, khối HTML vẫn giữ nguyên kích cỡ, để lại một khoảng trống. Tuy nhiên, bạn có thể thấy kích cỡ của khối HTML bên trên thay đổi tùy theo độ dài của nội dung. Code này có một tính năng cho phép thay đổi kích cỡ khối HTML tùy theo kích cỡ nội dung ở bất kỳ thời điểm nào.

Để thay đổi kích cỡ khối HTML tùy theo kích cỡ nội dung, gọi hàm correctIframeSize() trong code JavaScript của khối HTML.

Khi thay đổi nội dung của một văn bản trong khối HTML, phần cuối của hàm thực hiện thay đổi nội dung nên kết thúc bằng:

correctIframeSize();

+ Phương pháp thay đổi nội dung văn bản trong HTML

Thêm video vào bài viết

(Caption của video)

Trong bài viết SCP-895, code hộp hình ảnh được sử dụng để chèn video vào bài viết. Phần này sẽ chia sẻ phương pháp bài viết này sử dụng.

Phần này sẽ chỉ khái quát về phương pháp, cách làm, vì để giải thích toàn bộ thì sẽ cần một bài viết rất dài. Thêm nữa, phần này sẽ coi như bạn đã có kiến thức và kỹ năng về HTML, CSS và JS. Nếu bạn có phần nào không hiểu, hãy hỏi một ai đó có kinh nghiệm! Nếu bạn có bất kỳ thông tin nào về phần này bạn muốn chia sẻ, hãy cho chúng tôi biết.

Khái quát

Không sử dụng file video hoặc file gif

Bạn luôn luôn có thể tải một file video hoặc file gif lên, tuy nhiên, cách làm đó cũng có vài điểm yếu. Chúng tải chậm và file gif có thể gây khó khăn trong việc thêm vào bài. Hơn nữa, những phần overlay như thời gian, chữ chèn đè lên trên video không thể thay đổi được bằng code.

Ví dụ mô tả

Phương pháp được sử dụng bởi SCP-895 và các ví dụ được chúng tôi chuẩn bị không sử dụng file video, nhưng là video được tạo ra bởi trình duyệt khi tải trang bởi JavaScript, từ các file ảnh khung hình tách rời nhau. Vì vậy, các video này rất nhẹ, và có thể chỉnh sửa được yếu tố, thêm hiệu ứng, … vào video chỉ bằng code.

Những điều cần lưu ý

Sau đây là những điều cần lưu ý khi viết code cho phương pháp chèn video này. Những điều lưu ý sau được sắp xếp theo mức độ quan trọng.

Chiều cao không thay đổi

File video không tự đổi kích cỡ giữa chừng, đúng không? Vì vậy, hãy chắc chắn rằng tất cả các file khung hình của bạn có cùng kích cỡ!

Các file khung hình tách rời là yếu tố cấu thành cơ bản một video khi sử dụng phương pháp này, thay vì là một file video hoàn chỉnh. Theo những gì tôi được biết, trình duyệt thực hiện tính toán độ dài ngang khá hiệu quả, nhưng tính toán độ dài dọc lỗi khá nhiều. Vì thế, các file nên có cùng kích cỡ.

Có thể sử dụng đường link "tương đối"

Bạn có thể sử dụng đường link tương đối - đường link dẫn tới một file, một URL trên cùng một tên miền, thay vì một đường link tuyệt đối chứa cả tên miền. Đường link tương đối có cấu trúc ./ + tên file/tên URL đằng sau tên miền.

Xóa bỏ toàn bộ đường lề margin

Việc có những khoảng trống bao quanh video khá khó chịu, vì thế, hãy xóa bỏ toàn bộ lề trong file HTML bạn viết. Bạn nên thêm cái này vào CSS của bạn:

body {
   padding:0px;
   margin: 0px;
}
Mẫu chèn code vào bài

Ví dụ, nếu chiều rộng và cao của video là (300px, 300px), code sau sẽ được sử dụng để chèn video sử dụng phương pháp này vào bài:

[[div class="scp-image-block" style="width:300px;"]]
[[iframe URL dẫn tới code của video style="width:300px; height:300px;" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:300px;"]]
Caption video
[[/div]]
[[/div]]

Tìm nguồn tham khảo

Hãy để ý giấy phép!

Mọi nội dung trên wiki đều cần phải được phát hành dưới giấy phép CC BY-SA 3.0 hoặc một giấy phép khác tương thích. File video/file khung hình tách từ video, và code để chèn và xử lý khung hình cũng phải có giấy phép tương thích.

Vì thế, code CSS và JS cũng không được có các giới hạn về việc chỉ sử dụng cho mục đích phi thương mại/không có quyền sửa đổi.

Tóm lại, sử dụng CC BY-SA 3.0 cho nội dung hình ảnh, video. Có khá nhiều loại giấy phép cho code, và một trong số các giấy phép sử dụng được là giấy phép MIT. Nếu code của bạn tham khảo sử dụng giấy phép MIT, bạn nên thêm nội dung và các lưu ý của giấy phép MIT ngay trong file code được bạn đăng tải, và bạn cũng cần thêm lưu ý trong hộp giấy phép/nơi khác rằng phần code chèn video của bài sử dụng giấy phép MIT.

CodePen

CodePen tự động gán giấy phép MIT cho tất cả code công khai trên nền tảng này. Để tìm hiểu thêm: https://blog.codepen.io/documentation/licensing/

Ví dụ về phương pháp chèn video trong phần hướng dẫn này có sử dụng hiệu ứng glitch CRT của Lucas Bebber trên CodePen.

CodePen là một trang hữu ích nếu bạn muốn tìm kiếm code để tham khảo với giấy phép tự do.

Code ví dụ

+ HTML
+ CSS
+ JS

Filter CSS

Hãy nhìn một lúc vào hình ảnh bên dưới. Màu của ảnh thay đổi! Ảnh đổi sang đen trắng, rồi lại có màu trở lại.

megaphone.png

Phần này sẽ hướng dẫn bạn cách chỉnh sửa màu ảnh bằng CSS filter, cụ thể là đổi màu ảnh thành đen trắng.

megaphone.png

Phía trên là ảnh gốc của SCP-6789-VN-J. 
[[image https://scp-vn.wdfiles.com/local--files/scp-6789-vn-j/megaphone.png size="small" style="-webkit-filter:grayscale(100%);-moz-filter: grayscale(100%);filter:grayscale(100%);object-fit: contain;"]]

Đặt thuộc tính style như trên, ảnh sẽ thành màu đen trắng.

megaphone.png

Đây là CSS filter để chỉnh ảnh thành màu đen trắng. 
webkit-filter:grayscale(100%);
-moz-filter: grayscale(100%);
filter:grayscale(100%);
megaphone.png

Đây là phiên bản đã được chỉnh sửa màu với filter hue-rotate(125deg) được áp dụng. 
webkit-filter:hue-rotate(125deg);
-moz-filter:hue-rotate(125deg);
filter:hue-rotate(125deg);
[[image https://scp-vn.wdfiles.com/local--files/scp-6789-vn-j/megaphone.png size="small" style="filter: hue-rotate(125deg);object-fit: contain;"]]

Các filter cũng có thể được sử dụng cùng nhau.

megaphone.png

Trong ví dụ này, filter nâu đen 100% và hue-rotate(125deg) được áp dụng. Có thể phân tách các filter bằng dấu cách. 
webkit-filter:sepia(100%) hue-rotate(125deg);
-moz-filter:sepia(100%) hue-rotate(125deg);
filter:sepia(100%) hue-rotate(125deg);

Q: Nếu là ảnh, vì sao không để đen trắng ngay từ đầu?
A: Vì filter có thể áp dụng được cho tất cả các loại phần tử trên trang! Bạn có thể biến thanh cạnh thành đen trắng, hoặc biến cả màn hình thành nâu đen.

Code chuyển trang bằng ListPages không cần fragment

Phương pháp

Phương pháp này cho phép mô phỏng chuyển trang bằng ListPages và các trang fragment con mà không cần tạo các trang fragment. Đây là cú pháp cơ bản cho một cấu trúc 4 trang:

Nội dung ở đầu mọi trang, nếu không có xóa bỏ dòng này
[[module ListPages offset="@URL|0" range="."]]
%%content{2}%%
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page2"]]
%%content{3}%%
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page3"]]
%%content{4}%%
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page4"]]
%%content{5}%%
[[/module]]
Lặp lại module như trên nếu bạn muốn thêm nhiều trang hơn, nếu không xóa bỏ dòng này
[!--
====
Nội dung trang 1
[https://scp-vn.wikidot.com/tentrang/offset/1/page2_limit/1 Sang trang 2]
====
Nội dung trang 2
[https://scp-vn.wikidot.com/tentrang/offset/1/page3_limit/1 Sang trang 3]
====
Nội dung trang 3
[https://scp-vn.wikidot.com/tentrang/offset/1/page4_limit/1 Sang trang 4]
====
Nội dung trang 4
[https://scp-vn.wikidot.com/tentrang Về trang 1]
====
Tiếp tục thêm nội dung trang và ==== vào đây nếu bạn có nhiều trang, nếu không xóa bỏ dòng này
--]
Nội dung ở chân mọi trang, nếu không có xóa bỏ dòng này

Nếu bạn muốn tạo một trang với chức năng chuyển trang bằng ListPages không cần fragment, hãy paste code theo cú pháp vào phần đầu của trang. Code này cũng sử dụng được trên sandbox. Sau khi bạn đã paste xong, sửa những mục được tô đậm như hướng dẫn.

  • Nội dung ở đầu mọi trang: Code và nội dung bạn muốn hiển thị ở đầu tất cả các trang con. Nếu không có, xóa bỏ dòng in đậm đó.
  • Nội dung trang 1 - Nội dung trang 4: Thay phần này bằng code và nội dung của từng trang con. Bạn có thể thêm cú pháp code Wikidot (kể cả module CSS và HTML) vào đây. Tuy nhiên, bạn không thể tiếp tục cho module tạo trang con như ListPages vào đây. Ngoài ra, không nên thêm các phụ chú code vào nội dung (ví dụ: [!-- Đây là phần phụ chú chỉ nhìn thấy khi edit, khi xem trang sẽ không thấy --])
  • Nội dung ở chân mọi trang: Code và nội dung bạn muốn hiển thị ở cuối tất cả các trang con. Nếu không có, xóa bỏ dòng in đậm đó.
  • Thay "scp-vn.wikidot.com/tentrang" bằng link tới trang bài của bạn (không thêm http: hoặc https:). Chỉnh cả các phần "Sang trang 1", "Sang trang 2", … nếu bạn muốn thay đổi dòng chữ mô tả của link đổi trang.
  • Nếu bạn muốn thêm nhiều trang con nữa, thêm code module bên dưới nối tiếp ở dưới các module trước (phần Lặp lại module như trên nếu bạn muốn thêm nhiều trang hơn). Thay A trong pageA bằng số thứ tự của trang con, và B trong content{B} bằng số thứ tự của trang con cộng thêm 1.

[[module ListPages limit="@URL|0" range="." urlAttrPrefix="pageA"]]
%%content{B}%%
[[/module]]

  • Thêm nữa: Bạn cần lần lượt thêm nội dung trang của các trang theo thứ tự vào dưới phần "Tiếp tục thêm nội dung trang và ==== vào đây nếu bạn có nhiều trang" theo format sau.

Nội dung trang con
====

  • Để xóa trang con, làm ngược lại và xóa bỏ các module, nội dung trang và các dấu ====.
  • Thực hiện xóa bỏ các dòng in đậm khi không có nội dung theo hướng dẫn.

Phần hướng dẫn đến đây là hết, hãy kiểm tra xem chức năng chuyển trang và các trang con của bạn có sử dụng được không.
Trang tiếp theo giải thích nguyên lý hoạt động của phương pháp này. Có thể gây khó hiểu nếu bạn không có nhiều hiểu biết về hệ thống.

Hướng dẫn khác

Đổi logo trang (Sigma-9)

#header {
    background-image: url("URL dẫn tới logo");
}

Đổi logo trang (BHL)

:root {
    --logo-image: url("URL dẫn tới logo")
}

Đổi tiêu đề, subtitle trang góc trái (Sigma-9)

#header h1 a {
    color: transparent;
    text-shadow: none;
    font-family: Arial, sans-serif;
    font-size: 2.5vw;
}
#header h1 a::before {
    content: "Tiêu đề";
    color: Mã màu hex của tiêu đề (Có thể sử dụng công cụ tra cứu màu bên dưới);
}
#header h2 span {
    color: transparent;
    text-shadow: none;
}
#header h2 span::before {
    content: "Subtitle";
    color: Mã màu hex của subtitle (Có thể sử dụng công cụ tra cứu màu bên dưới);
}

Đổi tiêu đề, subtitle trang góc trái (BHL)

:root {
    --header-title: "Tiêu đề";
    --header-subtitle: "Subtitle";
}

Hộp sập con

    • _
    + Mở- Đóng

    Nội dung hộp sập

      • _
      + Mở- Đóng

      Hộp sập con 1

        • _
        + Mở- Đóng

        Hộp sập con 2

          • _
          + Mở- Đóng

          Component này cho phép bạn tạo nhiều hộp sập lồng nhau.

          [[include :scp-vn:component:coltop
          | show=+ Mở
          | hide=- Đóng
          ]]
          Nội dung hộp sập
          (Có thể thêm nhiều hộp sập lồng nhau bằng cách lặp lại cú pháp này bên trong một hộp sập khác)
          [[include :scp-wiki:component:colend]]

          Chú ý: Không thể tạo nhiều hộp sập lồng nhau bằng hộp sập thông thường, và không thể trộn lẫn component này với hộp sập thông thường.

          Các cài đặt:

          show: Chữ hiển thị ở nút mở hộp sập. Mặc định: + Hiện hộp
          hide: Chữ hiển thị ở nút đóng hộp sập. Mặc định: - Đóng hộp
          nohide: Nếu đặt là 0, sẽ có nút đóng hộp sập khi hộp sập mở. Nếu đặt là 1, sẽ không có nút đóng hộp sập. Mặc định: 0
          folded: Nếu đặt là 0, hộp sập sẽ tự mở. Nếu đặt là 1, hộp sập sẽ đóng và không tự mở khi tải trang. Mặc định: 1

Tra cứu mã màu

Toán học

Wikidot sử dụng MathJax để hiển thị các cấu trúc, công thức toán học. Hiển thị toán học trong Wikidot khá dễ dàng nếu bạn biết cú pháp LaTeX.

Hướng dẫn

Bạn có thể hiển thị một công thức dưới dạng cú pháp LaTeX bằng cách đặt nó giữa các khối [[math label]] và [[/math]] (label không bắt buộc). Công thức được hiển thị trong environment \begin{equation} … \end{equation} của LaTeX. Hãy xem các hướng dẫn khác để tìm hiểu về cú pháp LaTeX.

[[math label1]]
\left({{\lim_{x \to 0}{ {-\ln(1 + 8(e^{-x} - 1))} \over {x} }}}\right)^{3} + \left({{ \left({{-7e^{\pi i}}}\right) + {\left({{\lim_{x \to 12} {{x^2 - 16} \over {x - 4}}} \times (\cos^2x + \sin^2x)}\right)}}}\right)
[[/math]]
(1)
\begin{align} \left({{\lim_{x \to 0}{ {-\ln(1 + 8(e^{-x} - 1))} \over {x} }}}\right)^{3} + \left({{ \left({{-7e^{\pi i}}}\right) + {\left({{\lim_{x \to 12} {{x^2 - 16} \over {x - 4}}} \times (\cos^2x + \sin^2x)}\right)}}}\right) \end{align}

Bạn có thể đặt environment LaTeX bằng 2 cách, sử dụng tham số type ở tag math hoặc sử dụng \begin{environment} và \end{environment} trong cú pháp LaTeX. Ví dụ: 2 code này tương đương nhau.

[[math type="align"]]
E = mc^2
[[/math]]
[[math]]
\begin{align}
E = mc^2
\end{align}
[[/math]]
(2)
\begin{align} E = mc^2 \end{align}

Environment equation là mặc định. Các environment khác hỗ trợ là: align, alignat, aligned, alignedat, array, Bmatrix, bmatrix, cases, eqnarray, equation, gather, gathered, matrix, multline, pmatrix, smallmatrix, split, subarray, Vmatrix, vmatrix.

Tối ưu hóa theme nặng

Module CSS của Wikidot thường được sử dụng để thêm theme, CSS tùy chỉnh vào một bài viết. Tuy nhiên, khi thêm trực tiếp quá nhiều code CSS nặng, vì module này thêm CSS trực tiếp vào mã nguồn trang, nó có thể gây lag, chậm, thậm chí là sập trình duyệt trên các thiết bị yếu hơn như điện thoại. Vì thế, đối với các code, theme nặng, việc thêm code vào một khối [[code]] và import CSS từ URL của khối code đó được khuyến khích.

Bình thường:

[[module CSS]]
/* Code theme nặng tại đây */
[[/module]]

Thay bằng cách làm sau:

[!--
[[code type="css"]]
/* Code theme nặng tại đây */
[[/code]]
--]
[[module CSS]]
@import url("https://(URL của trang)/code/N")
[[/module]]

Trong đó, thay N bằng số thứ tự của khối code trong trang. Ví dụ, nếu trang chỉ có một khối code, N là 1, còn nếu khối code này là khối code thứ 6 trong trang, N sẽ là 6.

_licenseboxhợp-tácjpluậnquốc-tế
sửa đổi trang: 28, chỉnh sửa lần cuối: 26 Jan 2023 17:12
Chỉnh sửa Đánh giá (+8) Tag Bình luận (1) Lịch sử Tệp In Công cụ trang + Lựa chọn
Nếu không có ngoại lệ được nêu, nội dung của trang này được xuất bản dưới giấy phép Creative Commons Attribution-ShareAlike 3.0 License