139990
【凹三文字游戏教程】bot好，投稿冷圈人快乐时刻+小教程。缟纻是超级冷圈人，全国只有两个人吃我家产。前段时间拉磨写文的时候在凹三上做了个可互动的交互界面，没想到在🍠上发了个教程以后帖子有了四千多热度……家产这辈子没见过如此泼天的流量，甚至连那篇文有了三个赞，三个！比平时多了整整两个呢！！

于是决定把教程也搬运来wb一下，一方面是希望能抛砖引玉给大家提供搞同人新思路，另一方面不管咋说先骗大家看一眼俺家产（打开燕国地图）……！！！

先上一下成品的效果展示，请看VCR！是简单的2X2结构，第一组问题决定世界线，第二组问题决定结局，都选择完后跳转至对应的故事。考虑到阅读体验的完整性和开盲盒的刺激性，所以把两组问题都设置在了文章前的独立空白页面里。在跳转到文章后依旧可以随时翻到页面顶端重新选择问题的答案，手机上也可以轻松地使用。

以下是一个简单的教程。为了确保通用性和可读性，所以俺给出的只是最基础的骨架思路，以讲解如何在凹3上进行文字游戏选项的编辑。期待大家在这个基础上发挥创意添砖加瓦。先上可以直接复制进凹3的代码，讲解部分贴在代码后面了！

CSS（步骤1）：

/* 默认隐藏全部页面 */
#workskin .page {
display: none;
｝

/* 显示选项页面 */
#workskin .page-one {
display: block;
｝

/* 点击选项后隐藏全部页面 */
#workskin p:has(a[name]:target) ~ div.page {
display: none;
｝

/* 显示选项对应页面 */
#workskin p:has(a[name="p2"]:target) ~ div.page.page-two {
display: block;
｝

#workskin p:has(a[name="p3"]:target) ~ div.page.page-three {
display: block;
｝

达成这种文游选项跳转效果一共需要两部分，首先是控制页面的显示与隐藏的CSS代码。调整单篇作品的CSS需要新建workskin，把上文中的css代码全部复制黏贴进去然后保存（如p2展示）。这里展示的只是界面显示的逻辑框架，如果需要进行一些界面的UI美化设计也需要在这里设定，具体可以搜站内CSS的教程手搓或者问问有写码功能的AI。编辑好CSS后就可以进入第二部分啦。

HTML（步骤2）：

＜！-- 第一页-选项 -->
＜div class="page page-one">

＜p>问题文本＜/p>

＜p>
＜a href="#p2" rel="nofollow">选项A＜/a>
＜br />
＜a href="#p3" rel="nofollow">选项B＜/a>
＜/p>

＜/div>

＜！-- 第二页-选择A -->
＜p>＜a name="p2" rel="nofollow">＜/a>＜/p>

＜div class="page page-two">
＜p>选项A对应的故事内容＜/p>
＜/div>

＜！-- 第三页-选择B -->
＜p>＜a name="p3" rel="nofollow">＜/a>＜/p>

＜div class="page page-three">
＜p>选项B对应的故事内容＜/p>
＜/div>

如果想让效果在文本的实际内容中生效，需要把上面的html框架先复制进正文的文本编辑框（如p3），再用你的正文内容和选项内容替换目前的占位符。记得要选择html而非rich text才能生效。正式发布前可以选择preview预览检查。

感谢米娜桑的收看（？）如果做出成品了希望可以和我分享让我也吃一口！祝各位同人女创作开心！