BetterFootnotes

您正在查詢的標題為:關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:人物檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您現在最好給我停下來

本頁面內包含基金會維基內部使用的模板

嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面


當然,所謂的「更好」是個主觀概念,但所見即所得。

這個組件仿造了SCP-4485裡面所能看到的自定義註解。

範例:

文字.註解裡的文字。
文字.註解裡的文字。和更多的文字。
文字.註解裡的文字。。更多文字。
沒有註解的文字。

如何使用:

請在文章裡面添加以下的代碼,一次就好:

[[include :scp-zh-tr:component:betterfootnotes]]

每當你要使用到註解的時候,請複製以下的架構:

[[span class="fnnum"]].[[/span]][[span class="fncon"]]註解裡的文字。[[/span]]

備註:

- fnnum這個span class裡面包含有一個英文句點,這是因為它需要至少一個非空格字符才能夠正常解析。

- 你可以透過以下的方式來自定義註解上標數字的顏色:

[[module CSS]]
:root {
--fnColor: 在這裡輸入顏色;
}
[[/module]]

沒有修改的話預設顏色是#E6283C.

- 在底下不會有註解列表。

- 可以跟Sigma-9一起使用,但可能不會那麼的完美。

- 特別感謝WoedenazWoedenaz他那無可挑剔的設計感,以及Placeholder McDPlaceholder McD騷擾鼓勵著我完成這份作品。


原始碼:

:root {
    --posX: calc(50% - 358px - 12rem);
    --fnTransition: 0.3s;
    --fnLinger: 0.15s;
    --fnInteract: calc(var(--fnTransition) + var(--fnLinger));
}
 
/*--- Footnote Auto-counter --*/
#main-content {
    counter-reset: megacount;
}
 
/*--- Footnote Superscript Number --*/
.fnnum {
    display: inline-block;
    width: max-content;
    text-indent: -0.475ex;
    vertical-align: super;
    line-height: 80%;
    word-break: initial;
    text-decoration: none;
    font-weight: bold;
    font-style: initial;
    color: transparent;
    position: relative;
    font-size: 80%;
    padding: .15em .05em;
    margin-right: -0.25em;
    counter-increment: megacount;
    -webkit-user-select: none;
    user-select: none;
}
.fnnum::after {
    content: "" counter(megacount);
    color: var(--fnColor, #E6283C);
}
.fnnum:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--fnColor, #E6283C);
}
.fnnum:hover::after { color: white; }
 
/*--- Footnote Content Wrapper --*/
.fncon {
    position: absolute;
    right: calc(var(--posX) + 80px);
    line-height: 1.25;
    padding: 0.8125rem;
    width: 12.5rem;
    box-sizing: border-box;
    background: white;
    border: .125rem solid black;
    font-size: .9125rem;
    font-weight: initial;
    font-style: normal;
    text-align: initial;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    transition:
        opacity 0.15s linear var(--fnLinger),
        right var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger),
        visibility 0.01s linear var(--fnInteract);
}
.fnnum:hover + .fncon, .fncon:hover {
    opacity: 1;
    z-index: 10;
    right: var(--posX);
    visibility: visible;
    transition:
        opacity 0.15s linear,
        right var(--fnTransition) cubic-bezier(.08,.72,.5,.94);
}
 
.fncon::before {
    position: absolute;
    top: 0; left: 0;
    transform: translateX(-52%) translateY(-55%) scale(1.15);
    background-color: var(--fnColor, #E6283C);
    color: white;
    content: counter(megacount);
    font-size: initial;
    font-weight: bold;
    font-style: initial;
    padding: 0.18rem 0.32em 0.08rem;
}
 
/*--- Mobile Query --*/
@media only screen and (max-width: 1279px) {
    .fncon {
        position: fixed;
        bottom: 1.5rem;
        left: calc(15% - 50px);
        width: 70%;
        transition:
            opacity 0.15s linear var(--fnLinger),
            left var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger),
            visibility 0.01s linear var(--fnInteract);
    }
    .fnnum:hover + .fncon, .fncon:hover {
        left: 15%;
        transition:
            opacity 0.15s linear,
            left var(--fnTransition) cubic-bezier(.08,.72,.5,.94);
    }
}
除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License