2023年政策修订增补工作正在进行中，欢迎参与！
李皇谛-萌娘百科高级编程方案
< User:李皇谛
在此處根據你需要解決的問題查找關鍵詞以獲得問題解決方案。
編寫第一要義
倡導實事求是，拒絕大勢所趨。
倡導多方打聽，拒絕以訛傳訛。
倡導客觀評價，拒絕主觀偏見。
倡導就事論事，拒絕強行站隊。
常用輔助維護頁面
- 濫用過濾器：幫助:濫用過濾器#通知或特殊:濫用過濾器查閱所有濫用過濾器詳情；特殊:濫用日誌查閱觸發日誌。
- 三大日誌：特殊:log/move（移動日誌）(註)、特殊:log/delete（刪除日誌）、特殊:log/block（帳戶封禁日誌）
- 四大短鏈：特殊:固定連結/
123456（根據修訂版本號查網頁）、特殊:差異/123456/123457（查詢前後版本差異）、特殊:鏈入頁面/萌百娘（查看頁面使用概況）、特殊:前綴索引/萌百娘（查看子頁面列表）
簡略的有效建議
- 如果想留下電子郵件聯繫方式，請使用[[Special:電郵聯繫/你的用戶名]]而不是
mailto:連結，後者會暴露你的電郵真實地址，避免捲入垃圾郵件的漩渦。 - 外部圖片也可以使用CSS樣式，對於無法限制外部圖片高度的方案來說特別好用。
<img src="" alt="" style=""/> - 編輯小節的時候，你可以向上添加新章節，也可以向下新章節，但為了避免錯誤識別，建議在父章節裡面展開編輯。
- 如果你要連續打開多個萌娘百科條目（比如新開瀏覽器重新加載各個頁面），但苦於不是延伸確認而困於WAF時，請間隔至少2秒翻開新的選項卡。
- 如果你在保護日誌/刪除日誌中找到了你曾經編輯過的頁面，請先留意自己的討論頁、操作者的貢獻日誌和鏈入頁面（保護）/公共討論頁（刪除），從操作記錄中找到可能的原因，但請注意，不要擅自推斷自己的責任（包括「默認自己無責」或「默認自己全責」），若有疑問請通過公共討論頁或用戶討論頁發起問詢。
- 如我的討論頁置頂信息有說關於屏蔽詞/立即刪除內容問題，請勿作出進一步過問，更不要以此試探「如何繞開」，對於其中的疑問，需要聯繫維護人員（用戶頁或公共討論頁）對相關內容進行討論。
- 對於需要維護人員解答的疑問，可以使用{{Help}}尋求幫助（比如對方針內容不理解或有部分內容特別需要維護人員處理）。但請注意，請勿作出濫用此模板導致維護人員工作遭到阻礙的行為。
- 引用控制模板關鍵字區別
- <includeonly>：標籤中內容只在引用時顯示，本地不顯示。
- <noinclude>：標籤中內容只在本地顯示，引用時不顯示。
- <onlyincude>：標籤外內容只在本地顯示，引用時不顯示。標籤中內容自由顯示。
個人認為特別優秀的頁面
- {{Gochiusatop/Special}} ← Sirogohan[更多]大佬寫的點兔模板，優美到可謂前無古人後無來者。
- {{User:淮南皓月/TsukiBox}} ← 一站式工具箱
- [[夏川玥玥]] ← 伍昱物起[更多]做的美化，不錯。
- {{User:あめろ/加油}} ←
- {{蔚藍檔案}} ← 連selflink（指向自身的連結）都有樣式了？
建議使用的Firefox瀏覽器擴展
導入內容到頁面
基本編輯手段
嵌入其他頁面內容
你可以任意導入頁面中的內容
{{导入页面地址}}
導入頁面之前要注意以下事項：
- 若源頁面與目標頁面相同，嵌入僅允許執行一次。禁止套娃！
- 嵌入頁面的默認檢索命名空間為Template（模板頁面），如果你要嵌入來自主空間的源頁面，請添加
:前綴，例如User:李皇谛/sandbox/Import中的{{:Warma}}。 - 如果你嵌入的內容屬於重新導向頁面，只會呈現重新導向完成後的目標頁面。
- 有些頁面會出現顯示不完整的情況，因為它已編寫以下代碼用於限制嵌入內容和本體內容。
<includeonly>仅限嵌入内容</includeonly> <noinclude>仅限页面本体查看内容</noinclude>
CSS層疊樣式表
你能且只能在同一個網頁使用內聯樣式，這樣你就不需要額外導入其他的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" />
充分發揮你的設計潛力吧！
JS腳本
為防止基於JavaScript的跨站腳本攻擊，目前在萌娘百科的JavaScript腳本編寫工作只能由管理員和行政員執行，並將其保存在Widget控制項命名空間中。
要注意的是，只有Widget控制項命名空間同時支持解析頁面內CSS樣式和JS腳本，也就是說，它是唯一HTML全兼容的命名空間。
- 有些控制項還會受行政員和開發人員高度重視，不遵循規定修改或複製控制項的管理員將被撤回修改並降職。
如果你想要在對應頁面添加Widget控制項，可添加以下代碼：
失败-0xC0054078：“#Widget”已触发防滥用过滤器规则，按照此自定义纠错策略，编辑宣告失败。
如果你只需要在向你自己呈現的頁面中添加JS腳本，只需在你的JS腳本中編輯即可。
要注意的是，你不能更改除去你個人用戶頁以外的所有JavaScript腳本，尤其是其他人的用戶頁，因為它包含其他用戶的個人設置。
儘管你可以通過更改頁面類型為JavaScript的形式提交修改，但站點已經禁止用戶導入自定義JS腳本到頁面中。
如果你需要將實用性強的JS腳本引用到萌娘百科中，需要在用戶頁寫好源碼，通過萌娘百科_talk:討論版/技術實現提交申請之後，由管理員審核並由程式設計師驗證環境負載，最終通過各項考核的JS腳本還需要與專用模板相關聯。比如{{KizunaAIFace}}就是用戶提交JS腳本。
目前可行的解決方案就是使用LUA模塊替換JS腳本實現類似功能。
Lua模塊
需要自主學習LUA模塊並編寫本地化文檔。
{{#invoke:LuaMods}}
維基按鈕
模板：Clickable Button
實現原理：
<!--白色按钮--> <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>
當然，你也可以點擊此處參閱{{Clickable Button}}的模板文檔。
自定義摺疊
模板：Toggle
自定義摺疊按鈕
🖱觸發器
NC默認顯示的內容
實現原理：
<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標籤，與觸發器標籤相同的內容段將發生變化。
- 一個ID可對應多個觸發器和多個內容，達到聯控的效果。
- 配合<div class="mw-ui-button">使用效果更佳。
此幫助頁面就是典型應用例，原始碼如下：
<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表格。
指示為Inline-Grid屬性的網格是內聯樣式，不會另起一行。
設為網格布局以後，除非重新定義單元的框架類型（display），floatinline-blockdisplay:table-cellvertical-align和column-*等設置都不起作用。
- 向
<div style="display:grid;"> <……> </div>
然後聲明每個單元在網格中的位置……
- 在框架上用
grid-template-areas指定每個單元在網格上的位置
前後都用單引號以包住一行，用空格區分兩個單元。
如果這個單元要占用多個位置也就是延伸大小，可以輸入相同的關鍵詞。
留空以輸入不被打標籤的其他元素可以輸入一個半角句號代替。 - 在單元上用
grid-area指定這個單元在網格上對應的標籤
支持其他格式的文字而非HTML控制字
- 在框架上用
<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 提前结束
然後效果是這樣的……
<标题>
<副标题>
<内容>
<img src= …… />
這玩意是臨時加進去
沒打標籤的
沒打標籤的
看到沒有，這還不算一個網格，因為還有些關鍵聲明還沒有設置好導致網格上的單元被平分擺放，如果有些內容過多或者過少，就會給人一種頭重腳輕的感覺。
所以咱們需要為網格設置每個單元的行大小和列大小。
- 在框架上用
grid-template-rows指定每個單元在框架上各自的行大小。 - 在框架上用
grid-template-columns指定每個單元在框架上各自的列大小。 延伸區域的單元最終的行大小和列大小是隨著區域定位而疊加的。 - 在單元上用
grid-area指定這個單元在網格上對應的標籤
支持其他格式的文字而非HTML控制字
用空格隔開不同行大小和列大小。
可以使用fr單位來設置參照大小，取最小fr的量為最小公倍數，最大的fr量為最大公約數，與其他單元格一起平分大小，支持小數點。
可以使用minmax(<最小值> <最大值>)計算式來對有效值進行約束，支持不同單位。比如grid-template-rows:minmax(2em 90%) auto calc(20% - 14px);。- 在框架上用
可統一在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>
<标题>
<副标题>
<内容>
<img src= …… />
這玩意是臨時加進去的，沒打標籤就算了還給我塞了很多無意義的文字
雖然確實做到了手動調整行大小和列大小，避免了頭重腳輕的現象，但是臨時加進去的文字居然成了疙瘩，就很麻煩，所以稍微動下手把新添加的單元指定好標籤然後放在內容的右側，標題和副標題都要延伸到底，偷偷把副標題的高度（行大小）改一遍……
<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>
<标题>
<副标题>
<内容>
<img src= …… />
這玩意是臨時加進去的，起碼比硬塞還好很多了，雖然文字還是很長。
怎麼樣，指定單元位置還有行列大小是不是很麻煩？你們可能會說，都無紙化時代了還要用紙和筆打草稿，不很扯蛋嘛！
不過難熬的日子也總該結束了，因為你可以直接拿著這些小抄交作業，滿分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="https://img.moegirl.org.cn/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>
輸入並快捷搜索
過時內容
| 過時內容 |
|---|