BASALT 外觀主題





BASALTLOGO.png

BASALT 外觀主題

評分: +5+x


BASALT 外觀主題

VERSION 1.5

這是什麼?

BASALT是個並未與任何世界線、故事系列或GoI綑綁在一起使用的美觀性外觀主題,由AzamoAzamoPlaceholder McDPlaceholder McD共同開發,並且衍生自EstrellaYoshteEstrellaYoshtePaperstack Theme

如同黑色標記筆,BASALT也對網站的佈局做了很大程度的改動,並且改變了許多時常會被大多數外觀主題所埋沒的UI元素,以提高生產力與使用者的可訪問性。而且這看起來也很酷。

為了要使用BASALT,請直接將以下的代碼貼至你的文章之中:

[[include :scp-zh-tr:theme:basalt]]

外觀主題設置

外觀主題設置,有時也被稱之為「變數」,是可供使用者主動選擇,或為了某個特定功能因而添加在BASALT include模組裡面的額外幾行字。

為了要適用你的設置,請像下列的範例一樣,將其插入在主引入內容之後,至兩個下中括號之前的空間之中:

[[include :scp-zh-tr:theme:basalt 外觀主題設置=a]]

多個外觀主題設置也能夠輕易地合併在一起使用。為了要一次使用多個設置,請遵循以下的格式:

[[include :scp-zh-tr:theme:basalt 第一個主題設置=a|第二個主題設置=a|第三個主題設置=a]]

外觀主題設置清單(自VERSION 1.0開始)

hidetitle=a

移除頁面標題。

acsanimation=a

關閉ACS動畫的組件,預設為啟用。

darkmode=a

啟用深色模式。 (詳見:ONYX(深色模式)

redmode=a

啟用紅色模式。為使這個功能正常運作,請務必同時啟用深色模式。 (詳見:GARNET(紅色模式))

darksidebar=a

將深色模式的側邊欄應用於亮色模式的文章之中。


自定義

改變大標題/副標題/LOGO

如果你想要替換掉顯示在標頭的大標題、小標題和/或logo的話,請使用以下的代碼:

:root {
--logo: url(<圖片連結在此>);
--title: "<標題文字在此>";
--subtitle: "<副標題文字在此>";
}

我們會建議你將--title屬性的內容文字保持在與預設文字相同(或更短)的長度範圍內,以避免在行動裝置上遭遇顯示問題。

預設來說,顯示在側邊欄的logo和文字會與標頭的相一致。如果你想要修改它的話,請使用以下的代碼:

:root {
--sidelogo: url(<圖片連結在此>);
--sidesubtitle: "<文字在此>";
}

ONYX(深色模式)

BASALT_DARKMODE.png

ONYX

為了啟用深色模式,請使用以下的外觀主題設定:

[[include :scp-zh-tr:theme:basalt darkmode=a]]

GARNET(紅色模式)

BASALT_APOLLYON.png

GARNET

為了啟用紅色模式,請使用以下的外觀主題設置:

[[include :scp-zh-tr:theme:basalt darkmode=a|redmode=a]]

與BASALT一同引入的內容

組件

BASALT預先包含有了數個由社群成員所製作的組件:

……如果你想對這傢伙 來點視覺上的變化時,你也可以使用它們:

外觀主題

BASALT從這些主題中扒走 借用了一些元素:

範例


basalt_logotype_black.png

圖像方塊

一條水平線可以透過使用4個連字號「----」來創建,並且如果它沒被包在任何東西裡面的話(例如引用塊),它會延伸並橫跨整個頁面。在這份文件中被拿來分段的就是水平線。

一個你可能已經訪問過的連結


標題可以被以在一行的開頭添加一至六個加號「+」來創建。

這是個粗體文字(Big Text)span。使用 [[span class="bigtext"]] 來打出這樣的字。

這是個特殊文字(Special Text)span。使用 [[span class="st"]] 來打出這樣的字。
當把特殊文字span放在等下會看到的彩色表格div裡面時,它將會改變顏色。 這是為你設計的,Placeholder。

為什麼鏟子那麼特別?

因為它是個開天闢地級的發明。


這是個引用塊,可以透過在每一行的開頭添加「> 」來創建

更多文字


這是個水平線

巢狀引用塊

這是個普通的表格
文字在此

當表格被包在某些特定的div裡面時,它們是可以改變顏色的。被包在那些div裡面的圖像方塊和 特殊文字span 也會隨之改變顏色。

[[div class="table1"]]

這是個綠色的表格
文字在此

[[div class="table2"]]

這是個藍色的表格
文字在此

[[div class="table3"]]

這是個黃色的表格
文字在此

[[div class="table4"]]

這是個橘色的表格
文字在此

[[div class="table5"]]

這是個紅色的表格
文字在此

[[div class="table6"]]

這是個紫色的表格
文字在此

你也可以使用以下的div來使表格分裂開來。

[[div class="tableb"]]

這是個分開來的表格
文字在此

這是個文件div。使用[[div class="document"]]來創建這個區塊。我們建議你別讓這個區塊被其他的div所包住。

這是個深色文件div。使用[[div class="darkdocument"]]來創建這個區塊。我們建議你別讓這個區塊被其他的div所包住。

這是個RAISA備忘錄的div。使用[[div class="raisa_memo"]]來創建這個區塊。

這是個裝飾性的div。使用[[div class="notation"]]來創建這個區塊。

這是個苗條方框的div!使用[[div class="smallmodal"]]來創建這個區塊。

這是第三個 裝飾性的div!!使用[[div class="jotting"]]來創建這個區塊。

這是第四個 裝飾性div!使用[[div class="transcript"]]來創建這個區塊。

這是第五個 裝飾性div!使用[[div class="papernote"]]來創建這個區塊。

Body所使用的字體是Roboto
Header與Title所使用的字體是 Work Sans
Monospace所使用的字體是Fira Code


除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License