使用者:Bbrabbit/萌娘百科的黑科技
高度機密
嚴禁未經授權的人員進行訪問
所有檔案均由模因抹殺藥物保護
歡迎,已經得到授權的人員,請查閱以下檔案
萌百秘制歌詞黑科技
起始-手動對齊篇
在音樂區發展初期,沒有專用的歌詞模板。偉大的編輯者們(包括我)都是使用Template:cj,poem標籤以及wikitable對齊歌詞的。這種方法耗時耗力,完成一份完整的著色歌詞大概需要1小時而且做完後感覺整個人都智障了。這種歌詞寫法如下:
{|width = 330px |<poem>{{cj|#336600|少し濡れた君の髪が 微笑み舞うように踊って}}{{cj|#36FF00| 旋毛風(つむじかぜ)が夏の匂いを もう連れてきそうになって }} </poem> |width = 330px|<poem>{{cj|#336600|虽然你的头发稍稍被汗水沾湿 你仍然在微笑中翩翩起舞 }}{{cj|#36FF00| 旋风已经带来了 夏天的气味 }} </poem> |}
效果大概就是這樣
少し濡れた君の髪が |
虽然你的头发稍稍被汗水沾湿 |
很明顯,這種方法寫歌詞如果要換顏色就必須用無數個cj模板,而且第一次寫好後往往有對齊的問題。如果在原文和譯文中有任何一個地方多了一個回車鍵,整個歌詞就不對齊了。所以這種方法對於新人極不友好,除非對手寫格式情有獨鍾,否則不推薦這種方法。
進化!歌詞模板及模塊
由於這樣寫歌詞速度非常慢,有一些天才編輯和程式設計師就開始琢磨用模板和模塊幫助人們完成對齊這個麻煩的事情。於是Template:Lyrics就誕生了。這個模板讓編輯們不用再考慮對齊和顏色模板的問題,只需要將參數填入模板即可使用。但是要設置css樣式就有點費勁了。比如上面那個歌詞使用模板就可以簡化為
{{Lyrics |lb-color1=#336600 |rb-color1=#336600 |lb-text1=少し濡れた君の髪が 微笑み舞うように踊って |rb-text1=虽然你的头发稍稍被汗水沾湿 你仍然在微笑中翩翩起舞 |lb-color2=#36FF00 |rb-color2=#36FF00 |lb-text2=旋毛風(つむじかぜ)が夏の匂いを もう連れてきそうになって |rb-text2=旋风已经带来了 夏天的气味 }}
本段落中所使用的歌詞,其著作權屬於原著作權人,僅以介紹為目的引用。
少し濡れた君の髪が 微笑み舞うように踊って
雖然你的頭髮稍稍被汗水沾濕 你仍然在微笑中翩翩起舞
旋毛風(つむじかぜ)が夏の匂いを もう連れてきそうになって
旋風已經帶來了 夏天的氣味
而Template:LyricsKai和Module:Lyrics則是萌百實裝了lua腳本後的產物。顯示效果差不多,可以直接調用模塊或者調用封裝了模塊的模板。 模塊調用:
{{#invoke:Lyrics|lyrics |lstyle=color:#336600 |rstyle=color:#336600 |original=少し濡れた君の髪が 微笑み舞うように踊って |translate=虽然你的头发稍稍被汗水沾湿 你仍然在微笑中翩翩起舞 }} {{#invoke:Lyrics|lyrics |lstyle=color:#36FF00 |rstyle=color:#36FF00 |original=旋毛風(つむじかぜ)が夏の匂いを もう連れてきそうになって |translate=旋风已经带来了 夏天的气味 }}本段落中所使用的歌詞,其著作權屬於原著作權人,僅以介紹為目的引用。
模板調用:
{{LyricsKai|lyrics |lstyle=color:#336600 |rstyle=color:#336600 |original=少し濡れた君の髪が 微笑み舞うように踊って |translated=虽然你的头发稍稍被汗水沾湿 你仍然在微笑中翩翩起舞 }} {{LyricsKai|lyrics |lstyle=color:#36FF00 |rstyle=color:#36FF00 |original=旋毛風(つむじかぜ)が夏の匂いを もう連れてきそうになって |translated=旋风已经带来了 夏天的气味 }}本段落中所使用的歌詞,其著作權屬於原著作權人,僅以介紹為目的引用。
看起來好像沒有Lyrics好用,但能夠更方便的修改樣式,所以在不同的情況下請靈活選用不同模板。
究極的歌詞裝飾
在解決了對齊的問題之後,閒不下來的一些程式設計師開始琢磨怎麼給歌詞加特效,於是一些奇怪的歌詞裝飾模板就誕生了。
Template:Gradient Text
Gradient Text模板是一個可以讓歌詞漸變的模板,現在廣泛用在多人合唱時需要同時顯示兩種顏色的歌詞上。不過人多就不要用這個了,會讓人看瞎掉
{{Gradient_Text|#3366ff,#993300|九七(きゅうじゅうなな)の希望(ひかり) 力よ いつまでも どこまでも }}
九七(きゅうじゅうなな)の希望(ひかり) 力よ いつまでも どこまでも
Template:交叉顏色和Template:交叉顏色三
這兩個模板用於在一行字之中插入兩種或三種顏色,這個模板並不專用於歌詞,但可以很方便地在多人合唱的歌曲中插入不同的顏色。
{{交叉颜色|c1=rgb(51,153,102)|c2=rgb(51,102,255)|くるくると形を変える 雲に飛び乗って 少しだけお休みしたい |こんな気持は多分あのコ達も一緒ね }}
くるくると形を變える 雲に飛び乘って 少しだけお休みしたい こんな氣持は多分あのコ達も一緒ね 交叉顏色三使用方法類似,只是多了一種顏色。
Widget:Moving words
這個Widget可以給文字加一些十分炫酷的特效,典型實例:Honey²。它定義了一系列class,只需要在寫的文字上加上這個class就能使用。
{{#Widget:Moving words}} <div class="loader" style="color:#CCFFFF;font-size:20px><span class="span2">Moving words</span></div>
等我發現了什麼好玩的再補充
萌百秘制詞條砲黑科技
吃我邪王真眼啦!
相信大部分瀏覽萌百的人都會認識以存在感稀薄著稱的阿卡林,因此也就有了一個阿卡林模板Template:阿卡林,用來抹除詞條的存在感咦這個詞條怎麼什麼都沒有,一定是錯誤創建了吧。效果就是你正在看到的這段文字的樣子。你可以點擊邪王真眼的大小來調整這段文字的存在感。 用法
{{阿卡林|opacity=0.5}}
opacity值可在0-1之間調整。
你造嗎頁面可以橫過來
萌娘百科有一個很神奇的widget,可以讓你想要旋轉的文字橫過來以傷害大家的脖子。你可以點擊這個段落下方的按鈕來讓這段文字轉來轉去。
{{#Widget:OhMyNeck}}<div id="OhMyNeck" style="margin:1em;"> 你想横过来的字 </div> <div id="HelpMyNeck" style="display:none;"> <!------如果不想给别人拯救脖子的机会这两行可以不用加(--------> </div>
製造模糊效果
由於這個widget效果過於顯著,請不要將它用在除視覺模糊以外的頁面以免造成他人不適
這個widget(Widget:視覺模糊)可以讓整個網頁變得模糊,由於效果過於顯著且直接作用於<body>故無法在這裡查看。請移步至視覺模糊詞條查看效果。
萌百秘制詞條內容黑科技
來自薛丁格的隨機圖片
大名鼎鼎的薛丁格和他的貓應該每個人都聽說過,但薛丁格的理論還能有一些其他用處比如胖次。Widget:Randompic可以幫你製造一些「在點開前不知道狀態的」圖片效果。
現在你能不能看到透視版友利奈緒呢? |
---|
在微件Randompic發生錯誤: Unable to load template 'wiki:Randompic'
|
用法如下
{{#Widget:Randompic|pic1=友利奈绪侧面正常.jpg|pic2=友利奈绪侧面内衣.jpg}}
來個進度條吧
使用Template:Process可以生成一個不會動的進度條,用來提示施工進度然而並沒有什麼卵用。 當前頁面施工百分比:
{{Process|process=60}}
隱藏的圖片
有沒有見過把滑鼠放上去和拿下來時顯示不同的圖片的網頁呢?Template:PicHover就可以幫助實現這個功能。 下面看看效果
{{PicHover|pic=友利奈绪侧面正常.jpg|hover=友利奈绪侧面内衣.jpg|width=355px|height=500px}}
改變一下文字的樣式吧
Template:Font可以設置各種文字的樣式。 可以選用全部選項。 <-本示例來自Template:Font/doc
{{Font|title=就像这样|bgcolor=#f9f9ef|color=#5a7aad|shadowcolor=blue|font=Simhei|size=24px|可以选用全部选项。}}
給滑鼠加上顏色
此模板僅為娛樂使用,請勿濫用!
有沒有注意到這個頁面的滑鼠有一些彩色圓圈?只要將Template:Mouse-ripple模板放在條目開頭你的用戶頁也可以這麼酷炫!
當你不想讓一些內容也帶上這個特效,可以在內容前後用<div class="noripple">内容...</div>包裹。
來點開門特效!
只顯示一張圖片太乏味?給圖片裝扇門,給用戶一個驚喜!使用Template:Sliding_Doors就能做到
- 由於該模板和Mouse-ripple不兼容,無法在本頁面展示
{{Sliding Doors |width=320px |content=<center>[[File:58984528 p1.png|300px]]</center> }}