Cú pháp Code Nâng cao

Trung Tâm Luận Văn » Cú pháp Code Nâng cao

đánh giá: +9

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.

Table of Contents

Khối HTML

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

Code Wikidot trong khối HTML

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

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

Khái quát

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

Ví dụ mô tả

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

Chiều cao không thay đổi

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

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

Mẫu chèn code vào bài

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

Hướng dẫn khác

Đổi logo trang (Sigma-9)

Đổi logo trang (BHL)

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

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

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

Thay đổi bố cục tab

Diễn đàn bên trong bài viết!

Trời sao và UFO

Colmod - Siêu hộp sập

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?

[フレーム]

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

[フレーム]

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.

.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.

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:

[フレーム]

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>
<div id="scpCollapsibleLink+n+1">

Nội dung

</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:

.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();

Khi thay đổi nội dung của một phần tử văn bản, cách làm sau thường được sử dụng:

varstr = "never gonna ";
varstr2 = "give you up ";
varstr3 = "never gonna let you down";
document.getElementById("foo").innerHTML = str + str2 + str3;

Bạn có thể viết lại phương pháp trên, sử dụng HTML nhiều hơn như sau:

<style>
 .hide{
 display:none;
 }
</style><divid="show">
 Nội dung cũ
</div><divid="page2"class="hide">
 Nội dung mới trong khối HTML. lorem ipsum dolor sit amet
</div><buttononclick="changePage()">
 Nhấn để thay đổi nội dung
</button><scripttype="text/javascript">
 function changePage(){
 var show = document.getElementById("show");
 var hide = document.getElementById("page2");
 show.innerHTML = hide.innerHTML;
 correctIframeSize();//Hàm thay đổi kích cỡ khối HTML
 }
</script>

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ụ

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>RedMars</title><linkrel="stylesheet"href="./9"></head><body><divclass="container"><divid="screen"><imgclass="glitch"width="300"height="300"/></div><divid="sate"class="overlay"style="top:10px;left:20px;font-size: 20px;">Wadjet-1</div><divid="area"class="overlay"style="bottom:30px;right:15px;font-size:10px;">VÙNG-1</div><divid="camera1"class="camera">299██ kHz - status:onair</div><divid="timestamp"class="timestamp">2014年01月02日 19:36:10</div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><scriptsrc="./10"></script></body></html>

body{padding:0px;
 margin:0px;
 
}.camera{position:absolute;
 bottom:7px;
 left:10px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:7pt;
 color:#c0f0c0;
 text-shadow:#80c080001px;
}.timestamp{position:absolute;
 bottom:7px;
 right:10px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:7pt;
 color:#c0f0c0;
 text-shadow:#80c080001px;
}.container{background:#121010;
 width:300px;
 height:300px;
 margin:0px;
 position:relative;
 overflow:hidden;
 border:2pxsolid#666;
}.container::after{content: " ";
 display:block;
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
 background: rgba(18, 16, 16, 0.1);
 opacity:0;
 z-index:2;
 pointer-events:none;
}.container::before{content: " ";
 display:block;
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
 background: -webkit-linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), -webkit-linear-gradient(0deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
 background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
 z-index:2;
 background-size:100%2px, 3px100%;
 pointer-events:none;
}.flick{
 -webkit-animation: flicker 0.15s infinite;
 animation: flicker 0.15s infinite;
}#screen{width:100%;
 height:100%;
 border:none;
}.offscreen{
 -webkit-animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
 animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}.onscreen{
 -webkit-animation: turn-on 4s linear;
 animation: turn-on 4s linear;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}.overlay{font-family: Verdana, Arial, Helvetica, sans-serif;
 color:#DBA901;
 text-shadow:#80c080001px;
 position:absolute;
 
 visibility:hidden;
 pointer-events:none;
}.overlaying{
 -webkit-animation: overlay-anim 5s linear;
 animation: overlay-anim 5s linear;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}@keyframesoverlay-anim{
 0% {visibility:hidden;
 }
 20% {visibility:hidden;
 }
 21% {visibility:visible;
 }
 100% {visibility:hidden;
 }}
@-webkit-keyframesoverlay-anim{
 0% {visibility:hidden;
 }
 20% {visibility:hidden;
 }
 21% {visibility:visible;
 }
 100% {visibility:hidden;
 }}@keyframesturn-on{
 0% {
 -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
 transform: scale(1, 0.8) translate3d(0, 0, 0);
 -webkit-filter: brightness(30);
 filter: brightness(30);
 opacity:1;
 }
 3.5% {
 -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
 transform: scale(1, 0.8) translate3d(0, 100%, 0);
 }
 3.6% {
 -webkit-transform: scale(1, 0.8) translate3d(0, -100%, 0);
 transform: scale(1, 0.8) translate3d(0, -100%, 0);
 opacity:1;
 }
 9% {
 -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
 transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
 -webkit-filter: brightness(30);
 filter: brightness(30);
 opacity:0;
 }
 11% {
 -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
 transform: scale(1, 1) translate3d(0, 0, 0);
 -webkit-filter: contrast(0) brightness(0);
 filter: contrast(0) brightness(0);
 opacity:0;
 }
 100% {
 -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
 transform: scale(1, 1) translate3d(0, 0, 0);
 -webkit-filter: contrast(1) brightness(1.1) saturate(1.1);
 filter: contrast(1) brightness(1.1) saturate(1.1);
 opacity:1;
 }}
@-webkit-keyframesturn-off{
 0% {
 -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
 transform: scale(1, 1.3) translate3d(0, 0, 0);
 -webkit-filter: brightness(1);
 filter: brightness(1);
 opacity:1;
 }
 60% {
 -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
 transform: scale(1.3, 0.001) translate3d(0, 0, 0);
 -webkit-filter: brightness(10);
 filter: brightness(10);
 }
 100% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
 transform: scale(0, 0.0001) translate3d(0, 0, 0);
 -webkit-filter: brightness(50);
 filter: brightness(50);
 }}@keyframesturn-off{
 0% {
 -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
 transform: scale(1, 1.3) translate3d(0, 0, 0);
 -webkit-filter: brightness(1);
 filter: brightness(1);
 opacity:1;
 }
 60% {
 -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
 transform: scale(1.3, 0.001) translate3d(0, 0, 0);
 -webkit-filter: brightness(10);
 filter: brightness(10);
 }
 100% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
 transform: scale(0, 0.0001) translate3d(0, 0, 0);
 -webkit-filter: brightness(50);
 filter: brightness(50);
 }}
@-webkit-keyframesturn-on{
 0% {
 -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
 transform: scale(1, 0.8) translate3d(0, 0, 0);
 -webkit-filter: brightness(30);
 filter: brightness(30);
 opacity:1;
 }
 3.5% {
 -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
 transform: scale(1, 0.8) translate3d(0, 100%, 0);
 }
 3.6% {
 -webkit-transform: scale(1, 0.8) translate3d(0, -100%, 0);
 transform: scale(1, 0.8) translate3d(0, -100%, 0);
 opacity:1;
 }
 9% {
 -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
 transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
 -webkit-filter: brightness(30);
 filter: brightness(30);
 opacity:0;
 }
 11% {
 -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
 transform: scale(1, 1) translate3d(0, 0, 0);
 -webkit-filter: contrast(0) brightness(0);
 filter: contrast(0) brightness(0);
 opacity:0;
 }
 100% {
 -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
 transform: scale(1, 1) translate3d(0, 0, 0);
 -webkit-filter: contrast(1) brightness(1.1) saturate(1.1);
 filter: contrast(1) brightness(1.1) saturate(1.1);
 opacity:1;
 }}
@-webkit-keyframesflicker{
 0% {opacity:0.92451;
 }
 5% {opacity:0.70948;
 }
 10% {opacity:0.5094;
 }
 15% {opacity:0.71263;
 }
 20% {opacity:0.60109;
 }
 25% {opacity:0.57349;
 }
 30% {opacity:0.34307;
 }
 35% {opacity:0.64261;
 }
 40% {opacity:0.15955;
 }
 45% {opacity:0.1211;
 }
 50% {opacity:0.60481;
 }
 55% {opacity:0.75905;
 }
 60% {opacity:0.37753;
 }
 65% {opacity:0.78777;
 }
 70% {opacity:0.873;
 }
 75% {opacity:0.16556;
 }
 80% {opacity:0.49784;
 }
 85% {opacity:0.63601;
 }
 90% {opacity:0.86509;
 }
 95% {opacity:0.49004;
 }
 100% {opacity:0.90144;
 }}@keyframesflicker{
 0% {opacity:0.92451;
 }
 5% {opacity:0.70948;
 }
 10% {opacity:0.5094;
 }
 15% {opacity:0.71263;
 }
 20% {opacity:0.60109;
 }
 25% {opacity:0.57349;
 }
 30% {opacity:0.34307;
 }
 35% {opacity:0.64261;
 }
 40% {opacity:0.15955;
 }
 45% {opacity:0.1211;
 }
 50% {opacity:0.60481;
 }
 55% {opacity:0.75905;
 }
 60% {opacity:0.37753;
 }
 65% {opacity:0.78777;
 }
 70% {opacity:0.873;
 }
 75% {opacity:0.16556;
 }
 80% {opacity:0.49784;
 }
 85% {opacity:0.63601;
 }
 90% {opacity:0.86509;
 }
 95% {opacity:0.49004;
 }
 100% {opacity:0.90144;
 }}

$(document).ready(function(){varimg = $(".glitch");
 varprefix = "data:image/jpg;base64,";
 varmaxErrors = 200;
 varphase = 0;
 varcorrupted;
 varsate = ["Wadjet-1", "Wadjet-2", "Wadjet-α"];
 vararea = ["Area-01", "Area-r0E", "Area-Ο"]functionupdate(){if(Math.random() > 0.8){varerrors = Math.round(Math.random() * maxErrors)for(vari = 0; i < errors; i++){varl = 2000 + Math.round(Math.random() * (data[phase].length - 2002));
 corrupted = data[phase].substr(0, l) + data[phase].charAt(l + 1) + data[phase].charAt(l) + data[phase].substr(l + 2);
 }}img.attr("src", prefix + corrupted);
 
 }functiononoff(){
 $("#screen").toggleClass("onscreen").toggleClass("offscreen");
 $(".container::after").toggleClass("flick");
 $(".overlay").toggleClass("overlaying");
 
 setTimeout(function(){
 $("#screen").toggleClass("offscreen").toggleClass("onscreen");
 $(".container::after").toggleClass("flick");
 $(".overlay").toggleClass("overlaying");
 phase = phase == 2 ? 0 : phase + 1;
 
 $("#sate").text(sate[phase]);
 $("#area").text(area[phase]);
 }, 1000);
 setTimeout(onoff, 10000);
 }functiontimer(){vardate = newDate($.now());
 varstr = '';
 str += date.getFullYear();
 str += '-';
 if(date.getMonth() < 9)str += '0';
 str += (date.getMonth() + 1);
 str += '-';
 if(date.getDate() < 10)str += '0';
 str += date.getDate();
 str += '';
 if(date.getHours() < 10)str += '0';
 str += date.getHours();
 str += ':';
 if(date.getMinutes() < 10)str += '0';
 str += date.getMinutes();
 str += ':';
 if(date.getSeconds() < 10)str += '0';
 str += date.getSeconds();
 
 $("#timestamp").text(str);
 }
 
 $("#screen").addClass("onscreen");
 $(".container::after").addClass("flick");
 $(".overlay").addClass("overlaying");
 timer();
 
 setTimeout(onoff, 10000);
 setInterval(update, 26);
 setInterval(timer, 1000);
 
});
 
vardata = ["/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAKAAD/4QMfaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMyQTg3QzA0MkJEQzExRTY5NEUwQTRENjQyQUFEMzVGIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMyQTg3QzAzMkJEQzExRTY5NEUwQTRENjQyQUFEMzVGIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI0REExOUMwODlGQkM0Qjg3QTEzNTM1M0Q2QjczMzE3MyIgc3RSZWY6ZG9jdW1lbnRJRD0iNERBMTlDMDg5RkJDNEI4N0ExMzUzNTNENkI3MzMxNzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAUEBAZEhknFxcnMiYfJjIuJiYmJi4+NTU1NTU+REFBQUFBQUREREREREREREREREREREREREREREREREREREREARUZGSAcICYYGCY2JiAmNkQ2Kys2REREQjVCRERERERERERERERERERERERERERERERERERERERERERERERERET/wAARCADhAOEDASIAAhEBAxEB/8QAggABAAMBAQEBAAAAAAAAAAAAAAIDBAEFBgcBAQEBAQEAAAAAAAAAAAAAAAACAQMEEAACAgEDAwMBBQgDAQAAAAAAARECAyExBEFREmETBSJxgZGxMvCh0eFCUhQGciQWIxEBAQACAQQDAQEBAAAAAAAAAAERAhIhMUFhUXEDgSLB/9oADAMBAAIRAxEAPwD4wAAAAAAAAAAAAAAAAElVvZEvat2ArBb7F+xz2b9gKwSdGt0RAAAAAAAAAAAAAAAAAAAAAAAAAAF1OPa2r0QFJdj49rmvFxkjbjxpbIMyw04HfU0LhJG2tX2LK4rW6D+M/rFXioux8Ty2PRxcTrbU20xqqNkPp5dPj0t9WW/4VT0HCK3ZF5ZhgtwavoZsnxlLdD1HdEfJDlPLMfD5/N8Q1rVwefl42TD+paH1l2ZstVZaqSbdfB/qe3yoPU5HBT1qoPOvjtjcWJXlAABoAAAAAAAAAAAAAHUm3CFU7OEepw+Mq/Vbc2MqvjcJv6rHo1wpqCShPTYtrVM6SRzvtGmFI0Uxo4uyLa6ATpQurRSQq0iXuQTapcoRx2gzO8kVdnPa/Dpr7i+zlFLq+hJWbJHG7+3XjPhT4Pqd8C2DnhBHJXH0qeNEHjRo8SLp+A5HBivjMebArqLHp5aOqbWpn30Z0128uO2r5/kcZ4nK1RmPo82FNPseNyuM8Tmv6WdZco7dKygA1oAAAAAAAANwaeNil+TAt4+BrV7m+lCOOsGmqSA5WkE1oSR2DMmEq5Gtiaysqg5DknlflvFp94ebgjiwt6s0rGc7+nh11/NmltotVGWpKrS6MnKWhzuzpNEK0ZPxEydSbIy6cVFvJN9USrV7Nwyx4vKPQsWMcmcVSo16s662lNbdTQqQIJ5NwzXxyjNbGk2mei0UZcauoZeuydtWK2JxpqZcuBNNPVM9N10gpvQ6a7OO2j5Xk4HgvHToZz6HmcZZaNdVseA004e56JcuKIANAAAAABKtXZwj0sGJpJGbh4/JtnrUoAx1LEidaQg1qS11IkiKOktT0LsWNP6n0M9U39hspVJabMjbpHTXrU5XTSDik6kSg4V6YgmydaNklWCyikmqK0JqhODqIy1DxOwSO9AxEiTgQBVYqZoaIWqVKlmaK7KZNHUx5sni2jrq57dO6u9DwPksHhdXW1vzPftlUQY+bh97G0t+h31ebbu+cAB1SAAAASxqbJAerw8fjX1N+NGfBWEjZRGWtkWJSh4E6osSOdrpxUqnQmscF9aE3RQ0RdlTVnpiTak0PSEgoShCUo8tJI22y6a646kNR1ksORGncku2zRydSJLca0Kyym8E1SyDqB1EMcaCOnIAHCcSRNEWjjRM5BrGZ1hyeZylq32PXstTzebRTK6nf871cf0nR5/nqkaUpqZLqGaMNp07noeV89zMft5bV6TP4mc9P5ekXrbuvyPMOhAAAC7jV8ropNfBX1MD2cNYRpqZ6aI00ROy9VqLalSJTqcXVdJNalS1W52XVONSK6RJ2XfREE/K0aONTLbeUacFVVT1ZtmJlM25Vo1+07pLRxJnejnQ5Orsk62SIdDqIUuVlE7E6uVJR6dy6sbIyjoQ2BI7oc0COs0cDQgdAKrGTkU8q6bo2XehjzWhQddHLfs8vJQYlDLMhymrPW8dYfl6TiVuz/M8I+l+TX/Wu/8Aj+Z80XOzAAGtDZ8f+pmM18BxkjuaPZWiNFGkkZ11RZXoRtFStdWjln26lTtKgk9Uc8Lz4XK0HXmhONynyIzOxOFcvhak777mjGnWq6MyVyOUtoNz+pQupO3henmuYmmo3aOZWpjqRx2VJncz5M3nb0M49S7dJKt9xpNapl6y6Ly0kyLIlD7FebkN+kDjnwcsdcvVprEF9aweTw892tdkeq7Rotjjtrh112y7I9TnuJwraNndl6EKSS0OorknIYEZFyqYNC5gzWbb6I2WZhtM2nqdtHH9GTItdDuNanUtdSdUeh5vaj5Rf9S77Ov5nzB9J8xZ14kdLXX7kfNnSdkz/rgANaF3Gt45EyklV+LTA9+dmWVuVYvqqvUnVQNmRdW66ljtoU1U6k+hzWO8qEKuAkDGuzrJvw3lQzz6o0Y7dETtMr1uK7mtDcamVzutjVekzGjKXRpCMvyr8/vZy2u5asbf2EXRvYMWYHVJ1f4mzHzax421a6mFY4X2hYpIusvd0m1nZstyFkcPp9xX/kujXi5aKngSUoiqP7hxhyrdXl1vpZbGmnJrdpI8f23MltG6tPsZdJ4VN69e0lZl492m/NzJq8jldcL5ZZ8940Rn8vLRmjK0tTMqOzdjtq5bK7KXCJJQW0pCbZyUnL2R09ONeV/sVvGuHEt4td/l/E+ePR+Y5Hv8mz3VYovu/mecd6idgAGNAAB7Hx+Xyp4vdG9I8HiZfbya7M9ylikp6oktSMnVBzsVKnByCS2BCnESR06kYpYryo2ZJJMpiS1QkRY6SpKinQsrjTIUc6rYn5wRVR32tTqxIVtumTkzqrog6JB410JyhJgq9tLci6IsbK7W7FRNciNiVbtJFHmlEskrJ/YVhGU72dnA1WnciTRqbcuvYxc3MsOO130NdmfPfMcnyt7VdlrYvWI2ryW23L1ZwA7JAAAAAA9vg5vdpq9VueIaOLyHx7q61XVd0bGV74LVSuWqyY9UytqBtrhOtSVtIJSQJI5rWI6Q2CsSpNM62QOoleV1XCSJStCmYIu5OFZaJhklaUpMvudySyMzi3k1eRx3M9rN+hyW1qOJlY8q3IeckPHQJToVhGa45+8tquvY5WqRbSjYCqDTLYVSFrJJt6CJrLy864+N3t0/efJ3u8lna2rZt+S5n+Tk8a/ort6+p553kwgABoAAAAAAAA9D4/n24tvG36Hv6H0CjIlZap9T489H4/5F8V+Ntcb6di5fF7IuvmPe8Oxzwe5ow3x5l5Vcok8aJ20brsyeh1JIvtj7Fbozjda6SonU0diCLRH26fTuhFiBoBxoJdzoNY6hMieg8kY0exyY2OTJbSktSanKzFTqy96FeiI3ukm3okZjJnDtrHz/AMp8j7k4cW39Vu/7fvHyPynuf/PDt1t3PHO2uuHPuAAoAAAAAAAAAAAAAGni8zJxXNHo910Z9PwPkMXKhJxf+1nx51NpytGXNsfSbrl+hLErah8VPY+U4Xzubj/Tk+uvrv8AifRcT5zj51Cfi+1tC/8ANR1i2+BLcz2xo9BZcdnMyTrixvVom6xU2rxrJLYqc9D33gwv0JLBg0Ry4e18nz/Q5J9EuLg7as4+FxnuZw9t5enz3lOwUHvf4WBbIrthw0M4nJ5FUWJlvK5vF4y+ppPt1PA5fzjv9OCviv7nuZxOXw9Xkc3HxlN3D7dX+34Hz/M+Ryclx+mn9v8AEx3va78rOX3ZEuTDAAGgAAAAAAAAAAAAAAAAAAAAA0YuZmw/ou0jdj+d5FdLRZHkg3I9+v8AsL/qq0/Qt/8AQ07WPmwMsw+l/wDRU7W/D+ZF/wCyRtVs+cAyYe1k/wBgzW/TVL7df4GLN8lyM2lrtLtXQxAZMAAMaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/2Q=="
 , "/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAKAAD/4QMfaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMyQTg3QzA4MkJEQzExRTY5NEUwQTRENjQyQUFEMzVGIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMyQTg3QzA3MkJEQzExRTY5NEUwQTRENjQyQUFEMzVGIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI4MTlEQTVDRTY5RDc0REFBRTFGRjQzNjI1NDk0MjQyRCIgc3RSZWY6ZG9jdW1lbnRJRD0iODE5REE1Q0U2OUQ3NERBQUUxRkY0MzYyNTQ5NDI0MkQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAUEBAZEhknFxcnMiYfJjIuJiYmJi4+NTU1NTU+REFB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LpNdDmc7ntmJwdPFr7tPIt7JG9Njl3UuMMw5eGyht4fxC29WhfHxNax/L9DPZru5bcWYeGCW3zOi27c9/wAoMqwb6s9GN7WthvHgh1WM6j6Z1Iu7eBWeym4JfiSpjArN+GC4mh2nQFgj/Ept4krOv//Z"
 , "/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMfaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE0Qjg1ODgxMkJERDExRTY5NEUwQTRENjQyQUFEMzVGIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE0Qjg1ODgwMkJERDExRTY5NEUwQTRENjQyQUFEMzVGIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJGQjg4OTA2RjU2QkE5RjE1RTZFMDM2MjBFQjA2RDUyMCIgc3RSZWY6ZG9jdW1lbnRJRD0iRkI4ODkwNkY1NkJBOUYxNUU2RTAzNjIwRUIwNkQ1MjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dH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"]

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

Sơ lược

Các bài như SCP-2998 sử dụng một phương pháp đặc biệt để hiển thị nhiều trang con với những nội dung khác nhau dưới dạng một trang duy nhất với rating và những thông tin khác bằng nhau. Phương pháp này sử dụng ListPages cùng các trang fragment con. Tuy nhiên, phương pháp này yêu cầu bạn phải tạo nhiều trang fragment con, và bạn cần phải đăng các trang fragment con đúng cách và đúng thứ tự. Thêm nữa, việc tạo trang fragment con trong các trang nháp (sandbox) không phải là một việc dễ dàng, nên việc thử nghiệm phương pháp này là không thể. Vì vậy, đây là một cách để mô phỏng lại phương pháp sử dụng ListPages cùng các trang fragment con, nhưng là trên cùng một trang và không cần phải tạo thêm các trang fragment bổ sung.

Đọc tiếp phần hướng dẫn này ▶

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)

#headerh1a{color:transparent;
 text-shadow:none;
 font-family: Arial, sans-serif;
 font-size:2.5vw;
}#headerh1a::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);
}#headerh2span{color:transparent;
 text-shadow:none;
}#headerh2span::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

- _
Nội dung hộp sập
- - _
  Hộp sập con 1
  
  _
  
  Hộp sập con 2
  
  _
  
  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.

Thay đổi bố cục tab

Mô tả: tab thường được sử dụng trong sandbox nhằm mục đích lưu trữ thông tin ở từng tab. Nó có giao diện giống như dưới đây.

nội dung trong tab 1

nội dung trong tab 2

Nếu bạn thấy tab trên quá nhàm chán thì có thử sử dụng tab với bố cục khác. Nó có giao diện giống như dưới đây.

Nội dung trong tab 1

Nội dung trong tab 2, nhưng mà hãy tưởng tượng đoạn này nó dài hơn.

Nếu viết dọc thì chữ tượng hình trông hợp hơn với chữ Latin.

Nội dung trong tab 1

Nội dung trong tab 2, nhưng mà hãy tưởng tượng đoạn này nó dài hơn.

Đầu tiên hãy copy cú pháp dưới đây vào trang của bạn.

[[include :scp-jp-sandbox2:inc:addspecialcss]]

Cú pháp này cũng được sử dụng phần "Cách thêm diễn đàn vào bài viết của bạn!", nhưng mà lát nữa chúng ta sẽ xem nó sau. Sau khi hoàn thành xong mục này thì bạn chỉ cần ghi [[div]] ở phần đầu và phần dưới tab.

[[div class="CustomTabRJ"]]
[[tabview]]
[[tab tab 1]]
Nội dung trong 1
[[/tab]]
[[tab tab 2]]
Nội dung trong tab 2
[[/tab]]
[[/tabview]]
[[/div]]

Còn nếu bạn vẫn không thích cách thiết kế này thì có thể xem thử các tab với bố cục đa dạng ở dưới đây.

nội dung trong tab 1

nội dung trong tab 2

nội dung trong tab 3

Tất nhiên, khi viết theo chiều dọc thì chữ tượng hình vẫn hợp hơn.

nội dung trong tab 1

nội dung trong tab 2

nội dung trong tab 3

Nhớ thêm cú pháp này [[include :scp-jp-sandbox2:inc:addspecialcss]] ở đầu bài. Không thêm là code không chạy đâu.

[[div class="CustomTabRJC"]]
[[tabview]]
[[tab tab 1]]
nội dung trong tab 1
[[/tab]]
[[tab tab 2]]
nội dung trong tab 2
[[/tab]]
[[tab tab 3]]
nội dung trong tab 3
[[/tab]]
[[/tabview]]
[[/div]]

Bằng việc sử dụng [[include :scp-jp-sandbox2:inc:addspecialcss]], bạn chỉ cần ghi [[div]] ở đầu và cuối tab để có thể sử dụng da dạng các thiết kế của tab.

Lưu ý: Người dùng Internet Explorer hoặc Edge có thể thấy những cái tab này có chiều cao được lập trình cố định. Những văn bản quá dài để hiển thị trong tab sẽ bị ẩn đi. Việc làm này là có chủ ý vì lý do kỹ thuật.

Diễn đàn bên trong bài viết!

Hướng dẫn
Cú pháp Code Nâng cao
Diễn đàn bên trong bài viết!

Tạo bởi: karma_4.png0cd1e55a5061e5cf291b4af4245e14b7 jellyfishthecoolkid
Ngày: 2 Apr 2017 12:08
Số post: 3
feed-icon-14x14.png RSS: Các post mới

Kết luận của tôi sau 48 tiếng coi phim liên tục

Mở tất cả Đóng tất cả Mở rộng lựa chọn

Có một luận điểm luôn đúng

karma_4.png0cd1e55a5061e5cf291b4af4245e14b7 jellyfishthecoolkid 2 Apr 2017 12:08

Sức mạnh tình bạn sẽ chiến thắng tất cả

ai dà…

karma_4.pnga0026cd160d7f41996e4ba60c69210cb Irina Bougainvillea 2 Apr 2017 12:15

Meow, chúng mày coi anime ít thôi

Re:ai dà…

karma_5.png8844601e5a16803eeb54f944a697c3e9 KirQ 2 Apr 2017 13:00

bắt nó đi code đi bồ

Đăng bình luận mới

Tôi sẽ giải thích cú pháp giúp bạn có thể tạo trang diễn đàn ngay trong tài liệu của mình.

Lưu ý: Xuyên suốt bài viết, bạn có thể bắt gặp cách cú pháp được viết theo dạng dưới đây。

[[include :scp-jp-sandbox2:inc:hoge]]

Code:1

Nếu bạn để ý, từ "hoge" trong cú pháp phía trên có thể được thay thế bằng những từ khác miễn hợp lệ. Ví dụ, nếu bạn đếm từ "include" trong tất cả cú pháp được viết đến thời điểm này, bạn có thể thấy đoạn sau đó "include :scp-jp-sandbox2:inc:" thường được viết lại y chang. Việc này là cần thiết để tạo một diễn đàn giả trên các trang wiki chính của Tổ Chức SCP. Đối với sandbox, bạn sẽ cần phải sử dụng cú pháp sau đây:

[[include inc:hoge]]

Code:2

Lưu ý: Đây chỉ là ví dụ. Bạn không cần phải thêm [[include inc:hoge]] vào bài của mình. Đường link dẫn tới trang này không tồn tại.

Phụ lục 26/6/2017: Bạn cũng có thể sử dụng cú pháp trong Code:1 trên trang sandbox để tạo trang diễn đàn giả trong bài viết SCP.

Nhúng CSS: Đầu tiên, bạn cần thêm đoạn sau vào trang. Nếu không làm vậy thì cú pháp sẽ không hoạt động.

[[include :scp-jp-sandbox2:inc:addspecialcss]]

Code:3

Ảnh đại diện: Avatar của người tạo thread và người đăng bài trên diễn đàn đều sẽ được hiển thị. Dưới đây chúng ta sẽ sử dụng tạm một số ảnh mẫu, nhưng bạn có thể thay chúng nếu thích.

Ảnh đại diện	Liên kết URL của ảnh
default_avatar	https://d2qhngyckgiutd.cloudfront.net/default_avatar

Thanh karma	Liên kết URL của ảnh
karma_0.png	https://www.wikidot.com/common--theme/base/images/karma/karma_0.png
karma_1.png	https://www.wikidot.com/common--theme/base/images/karma/karma_1.png
karma_2.png	https://www.wikidot.com/common--theme/base/images/karma/karma_2.png
karma_3.png	https://www.wikidot.com/common--theme/base/images/karma/karma_3.png
karma_4.png	https://www.wikidot.com/common--theme/base/images/karma/karma_4.png
karma_5.png	https://www.wikidot.com/common--theme/base/images/karma/karma_5.png

Lưu ý: hiện tại các bài post trên SCP-VN vẫn chưa việt hóa ngày tháng. Nếu bài viết của bạn có liên quan đến chi nhánh ở Việt Nam, bạn nên để nguyên ngày tháng là tiếng Anh để giữ tính chân thực.

Lấy ví dụ, thay vì ghi thời gian bằng tiếng Việt:

19 tháng 4 2024 12:08

Bạn nên ghi hết thành tiếng Anh:

19 Apr 2024 12:08

Lưu ý: format ngày tháng trên wikidot được viết theo thứ tự lần lượt là "Ngày Tháng Năm Thời gian", một số người có thể nhầm lẫn với format ngày tháng trên máy tính, có thứ tự lần lượt "Tháng Ngày Năm".

Thêm trang diễn đàn vào tài liệu!

Forum
Trò chuyện chung / Chủ đề chung
Thêm trang diễn đàn vào tài liệu!

Bạn có thể tạo dòng trên bằng cú pháp dưới đây:

[[div class="DummyForumTitle"]]
Thêm trang diễn đàn vào tài liệu!
* Forum
* Trò chuyện chung / Chủ đề chung
* Thêm trang diễn đàn vào tài liệu!
[[/div]]

Code:4

[[div class="DummyForumTitle"]]〜[[/div]] Nhớ lưu ý xuống dòng, đặt dấu nhân * ở đầu câu và cách một khoảng trắng để tạo một thư mục mới.

Tóm tắt: Nội dung tóm tắt sẽ được hiển thị bên dưới tiêu đề của thread. Đa số không biết vì chả ai thèm ghi tóm tắt trước khi đăng bài.

Tạo bởi: karma_4.png0cd1e55a5061e5cf291b4af4245e14b7 jellyfishthecoolkid
Ngày: 2 Apr 2017 12:08
Số post: 3
feed-icon-14x14.png RSS: Các post mới

Wiki sập rồi!

Mở tất cả Đóng tất cả Mở rộng lựa chọn

Bài post trên có thể được thực hiện bằng biểu thức dưới đây:

[[include :scpvnsandbox2:inc:pseudosummary |
URL=https://d2qhngyckgiutd.cloudfront.net/0cd1e55a5061e5cf291b4af4245e14b7|
KARMA=https://www.wikidot.com/common--theme/base/images/karma/karma_4.png|
NAME=jellyfishthecoolkid |
DATE=26 Jan 2017 12:08|
POST=3|
SUMMARY = block]]
Wiki sập rồi!
[[include :scp-jp-sandbox2:inc:pseudosummary-end]]

Code:5

Bạn có thể tùy chỉnh nội dung bài đăng bằng các thiết lập sau đây:

Tên mục	Chi tiết cài đặt
URL	đặt link ảnh vào đây để thay thế ảnh đại diện của tài khoản
KARMA	đặt link ảnh của thanh karma vào đây để hiện thị mức độ hoạt động của tài khoản
NAME	ghi tên tài khoản của bạn tại đây
DATE	nhập thời gian mà thread được tạo
POST	nhập số lượng bài đăng
SUMMARY	※(注記)cái này sẽ được giải thích sau

Explain:1

Hãy nhìn vào ví dụ dưới đây để hiểu cách mục SUMMARY hoạt động:

Tạo bởi: karma_4.png0cd1e55a5061e5cf291b4af4245e14b7 jellyfishthecoolkid
Ngày: 2 Apr 2017 12:08
Số post: 3
feed-icon-14x14.png RSS: Các post mới

Mở tất cả Đóng tất cả Mở rộng lựa chọn

tiêu đề "tóm tắt" sẽ không hiện thị nếu bạn nhập "none" thay cho từ "block" vào mục "SUMMARY".

[[include :scpvnsandbox2:inc:pseudosummary |
URL=https://d2qhngyckgiutd.cloudfront.net/0cd1e55a5061e5cf291b4af4245e14b7|
NAME=jellyfishthecoolkid |
KARMA=https://www.wikidot.com/common--theme/base/images/karma/karma_4.png|
DATE=2 Apr 2017 12:08|
POST=3|
SUMMARY=none]]
[[include :scpvnsandbox2:inc:pseudosummary-end]]

Code:6

Tóm lại, bạn có thể thay đổi sự hiển thị của mục "SUMMARY" bằng cách ghi "block" hoặc "none"

Hiện nội dung tóm tắt	Ẩn nội dung tóm tắt
SUMMARY=block	SUMMARY=none

Đối với một số người phần dưới đây có thể phức tạp một chút, nhưng đừng nản chí vội! Đây là cách để hiển thị một bài đăng trong diễn đàn:

Wiki sập rồi!

karma_4.png0cd1e55a5061e5cf291b4af4245e14b7 jellyfishthecoolkid 2 Apr 2017 12:08

Lỗi tại trưởng nhóm tech team, tôi chỉ đơn giản là làm theo lệnh

Bài đăng trên được tạo bằng cú pháp dưới đây

[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=https://d2qhngyckgiutd.cloudfront.net/0cd1e55a5061e5cf291b4af4245e14b7|
NAME=jellyfishthecoolkid |
DATE=2 Apr 2017 12:08|
KARMA=https://www.wikidot.com/common--theme/base/images/karma/karma_4.png|
TITLE=Wiki sập rồi!]]
Lỗi tại trưởng nhóm tech team, tôi chỉ đơn giản là làm theo lệnh
[[/div]]
[[/div]]

Code:7

Đừng quên ghi [[/div]] ở cuối cú pháp. Những người đã quen với cú pháp HTML có thể gặp chút khó khăn ở đây.

Tên mục	Chi tiết thiết lập
URL	Nhập link URL ảnh đại diện của tài khoản vào đây
KARMA	Nhập link URL ảnh karma của tài khoản vào đây để hiển thị mức độ hoạt động
NAME	Nhập tên tài khoản vào đây
DATE	Nhập ngày đăng của bài đăng tại đây
TITLE	Nhập tiêu đề của bài đăng tại đây

Explain:2

Bây giờ thêm đoạn mã của code:7 vào giữa [[/div]] và [[/div]] là bạn có thể tạo thêm một bình luận trả lời lại bài đăng đầu.

Wiki sập rồi!

karma_4.png0cd1e55a5061e5cf291b4af4245e14b7 jellyfishthecoolkid 2 Apr 2017 12:08

Lỗi tại trưởng nhóm tech team, tôi chỉ đơn giản là làm theo lệnh

Re:Wiki sập rồi!

karma_4.png39e32985cd5b033301f173d564334772 RedEyeMikeyy 2 Apr 2017 12:18

[[include :scpvnsandbox2:inc:pseudoPost |
URL=https://d2qhngyckgiutd.cloudfront.net/0cd1e55a5061e5cf291b4af4245e14b7|
KARMA=https://www.wikidot.com/common--theme/base/images/karma/karma_4.png|
NAME=jellyfishthecoolkid |
DATE=2 Apr 2017 12:08|
TITLE=Re:Wiki sập rồi!]]
lỗi tại trưởng nhóm tech team, tôi chỉ đơn giản là làm theo lệnh
[[/div]]
[[/div]]
[[include :scpvnsandbox2:inc:pseudoPost |
URL=https://d2qhngyckgiutd.cloudfront.net/39e32985cd5b033301f173d564334772|
NAME=RedEyeMikeyy |
DATE=2 Apr 2017 12:18|
KARMA=https://www.wikidot.com/common--theme/base/images/karma/karma_4.png|
TITLE=Wiki sập rồi!]]
ok
[[/div]]
[[/div]]
[[/div]]

Code:8

Cái "khó" ở đây thực chất chỉ là trong trường hợp bạn muốn tạo nhiều bình luận liên kết duy nhất với một bài đăng, hay thậm chí là bình luận lại các bình luận khác. Số lượng từ [[/div]] có thể thay đổi ở các vị trí khác nhau trong bài đăng và từ đó khiến một số người cảm thấy bối rối. Lời khuyên là bạn nên nên thêm các bình luận ở trên hoặc dưới bài đăng nhằm tránh bị hoa mắt bởi cú pháp.

[!-- Bài đăng 1 Start --]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=https://d2qhngyckgiutd.cloudfront.net/0cd1e55a5061e5cf291b4af4245e14b7|
KARMA=https://www.wikidot.com/common--theme/base/images/karma/karma_4.png|
NAME=jellyfishthecoolkid |
DATE=2 Apr 2017 12:08|
TITLE=Wiki sập rồi!]]
Lỗi tại trưởng nhóm tech team, tôi chỉ đơn giản là làm theo lệnh
[[/div]]
[!-- Bình luận 1 Start --]
[[include :scp-jp-sandbox2:inc:pseudoPost |
URL=https://d2qhngyckgiutd.cloudfront.net/39e32985cd5b033301f173d564334772|
NAME=RedEyeMikeyy |
KARMA=https://www.wikidot.com/common--theme/base/images/karma/karma_4.png|
DATE=2 Apr 2017 12:18|
TITLE=Re:Wiki sập rồi]]
Ok
[[/div]]
[[/div]]
[!-- Bình luận 1 End --]
[[/div]]
[!-- Bài đăng 1 End --]

Code:9

Đăng bình luận mới: Ở dưới thread thường sẽ có nút đăng bình luận giống như dưới đây:

Đăng bình luận mới

Để tạo nút bấm giả với giao diện tương tự bạn chỉ cần sử dụng cú pháp này:

[[div class="DummyNew-post"]]
[[span class="fake-link"]]Đăng bình luận mới[[/span]]
[[/div]]

Code:10

Hướng dẫn để tạo trang diễn đàn giả trong bài viết đến đây là kết thúc. Nếu bạn vẫn còn thắc mắc xin hãy liên hệ các thành viên của nhóm kỹ thuật SCP-VN để được hướng dẫn trực tiếp.

Trời sao và UFO

Được làm dựa trên:
Parallax Star background in CSS bởi Saransh Sinha
UFO speeder bởi Louis Coyle
Làm bởi Nanimono Daemon does not match any existing user name

Đây chính là cái header đã xuất hiện trên wiki SCP-JP vào ngày cá tháng tư 2017. Bạn có thể tạo một cái y hệt bằng việc sao chép cú pháp sau đây:
Trời sao:

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/SCP-stars_3.css);
[[/module]]

Code:1

UFO:

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/SCP-1010CSS6.css);
[[/module]]

Code:2

Ngoài ra, nếu bạn chèn cú pháp sau:

[[module CSS]]
@import url(http://scp-jp-sandbox2.wdfiles.com/local--files/inc%3Aaddspecialcss/BasicNightBackScreen6.css);
[[/module]]

Code:3

Bạn có thể thay đổi vị trí của trời sao và đĩa bay ở bất cứ đâu:

[[div class="nightskyScreen" style="width:90%;height:200px;margin:auto;"]]
[[div class="starBackScreen"]
[[/div]]
[[div class="starBackScreen2"]]
[[/div]]
[[div class="starBackScreen3"]]
[[/div]]
[[div class="ufo"]]
[[/div]]
[[/div]]

Code:4

Bầu trời đêm (sử dụng nền màu gradient) được thực hiện bằng cú pháp dưới đây. Lưu ý sử dụng màu sáng như style="color:#FFF;" nếu bạn muốn ghi chữ lên hình nền. Làm vậy sẽ tránh màu chữ bị chìm gây khó đọc.

[[div class="nightskyScreen" style="color:#FFF;"]]
style="color:#FFF;" sẽ làm chữ đổi màu trắng.
[[/div]]

Code:5

style="color:#FFF;" sẽ làm chữ đổi màu trắng.

Ngoài ra, bạn cũng có thể tùy chỉnh kích thước của hình nền bằng cách thêm cú pháp style="width:90%;height:200px;". Bạn có thể thay đổi thông số để đạt được kích thước vừa ý.

Mã sau đây sẽ thêm họa tiết sao cho hình nền của bạn.

[[div class="nightskyScreen" style="width:90%;height:100px;margin:auto;"]]
[[div class="starBackScreen"]
[[/div]]
[[div class="starBackScreen2"]]
[[/div]]
[[div class="starBackScreen3"]]
[[/div]]
[[/div]]

Code:6

Giờ thì chỉ cần thêm cú pháp này là đĩa bay sẽ xuất hiện. Hãy nhớ để chiều cao của hình nền là 150px hoặc cao hơn để đảm bảo quỹ đạo bay chính xác của UFO.

[[div class="nightskyScreen" style="width:90%;height:150px;margin:auto;"]]
[[div class="ufo"]]
[[/div]]
[[/div]]

Code:7

Bằng cách này, bạn có thể tận hưởng thiên hàvũ trụ trên chính trang wikidot của mình.

Lưu ý: Các thông tin trong hộp sập này chỉ cần thiết đối với những ai có ý định tùy chỉnh, hoặc tạo một mô-dun CSS hoàn toàn mới hoạt động liên kết với mô-đun này. Bạn có thể bỏ qua nếu không quan tâm.

Khi áp dụng code:1 và code:2 cho mô-đun CSS trên, hãy nhớ rằng các cú pháp sau đây sẽ bị ghi đè khi bạn thực hiện sửa đổi.

Thông tin chi tiết:

Tên phần tử	Cách phần tử được gọi trong CSS
Chức năng	Vai trò của phần tử ảnh hưởng đến trang wikikdot
Chỉnh bằng	Đoạn mã có thể thêm vào hoặc sửa đổi để tùy chỉnh trang wikidot trong giới hạn vai trò của phần tử

Những sửa đổi xảy ra thông qua việc thêm mã của code:1 vào trang:

Tên phần tử	#page-content
Chức năng	Chứa thông tin vị trí của các dòng chữ trong trang
Chỉnh bằng	position:relative;z-index:3;

Tên phần tử	#side-bar .side-block
Chức năng	Chứa thông tin vị trí thanh bên (side menu)
Chỉnh bằng	position:relative;z-index:3;

Tên phần tử	#footer
Chức năng	Chứa các đường link phục vụ cho các điều khoản dịch vụ (giấy phép, thông tin liên hệ, etc)
Chỉnh bằng	position:relative;z-index:3;

Những sửa đổi xảy ra thông qua việc thêm mã của code:2 vào trang::

Tên phần tử	#skrollr-body
Chức năng	một div chứa toàn bộ nội dung trang ngoại trừ các phần tử liên quan đến hộp sập (bao gồm cả side menu nếu nó có thể thu gọn được)
Chỉnh bằng	overflow:hidden;width:100%;position:relative;

Bên cạnh đó, để dễ dàng hơn trong việc tạo hoạt ảnh, phần tử giả (pseudo-element) đã được thêm vào dưới dạng các ID sau đây.

Các phần tử giả trong mã nguồn code1 được thêm vào:

Tên ID của phần tử	Tên phần tử giả	Chức năng của phần tử giả
#container-wrap-wrap	before	Nền sao 1-1
#container-wrap-wrap	after	Nền sao 1-2
#container-wrap	before	Nền sao 2-1
#container-wrap	after	Nền sao 2-2
#container	before	Nền sao 3-1
#container	after	Nền sao 3-2

Các phần tử giả trong mã nguồn code2 được thêm vào:

Tên ID của phần tử	Tên phần tử giả	Chức năng của phần tử giả
#skrollr-body	after	Hình ảnh UFO

Hãy kiểm tra các ID kể trên nếu mô-dun CSS tự lập trình của bạn không hoạt động ổn định với mô-đun này.

Colmod - Siêu hộp sập

"Hộp sập được cải tiến - siêu hộp sập" làm bởi:Boyu12 Boyu12

Có bản đồ kho báu trong này đấy, mở ra xem thử đi.

- _
Kho báu ở…
- - _
  ngay đây…
  
  _
  
  thôi...
  
  Bạn đến trễ quá, con Sứa đã ăn mất cái bản đồ rồi.
  
  Nhưng mà ai cần kho báu khi bạn có thể học cách sử dụng colmod với vô hạn các hộp sập bên trong hộp sập. Thật thú vị phải không nào!? Bạn chỉ cần sử dụng đoạn mã dưới đây để làm một cái tương tự.
  
  [[include component:coltop show=+ Hiệnく|hide=- Ẩn]]
  Kho báu ở...
  [[include component:coltop show=+ Hiệnく|hide=- Ẩn]]
  ngay đây...
  [[include component:coltop show=+ Hiệnく|hide=- Ẩn]]
  thôi...
  [[include component:colend nohide=true]]
  [[include component:colend nohide=true]]
  [[include component:colend nohide=true]]
  
  Nếu bạn bỏ từ "nohide" và thay thế bằng từ "hide" trong colend…
  
  _
  
  Bạn có thể thêm nút ẩn/hiện ở cả phần trên và dưới nội dung hộp bằng việc ghi hideLocation="both". Ngoài ra, bạn cũng có thể ghi nội dung riêng biệt cho coltop và colend.
  
  [[include component:coltop show=+ Hiệnく|hide=▽ Ẩn]]
  Bạn có thể thêm nút ẩn/hiện ở cả phần trên và dưới nội dung hộp bằng việc ghi hideLocation="both".
  Ngoài ra, bạn cũng có thể ghi nội dung riêng biệt cho coltop và colend.
  [[include component:colend hide=△しろさんかく Vẫn là ẩn]]
  
  Nhưng nếu bạn ghi nohide=true thay vì thay thành "hide"…
  
  _
  
  Bạn có thể đẩy vị trí nút ẩn/hiện của hộp sập xuống dưới nội dung nếu ghi hideLocation="bottom".
  
  [[include component:coltop show=+ Hiệnく|nohide=true]]
  Bạn có thể đẩy vị trí nút ẩn/hiện của hộp sập xuống dưới nội dung nếu ghi hideLocation="bottom".
  [[include component:colend hide=- Ẩn]]
  
  Nếu bạn ghi folded=false trong coltop…
  
  _
  
  Bạn có thể ghi folded="no" để nội dung trong hộp sập tự động hiện ngay khi vào trang, thay vì ở trạng thái ẩn như mặc định.
  
  [[include component:coltop folded=false|show=+ Hiệnく|hide=- Ẩn]]
  Bạn có thể ghi folded="no" để nội dung trong hộp sập tự động hiện ngay khi vào trang, thay vì ở trạng thái ẩn như mặc định.
  [[include component:colend nohide=true]]
  
  Nếu bạn cho [[div class="collapsiblealt"]] trên đầu và [[/div]] ở dưới colmod, hoặc nếu bạn ghi ifprot=true trong coltop...
  
  _
  
  Bạn có thể tạo một Nút đăng nhập giả dưới dạng hộp sập.
  
  [[div class="collapsiblealt"]]
  [[include component:coltop show=Đăng nhập|hide=Đăng xuất]]
  Bạn có thể tạo một [#toc23 Nút đăng nhập giả] dưới dạng hộp sập.
  [[include component:colend nohide=true]]
  [[/div]]
  
  Hoặc
  
  [[include component:coltop ifprot=true|show=Đăng nhập|hide=Đăng xuất]]
  Bạn có thể tạo một [#toc23 Nút đăng nhập giả] dưới dạng hộp sập.
  [[include component:colend nohide=true]]
  
  Nhấn vào đường link dưới đây để biết thêm thông tin chi tiết.
  Append Syntax: Colmod - Siêu hộp sập

Footnotes

. index (chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Nó gần tương tự với khái niệm name tag.

_licensebox hợp-tác jp luận quốc-tế

sửa đổi trang: 31, chỉnh sửa lần cuối: 21 Apr 2024 06:10

Bình luận (1)

Tổ Chức SCP

Lưu trữ, Quản thúc, Bảo vệ

Khối HTML

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

Code Wikidot trong khối HTML

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

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

Khái quát

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

Ví dụ mô tả

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

Chiều cao không thay đổi

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

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

Mẫu chèn code vào bài

Tìm nguồn tham khảo

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

CodePen

Code ví dụ

Filter CSS

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

Sơ lược

Hướng dẫn khác

Đổi logo trang (Sigma-9)

Đổi logo trang (BHL)

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

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

Hộp sập con

Tra cứu mã màu

Toán học

Hướng dẫn

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

Thay đổi bố cục tab

Diễn đàn bên trong bài viết!

Trời sao và UFO

Colmod - Siêu hộp sập