倡导实事求是,拒绝大势所趋。
倡导多方打听,拒绝以讹传讹。
倡导客观评价,拒绝主观偏见。
倡导就事论事,拒绝强行站队。
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="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>
过时内容 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
直接定义目录所在位置
目录右上角添加“编辑新章节”
请刷新页面后查看右上角 说明文档嵌套页面 内联文档 程序框图
技术评分系统{{#cscore:
若用户名存在,输出格式为纯数字,否则输出“用户不存在”。 应用实例: 李皇谛修改过{{#cscore:李皇谛|pages}}个页面 李皇谛已提交{{#cscore:李皇谛|changes}}次修改 贡献积分为{{#cscore:李皇谛|score}} 实现效果: 梗辞典通用格式
示例
“我已经完全爱上爱酱了!”出自《【warma】我喜欢爱酱!!(绊爱面试)》
|