嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面
[{$previous-url} {$previous-title}]
[{$hub-url} {$hub-title}]
[{$next-url} {$next-title}]
這是什麼
這是些被我,
Croquembouche,使用在許多頁面上的各種「改進用」CSS代碼,因為我認為它能讓我更輕易地去處理問題。
這個組件做出了一些小小的調整,使得人們能得到更為舒適的書寫體驗,並且在編篡組件/外觀主題時也能更加輕鬆一點(我很常這麼覺得)。對於讀者來說,這沒有對任何可看的部分做出任何的變化 —— 真正有感的是寫的人。
我並不期望有使用該組件的文章在被翻譯過後也跟著使用這個組件,除非譯者喜歡這個組件並無論如何都想要使用它。
這個組件基本上不會與其它的組件或外觀主題相互衝突,而若即便發生了,那可能也不會造成顯著的影響。
使用方法
在任何頁面上加入以下的代碼:
[[include :scp-zh-tr:component:croqstyle]]
這個組件是設計給其它的組件所使用的。如果你在其它組件裡使用到的話,請確保將其添加在那個組件的[[iftags]]區塊裡面,這樣你組件的使用者就不會被迫跟著使用Croqstyle了。
相關組件
其它的個人設計組件(也是做出了一些改動):
個人設計主題(對整體外觀做了大幅調整):
CSS修改
合理化大小的腳註
讓有比較多內容的腳註不再會有十萬八千里那麼長,讓你可以真正意義上地去讀它們了。
.hovertip { max-width: 400px; }
等寬字體式編輯/編碼
讓你的編輯文字視窗套用等寬字體,並同時將Fira Code作為所有等寬字體使用的字型,那顯然比原本的還要更加優越。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }
打字機體的背景顏色
為<tt>元素({{text}})添加了淡灰色的背景,讓代碼片段能在文中較為突顯出來。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}
大臉照退散
停用了當你把游標懸浮於某人的頭像上時會顯示放大版圖片的功能,因為那很蠢而且相當煩人,如果真的想要看較大的圖片只需要點一下就好了。
.avatar-hover { display: none !important; }
斷斷續續
所有被包覆在nobreak這個class的div裡面的文字,將會以每個英文字母為標準來做換行。
.nobreak { word-break: break-all; }
代碼著色
我把我終端上的代碼顏色作為變數加了上來。也許在未來的某一天,我會把它換成其他更為廣泛使用的終端主題配色,像是Monokai或者其他的,但現在就是我所使用的個人主題配色,沿襲自Tomorrow Night Eighties。
與此同時,我也添加了.terminal這個class來呈現出一個假的代碼區塊,當你使用[[div class="code terminal"]]並搭背著深色背景時,它看起來就會有點偽終端的樣子。這不會在[[code]]上起作用,因為Wikidot插入了一大堆凸顯用的語法,所以如果你想修改的話也得用上大量的CSS。僅供非[[code]]的代碼片段使用。
一個能能用上述變數對『標準』的Wikidot組件用例作顏色變換的快速工具:連結
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}
除錯模式
在.debug-mode裡面的所有東西都會被框線所包圍。線條的顏色是紅色,但實際上將取決於--debug-colour這個CSS變數。
你也可以在一個元素之中加入div.debug-info.over和div.debug-info.under來標註出除錯區塊 —— 不過你要確保有偽這些標註預留足夠的垂直空間,以避免與上方或下方的東西相互重疊到。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
這是什麼?
這是一個視覺上更加優質的導航欄,可以讓你用在任何系列作的文章裡。
最初為了用在2018年末日競賽裡而由
Croquembouche所創造的,當然,大家也可以自由的去使用它。
使用方法
在任何wiki上:
[[include :scp-wiki:component:earthworm
| first=false | last=false | hub=yes
| previous-url=URL_OF_PREVIOUS | previous-title=TITLE OF PREVIOUS
| next-url=URL_OF_NEXT | next-title=TITLE OF NEXT
| hub-url=URL_OF_HUB | hub-title=TITLE OF HUB
]]
不要拿掉這裡面的任何一個直槓!(|)
你應該會有3篇文章是需要連結過去的:
- 在這個系列裡的前一篇文章。
- 在這個系列裡的下一篇文章。
- 這個系列的中心頁。
前一篇文章
用在這個系列裡,前一篇文章的URL來替換URL_OF_PREVIOUS。舉例來說,http://www.scp-wiki.net/scp-001或是/scp-001。
用那個頁面的名字來替換TITLE OF PREVIOUS。
如果當前的頁面就是這個系列裡的第一頁的話,很明顯你不會有前一篇文章。透過把上面兩個參數的值設定成 / 來留空(像是 previous-url=/),然後把first設定為true。
下一篇文章
用在這個系列裡,下一篇文章的URL來替換URL_OF_NEXT。舉例來說,http://www.scp-wiki.net/scp-003或是/scp-003。
用那個頁面的名字來替換TITLE OF NEXT。
如果當前的頁面就是這個系列裡的最後一頁的話,很明顯你不會有下一篇文章。透過把上面兩個參數的值設定成 / 來留空(像是 next-url=/),然後把last設定為 true。
中心頁
用這個系列中心頁的URL來替換URL_OF_HUB。舉例來說,http://www.scp-wiki.net/scp-series或是/scp-series。
用那個頁面的名字來替換TITLE OF HUB。
如果你的系列當前仍未有中心頁的話,把hub這個參數設置為no。把TITLE OF HUB替換成你想要稱呼這個系列的名字,然後把hub-url設置成 /。如果你之後做好中心頁了,就只要把hub設置回 yes,然後填入URL就好了。
Chrome, ChromeOS:

Firefox, Ubuntu:

Brave, Windows:

想看看有那些頁面使用了Earthworm?拉到頁面的底部,點開「+ 選項」然後再點「反向連結」。