倡導實事求是,拒絕大勢所趨。
倡導多方打聽,拒絕以訛傳訛。
倡導客觀評價,拒絕主觀偏見。
倡導就事論事,拒絕強行站隊。
123456
(根據修訂版本號查網頁)、特殊:差異/123456
/123457
(查詢前後版本差異)、特殊:鏈入頁面/萌百娘
(查看頁面使用概況)、特殊:前綴索引/萌百娘
(查看子頁面列表)mailto:
連結,後者會暴露你的電郵真實地址,避免捲入垃圾郵件的漩渦。<img src="" alt="" style=""/>
你可以任意導入頁面中的內容
{{導入頁面地址}}
導入頁面之前要注意以下事項:
:
前綴,例如User:李皇諦/sandbox/Import
中的{{:Warma}}
。<includeonly>僅限嵌入內容</includeonly> <noinclude>僅限頁面本體查看內容</noinclude>
你能且只能在同一個網頁使用內聯樣式,這樣你就不需要額外導入其他的CSS樣式,不過要注意的是它不能應用多重樣式,比如偽元素(::before)和偽類(:hover)。
<div style="property:value;">
如果你需要應用複雜的CSS層疊樣式表,你可以在可編輯的命名空間中添加樣式表,添加樣式表之前請將頁面內容類型改為純CSS。
在頁面左邊點擊“頁面信息”之後,找到“頁面內容類型”右邊的“更改”,將其修改為純CSS。 在你創建的頁面右邊加上文件類型為.css即可,例如User:李皇諦/沃瑪.css
此時在對應的層疊樣式表頁面編輯就可以自由編寫複雜的樣式表。
selector {declaration1; declaration2; ... declarationN } HTMLTags ChildrenHTMLTags {property:value;} .class {property:value;} #id {property:value;} #id:ElementState {property:value;} [Property] {property:value;}
活用樣式表可以點綴你的用戶頁使其檔次更上一層樓,不過要注意的是,過多的CSS樣式會導致一些性能不足的設備加載吃力。
在你完成對CSS樣式表的編輯之後,將其導入到Wiki頁面,導入成功之後其後續頁面將可以套用嵌入樣式。
<templatestyles src="User:李皇諦/沃瑪.css" />
充分發揮你的設計潛力吧!
為防止基於JavaScript的跨站腳本攻擊,目前在萌娘百科的JavaScript腳本編寫工作只能由管理員和行政員執行,並將其保存在Widget控制項命名空間中。
要注意的是,只有Widget控制項命名空間同時支持解析頁面內CSS樣式和JS腳本,也就是說,它是唯一HTML全兼容的命名空間。
如果你想要在對應頁面添加Widget控制項,可添加以下代碼:
失敗-0xC0054078:“#Widget”已觸發防濫用過濾器規則,按照此自定義糾錯策略,編輯宣告失敗。
如果你只需要在向你自己呈現的頁面中添加JS腳本,只需在你的JS腳本中編輯即可。
查看向我呈現的JS腳本
要注意的是,你不能更改除去你個人用戶頁以外的所有JavaScript腳本,尤其是其他人的用戶頁,因為它包含其他用戶的個人設置。
儘管你可以通過更改頁面類型為JavaScript的形式提交修改,但站點已經禁止用戶導入自定義JS腳本到頁面中。
如果你需要將實用性強的JS腳本引用到萌娘百科中,需要在用戶頁寫好源碼,通過萌娘百科_talk:討論版/技術實現提交申請之後,由管理員審核並由程式設計師驗證環境負載,最終通過各項考核的JS腳本還需要與專用模板相關聯。比如{{KizunaAIFace}}就是用戶提交JS腳本。
目前可行的解決方案就是使用LUA模塊替換JS腳本實現類似功能。
需要自主學習LUA模塊並編寫本地化文檔。
{{#invoke:LuaMods}}
<div>
也可以用實現原理:
<!--白色按鈕--> <span class="mw-ui-button">這個按鈕是白色的</span> <!--紅色按鈕--> <span class="mw-ui-button mw-ui-destructive">這個按鈕是紅色的</span> <!--藍色按鈕--> <span class="mw-ui-button mw-ui-progressive">這個按鈕是藍色的</span> <!--鏈接跳轉按鈕--> [//zh.moegirl.org/Special:我的用戶頁 <span class="mw-ui-button">查看我的個人頁</span>]
值得注意的是,用電腦端HTML點擊滑鼠的頻率太快會選中文字,雙擊選中單詞,三擊選中整行。如果你不想要觀眾選中按鈕裡面的內容,你可以添加「user-select」的CSS屬性,或者使用「cursor」屬性定義滑鼠樣式,但請注意,濫用上述CSS屬性可能會遭到反破壞質疑。
<!--不能選擇文本的按鈕--> <span class="mw-ui-button" style="user-select:none;">不可選中文本</span> <!--修改鼠標樣式為“不可用”--> <span class="mw-ui-button" style="cursor:not-allowed;">不可用按鈕</span>
不可選中文本 不可用按鈕
link=external
,無連結需要指定link=none
。blue
,red
兩種可選顏色。代碼:{{按鈕|Mainpage|萌百主頁}}
代碼:{{按鈕|提問求助區|color=blue}}
代碼:{{按鈕|https://cn.bing.com/|必應搜索|link=external|color=blue}}
代碼:{{按鈕|僅供減壓|link=none|color=red}}
代碼:{{按鈕|前面可是地獄啊|color=red|font=black}}
實現原理:
<div class="mw-customtoggle-{{#var:觸發器ID}}" style="cursor:pointer" title="單擊此處展開或摺疊剩餘內容">觸發器</div> <div class="mw-collapsible show" id="mw-customcollapsible-{{#var:觸發器ID}}">默認顯示的內容</div> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-{{#var:觸發器ID}}">默認隱藏的內容</div>
其中{{#var:觸發器ID}}
替換為你希望放置的ID標籤,與觸發器標籤相同的內容段將發生變化。
此幫助頁面就是典型應用例,原始碼如下:
<div class="mw-customtoggle-自定義摺疊" style="cursor:pointer" title="單擊此處展開或摺疊剩餘內容">🖱觸發器</div> <div class="mw-collapsible show" id="mw-customcollapsible-自定義摺疊"><span style="color:#FFF; background-color:#D00">NC</span>默認顯示的內容</div> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-自定義摺疊"><span style="color:#FFF; background-color:green">NO</span>默認隱藏的內容</div>
我發現以自己的口吻做介紹很簡單,但要做到是誰都能一讀就懂就很困難,尤其是對於那些初來乍到的編輯者來說,他們本來就沒有MediaWiki的編程基礎,除非同時很想學HTML,基本上都是「翻書馬冬梅,合書麻冬妹」。
要花幾個小時的時間重新組織語言,但準備提交草稿的時候才發現嚴重離題,是阿斯伯格綜合徵侯群的痛。
所以我還是以自己的理解把CSS的網格式佈局說好先……
display
屬性指定該框架類型為Grid表格。display
),float
inline-block
display:table-cell
vertical-align
和column-*
等設置都不起作用。<div style="display:grid;"> <……> </div>
然後聲明每個單元在網格中的位置……
grid-template-areas
指定每個單元在網格上的位置grid-area
指定這個單元在網格上對應的標籤<div style="display:grid; border:0.4em dashed Black; grid-template-areas:'頭像 標題' '頭像 副標題' '內容 內容'"> <div style="grid-area:標題; border:0.2em solid Orange;"><標題></div> <div style="grid-area:副標題;border:0.2em solid Green;"><副標題></div> <div style="grid-area:內容;border:0.2em solid Blue;"><內容></div> <div style="grid-area:頭像;border:0.2em solid Red;"><img src= …… /></div> <div !--臨時加進去的div--><span>這玩意是臨時加進去<br>沒打標籤的</span></div> </div>
以下為錯誤用法:
<div style="display:grid; grid-template-areas:'頭像 標題' '頭像 副標題' '內容 頭像';"> 不能跨區域使用同一元素 <div style="display:grid; grid-template-areas:'頭像 標題' '頭像 副標題' '內容 內容' '內容 .';"> 十字展開不能缺角 <div style="display:grid; grid-template-areas:"頭像 標題" "頭像 副標題" "內容 ." "副標題 .";"> 你百特色。 從外掛樣式抄作業填了內聯樣式的空,結果雙引號導致 style 提前結束
然後效果是這樣的……
看到沒有,這還不算一個網格,因為還有些關鍵聲明還沒有設置好導致網格上的單元被平分擺放,如果有些內容過多或者過少,就會給人一種頭重腳輕的感覺。
所以咱們需要為網格設置每個單元的行大小和列大小。
grid-template-rows
指定每個單元在框架上各自的行大小。grid-template-columns
指定每個單元在框架上各自的列大小。fr
單位來設置參照大小,取最小fr的量為最小公倍數,最大的fr量為最大公約數,與其他單元格一起平分大小,支持小數點。minmax(<最小值> <最大值>)
計算式來對有效值進行約束,支持不同單位。比如grid-template-rows:minmax(2em 90%) auto calc(20% - 14px);
。
grid-area
指定這個單元在網格上對應的標籤可統一在grid-template
這函數上一起設置每個單元在框架上的位置和大小,效果是這樣的:
不能在這個函數用minmax
算法
<div style="display:grid; grid-template:'頭像 標題' 1.4em '頭像 副標題' 1em '內容 頭像' / 2em 1fr;"> ↓ <div style="display:grid; grid-template-rows: 1.4em 1em auto; grid-template-columns:2em 1fr; grid-template-areas: '頭像 標題' '頭像 副標題' '內容 頭像';">
然後咱們設置好行大小和列大小,提交上去……
<div style="display:grid; border:0.4em dashed Black; text-indent:0px; grid-template-rows: 1.4em 1em auto; grid-template-columns:12em 1fr; grid-template-areas:'頭像 標題' '頭像 副標題' '內容 內容';"> <div style="grid-area:標題; border:0.2em solid Orange;"><標題></div> <div style="grid-area:副標題;border:0.2em dashed Green; border-bottom-style:dotted;"><副標題></div> <div style="grid-area:內容;border:0.2em dashed Blue; border-top-style:dotted;"><內容></div> <div style="grid-area:頭像;border:0.2em solid Red;"><img src= …… /></div> <div !--臨時加進去的div--><span>這玩意是臨時加進去的,沒打標籤就算了還給我塞了很多無意義的文字</span></div> </div>
雖然確實做到了手動調整行大小和列大小,避免了頭重腳輕的現象,但是臨時加進去的文字居然成了疙瘩,就很麻煩,所以稍微動下手把新添加的單元指定好標籤然後放在內容的右側,標題和副標題都要延伸到底,偷偷把副標題的高度(行大小)改一遍……
<div style="display:grid; border:0.4em dashed Black; text-indent:0px; grid-template:'頭像 標題 標題' 2em '頭像 副標題 副標題' max-content '內容 內容 附加' auto / 12em 1fr;"> <div style="grid-area:標題; border:0.2em solid Orange;"><標題></div> <div style="grid-area:副標題;border:0.2em solid Green;"><副標題></div> <div style="grid-area:內容;border:0.2em solid Blue;"><內容></div> <div style="grid-area:頭像;border:0.2em solid Red;"><img src= …… /></div> <div style="grid-area:附加;"><span>這玩意是臨時加進去的,起碼比硬塞還好很多了,雖然文字還是很長。</span></div> </div>
怎麼樣,指定單元位置還有行列大小是不是很麻煩?你們可能會說,都無紙化時代了還要用紙和筆打草稿,不很扯蛋嘛!
不過難熬的日子也總該結束了,因為你可以直接拿著這些小抄交作業,滿分20分能拿14分,好過被老師批零分啊!
剩下的6分是你的卷面分
<div style="padding:0px 1em 1em 1em; border:1px solid #f14344; color:White; border-radius:1em; background-color:#750b1cdd; display:grid; grid-template:'窗口標題 窗口標題 窗口標題' 2em '圖標 pad 標題' 1.8em '圖標 pad 內容' auto '圖標 pad 簡要' 1.8em / max-content 0.5em auto;"> <div style="grid-area:窗口標題; text-align:center; font-weight:bold; font-size:0.9em;">條目預覽</div> <div style="grid-area:圖標;"><img src="http://img.moegirl.tw/common/4/44/Warma.jpg" style="width:10em; height:10em;"/></div> <!--grid-area:pad; 無內容--> <div style="grid-area:標題;font-weight:bold; color:Orange; font-size:1.6em;">Warma</div> <div style="grid-area:內容;line-height:1em; color:White;"><p>Warma是活躍於[[Bilibili|嗶哩嗶哩彈幕視頻網]]的個人特色頻道Up主。</p><p>Warma因其豐富的想象力、可愛的聲線和繪畫風格、多樣的視頻形式和新奇不斷的視頻內容深得觀眾喜愛。</p><p></div> <div style="grid-area:簡要; display:flex; flex-direction:row-reverse;"><div style="width:auto; font-size:1.2em; font-weight:bold; opacity:0.8;">本命介紹</div></div></div> </div>
過時內容 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
直接定義目錄所在位置
目錄右上角添加「編輯新章節」
請刷新頁面後查看右上角 說明文檔嵌套頁面 內聯文檔 程序框圖
技術評分系統{{#cscore:
若用戶名存在,輸出格式為純數字,否則輸出「用戶不存在」。 應用實例: 李皇諦修改過{{#cscore:李皇諦|pages}}個頁面 李皇諦已提交{{#cscore:李皇諦|changes}}次修改 貢獻積分為{{#cscore:李皇諦|score}} 實現效果: 梗辭典通用格式
示例
「我已經完全愛上愛醬了!」出自《【warma】我喜歡愛醬!!(絆愛面試)》
|