挑戰傳統評分方式：關於自訂評分模版

指南中心 » 挑戰傳統評分方式：關於自訂評分模版

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：員工與角色檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

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

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

作品著作資訊

標題：挑戰傳統評分方式：關於自訂評分模版
作者：Jochoi

本文更改自本人於CN分部發佈的同名文章。

延伸閱讀：
評分佔比條模塊

100%0%

前言1：重要提示

此文章的內容希望鼓勵讀者無須被傳統的評分模塊限制，並為自訂評分模版提供如何實現的流程指導。
但是，很多時候花里胡哨的評分模版實際上既並無必要，亦不能為一篇寫得差的文章加分。

而更重要的是，永不要讓你的精力消耗在自訂評分模版而非你的文章上，永不要讓你的自訂評分模版喧賓奪主。

聲明：使用以下內容需要你自己承擔所帶來的風險。如果你因為使用自訂評分模版而被down、被罵，本人概不負責。

前言2：評分模塊？那是什麼？

評分模塊，相信我們每個人都會熟悉。就是以下這個玩意。

[[module rate]]

評分模塊是wikidot自帶、用於已開放評分的網站的模塊。在不同的wikidot網站，視乎站主的設定，評分可以有以下三種模式：

+，–以及X，也就是SCP基金會使用的模式。
+以及X
五星，也就是RPC管理局使用的模式。

在此篇文章中，我們只談論第一種模式。

不覺得一直都只看著這個排版太過沉悶了嗎？即使有著各版式主題，那也只是更改模塊的顏色而已。是不是很想改一下這個評分模組，讓你的頁面更有活力呢？

第一步：了解評分模塊的結構

想要自訂評分模塊，我們得先來了解一下評分模塊在html內的表達：

+ 打開代碼

我們可以看見，上面評分模塊的構成是這樣的：

div, class 為「page-rate-widget-box」
- span, class 為 "rate-points", 內容為「评分: 」¹
  - span, class 為「number」和「prw54353」, 內容為該頁面分數
- span, class 為「rateup」,「btn」和「btn-default」
  - a, 內容為「+」，游標掃過時會顯示「我喜歡」。實際連結到頁面內的JavaScript JQuery，當被點擊時會進行「+1」的動作
- span, class 為「ratedown」,「btn」和「btn-default」
  - a, 內容為「–」²，游標掃過時會顯示「我不喜歡」。實際連結到頁面內的JavaScript JQuery，當被點擊時會進行「-1」的動作
- span, class 為「cancel」,「btn」和「btn-default」
  - a, 內容為「X」，游標掃過時會顯示「取消我的投票」。實際連結到頁面內的JavaScript JQuery，當被點擊時會進行取消評分的動作

另外，從JQuery代碼裡得知，當頁面自動刷新評分時，class 為「prw54353」的內容會自動更換為 class「prw54354」的內容。

知道了每個div，span 和 a 的 class，對於我們撰寫 CSS 代碼將是非常重要的幫助。

第二步：構思自訂評分模塊的排版，以及預備材料

那麼，了解了評分模塊的結構後，我們就需要開始構思我們所想要自訂評分模塊的排版了。

例1：

這個評分模版好像很好看！³

以下，我們將以例一的內容進行評分模塊的更改，僅作參考之用。如果你想要達到的效果與此不同，請根據實際情況調整。

評分模版分析（從左到右，上到下）：

up按鈕：灰色的向上大拇指圖案
up人數
down按鈕：灰色的向下大拇指圖案
down人數
底部邊框：評分佔率：深灰色up條，淺灰色down條

但是，你所選擇的排版，未必會完全符合SCP基金會的文章評分模塊要求。因此，我們要作出少許修改：

up按鈕：灰色的向上大拇指圖案
up人數
down按鈕：灰色的向下大拇指圖案
down人數
取消按鈕
底部邊框：評分佔率：藍色up條，淺灰色down條

嗯，這樣好多了。

預備材料

接下來，我們需要準備材料。視乎你想要如何實現該評分模版，你可能會需要準備一張或多張圖片。不過我的建議是，儘量使用越少圖片越好，能用文字代替就不要用圖片。這是因為加載圖片需要時間，加載大量圖片也就需要大量時間，這會影響讀者的觀感。

例1a,1b：寬30px 高30px

要實現例1的效果，其實只需要預備其中一個方向的大拇指的圖片（另一張圖使用該圖片的180度旋轉），但是要使用該辦法會需要更繁複的代碼，故此我預備了兩張圖片。

第三步：使用代碼來實現該模版

碼代碼前需知

首先，Wikidot本身並不支持直接更改評分模塊內容。然後，如果想要使用Wikidot代碼重製評分模塊，Wikidot會將 a 內的JQuery代碼過濾，使得該代碼並不能起效。因此，我們只能夠透過將評分模塊以 div 包含並標上 class 來實現更改獨立評分模塊。

例1c：

[[div class="sample-one-c"]]
[[module rate]]
[[/div]]

備註：這個class不應與任何已存在的class名字重複。

真正碼代碼

將各按鈕分割成獨立部份

因為在我們想要達到的效果中，up按鈕和down按鈕之間、down按鈕和取消按鈕之間都有字，所以我們必須將三個按鈕獨立分開，並定義各自的class。

例1d：

[[div class="upbtn"]] [!-- 此處我們想要只顯示up按鈕 --]
[[module rate]]
[[/div]]

[[div class="downbtn"]] [!-- 此處我們想要只顯示down按鈕 --]
[[module rate]]
[[/div]]

[[div class="cancelbtn"]] [!-- 此處我們想要只顯示取消按鈕 --]
[[module rate]]
[[/div]]

各評分模塊移除所有一般效果及設為行內元素

例1f：

[[module css]]
/* 選擇所有帶「upbtn」、「downbtn」或「cancelbtn」class 的元素，並設為行內元素 */
.upbtn, 
.downbtn,
.cancelbtn {
    display: inline-block;
}
/* 選擇所有帶「upbtn」、「downbtn」或「cancelbtn」class 的元素內的 "page-rate-widget-box" */
.upbtn .page-rate-widget-box,
.downbtn .page-rate-widget-box,
.cancelbtn .page-rate-widget-box {
    display: inline-block;
    /* 將多個評分模塊設為行內元素 */
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    /* 將評分模塊的所有邊框、陰影、邊界分隔移除，並強制使用該屬性 */
}
[[/module]]

定義各按鈕的CSS

定義按鈕的顯示

例1g-1：

[[module css]]
/* 前略 */
.upbtn *,
.downbtn *,
.cancelbtn * {
    display: none;
}
.upbtn .rateup,
.downbtn .ratedown,
.cancelbtn .cancel {
    display: inline-block !important;
}
[[/module]]

首先，我們想要將upbtn內的評分模塊除up按鈕外清除；downbtn內的評分模塊除down按鈕外清除；cancelbtn內的評分模塊除取消按鈕外清除。其中一個做法為將所有元素設為不顯示，然後另外將rateup，ratedown，cancel設為顯示。

採用此方法而非單獨選擇不想顯示的元素來設定不顯示的原因是，後面我們自訂各按鈕的時候亦會需要選擇各按鈕的元素來進行定義，所以此方法能夠更省略代碼量。若你不想這樣做，以下是單獨選擇元素來設定不顯示的代碼：

+ 打開代碼

定義按鈕的顯示內容

接下來我們需要定義我們按鈕的顯示內容。之前我們準備了例1a,1b的圖片，網址為
http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/up-gray.png
http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/down-gray.png

例1h：

[[module css]]
/* 前略 */
/* 需要定義上一步最後所選擇的三個元素的更多屬性 */
.upbtn .rateup,
.downbtn .ratedown,
.cancelbtn .cancel {
    display: inline-block;
    border: 0;
    background: transparent !important;
    /* 將邊框、背景屬性去掉 */
    border-radius: 5px;
    width: 30px;
    height: 30px;
    text-align: center;
    /* 設定圓角邊框半徑、寬和高、文字左右排列 */
}
/* 定義評分連接的屬性 */
.upbtn .rateup a,
.downbtn .ratedown a,
.cancelbtn .cancel a {
    display: inline-block;
    padding: 0;
    margin: 0;
    /* 把邊界本身、內部文字與邊界的距離去掉 */
    border-radius: 5px;
    width: 30px;
    height: 30px;
    vertical-align: text-top;
    /* 設定圓角邊框半徑、寬和高、文字上下排列 */
}
.upbtn .rateup a {
    font-size: 0;
    /* 將 "+" 字設為0大小。*/
    background: url(http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/up-gray.png) no-repeat !important;
    /* 設定背景圖為向上的大拇指 */
}
.downbtn .ratedown a {
    font-size: 0;
    /* 將 "–" 字設為0大小。*/
    background: url(http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/down-gray.png) no-repeat !important;
    /* 設定背景圖為向下的大拇指 */
}
.cancelbtn .cancel a {
    font-weight: bold;
    font-size: 25px;
    color: #aaa !important;
    /* 設定 "X" 字為粗體，25px以及灰色 */
}
/* 定義游標於按鈕上懸浮時的屬性 */
.upbtn .rateup a:hover,
.downbtn .ratedown a:hover,
.cancelbtn .cancel a:hover {
    border-radius: 5px;
    width: 30px;
    height: 30px;
    background-color: transparent !important;
    /* 設定游標於按鈕上懸浮時的圓角邊框半徑、寬和高、背景透明 */
}
[[/module]]

定義游標於按鈕上懸浮的效果

沒有動畫的按鈕怎麼能算是完整呢？所以，我們需要設置游標於按鈕上懸浮的效果。
本例使用濾鏡來改變按鈕顏色，可以參考此處。

例1i：

[[module css]]
/* 前略 */
.upbtn .rateup.btn a:hover,
.downbtn .ratedown.btn a:hover {
    -webkit-filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
    filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
    /* 設定游標於up,down按鈕上懸浮時變成藍色 */
}
.cancelbtn .cancel.btn a:hover {
    -webkit-filter: invert(40%) grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
    filter: grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
    /* 設定游標於取消按鈕上懸浮時變成紅色 */
}
[[/module]]

設置up、down人數以及底部評分佔比條

此時，各評分按鈕已經完成，但我們想要在按鈕旁顯示up、down人數，以及在整個模版的底部上顯示評分佔比。在這個階段，由於需要實時更新佔比條，單純的CSS不能滿足我們的需求。此處可以參考我所做的評分佔比條模式，但是要作出一些改動，將佔比條上的文字去掉和調整高度模仿邊框。

計算up、down的公式如下（以ListPages模塊實現）：

Up 人數：[[#expr (%%rating_votes%%+%%rating%%)/2]] = 25
Down 人數：[[#expr (%%rating_votes%%-%%rating%%)/2]] = 0

對排版作出調整後，我們得到如下代碼：
例1j：

[[div class="ytp-rate"]] [!-- 此div用作佔比條的載體 --]
[[div class="upbtn"]]
[[module rate]]
[[/div]]
[[module ListPages separate="no" range="."]]
[[size 13px]][[#expr (%%rating_votes%%+%%rating%%)/2]][[/size]]
[[/module]]
[[div class="downbtn"]]
[[module rate]]
[[/div]]
[[module ListPages separate="no" range="."]]
[[size 13px]][[#expr (%%rating_votes%%-%%rating%%)/2]][[/size]]
[[/module]]
[[div class="cancelbtn"]]
[[module rate]]
[[/div]]
[[include :scp-wiki-cn:ratemod:sentimentbar-arguments width=100% | theme=ytp-like-border]]
[[/div]]

另外，由於ListPages模塊的某些特性，我們需要將其設為行內元素。同時，ytp-rate這個div本身也需要設為行內元素。再者，我們需要將ytp-rate內部的元素上下置中。我們可以將這幾個定義與先前的行內元素定義放在一起：
例1k：

[[module css]]
.upbtn, 
.downbtn,
.cancelbtn,
.ytp-rate,
.ytp-rate .list-pages-box,
.ytp-rate .list-pages-box p {
    display:inline-block !important;
    vertical-align: middle;
}
/* 後略 */
[[/module]]

然後是佔比條本身的CSS：
例1l：

[[module css]]
.ytp-like-border {
    display:block;
    /* 確保佔比條於自己單獨一行上 */
    height: 2px !important;
    /* 高度設為2像素，模仿邊框 */
}
.ytp-like-border .neutralbar {
    height: 2px !important;
    background-color: #ccc;
    /* 中立條顏色 */
    font-size: 0;
    /* 中立條文字調0大小 */
}
.ytp-like-border .downbar-base {
    height: 2px !important;
    background-color: #ccc;
    /* 差評條顏色 */
}
.ytp-like-border .downbar-text {
    height: 2px !important;
    font-size:0;
    /* 差評條文字調0大小 */
    padding: 0 !important;
    /* 去掉文字內襯厚度 */
}
.ytp-like-border .upbar {
    height: 2px !important;
    background-color: #167ac6;
    /* 好評條顏色 */
    font-size: 0;
    /* 好評條文字調0大小 */
    padding: 0 !important;
    /* 去掉文字內襯厚度 */
}
.ytp-rate > .cancelbtn + .list-pages-box,
.ytp-rate > .list-pages-box + .list-pages-box {
    width: 100%;
    /* 因為ListPages模塊的結構問題，我們需要手動將最後佔比條的兩個list-pages-box寬度設為上層元素的100% */
}
[[/module]]

將所有代碼整合

這麼多的代碼，我們需要將其整合，方便自己使用。

例1m：

+ 此代碼為實際評分模版

+ 此代碼放置於內容任何一處

– 此代碼放置於內容任何一處：

[[module css]]
.upbtn, 
.downbtn,
.cancelbtn,
.ytp-rate,
.ytp-rate .list-pages-box,
.ytp-rate .list-pages-box p {
    display:inline-block !important;
    vertical-align: middle;
}
.upbtn .page-rate-widget-box,
.downbtn .page-rate-widget-box,
.cancelbtn .page-rate-widget-box {
    display: inline-block;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.upbtn *,
.downbtn *,
.cancelbtn * {
    display: none;
}
.upbtn .rateup,
.downbtn .ratedown,
.cancelbtn .cancel {
    display: inline-block;
    border: 0;
    background: transparent !important;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.upbtn .rateup a,
.downbtn .ratedown a,
.cancelbtn .cancel a {
    display: inline-block;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    vertical-align: text-top;
}
.upbtn .rateup a {
    font-size: 0;
    background: url(http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/up-gray.png) no-repeat !important;
}
.downbtn .ratedown a {
    font-size: 0;
    background: url(http://scp-wiki-cn.wikidot.com/local--files/ratemod:ytp-like-style/down-gray.png) no-repeat !important;
}
.cancelbtn .cancel a {
    font-weight: bold;
    font-size: 25px;
    color: #aaa !important;
}
.upbtn .rateup a:hover,
.downbtn .ratedown a:hover,
.cancelbtn .cancel a:hover {
    border-radius: 5px;
    width: 30px;
    height: 30px;
    background-color: transparent !important;
}
.upbtn .rateup.btn a:hover,
.downbtn .ratedown.btn a:hover {
    -webkit-filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
    filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
}
.cancelbtn .cancel.btn a:hover {
    -webkit-filter: invert(40%) grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
    filter: grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}
.ytp-like-border {
    display:block;
    height: 2px !important;
}
.ytp-like-border .neutralbar {
    height: 2px !important;
    background-color: #ccc;
    font-size: 0;
}
.ytp-like-border .downbar-base {
    height: 2px !important;
    background-color: #ccc;
}
.ytp-like-border .downbar-text {
    height: 2px !important;
    font-size:0;
    padding: 0 !important;
}
.ytp-like-border .upbar {
    height: 2px !important;
    background-color: #167ac6;
    font-size: 0;
    padding: 0 !important;
}
.ytp-rate > .cancelbtn + .list-pages-box,
.ytp-rate > .list-pages-box + .list-pages-box {
    width: 100%;
}
[[/module]]

實際效果

碼了這麼多代碼，我們是時候看看實際效果了。

100%0%

評分後是不能即時看到更新的，請重新載入頁面！

第四步：將該評分模版用於你的文章內

恭喜，你已經完成了你自製自訂評分模版的過程了！現在，你需要將其用於你的文章內。

+ 應用例子

如需使用，此為該自訂評分模版引用代碼

[[include :scp-zh-tr:ratemod:ytp-like]]

Encore：更多代碼，實現更強大的效果

+ 我們是泰坦。- 強大有力的泰坦。

　+ 評分旋鈕　- 評分旋鈕

實際效果中，評分旋鈕應於頁面右上角。

部份靈感與代碼來自 Sekai_s 為CN分部 LinkAge中心頁所做的頁面菜單旋鈕。

- Included page "sentimentbar:quartercircle" does not exist (create it now)
- 評分: +25+–x
- 評分: +25+–x
- 評分: +25+–x
- 評分: +25+–x

- _
　　+ 打開評分旋鈕模版　　- 收起評分旋鈕模版

[[div class="rateWrap"]]
[[ul]]
[[li]]
[[div_ class="fa fa-angle-double-left"]]

[[/div]]
[[ul]]
[[li]]
[[div class="ratedit sentiment"]]
[[include :scp-wiki-cn:sentimentbar:quartercircle uper=(%%rating_votes%%+%%rating%%)/(2*%%rating_votes%%) | dper=(%%rating_votes%%-%%rating%%)/(2*%%rating_votes%%) | theme=spinout-sentiment]]
[[/div]]
[[/li]]
[[li]]
[[div class="ratedit spinout-pts"]]
[[module rate]]
[[/div]]
[[/li]]
[[li]]
[[div class="ratedit spinout-up"]]
[[module rate]]
[[/div]]
[[/li]]
[[li]]
[[div class="ratedit spinout-down"]]
[[module rate]]
[[/div]]
[[/li]]
[[li]]
[[div class="ratedit spinout-cancel"]]
[[module rate]]
[[/div]]
[[/li]]
[[/ul]]
[[/li]]
[[/ul]]
[[/div]]

　　+ 打開CSS代碼　　- 收起CSS代碼

[[module css]]
/* Spin Out Rate */
.rateWrap {
  position: fixed;
  right: 0;
  top: 0;
  width: 6em;
  height: 6em;
  border-radius: 0 0 0 100%;
  overflow: hidden;
  z-index: 9;
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
  -ms-transition-delay: .8s;
  -o-transition-delay: .8s;
  transition-delay: .8s;
  -webkit-transition-property: width, height;
  -moz-transition-property: width, height;
  -ms-transition-property: width, height;
  -o-transition-property: width, height;
  transition-property: width, height;
}
@media (min-width: 1041px) {
.rateWrap {
  right: calc(50vw - 520px);
}
}
.rateWrap:hover {
  width: 24em;
  height: 24em;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -ms-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0;
}
.rateWrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
}
.rateWrap ul li {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 0 0 100%;
}
.rateWrap ul li ul li {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 100% 0 0 0;
}
.rateWrap ul li .ratedit {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.rateWrap > ul > li {
  width: 6em;
  height: 6em;
  background-color: #404040;
  color: #fff;
  cursor: pointer;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  -webkit-transition-delay: .5s;
  -moz-transition-delay: .5s;
  -ms-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}
.rateWrap:hover > ul > li {
  width: 11em;
  height: 11em;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -ms-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0;
}
.rateWrap > ul > li > div.fa {
  position: absolute;
  right: 0;
  top: 0;
  width: 1.2em;
  height: 1.2em;
  font-size: 3em;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  -webkit-transition-delay: .5s;
  -moz-transition-delay: .5s;
  -ms-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}
.rateWrap:hover > ul > li > div.fa {
  font-size: 5.5em;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -ms-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0;
}
.rateWrap > ul ul {
  z-index: -1;
}
.rateWrap > ul ul li {
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.rateWrap:hover > ul ul li {
  -webkit-transition-delay: .3s;
  -moz-transition-delay: .3s;
  -ms-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s;
}
.rateWrap > ul > li > ul > li:nth-of-type(1) {
  width: 24em;
  height: 24em;
  top: -24em;
  background-color: #a3a3a7;
  z-index: 8;
}
.rateWrap > ul > li > ul > li:nth-of-type(1) > a {
  border-color: #a3a3a7;
}
.rateWrap:hover > ul > li > ul > li:nth-of-type(1) {
  -webkit-transform: rotate(-18deg);
  -moz-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  -o-transform: rotate(-18deg);
  transform: rotate(-18deg);
}
.rateWrap > ul > li > ul > li:nth-of-type(2) {
  width: 21.5em;
  height: 21.5em;
  top: -21.5em;
  background-color: #b4b4b8;
  z-index: 7;
}
.rateWrap > ul > li > ul > li:nth-of-type(2) > a {
  border-color: #b4b4b8;
}
.rateWrap:hover > ul > li > ul > li:nth-of-type(2) {
  -webkit-transform: rotate(-36deg);
  -moz-transform: rotate(-36deg);
  -ms-transform: rotate(-36deg);
  -o-transform: rotate(-36deg);
  transform: rotate(-36deg);
}
.rateWrap > ul > li > ul > li:nth-of-type(3) {
  width: 19.5em;
  height: 19.5em;
  top: -19.5em;
  background-color: #c5c5c9;
  z-index: 6;
}
.rateWrap > ul > li > ul > li:nth-of-type(3) > a {
  border-color: #c5c5c9;
}
.rateWrap:hover > ul > li > ul > li:nth-of-type(3) {
  -webkit-transform: rotate(-54deg);
  -moz-transform: rotate(-54deg);
  -ms-transform: rotate(-54deg);
  -o-transform: rotate(-54deg);
  transform: rotate(-54deg);
}
.rateWrap > ul > li > ul > li:nth-of-type(4) {
  width: 18em;
  height: 18em;
  top: -18em;
  background-color: #d6d6da;
  z-index: 5;
}
.rateWrap:hover > ul > li > ul > li:nth-of-type(4) {
  -webkit-transform: rotate(-72deg);
  -moz-transform: rotate(-72deg);
  -ms-transform: rotate(-72deg);
  -o-transform: rotate(-72deg);
  transform: rotate(-72deg);
}
.rateWrap > ul > li > ul > li:nth-of-type(4) > a {
  border-color: #d6d6da;
}
.rateWrap > ul > li > ul > li:nth-of-type(5) {
  width: 17em;
  height: 17em;
  top: -17em;
  background-color: #e7e7eb;
  z-index: 4;
}
.rateWrap > ul > li > ul > li:nth-of-type(5) a {
  border-color: #e7e7eb;
}
.rateWrap:hover > ul > li > ul > li:nth-of-type(5) {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.rateWrap > ul ul a:hover {
  border-color: var(--dark-color) !important;
}
.rateWrap ul li .ratedit .page-rate-widget-box {
    display: block;
    position: absolute;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    font-size: 1.4em;
}
.rateWrap .ratedit .page-rate-widget-box * {
    display: none;
}
.rateWrap .ratedit.list-pages-box {
    height: 100%;
}
.rateWrap:hover ul li .ratedit.sentiment {
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.rateWrap .ratedit.spinout-pts .rate-points {
    display: inline-block !important;
    position: absolute;
    border: 0;
    left: 0.5em;
    bottom: 1em;
    background: transparent !important;
}
.rateWrap .ratedit.spinout-pts .rate-points .number { display: inline-block;}
.rateWrap .ratedit.spinout-up .rateup,
.rateWrap .ratedit.spinout-down .ratedown,
.rateWrap .ratedit.spinout-cancel .cancel {
    display: inline-block !important;
    position: absolute;
    border: 0;
    font-weight: bold;
    width: 90%;
    height: 90%;
    background: transparent !important;
}
.rateWrap .ratedit.spinout-up .rateup,
.rateWrap .ratedit.spinout-down .ratedown {
    left: 0.7em;
    bottom: 0.2em;
}
.rateWrap .ratedit.spinout-cancel .cancel {
    left: 0;
    bottom: 0;
}
.rateWrap .ratedit.spinout-up .rateup a,
.rateWrap .ratedit.spinout-down .ratedown a,
.rateWrap .ratedit.spinout-cancel .cancel a {
    display: inline-block !important;
    position: absolute;
    border: 0;
    width: 100%;
    height: 20%;
    left: 0;
    bottom: 0;
    color: #FFF !important;
    font-size: 30px;
    text-align: left;
    background: transparent !important;
    padding-left: .8em;
    border-radius: 100% 0 0 0;
    text-decoration: none;
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -ms-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
}
.rateWrap .ratedit.spinout-up .rateup a:hover,
.rateWrap .ratedit.spinout-down .ratedown a:hover {
    -webkit-filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
    filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
}
.rateWrap .ratedit.spinout-cancel .cancel a:hover {
    -webkit-filter: invert(40%) grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
    filter: grayscale(100%) brightness(60%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}

.rateWrap .ratedit .list-pages-box {
    display: inline-block !important;
    position: relative;
    border: 0;
    background: transparent !important;
    text-align: center;
}
[[/module]]

如需使用，此為評分旋鈕引用代碼

[[include :scp-zh-tr:ratemod:spinout]]

- _
　+ 或者，你是想要帶著作資訊的旋鈕？　- 或者，你是想要帶著作資訊的旋鈕？
- - Included page "ratemod:sbar-quartcircle" does not exist (create it now)
  - 評分: +25+–x
  - 評分: +25+–x
  - 評分: +25+–x
  - 評分: +25+–x
作品著作資訊

資料

更多資訊

更多資訊

更多資料

評分: +25+–x

如需使用，此為著作資訊評分旋鈕引用代碼

[[include :scp-zh-tr:ratemod:spinout-info:start]]
資料
[[include :scp-zh-tr:info:more]]
更多資料
[[include :scp-zh-tr:info:end]]

_info 原創心得

page revision: 12, 最後編輯於: 12 Dec 2020 17:11

編輯評分 (+25) 標籤討論 (0) 歷程紀錄檔案打印網站工具 + 選項

SCP基金會

控制，收容，保護

作品著作資訊

前言1：重要提示

前言2：評分模塊？那是什麼？

第一步：了解評分模塊的結構

第二步：構思自訂評分模塊的排版，以及預備材料

例1：

評分模版分析（從左到右，上到下）：

預備材料

第三步：使用代碼來實現該模版

碼代碼前需知

真正碼代碼

將各按鈕分割成獨立部份

各評分模塊移除所有一般效果及設為行內元素

定義各按鈕的CSS

定義按鈕的顯示

定義按鈕的顯示內容

定義游標於按鈕上懸浮的效果

設置up、down人數以及底部評分佔比條

將所有代碼整合

實際效果

第四步：將該評分模版用於你的文章內

Encore：更多代碼，實現更強大的效果

作品著作資訊

更多資訊