用户:ChenM0M/fstpagetest:修订间差异
来自RIA | Wiki
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
__NOTOC__ | __NOTOC__ | ||
<div class=" | <div class="tst"> | ||
<templatestyles src=" | <templatestyles src="testpage_styles" /> | ||
<!-- | <!-- HERO --> | ||
<div class=" | <div class="tst-hero" id="top"> | ||
<div class=" | <div class="tst-hero-left"> | ||
<div class=" | <div class="tst-badge">CSS-only Showcase · MediaWiki TemplateStyles</div> | ||
<h1 class=" | <h1 class="tst-title">Test Portal</h1> | ||
<div class=" | <div class="tst-lead"> | ||
这是一个“功能性主页 / 门户页”演示:只用 Wikitext + TemplateStyles,尝试各种有趣但可控的样式与伪交互。 | |||
</div> | </div> | ||
<div class=" | <div class="tst-kpi"> | ||
< | <div class="tst-kpi-item"> | ||
< | <div class="tst-kpi-num">8</div> | ||
<a class=" | <div class="tst-kpi-text">种 CSS-only 玩法</div> | ||
<a class=" | </div> | ||
<div class="tst-kpi-item"> | |||
<div class="tst-kpi-num">0</div> | |||
<div class="tst-kpi-text">行 JS</div> | |||
</div> | |||
<div class="tst-kpi-item"> | |||
<div class="tst-kpi-num">1</div> | |||
<div class="tst-kpi-text">层容器(克制)</div> | |||
</div> | |||
</div> | |||
<div class="tst-nav"> | |||
<a class="tst-navlink" href="#notice">翻牌公告</a> | |||
<a class="tst-navlink" href="#tabs">Tabs 切换</a> | |||
<a class="tst-navlink" href="#faq">折叠/FAQ</a> | |||
<a class="tst-navlink" href="#timeline">时间线</a> | |||
</div> | </div> | ||
<div class=" | <div class="tst-muted"> | ||
提示:移动端没有 hover,“翻牌”会退化为正面展示;核心信息不要只放在背面。 | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <div class="tst-hero-right nomobile"> | ||
[[File:Ria空岛片结尾图.png|class= | [[File:Ria空岛片结尾图.png|class=tst-hero-image|frameless|alt=|460px]] | ||
<div class="tst-caption">示例图:可替换为 Eden/Laputa/车站/机械建筑截图</div> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <!-- SECTION: Flip notice wall --> | ||
<div class="tst-section" id="notice"> | |||
<div class="tst-section-h"> | |||
<h2>翻牌公告墙</h2> | |||
<div class="tst-section-sub">hover 翻转 · 卡片轻光泽 · 适合公告/彩蛋</div> | |||
</div> | |||
<div class="tst-flipwall"> | |||
<div class=" | |||
< | <div class="tst-flip"> | ||
<div class="tst-flip-inner"> | |||
<div class="tst-flip-face tst-front"> | |||
<div class="tst-tag">公告</div> | |||
< | <div class="tst-front-title">Eden 主城更新</div> | ||
<div class="tst-front-text">车站新增换乘节点与指示牌</div> | |||
<div class="tst-front-hint">悬停查看详情</div> | |||
</div> | |||
<div class="tst-flip-face tst-back"> | |||
<div class="tst-back-title">Eden 主城更新</div> | |||
<div class="tst-back-text"> | |||
主城东侧新增铁路换乘节点;邮局与仓储完成迁移。<br /> | |||
建议更新你的路标与站台指引。 | |||
</div> | |||
<div class="tst-back-link">[[RIA:Fst|👉 查看详情]]</div> | |||
</div> | |||
</div> | </div> | ||
</div> | |||
<div class=" | <div class="tst-flip"> | ||
<div class=" | <div class="tst-flip-inner"> | ||
<div class=" | <div class="tst-flip-face tst-front"> | ||
<div class="tst-tag tst-tag-warn">活动</div> | |||
<div class="tst-front-title">Laputa 工业线开通</div> | |||
<div class="tst-front-text">新线路已接入货运站台</div> | |||
<div class="tst-front-hint">悬停查看详情</div> | |||
</div> | |||
<div class="tst-flip-face tst-back"> | |||
<div class="tst-back-title">Laputa 工业线开通</div> | |||
<div class="tst-back-text"> | |||
新增工业区—主城货运联络线;请注意站台标识与装卸规范。<br /> | |||
如需申请站点接入:[[常见申请目录|常见申请]]。 | |||
</div> | </div> | ||
<div class="tst-back-link">[[常见申请目录|👉 去申请]]</div> | |||
</div> | </div> | ||
</div> | |||
</div> | |||
<div class=" | <div class="tst-flip"> | ||
<div class=" | <div class="tst-flip-inner"> | ||
<div class=" | <div class="tst-flip-face tst-front"> | ||
<div class="tst-tag tst-tag-cool">提示</div> | |||
<div class="tst-front-title">邮局 NPC 上新</div> | |||
<div class="tst-front-text">明信片 / 包裹 / 货运说明</div> | |||
<div class="tst-front-hint">悬停查看详情</div> | |||
</div> | |||
<div class="tst-flip-face tst-back"> | |||
<div class="tst-back-title">邮局 NPC 上新</div> | |||
<div class="tst-back-text"> | |||
明信片、包裹、货运规则已更新。<br /> | |||
新人建议先读:[[手册%26指南大全|手册与使用说明]]。 | |||
</div> | </div> | ||
<div class="tst-back-link">[[手册%26指南大全|👉 打开手册]]</div> | |||
</div> | </div> | ||
</div> | |||
</div> | |||
<div class=" | <div class="tst-flip"> | ||
<div class=" | <div class="tst-flip-inner"> | ||
<div class=" | <div class="tst-flip-face tst-front"> | ||
<div class="tst-tag">彩蛋</div> | |||
<div class="tst-front-title">这张卡片是…</div> | |||
<div class="tst-front-text">“纯 CSS 伪交互”的上限演示</div> | |||
<div class="tst-front-hint">悬停翻面</div> | |||
</div> | |||
<div class="tst-flip-face tst-back"> | |||
<div class="tst-back-title">没有 JS,也能挺好玩</div> | |||
<div class="tst-back-text"> | |||
但不要把关键信息只放在 hover/背面,移动端不友好。<br /> | |||
最佳用法:作为点缀、强调、引导。 | |||
</div> | </div> | ||
<div class="tst-back-link">[[帮助:Wikitext|👉 排版帮助]]</div> | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | |||
</div> | |||
<!-- SECTION: CSS Tabs --> | |||
<div class="tst-section" id="tabs"> | |||
<div class="tst-section-h"> | |||
<h2>CSS-only Tabs</h2> | |||
<div class="tst-section-sub">radio 互斥切换 · 适合 Eden/Laputa/规则/指南</div> | |||
</div> | |||
<div class="tst-tabs"> | |||
<!-- radios --> | |||
<input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-1" checked="checked" /> | |||
<input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-2" /> | |||
<input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-3" /> | |||
</ | <!-- labels --> | ||
<div class="tst-tabbar"> | |||
<label class="tst-tab" for="tsttab-1">Eden</label> | |||
<label class="tst-tab" for="tsttab-2">Laputa</label> | |||
<label class="tst-tab" for="tsttab-3">FAQ</label> | |||
</div> | </div> | ||
<!-- panels --> | |||
<!-- | <div class="tst-panels"> | ||
<div class=" | <div class="tst-panel tst-panel-1"> | ||
<div class="tst-panel-title">Eden · 主要世界</div> | |||
<div class="tst-panel-text"> | |||
< | 内容与活动更丰富,适合定居与叙事建设。<br /> | ||
机械最高转速:<b>128</b> | |||
</div> | |||
<div class="tst-pills"> | |||
<span class="tst-pill">主城</span> | |||
<span class="tst-pill">铁路枢纽</span> | |||
<span class="tst-pill">邮政服务</span> | |||
<span class="tst-pill">聚落共鸣</span> | |||
</div> | |||
<div class="tst-panel-go">[[RIA:Fst|👉 了解 Eden]]</div> | |||
</div> | </div> | ||
<div class="tst-panel tst-panel-2"> | |||
<div class="tst-panel-title">Laputa · 工业世界</div> | |||
<div class="tst-panel-text"> | |||
<span class=" | 更偏工业与生产,继承旧存档更自由。<br /> | ||
<span class=" | 机械最高转速:<b>256</b> | ||
<span class=" | </div> | ||
<span class=" | <div class="tst-pills"> | ||
<span class="tst-pill">工业区</span> | |||
<span class="tst-pill">货运线</span> | |||
<span class="tst-pill">仓储</span> | |||
<span class="tst-pill">装卸规范</span> | |||
</div> | </div> | ||
<div class="tst-panel-go">[[RIA:Fst|👉 了解 Laputa]]</div> | |||
</div> | |||
<div class=" | <div class="tst-panel tst-panel-3"> | ||
<div class="tst-panel-title">FAQ · 常见问题</div> | |||
<div class="tst-panel-text"> | |||
这里用 Tabs 放“短答”,长内容请沉淀到条目页。<br /> | |||
例如:背包互通?设施怎么用?共鸣怎么申请? | |||
</div> | </div> | ||
<div class="tst-panel-go">[[手册%26指南大全|👉 去手册页]]</div> | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | |||
<!-- SECTION: Accordion (checkbox) --> | |||
<div class="tst-section" id="faq"> | |||
<div class="tst-section-h"> | |||
<h2>折叠/手风琴(CSS-only)</h2> | |||
<div class="tst-section-sub">checkbox 展开收起 · 适合规则说明/新手必读</div> | |||
</div> | |||
<div class="tst-acc"> | |||
<div class=" | |||
< | <div class="tst-acc-item"> | ||
<input class="tst-acc-check" type="checkbox" id="acc-1" /> | |||
< | <label class="tst-acc-head" for="acc-1"> | ||
< | <span class="tst-acc-q">背包互通吗?</span> | ||
<span class="tst-acc-ico">+</span> | |||
</label> | |||
<div class="tst-acc-body"> | |||
<div class="tst-callout"> | |||
<b>短答:</b> Eden 与 Laputa 背包互通(细节以条目说明为准)。<br /> | |||
<span class="tst-tip" data-tip="移动端建议把“关键结论”放在展开前可见区域">为什么要这样写?</span> | |||
</div> | |||
建议把细节拆到条目页,并在此处给出“最短路径链接”。例如:[[RIA:Fst/指南|新手指南]]。 | |||
</div> | </div> | ||
</div> | |||
<div class=" | <div class="tst-acc-item"> | ||
<input class="tst-acc-check" type="checkbox" id="acc-2" /> | |||
<label class="tst-acc-head" for="acc-2"> | |||
<span class="tst-acc-q">公共设施怎么用?</span> | |||
<span class="tst-acc-ico">+</span> | |||
</label> | |||
<div class="tst-acc-body"> | |||
<div class="tst-callout"> | |||
<b>建议:</b> 门户页只放入口与最短规范,详情放在设施条目。<br /> | |||
入口:[[功能和设施|功能和设施]] · [[手册%26指南大全|手册大全]] | |||
</div> | </div> | ||
设施使用规范最好用“要点清单 + 违规示例”的结构写,阅读效率最高。 | |||
</div> | |||
</div> | |||
<div class="tst-acc-item"> | |||
<input class="tst-acc-check" type="checkbox" id="acc-3" /> | |||
<label class="tst-acc-head" for="acc-3"> | |||
<span class="tst-acc-q">如何申请共鸣/地标?</span> | |||
<span class="tst-acc-ico">+</span> | |||
</label> | |||
<div class="tst-acc-body"> | |||
<div class="tst-callout"> | |||
<b>入口:</b> [[共鸣系统|共鸣系统]](含地标列表与申请说明)。<br /> | |||
<b>写法建议:</b> 主页只讲“你该去哪儿”,不要把流程全文搬过来。 | |||
</div> | </div> | ||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- SECTION: Timeline --> | |||
<div class="tst-section" id="timeline"> | |||
<div class="tst-section-h"> | |||
<h2>时间线 / 结构化叙事</h2> | |||
<div class="tst-section-sub">适合写“服务器发展脉络/版本纪事”</div> | |||
</div> | |||
<div class="tst-tl"> | |||
<div class="tst-tl-item"> | |||
<div class="tst-tl-dot"></div> | |||
<div class="tst-tl-body"> | |||
<div class="tst-tl-time">2023/07/26</div> | |||
<div class="tst-tl-title">Fst 公测开启</div> | |||
<div class="tst-tl-text">围绕 Create 的模组服企划进入公开测试阶段。</div> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class="tst-tl-item"> | |||
<div class="tst-tl-dot"></div> | |||
<div class=" | <div class="tst-tl-body"> | ||
<div class=" | <div class="tst-tl-time">(示例)2024</div> | ||
<div class="tst-tl-title">交通与邮政体系成型</div> | |||
<div class="tst-tl-text">铁路枢纽、邮局 NPC、包裹与货运规则逐步完善。</div> | |||
<div class=" | |||
</div> | </div> | ||
</div> | </div> | ||
<div class="tst-tl-item"> | |||
<div class="tst-tl-dot"></div> | |||
<div class=" | <div class="tst-tl-body"> | ||
<div class=" | <div class="tst-tl-time">(示例)2025</div> | ||
<div class="tst-tl-title">世界分工更明确</div> | |||
<div class="tst-tl-text">Eden 偏叙事定居;Laputa 偏工业生产与物流。</div> | |||
<div class=" | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="tst-footer"> | |||
<div class="tst-footer-title">常用入口</div> | |||
<div class="tst-footer-links"> | |||
<div class=" | [[RIA:Fst|📌 Fst 总览]] · [[RIA:Fst/指南|🌱 新手指南]] · [[共鸣系统|⛩️ 共鸣系统]] · [[常见申请目录|📦 常见申请]] · [[特殊:最近更改|📊 最近更改]] | ||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
2026年2月13日 (五) 22:23的版本
页面模板:Testpage styles没有内容。
CSS-only Showcase · MediaWiki TemplateStyles
Test Portal
这是一个“功能性主页 / 门户页”演示:只用 Wikitext + TemplateStyles,尝试各种有趣但可控的样式与伪交互。
8
种 CSS-only 玩法
0
行 JS
1
层容器(克制)
<a class="tst-navlink" href="#notice">翻牌公告</a>
<a class="tst-navlink" href="#tabs">Tabs 切换</a>
<a class="tst-navlink" href="#faq">折叠/FAQ</a>
<a class="tst-navlink" href="#timeline">时间线</a>
提示:移动端没有 hover,“翻牌”会退化为正面展示;核心信息不要只放在背面。
翻牌公告墙
hover 翻转 · 卡片轻光泽 · 适合公告/彩蛋
公告
Eden 主城更新
车站新增换乘节点与指示牌
悬停查看详情
彩蛋
这张卡片是…
“纯 CSS 伪交互”的上限演示
悬停翻面
CSS-only Tabs
radio 互斥切换 · 适合 Eden/Laputa/规则/指南
<input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-1" checked="checked" /> <input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-2" /> <input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-3" />
折叠/手风琴(CSS-only)
checkbox 展开收起 · 适合规则说明/新手必读
<input class="tst-acc-check" type="checkbox" id="acc-1" />
<label class="tst-acc-head" for="acc-1">
背包互通吗?
+
</label>
短答: Eden 与 Laputa 背包互通(细节以条目说明为准)。
为什么要这样写?
建议把细节拆到条目页,并在此处给出“最短路径链接”。例如:新手指南。
<input class="tst-acc-check" type="checkbox" id="acc-2" />
<label class="tst-acc-head" for="acc-2">
公共设施怎么用?
+
</label>
<input class="tst-acc-check" type="checkbox" id="acc-3" />
<label class="tst-acc-head" for="acc-3">
如何申请共鸣/地标?
+
</label>
入口: 共鸣系统(含地标列表与申请说明)。
写法建议: 主页只讲“你该去哪儿”,不要把流程全文搬过来。
时间线 / 结构化叙事
适合写“服务器发展脉络/版本纪事”
2023/07/26
Fst 公测开启
围绕 Create 的模组服企划进入公开测试阶段。
(示例)2024
交通与邮政体系成型
铁路枢纽、邮局 NPC、包裹与货运规则逐步完善。
(示例)2025
世界分工更明确
Eden 偏叙事定居;Laputa 偏工业生产与物流。